Membuat game sokoban dengan defold part 1

Halo..

Balik lagi lanjutin tutorial buat game pake defold, untuk game referensi yang bakalan di buat seperti ini :

untuk kali ini kita akan membuat map, memasukan karakter, serta melakuakn input handling

catatan

Oh iya, artikel ini ada versi video juga. Jika tertarik buat nonton videonya bisa di cek link youtube ini. Dan mungkin artikel dengan video ada perbedaan sedikit, tetapi punya tujuan dan makna yang sama

Assets

Untuk assets sekarang saya tetep menggunakan kenney assets, karena banyak banget assets yang bisa digunakan, selain itu lisensinya bersifat CC0 yang akan buat saya gunakan. Kalian bisa download assetsnya di https://kenney.nl/assets/sokoban

Coding dan Setup

Jika assetsnya udah di download, kalian bisa buat project baru, dan memberikan judul sesuai dengan keinginan kalian dan pindahakan assets yang sudah didownload kedalam foldernya. Disini saya membuat folder baru yang bernama assets. Untuk pengaturannya kurang lebih seperti ini :

note : kalian bebas sebetulnya untuk masalah pengaturan folder dan penamannya

Lalu masukan assetsnya, dan untuk sekarang saya hanya menggunakan “sokoban_tilesheet.png”, dan dimasukan kedalam folder assetsnya.

Tile Source

Klik kanan pada folder “assets” lalu klik new, dan pilih “Tile Source”. Atau kalian bisa menggunakan “Ctrl + N”, pilih “Tile Source”, dan disini saya memberikan nama “game.tilesource” dan meletakannya di dalam folder “assets”.

Pada pane “outline” pilih Tile Source lalu turun ke pane “properties” dan pada variable Image, masukan gambar “sokoban_tilesheet” yang sudah kita pindahkan sebelumnya. Lalu ubah variable “Tile Width” dan “Tile Height” menjadi 64 dan di”Save”.

lalu lanjut pada pane “Outline” klik “anim” dan saya ubah variablenya menjadi “player_border_idle_down”, Start Tilenya 66 dan End Tilenya 66, dan “save”.

Tile Map

Setelah selesai dengan part diatas, kita lanjut lagi membuat Tile map. Sama seperti sebelumnya kita membuat tile source, dengan menekan “Ctrl + N”, pilih “Tile Map”, dan disini saya memberi beri nama level1.tilemap, dan menyimpanya pada folder “assets”.

Setelah itu masukan Tilesource yang sudah kita buat, saya membuat layer baru dengan nama “front”, setelah itu ubah variable “Z” menjadi 0.2 (Setau saya, Camera hanya bisa merender z dari 0 ~ 1).

lalu pada layer “ground” saya mulai menggambar ubinya yang berwarna abu2, dengan cara klik “Space” lalu zoom out di pane editor. Disini saya melakukannya hingga cell 11,7. Jika terjadi kesalahan dan ingin menghapus, bisa “Crtl+E” dan mulai menghapus tile yang tidak diinginkan.

Lalu lanjut dengan layer “front” dan mau tutupi atasnya dengan box-box di ujung layarnya.

Main Collection

Kita buka folder main, dan klik 2x pada “main.collection”. Kurang lebih sama seperti “scene” pada unity atau “node” pada godot engine, dimana kita meletakan gameobject didalamnya. Pada pane outline klik kanan dan tambahkan “gameobject” didalamnya atau klik “A”. Lalu ubah nama gameobject yang defaultnya “go” menjadi “map”. Lalu klik kanan kembali pada gameobject “map”, dan pilih “add component file”, dan masukan “level1.tilemap” untuk levelnya.

Kembali ke pane Outline dan buat gameobject baru dan beri nama “player”, lalu berikan component “sprite”. Lalu pane properties(pastikan pada component sprite), ubah variable Image dengan memilih “game.tilesource” sebagai sumber imagenya, dan variable default animation menjadiu “player_border_idle_down”.

Kalian akan melihat bahwa posisi “player” berada dibawah dari map yang sudah buat. Ubah properties pada gameobject “player” variable z menjadi 0.2 (Ini diatas posisi z dari layer “ground” pada “level1.tilemap”)

Maka tampilannya akan kurang lebih seperti ini

Atur player dan scripting

Jika udah semuanya sekarang kita coba atur playernya untuk bisa bergerak. Pertama buka folder input, dan klik 2x pada “game.input_binding”. Tambahkan inputnya menjadi seperti ini.

Part terakhir untuk tutorial sekarang adalah membuat script. Sebelumnya saya membuat folder baru bernama “script” yang nantinya folder tersebut menjadi tempat menaruh script yang akan di buat. klik “new” pada folder script atau bisa “Ctrl + N” dan pilih “Script”. Hanya “script” yah, bukan “Gui script” ataupun “Render Script”.

Disini saya memberi nama scriptnya “player_movement.script”, dan bisa tulis ulang seperti script dibawah :

function init(self)
	msg.post(".", "acquire_input_focus")
end

function on_input(self, action_id, action)
	if (action_id == hash("left") and action.pressed ) then
		local pos = go.get_position(".")
		pos.x = pos.x - 10
		go.set_position(pos)
	elseif (action_id == hash("right") and action.pressed) then
		local pos = go.get_position(".")
		pos.x = pos.x + 10
		go.set_position(pos)
	elseif (action_id == hash("up") and action.pressed) then
		local pos = go.get_position(".")
		pos.y = pos.y + 10
		go.set_position(pos)
	elseif (action_id == hash("down") and action.pressed) then
		local pos = go.get_position(".")
		pos.y = pos.y - 10
		go.set_position(pos)
	end
end

pada function init kita memberikan informasi bahwa gameobject dengan script ini akan menerima inputan dari user. Dan pada function on_input, dimana kita mengatur saat klik left kita mengubah posisi player pindah -10 pixel dari posisi sebelumnya, dan begitu seterusnya.

Jika sudah terakhir kita buka game.project lalu pada “Bootstrap” pastikan sudah mengacu pada “main.collection” yang kita buat. Jika belum maka pilih collection yang sudah dibuat yah.

Jika sudah selesai coba gamenya dengan klik “F5”, dan coba klik tombol arrow untuk memindahkan playernya.

Kalian bisa mengatur displaynya kembali jika tidak sesuai. Disini saya mengatur menjadi 640x480

Penutup

Wah sepertinya cukup panjang kali ini. Tapi disini saya berharap kalian bisa menyelesaikannya. Sejauh ini kita udah melakuan

1. Add image dan membuat resource tilesource
2. Membuat tilemap
3. Membuat gameobject pada collection dan memasukan component pada gameobject tersebut
4. Mengatur input dan membuat code untuk playernya serta berinteraksi pada input dari user.

Jika kalian ingin membandingkan code yang kalian buat dengan code yang saya buat, bisa di cek link github berikut. atau kalian bisa mendownloadnya.

Okeh sekian dari saya, jika ada pertanyaan ataupun kendala terhadap tutorial diatas, kalian bisa comment disini ataupun di youtubenya.