Langsung ke konten utama

Construct 2 Indonesia Manual: Bab Antar Muka - 12. Image And Animation Editor

Construct 2 memiliki Built-in editor gambar, dan Object Sprite dilengkapi dengan jendela editor tambahan yang memungkinkan Anda membuat Animation. Catatan: Image Editor saat ini sedang dalam pengembangan dan belum lengkap.


Image editor

Image editor digunakan untuk mengedit gambar pada Object: Tiled Background, juga Animation Frame untuk Object: Sprite.


Tombol-tombol di sepanjang bagian atas dapat digunakan untuk mengedit gambar:

  • Clear image: Mengatur ulang (Reset) gambar menjadi transparan.

  • Open: Impor file gambar dari disk dalam format PNG, JPEG, BMP, TIF, GIF, atau WMF. PNG direkomendasikan karena Lossless, biasanya memiliki kompresi yang baik, dan mendukung transparansi Alpha.

  • Save: Ekspor gambar ke file pada disk dalam format PNG, JPEG, BMP, TIF atau GIF. PNG direkomendasikan karena Lossless, biasanya memiliki kompresi yang baik, dan mendukung transparansi Alpha.

  • Set export format: Membuka Image Format Dialog, memungkinkan Anda mengatur format pada ekspor ke PNG-32, PNG-8 atau JPEG.

  • Mirror: Membalikkan gambar secara horisontal. Tahan Shift keybaoard untuk membalikkan seluruh Animation.

  • Flip: Membalikkan gambar secara vertikal. Tahan Shift keyboard untuk membalikkan seluruh Animation.

  • Rotate 90 degrees clockwise/anticlockwise:  memutar gambar. Tahan Shift keyboard untuk memutar seluruh Animation.

  • Crop: Menghilangkan sisa transparansi di tepi gambar, menyusutkan ukuran dimensi Canvas sekecil mungkin seukuran yang pas dengan gambar (Fit Image). Ini disarankan untuk menghemat memori dan membuat tabrakan (Collision) lebih akurat dan efisien. Tahan Shift keyboard untuk memotong keseluruhan Animation.

  • Resize: untuk menyesuaikan ukuran Canvas gambar, tersedia opsi untuk memusatkan sejajar (Center Align) gambar, atur kiri atas (Top-left Align) atau peregangan agar sesuai (Stretch to Fit).

  • Tombol-tombol zoom: untuk melakukan Zoom gambar. Sebagai alternatif, tahan Ctrl keyboard dan Scroll mouse.

  • Toggle Background brightness: Beralih (Toggle) latar belakang (Background) dari terang ke gelap. Warna gelap mungkin lebih berguna untuk mengedit gambar terang seperti: titik terang, awan, dll.


Tampilan Image Editor juga dapat di-Scroll dengan menahan tombol tengah mouse dan seret (Drag).


Tombol yang berjejer ke bawah di sebelah kiri editor terdapat fungsi-fungsi berikut:

  • Rectangle select: digunakan untuk memilih, menghapus, memotong, Copy dan Paste bentuk persegi pada gambar.

  • Eraser: untuk menghapus bagian gambar.

  • Pencil: untuk menggambar titik Pixel individu atau garis bebas berukuran 1px (pixel).

  • Brush: untuk menggambar dengan sikat bulat berwarna.

  • Line: untuk menggambar garis lurus berwarna.

  • Rectangle: untuk menggambar area kotak dengan isi berwarna.

  • Fill: untuk mengisi area dengan warna.

  • Color picker: untuk mengutip/mengambil warna primer atau sekunder dari gambar. Catatan: tahan Ctrl keyboard dan klik adalah jalan pintas untuk ini (bila Anda sedang menggunakan Tool lain).

  • Set origin and image points: Membuka dialog Image Points (lihat bagian 3.13.12. Image Points). Ini memungkinkan Anda mengatur Image Origin (titik rotasinya/titik asal) dan menempatkan titik gambar (Image Points) pada titik fokus pada gambar, seperti: misalnya di ujung pistol. Image Point bisa diakses di Event: System yang berguna untuk menentukan titik munculnya Object (Spawn Object), dan kegunaan lain sejenisnya. 

    Contoh penggunaan Image Point: peluru yang ditembakkan muncul di ujung pistol, apabila kita sudah menentukan Image Point pada ujung Object pistol. 

    Beberapa Object, seperti: Tiled Background, tidak menggunakan titik Origin atau titik gambar (Image Points).

  • Set collision polygon: untuk mengatur bentuk area tabrakan untuk gambar atau Frame. Secara Default Construct 2 dapat menentukan bentuk area tabrakan suatu gambar, tapi tidak selalu akurat. Klik dan seret (Click & Drag) titik-titik poligon tabrakan untuk mengubah bentuk areanya. Klik kanan untuk menampilkan menu opsi tambahan untuk Collision Polygon, seperti: menambah atau menghapus titik Polygon. Beberapa Object, seperti: Tiled Background, tidak menggunakan Collision Polygon.



