Unity Platformer Tutorial [Part 4]

 

Ini adalah tutorial lanjutan dari part ke-3

Di dalam part 4, kamu akan menambahkan koin yang dapat diambil oleh pemain.

 

Menambahkan Koin

coin.png

Uploadlah gambar diatas ke Unity.
Seperti biasa, buatlah sebuah object kosong di dalam "tiles" bernama "coins". Buat objek koin di dalamnya.
Kemudian tambahkan komponen "Circle Collider 2D" dan ubah nilai Radius menjadi 0.3, jangan lupa untuk mencantum "Is Trigger". Buatlah prefabnya seperti biasa.

Kemudian buatlah sebuah script bernama "CoinScript" seperti berikut:

Tambahkanlah script itu ke prefab coin.
Karena script itu dimasukkan ke prefab koin, ia akan menghapus koin yang disentuh objek yang tagnya adalah "Player" (penggunaan huruf besar berpengaruh).
Sebelum dicoba, kita perlu mengubah tag si player dari "Untagged" menjadi "Player".

Sekarang, player sudah bisa mengambil koin-koin yang berada di level.

Tetapi ada yang kurang, koin langsung menghilang ketika diambil si player. Marilah kita tambahkan efek dengan mengubah script "CoinScript" menjadi seperti ini:

Di script ini kita menambahkan sebuah fungsi IEnumerator, saya menggunakan fungsi ini karena garis kode yield return null; tidak dapat ditulis di dalam fungsi biasa. Garis kode itu menunggu satu frame.

Unity Platformer Tutorial [Part 3]

Dari part 2, kita akan lanjut ke part 3. 

Di dalam tutorial part 3 ini, kamu akan:
    - menggunakan platform effector,
    - menambahkan platform air,
    - membuat player menyelam di air,
    - menambahkan awan dan matahari,
    - menggunakan sorting layer,
    - dan menghias level.

Tutorial part 3 ini memerlukan waktu kurang lebih 45 menit.

Menggunakan Platform Effector

Kalau kamu menekan tombol panah atas dan panah kanan di waktu yang sama, ketinggian melompat si player tidak sama, terkadang lebih rendah:

Untuk mengatasi ini, tambahkanlah komponen Platform Effector 2D ke "ground" dan "ground grass". Ubah nilai One Way -> Use One Way dari true menjadi false.
Juga ubah komponen Box Collider 2D; cantumkan Used by Effector.
Tapi ingat, kita hanya perlu mengubah prefabnya saja. Inilah yang saya lakukan:

Selesai.

Menambahkan Platform Air

Sekarang hanya ada platform tanah/rumput, mari kita tambahkan platform air.
Download file berikut:

water top.png

water.png

Upload file-file itu ke Unity (bagian Projects, folder "Sprites"). Jangan lupa untuk mengubah Pivot dan Wrap Mode, seperti yang kita lakukan di part 1.

Kemudian "Create Empty" untuk "water" dan "water top", seperti yang kita lakukan di part 1.
Buat prefabnya (drap and drop ke bagian Projects, folder "Prefabs").
Ubahlah nilai "Color" dari komponen Sprite Renderer menjadi agak transparan, (dengan mengklik kotak putih) supaya player tetap terlihat ketika berada di air:

Kemudian tambahkan komponen Box Collider 2D dan komponen Buoyancy Effector 2D. Jangan lupa untuk mencantum "Is Trigger" dan "Used by Effector" di komponen Box Collider 2D.
Kurang lebih seperti berikut:

Buatlah sebuah kolam/danau dengan menduplikat dan mengopi platform-platform itu (di Hierarchy).
Jangan lupa untuk men-snap platform-platform itu. (Edit -> Snap Settings...)

Harusnya player akan mengapung di permukaan air, dan ia akan bisa keluar lewat samping:

Player mengapung di air

Membuat Player Menyelam di Air

Kita akan membuat player menyelam ke bawah kalau tombol panah bawah sedang ditekan, dan kalau player sedang berada di air.

Untuk melakukan ini, kita perlu mengubah script Player.cs menjadi:

Player.cs

