Langsung ke konten utama

Construct 2 Indonesia Manual: Bab Antar Muka - 15. Debugger

Bug mengacu pada cacat perangkat lunak (Software) – hal-hal yang tidak sesuai dengan keinginan Anda dalam game atau aplikasi Anda. Debugging mengacu pada proses memperbaiki masalah ini. Construct 2 Debugger adalah alat untuk membantu Anda menemukan dan memperbaiki Bug dalam game Anda.

Catatan: Debugger tersedia dalam edisi gratis dari Construct 2, namun Tab Watch dan Profile, fasilitas untuk mengedit nilai, dan fasilitas untuk menggunakan Breakpoints, tidak tersedia.


Cara menggunakan Debugger

Debugger dapat dijalankan dari Tab Home pada Ribbon, Bar peluncuran cepat (Quick-launch Bar), dengan mengklik kanan Layout atau Project di Project Bar, atau dengan menggunakan Shortcut keyboard Ctrl + F5.



Debugger bekerja mirip seperti: pratinjau (Preview) biasa, kecuali panel tambahan muncul bersamaan dengan game di browser yang menunjukkan banyak informasi dan beberapa kontrol yang berguna.


Saat dalam mode Debug, alamat di browser juga diakhiri dengan /debug, 

Misalnya: http://localhost: 50000/debug. Anda juga dapat beralih di antara Normal Preview dan Debugger dengan membuka dari URL ini. Anda bahkan dapat menjalankan debugger di perangkat seluler menggunakan pratinjau melalui Wifi, dan menambahkan /debug ke akhir URL Preview juga, misalnya: http://192.168.1.3.50000/debug.


Kustomisasi panel debugger

Panel Debug di browser dapat diubah ukurannya dengan menarik Gripper yang muncul di Titlebar abu-abu pada Debugger (di sebelah kiri tulisan Inspector). Ini memungkinkan Anda memperbesar untuk melihat lebih banyak informasi, atau memperkecil hanya untuk melihat Tools dan ringkasan informasi kinerja (performa).



Debugger juga bisa muncul di jendela sendiri. Ini sangat berguna pada setup Multi-monitor. Game akan ditampilkan menggunakan jendela browser penuh, dan jendela browser yang terpisah menampilkan panel Debug. Klik tombol Pop-out yang ditunjukkan di bawah ini untuk melakukan ini. Mengkliknya lagi, atau menutup jendela Popup, akan mengembalikannya ke jendela browser utama lagi.




The main Debugger command (Kontrol utama Debugger)

Di samping tombol Pop-out adalah beberapa fungsi berguna lainnya, sebagai berikut:

Pause: Jeda game agar berhenti sementara. Ini berguna untuk meluangkan waktu untuk memeriksa beberapa informasi pada saat tertentu. Saat dijeda, tombol berganti menjadi tombol Resume; klik lagi untuk melanjutkan jalannya game.

Step: Hanya bisa digunakan saat jeda (Paused). Ini memajukan jalannya game dengan satu Frame (Tick). Delta-time (dt) diatur seolah-olah game berjalan pada 60 FPS. Ini berguna untuk memeriksa proses Frame demi Frame, dan melihat bagaimana suatu kejadian (Event), seperti: tabrakan (Collision) ditangani.

Save Load: Membuat Savegame sementara, memungkinkan Anda untuk segera menyimpan keadaan (Status) game dan kemudian mengembalikannya kembali ke keadaan (Status) tersebut kapan saja nanti. Ini bisa berguna untuk berulang kali menjalankan bagian game yang sama berulang-ulang. Seperti: halnya dengan Savegames biasa, keadaan (Status) disimpan terus-menerus di browser tersebut. Jadi Savegame tidak akan tersedia di browser yang berbeda, namun akan tersedia di browser yang sama, bahkan setelah menutup dan membukanya kembali, Reboot, dll.

Restart: Ini akan melakukan Refresh game, mulai (Loading) dari awal lagi.


Performance summary (Ringkasan kinerja)

Beberapa rincian tentang performa game tampil dalam warna abu-abu terang. Untuk saran lebih lanjut tentang kinerja, lihat 2.9. Performance tips. Nilai yang ditampilkan adalah (baca dari kiri ke kanan):

Object count (misalnya: 500 Object):
Berapa banyak Object yang sedang dibuat. Menggunakan terlalu banyak Object bisa menurunkan performa. Nilai ini sesuai dengan System Expression: Objectcount.

Estimated CPU time (misalnya: CPU 20%):
Perkiraan berapa banyak waktu CPU yang digunakan dalam Game Logic. Ini tidak selalu akurat, terutama karena hanya melihat penggunaan waktu di main Javascript Thread, dan hanya dianggap sebagai gambaran kasar. Profiler (Profile Tab) dapat menjabarkan hal ini sebagai: Berapa banyak waktu yang dihabiskan di setiap area game, dan dijelaskan lebih rinci nanti di manual ini. Nilai ini sesuai dengan System Expression: CPUUtilisation.

The estimated image memory use (misalnya: gambar 32.5mb):
Perkiraan berapa banyak memori yang digunakan oleh gambar yang dimuat saat ini dalam game. Fitur ini hanya tersedia dalam mode WebGL. Gambar biasanya menggunakan memori paling banyak dalam sebuah game, namun perhatikan, nilai ini tidak termasuk faktor lain, seperti: memori yang dibutuhkan untuk menjalankan Game Logic, dan memori dibutuhkan untuk memutar Music dan Sound Effect. Lihat posting blog dalam Remember not to waste your memory: (https://www.scirra.com/blog/112/remember-not-to-waste-your-memory) untuk saran lebih lanjut tentang penggunaan memori gambar. Nilai ini sesuai dengan System Expression: ImageMemoryUsage.

Renderer (misalnya: WebGL):
Menampilkan status apakah game sedang dijalankan dalam mode canvas2d atau webgl. Mode WebGL lebih cepat dan mendukung Shader Effect. Nilai ini sesuai dengan System Expression: renderer.


Beberapa rincian Performance tambahan muncul di bagian System Object’s Inspector view, yang ditampilkan secara Default:

Collision checks/sec (misalnya: 1144 (~22/tick)):
Berapa kali dalam detik terakhir Engine harus menguji tabrakan (Collision Test) antara 2 Object. Collision Checks dipanggil oleh Condition: On collision atau tumpang tindih (Overlapping) antar Sprite, dan banyak Behavior melakukan Collision Checks tambahan secara otomatis. Dalam tanda kurung, Average Check Per Tick juga ditunjukkan. Misalnya: jika ada 600 cek tabrakan di detik terakhir dan Framerate-nya adalah 60 FPS, perkiraan cek per Tick akan menjadi 10. Ini memberi tahu rata-rata ada sekitar sepuluh cek tabrakan per Frame, meski nilainya sebenarnya akan bervariasi  Frame demi Frame.

Poly checks/sec (misalnya: 60 (~ 1/tick)):
Biasanya Collision Checks bekerja sangat cepat, dan Engine dapat memberi tahu hal sepele  bahwa dua Object tidak tumpang tindih (dengan memverifikasi bahwa kotak pembatasnya tidak tumpang tindih). Namun jika Boundix Box dari dua Object tumpang tindih (Overlapping), Engine harus melakukan pengecekan lebih berat dimana poligon tabrakan masing-masing Object diuji satu sama lain. Nilai ini menginformasikan berapa banyak pemeriksaan semacam ini yang dilakukan pada detik terakhir, dan juga dengan rata-rata per Tick, seperti: nilai Collision check/ sec. Biasanya nilai Poly checks/sec lebih kecil, tapi jika lebih besar, ini mengindikasikan kemungkinan masalah kinerja.


Tab Inspector

Debugger memiliki 3 tab: tab Inspector, Watch, dan Profile. Tab Inspector digunakan untuk melihat dan mengedit nilai.

Tampilan Inspector terbagi menjadi 2 bagian: di sebelah kiri muncul daftar semua jenis Object dalam Project, termasuk System Object, dan di sebelah kanan muncul daftar tabel nilai yang berkaitan dengan Object yang dipilih, serupa dengan Properties Bar.

  • Object List 
    Klik nama Object Type dalam daftar Object untuk memperluasnya. Jumlah Instance Object Type itu muncul dalam tanda kurung setelah nama Object. Jika Object Type hanya memiliki satu Instance, atau merupakan Global Object seperti: Object: System atau Object: Audio, maka dapat segera mulai memeriksa Object. Jika tidak, itu akan memperluas Dropdown dengan daftar semua Instance dari Object yang diurutkan berdasarkan indeks ID (IID) mereka. Mengklik Instance tertentu akan memeriksa hal berkaitan dengan Instance itu saja.

  • Values view (Tampilan nilai)
    Seperti: halnya dengan Properties Bar, tampilan nilai menunjukkan daftar tabel kategori yang menampilkan semua informasi tentang Object yang sedang diperiksa. Nilai yang ditampilkan tergantung pada apa yang sedang diperiksa; misalnya: Object: Sprite menampilkan informasi tentang Animation Frame yang aktif, Object: Audio menampilkan informasi tentang suara dan musik yang sedang diputar, dan Object: System menampilkan informasi tentang Engine, Layout, dan Layer. Biasanya nilai-nilai ini sesuai dengan Object Properties dari Properties Bar, serta Object Expression.


Instance Variable dan nilai Behavior juga ditunjukkan, jika terpasang pada Object yang dipilih.

Hal ini sering berguna untuk melihat nilai-nilai ini saat menjalankan game. Namun,  nilai-nilai tersebut juga bisa diedit. Seperti: halnya dengan Properties Bar, cukup klik pada nilai dan ketik nilai baru untuk mengubahnya. Nilai yang diedit muncul dalam huruf tebal. Tidak semua nilai bisa diedit – yang memiliki latar belakang abu-abu terang hanya bisa dibaca (Read Only). Ini bisa menjadi cara terbaik untuk bereksperimen untuk melihat bagaimana Project Anda bekerja.

Ikon mata di sebelah kanan bisa digunakan untuk menambah nilai ke Tab Watch. Hal ini akan dijelaskan lebih rinci nanti.

Bagian Tools memberi Anda kemampuan untuk menghancurkan (Destoy) Object yang diperiksa. Secara Default, Object yang diperiksa juga digariskan dengan kotak titik-titik merah dalam game. Jika ini mengganggu, hapus centang pada kotak Highlight.

Object dalam sebuah Container juga menyediakan daftar link untuk memeriksa Instance lain dalam Container yang sama dengan Object yang saat ini diperiksa.



Tab Watch

Tab Inspector hanya memberikan informasi kepada Anda untuk melihat satu Object dalam satu waktu, dan seringkali juga mencakup banyak informasi, yang sebagian besar mungkin tidak Anda minati. Mengklik ikon mata di samping nilai-nilai di Tab Inspector akan menambahkan nilai tunggal ke Tab Watch . Ini memungkinkan Anda menggabungkan berbagai nilai dari berbagai Object ke dalam satu ruang, sekaligus mengurangi nilai yang ditampilkan menjadi hanya yang Anda minati.


Di Tab Watch, nilai dapat diedit seperti: Tab Inspector.

Tab Watch menunjukkan tanda silang, bukan icon mata di sebelah kanan nilai. Klik tanda silang untuk menghapus nilai dari Tab Watch. Catatan: jika Anda melihat nilai dari Object dan Object tersebut hilang (Destroyed), nilai Watch akan otomatis dihapus.

Header Category pada Tab Inspector juga memiliki mata atau tanda silang tersendiri. Mengkliknya akan menambahkan/menghapus keseluruhan bagian ke atau dari Tab Watch.



Tab Profile

Tab Profile memberikan rincian yang lebih rinci tentang penggunaan CPU yang diperkirakan. Game harus terus berjalan agar Profiler (Tab Profile) bisa mengumpulkan dan menampilkan informasi. Ini kemudian menampilkan rincian perkiraan waktu CPU yang dihabiskan di setiap bagian Game Logic. Ini Update sekali per detik dan nilai yang ditunjukkan adalah untuk detik sebelumnya saja.


Perlu dicatat bahwa penggunaan CPU (Central Processing Unit) secara keseluruhan adalah perkiraan untuk permulaan, dan oleh karena itu semua nilai lainnya adalah perkiraan. Rincian yang ditampilkan di Profiler hanya berhubungan dengan Main Javascript Thread, dan CPU bisa sibuk dengan tugas lain, seperti: memproses Audio atau perhitungan dalam menjalankan Pathfinding. Selain itu, waktu bagi GPU (Graphic Processing Unit) untuk membuat game tidak diperhitungkan sama sekali oleh Profiler. Sangat mungkin Framerate dibatasi oleh kecepatan GPU untuk melakukan Render (memproses gambar), namun Profiler tidak dapat mengidentifikasi secara langsung akan hal ini. Hal ini dapat disimpulkan jika ternyata Framerate rendah, namun penggunaan CPU tidak tinggi.

Terlepas dari faktor-faktor yang disebutkan di atas, Profiler dapat digunakan untuk mengidentifikasi “Hot Spot” yang akan menjadi kandidat yang baik untuk dioptimalkan terlebih dahulu jika ada masalah kinerja. Untuk saran kinerja lebih lanjut, lihat 2.9. Performance Tips. Perhatikan bahwa tindakan optimasi seringkali menjadi tidak perlu, dan merupakan pemborosan waktu jika game sudah berjalan cukup cepat. Untuk pembahasan topik yang lebih dalam, lihat artikel blog Optimization: don’t waste your time (https://www.scirra.com/blog/83/optimisation-dont-waste-your-time).


Profiler breakdown (Penjabaran Profiler)

Profiler menunjukkan tabel bertingkat yang mengidentifikasi berapa banyak waktu CPU yang telah dikeluarkan di setiap bagian Engine, hingga ke kelompok individu Event. Item tingkat atas adalah:

Events:
Rincian berapa banyak waktu yang dihabiskan untuk menjalankan Event Logic di Event Sheet yang digunakan oleh Layout. Pertama-tama dipecah dalam setiap Event Sheet (misalnya: dalam kasus menggunakan Include), dan selanjutnya masuk ke Group dan kelompok Event bertingkat. Ini dapat membantu mengidentifikasi Event yang menggunakan CPU paling intensif yang mungkin ingin Anda optimalkan.

Physics simulation:
Berapa lama waktu yang dihabiskan untuk memproses Behavior: Physics. Physics Simulation bisa sangat meningkatkan penggunaan CPU secara intensif. Jika nilai ini tinggi, pertimbangkan untuk menggunakan lebih sedikit Object: Physics.

Draw calls:
Berapa lama waktu yang dibutuhkan CPU untuk mengeluarkan panggilan Render, tidak termasuk waktu bagi GPU untuk menyelesaikannya. Dalam beberapa kasus, panggilan rendering bisa sangat meningkatkan proses CPU secara intensif, terutama bila sejumlah besar Object ada di layar. Beberapa browser juga meneruskan semua Draw Calls ke Thread lain untuk diproses secara paralel, dalam hal ini pengukuran Draw calls kemungkinan akan dianggap tidak penting.

Engine:
Sisa waktu yang dihabiskan di Construct 2 Engine, yang merupakan perkiraan keseluruhan penggunaan CPU terhadap suatu Event, Physics dan Draw Calls. Ini termasuk pengolahan Behavior dan pekerjaan Engine lainnya.



Breakpoints

Saat menjalankan Debugger, dapat memungkinkan untuk mengatur Breakpoint untuk menghentikan sementara eksekusi Event Sheet pada Event, Condition atau Action tertentu. Untuk informasi lebih lanjut, lihat entri manual pada 4.5.11. Breakpoints.



Komentar