Animations bar

Animations Bar adalah tempat untuk membuat beberapa Animation untuk Object: Sprite.


Klik kanan pada area kosong untuk menambahkan Animation baru atau menambahkan subfolder untuk mengatur/menyusun Animation. Klik kanan salah satu Animation dan pilih Preview untuk melihat bagaimana Animation akan terlihat dalam game.


Saat memilih Animation, Properties Bar menampilkan pengaturan untuk Animation tersebut sebagai berikut:

  • Speed: Jumlah Animation Frame yang ditampilkan per detik. Misalnya: jika diset ke 5, setiap Animation Frame berlangsung selama 1/5 detik. Atur ke 0 jika Anda tidak ingin Animation dimainkan (misalnya: Jika Tile set digunakan dengan Tile yang berbeda di setiap Frame).

  • Loop [Yes/No]: Ulangi Animation apabila setelah selesai dimainkan (Loop Forever).

  • Repeat count: Jika Loop=No, ini untuk menentukan berapa kali terjadi pengulangan Animation.

  • Repeat to (zero-based index): (penomoran basis 0) di Frame ke berapa pengulangan dilakukan jika Animation telah selesai dimainkan.

  • Ping-pong [Yes/No]: Mainkan Animation secara bergantian ke depan dan ke belakang (bolak-balik/memantul).


Animation Frames bar

Animation Frames Bar menampilkan daftar Frame Animation, pada Animation yang dipilih.


Pilih gambar/Frame untuk mengaktifkan Image Editor untuk mengedit Animation Frame yang diklik. Animation Frame juga bisa diseret dan ditaruh (Drag & Drop) untuk menyesuaikan urutannya.

Klik kanan area di Animation Frames Bar untuk menampilkan opsi berikut:

  • Add Frame: Tambahkan Animation Frame kosong baru ke urutan paling akhir.

  • Duplicate last Frame: Buat salinan Animation Frame yang terakhir dan tambahkan ke urutan paling akhir.

  • Reverse Frame: Membalik urutan semua Frame dalam Animation.

  • Import Frames: Membuka kotak dialog untuk mengimpor satu atau beberapa file gambar dari disk. Semua file gambar yang diimpor ditambahkan sebagai beberapa Animation Frame.

  • Import sprite strip: Impor strip dari Sprite atau Tileset, di mana satu gambar berisi sejumlah Animation Frame yang sesuai dengan Grid. Caranya bisa dilihat di bagian 3.13.13. Import Sprite Strip.

  • Reload files from disk: Muat ulang semua gambar dari folder Project. Ini berguna jika Anda telah mengedit gambar yang berada di folder Project menggunakan software lain, sementara Construct 2 sedang terbuka, dan Anda ingin Construct 2 untuk mengenali perubahannya. (Opsi ini dinonaktifkan jika Anda tidak menggunakan folder dari Project).

  • Thumbnail Size: untuk menyesuaikan ukuran ikon Thumbnail dari setiap Frame di Animation Frames Bar.


Memilih Frame akan menampilkan Property-nya di Properties Bar: Frame speed, yang merupakan kelipatan (Multiplier) untuk jumlah waktu yang digunakan oleh sebuah Frame. Sebagai contoh: Frame Speed=2 akan membutuhkan 2 kali lebih lama pada Animation Frame tersebut, Frame Speed=0,5 adalah setengah kali lebih lama, dan lain-lain. Relatif terhadap kecepatan Animation yang sedang dipilih.



Komentar