Penjelasan Script

Kita tambahkan variabel whatIsWater (LayerMask) dan onWater (bool).
Variabel ini digunakan seperti di part 2 (untuk mencek ketika sedang menyentuh tanah), tetapi kali ini untuk mencek ketika sedang menyentuh air.
Kenapa -jumpforce / 2? Nilai ini tidak berpengaruh kalau kamu mau mengubahnya, tetapi nilai ini harus dibawah 0 supaya player bergerak ke bawah.

Setelah itu, kita perlu mengubah layer prefab "water top" dan "water" menjadi "Water":

Tips: Kalau sedang berada di sebuah GameObject (yang memiliki prefab), kamu bisa mengklik tombol "Select" untuk pindah ke prefabnya:

Selesai! Harusnya player bisa menyelam ketika tombol panah bawah sedang ditekan, seperti:

Player menyelam

Menambahkan Awan dan Matahari

Mulailah dengan menambahkan awan.
Download file ini: (awan berwarna putih)

clouds.png

Dan seperti biasa, upload gambar itu ke Unity (folder Sprites), tetapi kali ini kita hanya ubah nilai Wrap Mode, karena kita tidak akan men-snap awan-awan ini.
Juga ubah nilai "Sprite Mode" dari "Single" menjadi "Multiple". Klik tombol "Apply", kemudian klik tombol "Sprite Editor".
Sebuah Window baru akan terbuka. Di kiri-atas, klik Slice -> tombol Slice, dan klik Apply.
Seperti berikut:

Di bagian Hierarchy, Create Empty dan beri nama "decorations". Di dalam decorations, Create Empty sekali lagi dan beri nama "clouds". Kemudian buatlah 3 GameObject: clouds_0, clouds_1, dan clouds_2. Buatlah sebuah prefab untuk setiap awan:

Sekarang, di bagian "Game", awan berada di depan level dan player.

Untuk memindahkannya ke belakang, kita hanya perlu untuk mengubah nilai posisi Z menjadi sebuah angka yang lebih besar dari 0:

Kemudian ubahlah Main Camera > komponen Camera > nilai Projection dari "Orthographic" menjadi "Perspective" supaya awan terlihat agak jauh. Seharusnya ukuran awan di bagian "Game" menjadi lebih kecil, ini terjadi karena awan menjadi terlihat jauh.

Tips: Ubah posisi Z awan menjadi angka yang berbeda-beda untuk mendapatkan sebuah efek yang menarik. Posisi Z bisa diisi dengan angka yang tidak bulat.

Mungkin kamu mau awan yang agak transparan, ubahlah prefab-prefab awan itu menjadi agak transparan seperti yang kita sudah lakukan ke platform air.
Perbanyak awan-awan itu kalau kamu mau, kamu juga bisa mengubah ukurannya.

Sekarang, kita akan menambahkan matahari. Matahari ini akan dibuat dari beberapa lingkaran dengan warna dan ukuran yang berbeda.
Mulailah dengan membuat sebuah GameObject kosong di dalam decorations bernama "sun".
Ubah posisi Z menjadi sebuah angka yang lebih kecil dari awan-awan, supaya matahari berada di belakang. Posisi Z matahari saya adalah 20.
Kemudian di bagian Projects, folder Sprites, klik kanan dan pilih Create > Sprites > Circle, beri nama "circle".
Buatlah GameObject yang bernama circle 1, 2, 3, dan 4. Seperti:

Ubahlah ukuran dan warna lingkaran-lingkaran itu. Berikut adalah nilai-nilai yang saya gunakan:

circle 1:
Scale: x = 18.5, y = 18.5
Color: #FFAD2564

circle 2:
Scale: x = 26, y = 26
Color: #FFAD1E66

circle 3:
Scale: x = 12.5, y = 12.5
Color: #FFAD28FF

circle 4:
Scale: x = 33.5, y = 33.5
Color: #FFAD1E49

Menggunakan Sorting Layer

Setelah kita mengubah Camera menjadi perspektif, ketika player masuk ke air, player berada di depannya:

Ini terjadi karena kita membuat player sebelum kita membuat air.
Untuk memindahnya kedepan, kita perlu mengubah Sorting Layer untuk mengubah urutan air dan si player.
Untuk melakukan itu, buatlah dua Sorting Layer dengan mengklik Edit -> Project Settings -> Tags and Layers, kemudian di bagian Inspector tambahkan 2 sorting layer bernama "Player" dan "InFrontOf Player".

Ubah nilai Sorting Layer si player (komponen Sprite Renderer) dari "Default" menjadi "Player". Ubah juga nilai Sorting Layer prefab water dan water top menjadi "InFrontOf Player".

Harusnya player berada dibelakang air:

Menghias Level

Kita akan menghias level dengan gambar berikut:

flower.png

tree.png

Upload gambar-gambar itu seperti ketika kita mengupload blok air.
Di bagian Hierarchy, gameobject "decorations", buatlah sebuah object kosong yang bernama "flowers" dan "trees".
Kemudian buat object "flower" di dalam object "flowers" dan buatlah object "tree" di dalam object "trees". Setelah itu buatlah prefabnya.
Kalau agak bingung, lihat gambar berikut:

Hiasi level kamu dengan menaruh dan menduplikat bunga-bunga dan pohon-pohon di tempat yang berbeda beda. Kamu juga bisa menggunakan ukuran yang berbeda-beda.

Tips: Ketika sedang mengubah ukuran sebuah object, tekan tombol Shift supaya perbandingan antara tinggi dan lebarnya sama.

Hiasan-hiasan ini akan otomatis berada di belakang player. Kalau kamu mau ada bunga atau pohon yang berada di depannya, gunakan sorting layer. Ubah nilai sorting layernya menjadi "inFrontOf Player".

Bunga-bunga ini memiliki sorting layer yang berbeda

Part 3 selesai. Namun masih ada part 4.

Unity Platformer Tutorial [Part 2]

 

Ini adalah tutorial lanjutan dari part 1. Di tutorial part 2 ini, kamu akan membuat player melompat, menggerakkan camera, dan membuat sebuah prefab.

Tutorial part 2 ini memerlukan waktu minimal 30 menit.

Membuat Player Melompat

Kamu bisa mencoba untuk membuat player melompat dengan cara yang sama seperti kita menggerakkan player ke kiri dan ke kanan:
 

Script ini tidak akan digunakan

Script diatas dapat membuat player melompat, tapi script itu membolehkan player untuk terbang.
Player jadi bisa terbang, karena selama kamu menekan tombol panah atas (up arrow), ia akan men-set velocity y menjadi 7.
Harusnya, player hanya bisa melompat kalau sedang menyentuh tanah.
Jadi pseudocode dari script yang akan kita tambahkan adalah:
Kalau tombol panah atas sedang ditekan dan player sedang menyentuh tanah, maka ubah nilai velocity y menjadi 7.
Tetapi bagaimana kita mengecek kalau player sedang menyentuh tanah?
Untuk melakukan itu, kita akan membuat sebuah "sensor" yang mengikuti player, seperti berikut:

Sensor diletakkan dibawah player

Sensor ini tidak akan terlihat.

Mulailah dengan membuat sebuah GameObject kosong (Hierarchy -> Create -> Create Empty) bernama "player ground sensor".
Kemudian buatlah sebuah script untuk sensor ini bernama "FollowPlayer". Script ini akan membuat sensor itu mengikuti si player:

FollowPlayer.cs

Kemudian, ubah nilai y Offset dari komponen Follow Player (Script) dari "player ground sensor" menjadi -0.5, supaya sensor tidak mengikuti pivot/center (tengah) si player, tetapi 0.5 unit dibawahnya.

Posisi sensor = Posisi player - 0.5

Sekarang, sensor sudah ada, dan sudah mengikuti si player.
Yang kurang adalah scriptnya yang mengecek kalau player sedang menyentuh tanah atau tidak. Kita hanya perlu mengubah script Player.cs saja.

Mulailah dengan mendeklarasi variabel-variabel seperti berikut (ke script Player.cs):

