Tag: 1hari1tutorial

Kategori
Devlog/Studlog

1 Hari 1 Tutorial: Hari 31 – Splash Screen Manager

Untuk yang terakhir ini tadinya mau curang dengan pilih tutorial super singkat; cuma ngilangin splash screen. Lagian lagi sibuk lebaran.

Tapi rasanya terlalu singkat dan ternyata ga ngilangin splash screen/pre-loader Godot Engine saat export HTML. Jadinya ngikutin tutorial splash screen manager ini.

Kelihatannya akan berguna kalau kita perlu nampilin banyak splash screen statis yang bisa di-skip pakai input keyboard (dan aku tambahin input mouse juga). Seenggaknya, tutorial ini nunjukin beberapa node yang jarang aku pakai dan fungsi-fungsi tween yang belum aku tahu.

Sedikit tambahan, fungsi _unhandled_input(event) hanya bisa deteksi input keyboard. Entah memang begitu perilakunya atau ada yang perlu di-setting. Kalau diganti jadi _input(event) kita bisa deteksi input tombol mouse.

Aku juga baru nyadar kalau gambarnya agak jagged atau pecah. Entah kenapa. Mungkin karena resize. Kemaren-kemaren rasanya dapat masalah yang sama, tapi rasanya masalahnya beda (dan lupa solusinya). Tapi, sudahlah.

Oke, ini hari terakhir. Lalu apa? Bikin proyek harian dalam kurun waktu seperti ini buatku sudah tidak asing, dan sejauh ini aku selalu berhasil melakukannya. Kurang lebih. Rasanya aku sudah meyakinkan diri bahwa aku bisa konsisten melakukan sesuatu yang rutin dalam jangka waktu tertentu. Mungkin kalau lebih lama lagi lain cerita.

Namun, tantangan yang jarang aku berhasil taklukkan adalah: konsisten menyelesaikan 1 proyek mengikuti timeline. Mungkin kedepannya itu yang harus aku lakukan. Seperti membuat target menyelesaikan game dalam 1 minggu atau 1 bulan dengan GDD dan sebagainya. Ya, sepertinya itu yang akan aku coba.

Akhir kata, taqbbalallahu minnaa wa minkum shiyaamanaa wa shiyaamakum. Semoga shaum kita sebulan terakhir ini diterima. Semoga tutorial-tutorial yang sudah dikerjakan ini tetap diterima di kepala (halah).

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 30 – SoftBody2D Plugin

Tiba-tiba muncul tutorial buat plugin yang bisa bikin objek physics yang bouncy kayak jelly. Kalau ga salah ini bikinan developer game yang pake mekanik softbody gitu dan ngebagiin hasil kerjaannya sebagai plugin. Menarik sih. Seenggaknya ini bisa jadi tutorial pake plugin yang seharusnya bakal sering dilakukan dalam development game.

Hmm… agak sulit dibikin bagus. Yang pertama harus diperhatikan adalah tutorial ini ternyata agak jadul. Plugin SoftBody2D bisa didownload dari AssetLib di editor Godot dan sekarang sudah versi 1.7. Yang di tutorial masih versi 1.4. Jadi apa yang ditunjukin di tutorial kadang ga ngefek atau sesuai di prakteknya.

Beberapa hal yang saya temukan:

  • Texture hanya bisa pakai ImageTexture. Ga bisa pake Atlas. Btw exclude texture untuk bikin objek bolong memerlukan ImageTexture yang ukurannya sama dengan texture utama, tapi hanya menampilkan bagian yang dilubanginya saja. Usahakan ukuran sprite sudah sesuai dengan ukuran objek yang akan dipakai (jangan resize/rescale).
  • SoftBody ini pada dasarnya satu objek dipecah jadi beberapa segmen Rigidbody yang dihubungkan pakai berbagai joint (cek tutorial hari 13). Jadi seberapa bouncy objeknya dan seberapa bagus objeknya kalau bisa rusak/patah, tergantung dari jumlah segmen-segmen tersebut. Ini diatur di properti Vertex Interval di inspector node SoftBody; semakin besar nilainya, semakin sedikit jumlah segmennya, dan akan terlihat semakin padat. Perlu perhatikan juga ukuran objeknya. Btw sepertinya plugin ini lebih optimal pada objek berukuran kecil.
  • Fitur Pickable Rigidbody agak glitchy. Kalau mau pake, coba banyakin segmennya.
  • Tidak seperti yang disebut tutorial, Breakable Object tidak pakai material, tapi dengan ubah properti SoftBody2D > Joint > Break Distance Ratio. Atur-atur biar terlihat bagus.
  • Ngubah nama node bikin error. Seperti segmennya kehilangan reference ke parent node. Setiap ubah nama, coba ubah nilai Vertex Interval.
  • Untuk bikin platform polygon seperti di tutorial, bikin StaticBody2D, lalu kasih child CollisionPolygon2D dan kasih child Polygon 2D. Gambar platformnya di Polygon2D. Kalau sudah, cek inspector di node Polygon2D > Data > Polygon. Klik kanan di nama properti tersebut dan pilih ‘copy value’. Pilih node CollisionPolygon2D, di inspektor bagian Polygon, klik kanan, dan pilih paste value. Harusnya collision yang bentuknya sama .

Selebihnya sih, mending ikutin tutorial di sini: Getting Started | SoftBody2D .. yang baru aku temukan pas lagi ngetik ini.

Yah, ini kasus salah pilih tutorial tapi nanggung udah ngerjain.

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

Asset:
– Kenney Donuts Pack
– Kenney Jumper Pack

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)