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

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 19 – Hand of Cards

Masih melanjutkan seri tutorial bikin card game dari Barry’s Development Hell. Kali ini hasilnya cukup kelihatan menarik sih, meski dari cara nulis codingnya agak aneh. Memang katanya ini reupload setelah channel lamanya kehapus, jadi mungkin ini footage dari video lama yang masih pakai Godot versi lama. Namun, codingnya sih jalan semua dan videonya bilang ini tutorial buat Godot 4.3.

Thumbnailnya agak nipu, ini belum bikin layout hand model kipas kayak gitu.

Tutorial ini lagi-lagi adalah implementasi layout pakai Node2D alih-alih pakai Control yang memang untuk bikin UI dengan method yang memudahkan layouting. Hasilnya sih cukup bagus, meski belum tahu apakah yang seperti ini bisa diduplikasi dengan pakai Control atau ga.

Di luar tutorial, aku melakukan penyesuaian dan tambahan, seperti membuat kartu di hand menyesuaikan posisi saat suatu kartu mulai di-drag, dan menambahkan animasi saat snapping ke slot.

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 18 – Card Slots

Masih melanjutkan seri tutorial yang sama. Kira-kira ini sudah sampai pada level yang hampir sama dengan yang tutorial pake built-in method. Namun, jika dibandingkan secara mekanik masih kurang.

Di sini, kartu hanya bisa sampai disimpan pada slot yang tersedia dengan benar. Jika sudah ter-snap di slot, kartu tidak bisa diambil lagi. Rasanya kurang enak. Aku coba buat utak-atik lagi biar kartu bisa dicabut lagi, tapi belum berhasil. Kebayang sih caranya, tapi harus ngubah struktur kodenya yang mungkin bakal ganggu ke depannya kalau lanjutin seri tutorial ini.

Apa ga usah lanjutin seri tutorialnya ya? Mungkin cari yang lain yang lebih ngasih pemahaman baru. Tapi cari yang pas agak susah, mending lanjutin yang ini deh.

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 17 – Hover Effect

Sepertinya masih menarik untuk melanjutkan tutorial dari seri yang sama ini. Tahap berikutnya ini sebenarnya menerapkan efek sederhana saja, tapi karena ngoding dari awal, gak pake built-in method, jadi agak ribet. Hampir semua yang dipraktekin di sini sebenarnya lebih mudah kalau pakai node Control. Tapi seperti yang sudah dicoba kemarin-kemarin, mungkin bakal ada fleksibilitas yang lebih baik kalau ngoding sendiri pakai node Node2D.

Hari ini gak sempat ngubah macem-macem. Agak lemes.

Github: fajarfh/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 16 – Dragging Card

Karena masih penasaran, coba lagi tutorial nge-drag and drop tapi ga pake method built-in. Kali ini ngikutin tutorial yang pake Area2D dan Raycasting. Sebenarnya ga terlalu ngerti Raycast-nya di mana karena ga disebut eksplisit, tapi Raycast nya di-emit dari mouse yang nembak ke objek di bawahnya saat diklik, dan kalau kena Node yang punya Area2D, objek itu bisa didrag mengikuti posisi mouse.

Aku juga bisa ngubah posisi drag sehingga saat didrag, kartunya tidak ter-teleport ke posisi mouse.

Saat ini masih mekanik drag-nya saja yang dibahas. Karena harus ngecoding dari dasar, jadinya tidak sependek yang kemarin dan wajar kalau dipecah ke beberapa tutorial. Namun, liat-liat dikit tutorial selanjutnya mungkin tidak bakalan menghasilkan mekanisme drag and drop seperti yang aku inginkan. Moga saja setidaknya ada petunjuk yang bisa bikin seperti itu. Tapi belum tahu juga sih mekanik yang aku bayangin itu lebih baik atau tidak.

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

Asset: Kenney Playing Card Pack