Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 29 – Light and Shadow

Tutorial kali ini cukup singkat dan to the point. Ngebahas lagi soal PointLight2D, tapi kali ini pake efek shadow dari node ini. Ditambah dengan LightOcclusion2D dan Occlusion Layer pada Tilemap Layer (di tutorial masih pake Tile Map, tapi sama saja), kita bisa bikin efek bayangan yang cukup oke dengan mudah.

Aku pingin pake proyek baru dari nol untuk ini biar bisa pake aset-aset yang lebih cocok. Juga nambahin karakter yang nanti dikasih LightPoint2D sehingga jadi kayak bawa senter. Bentuk cahayanya ga oke sih karena males bikin tekstur sendiri, tapi cukup okelah.

Di sini aku juga baru tahu ada node Canvas Modulate yang ngubah warna seluruh layar buat ngasih kesan gelap atau malam yang kayaknya lebih baik daripada pake DirectionalLight2D waktu kemaren-kemaren. Di tutorial ini juga pake World Environment yang aku masih belum terlalu ngerti cara makenya (ngubah-ngubah slidernya ga banyak ngasih efek).

Yang agak kurang memuaskan, dengan teknik pake 2 PointLight2D pada tutorial, kita bisa memberi bayangan pada objek tapi juga tetap menyinari objek sehingga kelihatan. Masalahnya, kalau masuk ke ruangan atau objek yang dibatasi tembok, salah satu PointLight2D yang dipake buat menyinari objek bakal menyinari objek di luar tembok juga.

Mungkin ada teknik lain biar bisa begitu. Mungkin pakai properti height atau pakai OcclusionLayer tambahan. Perlu cari tutorialnya. Penasaran.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset: Kenney Topdown Shooter (pixel) Pack

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 28 – Unique Card and Flip

Ga ngelanjutin dulu soal game programming pattern. Soal implementasi singleton dan observer di Godot sudah cukup mudah dan sering aku pakai, meski definisi dan konsep dasarnya masih banyak yang kurang aku pahami. Sedangkan soal state pattern bakal lama implementasinya di proyek yang sudah ada (pingin ada waktu buat ngerjain yang lain, seperti beli baju lebaran hehe). Plus, pingin beres sebelum Jumatan. Jadinya balik lagi ke seri tutorial bikin game kartu.

Ga ngenalin fitur baru, tapi beberapa trik yang dipakai cukup baru buat saya. Hanya saja memang cara penulisan kodenya mungkin bukan best practice. Atau seenggaknya ga cocok aja. Misalnya, aku lebih cocok buat bikin reference untuk akses child node dari suatu scene daripada pakai get_node(). Dan, setelah kemarin ngerjain command pattern kerasa banget enaknya ngedeklarasiin script sebagai class pakai class_name, yang jarang dipakai di tutorial ini.

Tutorialnya sendiri tidak ada masalah. Mungkin ada beberapa modifikasi yang kurasa bakal lebih bagus:

  • Kalau aset gambar kartu pakai AtlasTexture, bisa bikin masing-masing resourcenya dulu.
  • Kalau ingin animasi flip selesai pas kartu yang di-draw nyampe ‘player hand’, pas bikin animasi flip, bikin dengan durasi 1 detik, lalu saat manggil animasi di skrip deck.gd, ubah speed_scale dari Animation Player jadi 1/draw_speed yang sudah didefinisikan dari tutorial sebelumnya.
  • Ada baiknya saat nge-flip, saat animasi mencapai tengah-tengahnya, selain scale.x = 0.1, ubah juga scale.y menjadi sedikit lebih besar biar ada efek seperti kartunya keangkat waktu di-flip (dapet tips dari komen di YouTube tutorialnya).

Beberapa hal lain yang saya temukan:

  • Otakku hanya bisa melihat kalau kartunya nge-flip ke kiri ._. padahal kalau cuma di-stretch atau diubah scale-nya ga akan ada bedanya di-flip ke kiri atau kanan.
  • Nemu bug yang bikin kartu pindah ke belakang slot jika dilepas saat mouse di tengah slot. Mungkin gara-gara sistem drop di slot aku modifikasi kemaren. Tapi, ternyata kalau Collision Shape si kartu ga di-disabled saat habis dilepas, bugnya hilang. Tetep sih, collision-nya harus disabled agar tidak bisa di-klik saat kartu sudah masuk slot. Setelah diulik-ulik, akhirnya ubah collision_mask di Collision Shape-nya aja agar tidak kena Raycast dari mouse.

