Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 10 – Reflection

Efek ini terlihat bagus meski effortnya ga besar-besar amat. Meski demikian, kayaknya kalau mau lebih proper hasilnya, effortnya perlu lebih lama lagi. Khususnya nyiapin asset sprite yang bagus buat refleksinya.

Pada dasarnya, ini hanya ngeduplikat sprite karakter yang direfleksikan, nge-masking objek tersebut, nyesuain posisinya, dan nge-ganti frame sprite-nya tergantung frame sprite karakter. Yang terakhir itu susah karena tergantung gimana aset sprite karakter yang direfleksikan. Di tutorial, fungsi dan algoritma digunakan untuk menentukan frame refleksi dari spritesheet yang digunakan. Karena susunan spritesheet di aset yang saya pakai beda, ya jadinya fungsinya bakal beda (kecuali ngedit susunan spritesheet-nya jadi sama dengan tutorial). Daripada bingung lama-lama, akhirnya pakai Dictionary yang nyimpen hubungan frame karakter dengan frame refleksi satu-per-satu.

Di sini pakai cara masking yang beda dengan yang di tutorial hari 1, ga pake coding di shader. Mungkin bisa dibikin ulang pakai cara ini.

Oh, sebenarnya yang bikin lama ngerjain ini tuh, karena ada yang masih bikin gatel dari hasil kerjaan hari 8 yang dipake lagi di sini. Kalau sprite ngadep samping pas lagi stuck di depan kaca, karakter ga bisa ngadep ke depan meski udah kasih input. Setelah ngulik lama, akhirnya bisa. Fixnya cukup simple, bisa cek di git.

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

Asset:

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 9 – Pushing Object

Awalnya mau ngikutin tutorial Websocket pake Python tapi ternyata tutorialnya udah basi 2 tahun, jadi pas dicoba ada class yang udah ga ada. Cek manual Godot, ada class penggantinya, nyobain demonya, ga jalan juga. Karena bakal lama nyari workaroundnya (plus lagi pingin nonton- hey 2 film pemenang oscar di CGV PVJ masing-masing cuma 25ribu!) akhirnya nyerah dan pilih tutorial lain yang lebih ringan.

Ini pengetahuan dasar sih. Tapi urusan collision ini seeeerrriiing lupa masalah milih tipe node yang tepat (static body, rigid-body, area2D, dll.) dan ngatur collision layer serta mask masing-masing node. Selengkapnya, rujuk ke sini aja: Physics introduction — Godot Engine (stable) documentation in English.

Yang aku pahami, kalau misalnya ada dua objek A dan B punya collision layer di layer 1, tapi objek A ga punya collision mask di layer 1 sedangkan objek B punya, maka posisi objek A ga akan terpengaruh oleh tabrakan dari objek B sedangkan objek B bisa digeser oleh objek A. Kira-kira begitulah.

Dalam tutorial, ada tips biar objek yang diinjek bisa tetep solid dan ga kaya kedorong ke lantai lalu mantul. Kupikir tips yang sama bsia dipakai dalam kasus saat pemain kejepit di antara 2 objek platform bergerak. Tapi ternyata lebih rumit kalau mau bagus. Perlu merhatiin arah geraknya, dll.

Asset dari Kenneys.

Git: https://github.com/fajarfh/OneDay-OneTut

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 8 – Animation Tree

Tutorial kali ini topiknya Animation Tree. Fitur ini salah satu yang sering aku lupa sekalipun sudah pelajari waktu belajar Unity. Di Godot kira-kira mirip.

Ini tutorial yang ada bahannya, tapi aku masih ga mau pake. Aku pake hasil tutorial hari-hari kemarin aja. Seenggaknya, ga usah ngatur background lagi. Kalau untuk aset karakternya, aku pakai yang sama dengan tutorial.

Tapi, ini tetap lama di setup animasinya. Aku udah beres nyetting animasi dari spritsheet di SpriteFrame buat dipake di Animated Sprite. Eh, Animation Tree cuma bisa pake Animation Player -_-. Lama nyetting animasi frame-by-frame di Animation Player, pas implementasi di Animation Tree malah ga jalan. Lama banget troubleshooting soal ini. Entah masalah utamanya di mana. Entah soal pengaturan track RESET, entah di properti yang dianimasikan yang harus sama di semua animasi yang masuk AnimatedNodeSpace2D buat dipake di Animation Tree.

Akhirnya bisa juga sih. Termasuk nambahin code biar animasinya dipengaruhi tile data dan nambahin input attack sederhana. Tapi ngerjain dari pagi ke sore buat tutorial yang ga terlalu panjang kayak gini bikin kesel juga.

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

Asset dari Kenneys dan Ninja Adventure – Asset Pack by pixel-boy

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 7 – Strategy Pattern

Hari ini pilih yang agak panjang dan konseptual karena rada lengang.