groundSensor adalah sebuah variabel yang akan diisi menjadi sebuah sensor yang akan kita buat nanti.
groundSensorRadius adalah ukuran radius si sensor dengan nilai standar 0.1f.
jumpforce adalah tenaga untuk melompat dengan nilai standar 7.

whatIsGround adalah sebuah variabel yang akan diisi dengan layer "Ground" nanti.

Layer player adalah Default

Nanti, layer "ground" dan "ground grass" akan diubah menjadi sebuah layer baru yang dinamai "Ground".

onGround adalah sebuah variabel bertipe boolean, yang nanti akan kita atur supaya nilainya menjadi true ketika sensor sedang menyentuh tanah, dan false ketika sensor tidak menyentuh tanah.

Sekarang, kita akan mengubah fungsi Update () di script Player.cs menjadi seperti berikut:

Penjelasan Script

if (Input.GetKey (KeyCode.UpArrow) && onGround) {
If Statement ini menjadi true kalau tombol panah atas sedang ditekan dan player sedang menyentuh tanah.

onGround = Physics2D.OverlapCircle (groundSensor.position,  groundSensorRadius, whatIsGround);
Baris kode ini mengubah nilai onGround menjadi true kalau si sensor sedang menyentuh sebuah GameObject yang layernya adalah whatIsGround, dan false kalau sensor tidak menyentuh sebuah GameObject yang layernya adalah whatIsGround.

Sekarang, kita perlu mengubah layer "ground" dan "ground grass" menjadi Ground.
Sebelum itu, kita perlu membuat layer baru. Klik sebuah GameObject dan klik Layer -> Add Layer..., kemudian tambahkan sebuah layer bernama "Ground", seperti ini:

Membuat sebuah Layer "Ground"

Ubah layer "ground" dan "ground grass" dari "Default" menjadi "Ground" seperti ini:

Sekarang, di Unity, ubah komponen Player (Script) dari GameObject player menjadi seperti ini:

(drag-and-drop si sensor dari bagian Hierarchy ke variabel Ground Sensor)

Selesai! Mestinya si player sudah bisa melompat.

Menggerakkan Camera

Bagaimana caranya untuk menggerakkan camera supaya camera mengikuti player?
Caranya sangat mudah, tambahkan script FollowPlayer ke Main Camera.
Mestinya Camera akan mengikuti player ketika game di play, tetapi camera akan berubah menjadi langit semua, seperti ini:

Ini terjadi karena posisi z Main Camera adalah 0, yang harusnya adalah -10.
Kita harus mengubah script FollowPlayer.cs menjadi seperti ini:

FollowPlayer.cs

Kita menambahkan sebuah variabel publik zOffset dan mengubah Vector2 menjadi Vector3.

Setelah itu ubah nilai z Offset dari komponen Follow Player (Script) dari Main Camera menjadi -10. Sekarang, mestinya Camera sudah mengikuti player dengan benar.

Membuat Prefab Untuk Platform

Sebuah prefab adalah sebuah GameObject dengan properti yang telah ditentukan. Kamu bisa men-drag sebuah prefab ke bagian Hierarchy seperti kamu telah men-drag sebuah sprite ke bagian Hierarchy, tetapi mereka akan memiliki semua komponen dan nilai yang sudah jadi.

Kamu bisa membuat sebuah prefab dengan men-drag sebuah GameObject dari bagian Hierarchy ke bagian Projects.
Kamu juga bisa mengubah sebuah prefab seperti kamu mengubah sebuah GameObject, tetapi bedanya adalah semua GameObject yang mengikuti si prefab ini juga akan berubah. Ini adalah kelebihan prefab dari GameObject biasa.

Buatlah sebuah folder bernama "Prefabs" (di bagian Projects).
Kemudian, buatlah sebuah prefab untuk "ground" dan "ground grass" seperti berikut:

Seperti yang kamu lihat di atas, GameObject yang men-referensikan sebuah prefab warnanya menjadi biru. Tapi ground (1), ground (2), dll warnanya belum biru.
Yang harus kamu lakukan adalah menghapus semua GameObject yang belum men-referensikan sebuah prefab, seperti ini:

Setelah itu kamu bisa membuat level lagi dengan mengopi atau menduplikat blok-blok itu.

Selanjutnya silahkan lanjutkan ke part 3!

 

Unity Platformer Tutorial [Part 1]

Di tutorial part 1 ini, kamu akan membuat sebuah level, menambahkan player, menggerakkan player, dan mengubah warna latar belakang.

Part 1 ini memerlukan waktu minimal 30 menit.

Preview dari game yang akan dibuat

Di tutorial ini, versi Unity saya adalah 5.5.4, menggunakan Dark Theme.
Untuk menginstall unity, ikuti bagian "Menginstall Unity" di artikel ini.

Membuat Sebuah Level

Level adalah sebuah lingkungan/tempat dimana pemain harus melakukan sesuatu untuk melanjutkan ke level yang berikutnya.

Download file berikut:

ground.png

ground grass.png

Upload gambar-gambar ini ke Unity. Supaya file-file kamu rapi, di bagian "Projects", masukkan gambar-gambar itu ke sebuah folder bernama "Assets". Kamu juga akan membuat folder bernama "Scene" yang akan membuat game per level (Lihat pada gambar di bawah).

Select gambar-gambar itu ("ground" dan "ground grass") di bagian Projects.
Di Inspector, ubahlah nilai Pivot menjadi "Bottom Left", dan Wrap Mode menjadi "Clamp".
Klik Apply.

Mengapa kita ubah nilai Wrap Mode? Supaya gambar (di bagian Game) menjadi lebih bagus.

Perhatikan garis hijau di gambar Wrap Mode: Repeat

Kemudian buatlah sebuah GameObject (Hierarchy -> Create -> 2D Object -> Sprite) dan berikan sebuah nama "ground" dengan mengubah nama New Sprite di Inspector atau mengklik satu kali di bagian Hierarchy. Di Inspector -> Sprite Renderer, ubahlah nilai Sprite menjadi ground.png.
Lakukan yang sama untuk ground grass.png, buat sebuah sprite baru.

Tips: Selain cara di atas, kamu bisa men-drag gambar-gambar itu ke bagian Hierarchy, sebuah Sprite akan otomatis dibuat oleh Unity. (jangan men-drag dua gambar sekaligus)

Jangan lupa untuk men-save scene (Ctrl+S), berikan nama "Level 1", kemudian masukkan scene itu ke folder "Scenes".

Tambahkan Box Collider 2D ke sprite-sprite itu dengan mengklik tombol "Add Component" di bagian Inspector. Pilih Box Collider 2D.

Setelah itu, buatlah sebuah level kecil dengan men-copy sprite-sprite itu dan memindahkannya di bagian Scene.
Tip: Jangan bikin level yang terlalu besar, karena nanti level yang telah dibuatakan dihapus di part 2.

Keyboard shortcuts:
Ctrl+C = Copy
Ctrl+V = Paste
Ctrl+D = Duplicate

Memindahkan blok-blok itu tidak harus rapi, karena di Unity ada sebuah fitur otomatis. Pilih sprite-sprite yang akan dirapihkan, klik Edit -> Snap Settings... dan sebuah window kecil akan muncul. Klik "Snap All Axes".

Sekarang, mari kita rapikan blok-blok itu (Ground dan Ground grass).
Pertama, klik Create -> Create Empty, kemudian ubah namanya menjadi "tiles".
Di Inspector, ubah posisi X dan Y menjadi 0.
Right-klik tiles dan pilih "Create Empty", beri nama "Ground".
Di tiles, Create Empty sekali lagi, beri nama "Ground grass".
Masukkan "ground (...)" ke "Ground", dan "ground grass (...)" ke "Ground grass", seperti ini:

Menambahkan Player

Sekarang, mari kita tambahkan sebuah player. Download gambar berikut:

player.png

Masukkan gambar itu ke folder "Assets" (bagian Project).
Buat sebuah GameObject untuk player di bagian Hierarchy. Tambahkan komponen Circle Collider 2D dan Rigidbody 2D (di bagian Inspector, Add Component). Periksa bagian Hierarchy, dan pastikan player tidak ada di dalam GameObject "tiles".

Harusnya Unity kamu kurang lebih sama dengan gambar berikut:

Klik play. Player akan jatuh karena di komponen Rigidbody 2D ada gravitasi.
Player akan berhenti ketika player menyentuh sebuah blok, karena player dan blok itu memiliki sebuah Collider 2D.
Tips: Kalau kamu mau mengubah sesuatu, jangan lupa untuk keluar dari playmode dengan mengkik tombol play, karena membuat perubahan di playmode tidak akan tersimpan.

Menggerakkan Player

Yang harus kita lakukan untuk menggerakkan player adalah membuat sebuah script.
Di bagian Project, buat sebuah folder "Scripts". Right-klik folder itu dan pilih Create -> C# Script, namakan script itu "Player".
Tambahkan script itu ke GameObject "player". (Di bagian Inspector, klik Add Component -> cari "Player")
Kemudian double-klik script itu, dan mestinya MonoDevelop akan terbuka kalau versi Unity kamu adalah 5.x.x. Tapi kalau versi Unity kamu adalah 2018.x.x, mestinya yang terbuka adalah Visual Studio.

Isi script itu mestinya seperti ini:

Player.cs

Isi script ini adalah default, Unity akan otomatis membuat sebuah kode seperti di atas.
Fungsi Start () adalah sebuah fungsi yang akan otomatis dipanggil oleh Unity ketika game kamu dimulai.
Fungsi Update () adalah sebuah fungsi yang akan otomatis dipanggil setiap frame.
Mari kita ubah script itu menjadi seperti berikut:

Player.cs

Save script itu (Ctrl+S) dan run Unity. Harusnya player bergerak ke kanan.

Penjelasan Script

Awalnya, kita mendeklarasi variabel rb dengan tipe "Rigidbody2D" dan variable movespeed dengan tipe "int" dan nilai standar 1.
Kemudian, di dalam fungsi Start (), kita mengambil komponen Rigidbody 2D dari player (GameObject) ke variabel rb. (karena script ini ada di komponen GameObject player)

Nilai variabel rb akan menjadi komponen Rigidbody2D dari player

Di dalam fungsi Update (), kita menambahkan nilai x dari "velocity" dari variabel rb dengan movespeed. Kemudian kita membagi nilai x dari "velocity" dari variabel rb dengan 1.2, supaya player tidak bergerak terlalu "licin".

Sekarang, player sudah bergerak. Tapi kita mau menggerakkan player dengan menekan tombol keyboard.
Kita perlu menggerakkan player ke kanan jika tombol panah kanan ditekan, dan ke kiri jika tombol panah kiri ditekan.
Untuk melakukan itu, kita dapat menggunakan beberapa statemen if di script player.
Edit script Player.cs menjadi seperti berikut:

Player.cs

Harusnya kamu bisa menggerakkan player dengan menekan tombol keyboard.
Kita akan membuat player melompat di Part 2.

Mengubah Ukuran Player

Player akan tersangkut di antara dua blok yang berdekatan:

Ini terjadi karena ukuran player sama persis dengan blok-blok itu. Untuk mengatasinya, kita perlu mengubah ukuran si player.
Ubah komponen Transform dari player, Scale X dan Scale Y menjadi 0.95, seperti gambar berikut:

Selesai!

Mengubah Warna Latar Belakang

Untuk mengubah warna latar belakang, kita ubah Main Camera -> komponen Camera -> nilai Background menjadi sebuah warna yang kamu sukai.

Warna yang saya gunakan adalah #81D5FF00

Kalau game kamu kurang lebih adalah seperti ini, kamu sudah selesai!

Kalau belum, periksa script Player.cs dan Unity.
Mungkin script kamu belum di save, atau ada sebuah langkah yang belum dilakukan, atau ada sebuah kesalahan lainnya.

Silahkan tinggalkan sebuah komentar kalau ada masalah atau ada sesuatu yang kurang jelas. 

Silahkan klik di sini untuk Part 2