Gara-gara bug yang terakhir, ngerjain ini jadi nambah 1 jam lebih.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset: Kenney Playing Card Pack

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 27 – Command Pattern

Ngerasa perlu lagi belajar teori-teori dasar dalam pemrograman, aku ngecek tutorial tentang command pattern. Kalau yang kupahami sih, ini adalah struktur pemrograman yang misahin fungsi pergerakan karakter (atau tipe fungsi lain untuk tipe objek lain) agar fungsi itu bisa dipake dengan input yang berbeda atau pada objek berbeda yang tipe atau class nya sama. Jadi, selama aku bisa bikin salah satu proyek yang kubikin kemarin dengan struktur command pattern, kuanggap beres deh.

Ternyata cukup mudah diikuti. Bedanya yang di tutorial dengan praktek-ku, di tutorial ada command buat attack, sedangkan di punyaku adanya command buat jump. Keduanya mirip, jadi implementasinya bisa tinggal jiplak dari tutorial.

Beda dengan tutorial, aku coba implementasi non-human controller (kurang tepat sih disebut AI controller), pada NPC alih-alih karakter player. Implementasinya sih tidak terlalu beda. Namun, memang sepertinya untuk pergerakan otomatis ini yang di tutorial masih terlalu kasar. Mungkin ada pola struktur yang tepat untuk jadi template pergerakan otomatis? Mungkin pakai Animation Player biar timing dan pengaturan posisinya lebih visual?

Di praktek-ku juga masih ada bug. Setelah lompatan NPC yang ketiga, seharusnya dia langsung diam. Namun, di sini dia seperti masih mau lompat karena sepertinya requirement jumlah loncat yang membatasi gerak loncat masih bisa lolos. Entahlah, yang penting ini sudah nunjukkin implementasi konsep command pattern sederhana.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset:
– Kenneys Pixel Platformer
– Kenneys Platformer Pack Industrial

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 26 – Shader

Masih belajar shader, dan meski ingin tutorial pendek yang bisa dikerjakan pagi lalu beres sebelum siang, aku punya tendensi untuk memperumit segala hal -_-.

Tutorial di atas cukup membantu untuk belajar lagi dasar shader dan membuat sprite flashing sederhana, tapi kupikir terlalu sedikit yang dipelajari. Flashing seperti ini harusnya pakai modulate juga bisa (meski bagusnya efek flashing ini bisa langsung dipake diberbagai objek dengan lebih fleksibel). Jadi, aku cari tutorial lain.

Video kedua ini juga direkomendasikan di video pertama. Ia menunjukkan lebih banyak trik shader, dan setelah ditunjukin sebuah project demo yang nampilin banyak shader, jadi keidean untuk menirunya.

Jadinya saya kembangkan hasil tutorial hari ke-8, tambah efek flashing pada karakter saat mukul dan pada box saat ditabrak. Lalu, aku menambahkan dropdown menu yang bisa mengubah jenis filter atau efek pada layar, dan mengikuti tutorial video kedua dalam menambahkan slider untuk mengubah intensitas efek.

Selain monochrome dan chromatic abberation yang diajarin video kedua, serta pixelized dari proyek demo (efek ini jelek karena yang difilter gambarnya udah pixel, lol), aku juga menambahkan efek blur yang dari tutorial kemarin. Namun, efek itu ternyata berat kalau di-web, jadi tidak dikasih slider untuk ngubah intensitasnya secara realtime.

Hasilnya lumayan menarik. Seenggaknya cukup kebayang bagaimana cara make shader. Masih penasaran untuk nyobain shader yang ngubah vertex (mengubah tepi/bentuk objek alih-alih hanya ngubah warna tiap pixel) dan cara terbaik buat implementasi dua efek shader pada satu objek yang sama; apakah bikin dua objek filter yang bertumpuk di atas objek tersebut atau bisa bikin dua efek dalam satu file shader?

Oh, catatan, karena tutorial shader banyak yang jadul, harus merhatiin:

  • SCREEN_TEXTURE udah ga dipake tapi banyak disebut di tutorial. Tapi bisa dipake kalau nambahin ini di atas file shader:
    uniform sampler2D SCREEN_TEXTURE: hint_screen_texture,repeat_disable, filter_nearest;
  • Method get_material() bisa diganti properti material
  • Method set_shader_param() diganti set_shader_parameter()

Github: fajarfh/OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset:

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 25 – 2D Blur

Niatnya mau ngikutin tutorial yang pakai shader tapi ga mau yang nerangin basic lalu nuntun coba-coba satu-satu fiturnya. Pingin yang fokus di satu trik aja. Jadinya kepikiran waktu Global Game Jam kemarin pas nyari-nyari cara buat nge-blur tapi ga ketemu.

Sebenarnya mau blur ga perlu pakai shader sih, katanya, tapi pakai cara yang ga pakai shader ga jalan. Jadinya pakai shader lagi. Nemu tutorial yang keitung jadul tapi dengan penyesuaian bisa jalan:

Bahasa Jerman, tapi liat codingnya yang pendek banget bisa gampang dimenegerti.

Tapi di hasil yang saya kerjakan, area yang dibikin nge-blur jadi lebih gelap. Cari-cari sampai nemu komen di laman ini, tetep ga berhasil juga. Ternyata masalahnya karena directional light yang dipake (aku pakai hasil kerjaan hari-23) mempengaruhi warna dari panel area yang diblur. Dan pas cari-cari cara buat bikin directional light nge-exclude objek itu (directional light 2d ga bisa pake light mask, z-min/max, dan item cull mask), ternyata ada masalah yang lebih besar: blur ga jalan di web -_-.

Untungnya nemu coding shader yang bisa dijalanin di web: Web Safe Darkened Gaussian Blur – Godot Shaders

Karena codingannya advanced (dia bikin coding gaussian blur sendiri), aku copy-paste saja meski dari kemarin-kemarin aku selalu hindari kalau cuma copy-paste. Lagipula, denger-denger orang pake shader juga biasanya cuma copy-paste atau pake plugin.

Setelah utak-atik dikit, dan tetap terpaksa mematikan directional light biar bagus, percobaan blur ini dianggap beres saja.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset:
– Kenneys Pixel Platformer
– Kenneys Platformer Pack Industrial
– Code shader dari: Web Safe Darkened Gaussian Blur – Godot Shaders

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 24 – Pixel Normal Map

Awalnya pakai tutorial yang ini:

Tapi ada yang kurang jelas di tempat naruh normal map di mana. Tambah lagi tutorialnya udah lama. Jadinya cari-cari tutorial lain dan nemu:

Tapi pas coba ngikutin bikin normal map pakai tutorial ini… agak susah.

Inti kedua tutorial ini sebenarnya hanya bikin normal map yang bikin objek 2D terlihat ber-tekstur saat dikenai cahaya. Namun, bikin normal map ini yang susah. Harus coba-coba trial-error biar hasilnya sesuai harapan. Ga kebayang sih kalau harus bikin normal map untuk ratusan aset. Ada sih generator normal map online, misalnya: NormalMap-Online. Tapi, kurang bagus.

Awalnya saya coba terapkan ke hasil tutorial kemarin yang pakai lighting, tapi karena efeknya kurang kelihatan, jadinya aku bikin demo sederhana saja.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset referensi normal map: https://www.filterforge.com/

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 23 – 2D Lighting

Tutorial yang gak ngoding dulu. Node 2D lighting (2D Point Lighting dan Directional Lighting) di Godot ini kayak nambahin sprite cahaya satu layer di atas objek-objek lainnya sih, tapi punya properti seperti range z-min/max yang ngatur objek di urutan z mana saja yang dipengaruhi sama cahaya-nya. Fitur-fitur lain di dalamnya juga memudahkan untuk mengatur profil/bentuk, warna, dan intensitas dari cahayanya.

Bagaimanapun, ini ga kayak 3D yang bisa bikin pencahayaan yang realistis. Penasaran juga apakah ada hal-hal semacam normal map di 2D (ada).

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset:
– Kenneys Pixel Platformer
– Kenneys Platformer Pack Industrial

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 22 – 2D Height Map

Kali ini aku akan mengulang belajar custom data layer dengan belajar implementasinya dalam membuat semacam ‘heightmap’ agar suatu tile dalam tilemap bisa memiliki ketinggian. Ini memungkinkan kita membuat platform yang hanya bisa dicapai pemain dengan mekanik ‘melompat’. Pada 2D platformer, ini sederhana saja. Pada game dengan mekanik pergerakan pemain 8-arah dan top-down 2D view seperti pada game JRPG, implementasinya perlu trik khusus.

Namun, aku juga sulit mengingat, game 8-arah mana yang pemainnya bisa lompat. Sepertinya jarang. Dan setelah mengikuti tutorial ini, aku mengerti kenapa. Sulit untuk membuatnya ‘smooth’ dan intuitif.

Satu kesalahan pertama yang kulakukan adalah menggunakan proyek sebelumnya yang sudah memiliki karakter dengan mekanik 8-arah. Biar kelihatan bagus, karena animasinya sudah diatur. Namun, penambahan mekanik lompat memerlukan perubahan di sistem pergerakan karakter secara keseluruhan. Semua kontrol harus dilakukan dengan memperhatikan apakah karakter sedang melompat atau tidak. Sekali lagi, hal yang mendasar di 2D platformer tapi tidak di 8-arah. Meski aku berhasil membuatnya bisa melompat, codenya belum dibuat lebih rapih.

Selain itu, penggunaan aset yang tidak pas juga memaksaku melakukan scaling yang berakibat kordinat data pada tilemap tidak bisa dibaca dengan benar. Tilemap memang harusnya tidak di-scale, tapi terlalu kecil buat sprite karakternya. Jadinya karakternya yang di-scale.

Namun, kalaupun aku bikin dari awal dan mengikuti tutorial ini, sepertinya hasilnya juga kurang memuaskan. Perlu ada perubahan code dan penyesuaian nilai variable agar mekaniknya lebih intuitif. Sudah begitupun, aku rasa hasilnya kurang ‘smooth’. Mungkin ada tutorial lain yang lebih oke. Mungkin mekanik lompat buat game dengan top-down 2D view memang kurang oke.

Btw meski tutorial pake node Tile Map, kalau mau pake Tile Map Layer juga bisa.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Asset:
– Kenneys RPG Urban Pack
– Ninja Adventure – Asset Pack by pixel-boy (https://pixel-boy.itch.io/ninja-adventure-asset-pack)

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 21 – Data from Spreadsheet

Karena kemarin berhasil snapping kartu pakai Area2D, dan karena 10 hari kedepan dari hari ini perlu tutorial yang lebih pendek buat antisipasi sibuk di masa mudik, aku break dulu dari tutorial game kartu yang kemarin. Tapi yang ini… sebenarnya bukan tutorial sih, lebih ke explainer. Video ini cuma menjelaskan sistem parsing data JSON yang sudah dterapkan dalam game dan menggunakan extension buat download data JSON dari Google Sheet.

Yah, lumayan buat ngulang soal parsing JSON yang udah dilakuin di Hari 14. Lumayan penting buat diingat. Jadi yang kulakukan cuma ngubah tutorial Hari 14 pakai data dari Google Sheet dan menyesuaikan sintaks agar mirip yang di tutorial.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 20 – Card Deck

Masih melanjutkan tutorial card game. Kali ini menambahkan deck yang pada dasarnya hanya tempat nge-spawn kartu jika di-klik. Di sini semakin kentara pakai Raycast untuk semua objek yang bisa diklik, tanpa pakai objek Button satu pun.

Hari ini juga sempat mengubah viewport yang tadinya pakai camera (meski ga disuruh di tutorial) jadi pakai viewport saja, dan, akhirnya, membuat mekanisme snap kartu pada slot tanpa harus mengarahkan mouse di atas area slot. Sepertinya memang benar harus pakai Node2D. Tapi mungkin perlu cek lagi yang pakai Control. Beberapa variasi yang saya bikin sendiri (dan yang diajarin tutorial) kelihatannya masih bisa di-refactoring dan dirapikan lebih baik, tapi hari ini agak sibuk.

Github: OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

​Asset: Kenney Playing Card Pack