Tutorial ini menunjukkan teknik modular buat implementasi sistem upgrade item. Teknik ini menerapkan strategy pattern atau polimorfisme… yang sebenarnya ga terlalu ngerti juga artinya apaan. Katanya sih, polimorfisme ini suatu class yang bisa punya method yang sama dengan parameter yang beda-beda. Kalau di tutorial, kita bikin satu class yang punya method, lalu punya kelas turunan yang punya method yang sama, tapi isinya beda.

Di sini, kita bikin satu class dasar item upgrade yang diturunkan dari node resource dan satu scene/prefab item upgrade yang memuat perilaku dasar dan atribut dari item upgrade. Lalu, kita bikin class-class turunan yang masing-masing berisi method tiap item upgrade yang berbeda. Class turunan ini karena turunan resource juga jadi bisa dibikin dengan fitur klik-kanan > Create New > Resources.. di File System. Selanjutnya nonton tutorialnya aja ._.

Aku belum paham apakah sistem ini performanya bagus atau tidak, dan apakah modularitasnya memudahkan atau tidak. Namun aku merasa item-itemnya jadi terlihat lebih rapih.

Tutorial ini sudah ngasih aset dan akses file proyek lewat github. Jadi, kalau aku bikin lewat download yang dari github, rasanya jadi ga belajar. Kalau bikin sendiri dari awal repot juga sih. Jadinya aku pakai proyek yang kemarin, lalu yang diupgradenya diganti dari peluru ke karakter (biar tidak perlu bikin aset peluru dan musuh). Meski beda, si strategy pattern nya tetap bisa diimplementasikan dan diikuti. Aku juga menambahkan mekanik reset kondisi karakter setelah jeda sekian detik dari mengambil upgrade.

Kalau mau lihat code yang sudah diubah, bisa cek di github: https://github.com/fajarfh/OneDay-OneTut

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 6 – Moving Platform

Bikin platform bergerak dalam 2D platformer sudah pernah sih, tapi tutorial ini ngasih trik buat bikinnya pake Path2D dan AnimatableBody. Tutorial ini juga ngasih teknik biar objek platform bergerak bisa lebih modular dan tipe pergerakannya bisa dikustomisasi lebih enak.

Di sini, kita bakal bikin 2 jenis pergerakan berdasarkan Curve dari Path2D-nya yaitu open-path dan closed-path. Open-path dianimasikan pakai Animation Player yang ngubah nilai progress dari PathFollower2D sehingga bisa bikin platform bergerak bolak-balik. Sedangkan pada closed-path, animasinya pakai ngubah nilai progress juga, tapi diubahnya di _process() sehingga bisa bikin animasi yang sirkular.

Tips tambahan, kalau mau bikin path yang melingkar sempurna, mending masukin kordinatnya satu-satu di Inspector.

Git: https://github.com/fajarfh/OneDay-OneTut

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 5 – 2D Pathfinding

Yang singkat saja untuk hari ini karena ada kerjaan lain. Proyeknya duplikat dari hari lain. Tapi tetap saja agak lama karena tergoda buat nambahin ini-itu.

Tutorial ini pada dasarnya pengenalan NavigationRegion2D dan NavigationAgent2D untuk memberi karakter atau NPC semacam jalur yang membatasi gerak. Pas lihat, langsung kebayang bikin semacam mekanik point-and-click (atau click-and-move?), jadi saya tambahin hal-hal lain yang agak beda dengan tutorial. Namun, sepertinya ada cara yang lebih efisien untuk mekanik seperti itu.

Versi Itch.io nya masih ada yang salah. Kordinat penanda klik masih salah. Dan harusnya area dan garis navigasinya dibikin aset lagi biar keliatan. Tapi sudahlah…

Source code untuk proyek ini aku taruh di github: fajarfh/OneDay-OneTut: Latihan ngerjain 1 tutorial Godot tiap hari selama bulan Maret

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: 4 – Custom Tile Data

Daripada mengerjakan proyek yang sama dan melihat code yang itu-itu saja tiap hari, aku mulai lebih suka mengulik problem yang berbeda-beda dan trik yang tidak membosankan dengan proyek ini. Namun, meski mengulang membuat file proyek dari awal tiap memulai tutorial baru membuatku lebih terbiasa untuk memulai proyek (dan tidak bingung harus mulai dari mana), cara ini lumayan menguras waktu. Tutorial yang kupilih ini, meski cuma 5 menit, ngerjainnya hampir seharian! Penyebabnya karena harus menyiapkan aset dan menatanya agar bisa diimplementasikan dengan hal yang dipelajari di tutorial. Ya, sama aku lagi sulit fokus dan agak lemot aja sih.

Pada dasarnya yang dibahas di sini adalah:

cell = tilemap.local_to_map(position)
data = tilemap.get_cell_tile_data(cell)
tile_data = data.get_custom_data(data_name)
  1. Mengidentifikasi cell (atau satu unit tile) mana pada Tile Map Layer yang ditempati karakter sesuai koordinatnya
  2. Mengambil data yang terkandung pada cell
  3. Mengambil nilai variabel/data kustom tertentu pada cell tersebut

Intinya dengan mengatur variabel di jenis tile tertentu pada tile set, kita bisa bikin karakter player mengalami kondisi tertentu saat menginjaknya. Misal membuat tile rawa-rawa yang memperlambat gerak karakter atau lantai berjalan (conveyor belt) yang menarik karakter ke arah tertentu.

Catatan: di bagian data.get_custom_data(data_name) harus dipastikan bahwa variabel custom data_name ada di Custom Data Layers di tiap Tile Map Layer yang dicek.

Btw kenapa ukuran viewport dan window di Itch.io agak beda ya?

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: 3 – Curve

Saat milih-milih video tutorial, aku baru mikir apa ‘syarat’ tutorial yang mau dipraktekin. Videonya harus pendek, mungkin ga lebih dari 10 menit, karena kalau dipraktekin bakal makan waktu lebih dari itu. Tergantung tingkat kesulitan. Terus, jangan yang terlalu basic, seperti tutorial yang hanya mengenalkan sebuah konsep dasar. Juga jangan yang bikin proyek besar seperti ‘tutorial bikin game genre anu’, kecuali pendek banget. Namun yang jelas sih, harus menarik, bisa dipraktekin, dan bisa ditunjukkin.

Tutorial berikut ini pendek, llummmayan menarik, tapi sebenarnya agak cuma ngenalin konsep. Kalau dianggap tutorial yang ngenalin fitur bisa juga sih. Intinya yang dibahas di sini itu cuma:

curve.sample(sample_point)

Method di atas pada dasarnya seperti memasukkan nilai x pada fungsi polinomial f(x) seperti:

f(x) = x^2 + 2x + x

Jadi kalau kita punya hubungan input-output berupa fungsi polinomial, atau yang bisa digambarkan seperti kurva, daripada nulis code formulanya, mending gambarin aja kurva-nya. Godot punya tipe data (atau node?) bernama Curve yang bisa jadi input di inspector kalau variabelnya dideklarasikan di script. Nantinya kita bisa mengambil satu titik di curve tersebut (sampling) untuk mendapatkan nilai output yang diinginkan.

Jelasnya sih, coba lihat saja videonya:

Ini berguna misalnya buat bikin easing pada animasi yang pakai code atau bikin damage drop off pada game shooter yang mengubah damage senjata tergantung jarak penembak dengan target. Sepertinya banyak implementasinya, tapi belum kebayang banyak.

Tutorial ini lebih ngenalin konsep tingkat menengah jadi ga nuntun dari nol sampai beres. Jadi aku harus mikir sendiri buat nyiapin node dan hal-hal lain yang jadi ‘konteks’ implementasinya. Di video didemoin implementasi pada damage drop off untuk 3D FPS shooter. Karena belum biasa 3D, aku tiru sedikit formulanya dan cuma nampilin ‘damage’ dan ‘jarak’ saat nge-klik area sekitar objek utama.

Btw, aku sempet pakai node Path2D di sini tapi kok rasanya buggy ya? Terutama kalau pakai toolbar buat edit titik-titik path, kadang-kadang si titik ga bisa dihapus dan baru bener lagi kalau restart editor nya.

Juga entah kenapa kalau di versi web/Itch.io, posisi munculnya label lebih jauh dan menyamping meski udah ngeset posisi x nya sama dengan titik klik di layar.

Oh iya, asset dari Kenneys.

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: 2 – Multiplayer Chat

Kali ini pakai tutorial bikin multiplayer chat:

Sepertinya saya masih lumayan banyak kerjaan (?) jadinya hanya berani ambil tutorial pendek. Begitu pun, dan meskipun berhasil mengerjakan tutorial dengan hasil yang sama tambah layouting UI yang lebih enak, saya masih belum berhasil ngulik sampai: Bisa ngirim pesan lewat tekan ‘enter’, bisa bikin klien ngecek keberadaan host sebelum konek, dan bisa dijalanin di Itch.io.

Sepertinya meski tutorial ini mudah diikuti (tanpa perlu paham banget), mungkin ada teknik implementasi chat yang lebih baik, khususnya yang bisa jalan di platform web/HTML 5.

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: 1 – Efek Transisi Cutout

Biar bulan ini ada kegiatan yang (relatif) lebih mudah ditarget dan dicapai. Selama bulan Maret (atau bulan Ramadhan) ini aku coba bikin program menyelesaikan satu tutorial godot dalam setiap hari. Bikin game jadi sambil belajar rasanya stuck mulu. Jadi, anyway, tutorial pertama adalah membuat efek transisi cutout.

Videonya udah lama di-save di watch later YouTube, dan sempat nonton juga. Baru dipraktekkin sekarang. Dan, saya baru nyadar ini adalah tutorial shader yang harusnya agak advance. Yang ini sebenarnya cukup mudah tapi karena baru pertama, wajar kalau salah masukin snippetnya di fungsi vertex padahal harusnya fragment.

Terlepas kebodohan itu, ga salah milih tutorial yang pendek, bisa diikuti (tapi ga terlalu dipahami), buat hari pertama sehingga bisa rada dioprek dikit lagi. Hasilnya bisa dicek di itch.io: