Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Development
Gamedevelopment

Game 'Sokoban' Berbasis Ubin 2D-Isometrik dan Heksagonal

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini, kita akan mengubah game Sokoban berbasis ubin 2D konvensional menjadi tampilan isometrik dan heksagonal. Jika anda baru mengenal game isometrik atau heksagonal, anda mungkin akan kesulitan mengikuti keduanya secara bersamaan. Dalam hal ini, saya sarankan anda memilih isometrik terlebih dahulu dan kemudian kembali lagi ke tahap selanjutnya untuk versi heksagonal.

Kita akan bekerja di atas panduan seri tutorial sebelumnya: Game Sokoban berbasis Ubin 2D. Anda dapat membuka kembali tutorial pertama karena sebagian besar kodenya tidak berubah dan semua konsep inti yang digunakan adalah sama. Saya juga akan mengaitkan ke tutorial lain yang menjelaskan beberapa konsep dasar.

Aspek ter penting dalam membuat 2D versi isometrik atau heksagonal adalah mengetahui posisi elemen. Kita akan menggunakan metode konversi berdasarkan persamaan untuk mengonversi berbagai sistem koordinat.

Tutorial ini memiliki dua bagian, diantaranya bagian satu untuk versi isometrik dan bagian dua untuk versi heksagonal.

1. Game Sokoban Isometrik

Mari kita pelajari lebih dalam tentang versi isometrik ketika anda selesai membaca tutorial aslinya. Gambar di bawah ini menunjukkan versi isometrik yang akan terlihat selama kita menggunakan informasi yang sama dengan tutorial aslinya.

the isometric version of the sokoban level

Tampilan Isometrik

Teori isometrik, persamaan konversi, dan implementasi dijelaskan dalam beberapa tutorial di Envato Tuts+. Penjelasan berbasis Flash sebelumnya dapat ditemukan dalam tutorial terperinci ini. Saya akan merekomendasikan tutorial berbasis Phaser ini karena futuristik dan lebih baru.

Meskipun bahasa scripting yang digunakan dalam tutorial tersebut masing-masing adalah ActionScript 3 dan JavaScript, namun teori ini berlaku dimanapun terlepas dari bahasa pemrogramannya. Intinya bermuara pada persamaan konversi yang akan digunakan untuk mengubah koordinat Cartesian 2D menjadi koordinat isometrik atau sebaliknya.

Kita akan menggunakan fungsi Unity berikut untuk konversi ke koordinat isometrik.

Perubahan dalam Seninya

Kita akan menggunakan informasi pada level yang sama untuk membuat 2D array dan levelData. Informasi tersebut akan mendorong representasi isometrik. Sebagian besar kode juga akan sama, kecuali kode yang spesifik untuk tampilan isometrik.

Namun, sisi seninya perlu ada beberapa perubahan berkaitan dengan titik pivot. Silakan lihat gambar dan penjelasan berikut ini.

isometric sprites and their offsets

Script game IsometricSokoban menggunakan sprite yang dimodifikasi sebagai heroSprite, ballSprite, dan blockSprite. Gambar menunjukkan titik pivot baru yang digunakan untuk sprite ini. Perubahan ini memberikan tampilan pseudo 3D yang kita bidik dengan tampilan isometrik. BlockSprite adalah sprite baru yang kita tambahkan saat menemukan invalidTile.

BlockSprite akan membantu saya menjelaskan aspek terpenting dari game isometrik, yaitu depth sorting. Meskipun sprite hanya segi enam, namun kita menganggapnya sebagai sebuah kubus 3D sehingga pivot terletak di bagian tengah dari permukaan bawah kubus.

Perubahan Kode

Silakan unduh kode yang dibagikan melalui repositori git yang terhubung sebelum melanjutkan kembali. Metode CreateLevel memiliki beberapa perubahan yang berhubungan dengan skala dan posisi ubin serta penambahan blockTile. Skala tileSprite yang hanya berupa gambar berbentuk berlian mewakili ubin dasar dan perlu diubah seperti berikut ini.

Hal ini mencerminkan fakta bahwa ubin isometrik akan memiliki tinggi setengah dari lebarnya. HeroSprite dan ballSprite memiliki ukuran sebesar ukuran tileSize/2.

Di mana pun kita menemukan invalidTile, kita menambahkan blockTile menggunakan kode berikut.

Heksagon perlu diskalakan secara berbeda untuk mendapatkan tampilan isometrik. Hal ini tidak menjadi masalah saat seni ditangani oleh seniman. Kita menerapkan nilai alpha yang sedikit lebih rendah ke blockSprite sehingga kita bisa melihatnya. Hal tersebut memungkinkan kita untuk melihat depth sorting secara benar. Perlu diperhatikan bahwa kita juga menambahkan ubin ini ke occupants dictionary yang kemudian akan digunakan untuk depth sorting.

Penempatan ubin dilakukan menggunakan metode GetScreenPointFromLevelIndices yang pada gilirannya menggunakan metode konversi CartesianToIsometric seperti pada penjelasan sebelumnya. Sumbu Y di arah yang berlawanan untuk Unity perlu dipertimbangkan sambil menambahkan middleOffset ke level posisi tengah layar.

Pada akhir metode CreateLevel dan TryMoveHero, kita menggunakan metode DepthSort. DepthSorting adalah aspek terpenting dari implementasi isometrik. Intinya, kita menentukan ubin mana yang berada di belakang atau depan ubin lainnya pada level tersebut. Metode DepthSort adalah seperti yang ditunjukkan berikut ini.

Kelebihan dari implementasi 2D array adalah kita hanya perlu melakukan depth sorting yang lebih tinggi secara berurutan saat kita mengurai melalui level secara berurutan menggunakan loop sekuensial untuk depth sorting isometrik yang tepat. Hal ini bekerja untuk level sederhana dengan satu lapisan dasar. Jika kita memiliki beberapa level dasar di berbagai ketinggian, maka depth sorting dapat menjadi rumit.

Hal lainnya tetap sama seperti implementasi 2D yang dijelaskan tutorial sebelumnya.

Level Selesai

Anda bisa menggunakan kontrol keyboard yang sama untuk memainkan game. Satu-satunya perbedaan adalah sang hero tidak akan bergerak secara vertikal atau horizontal namun ia bergerak secara isometrik. Level selesai akan terlihat seperti gambar di bawah ini.

Isometric version finished level

Simak bagaimana depth sorting terlihat jelas dengan blockTiles yang baru.

Hal tersebut tidak sulit bukan? Saya mengajak anda mengubah level data di file teks untuk mencoba level baru. Selanjutnya adalah versi heksagonal yang sedikit lebih rumit. Saya menyarankan anda beristirahat sejenak dari versi isometrik sebelum melanjutkan ke versi heksagonal.

2. Game Sokoban Heksagonal

Versi heksagonal dari level Sokoban akan terlihat seperti gambar di bawah ini.

hexagonal sokoban level

Tampilan Heksagonal

Kita menggunakan deretan horizontal untuk grid heksagonal pada tutorial ini. Teori dibalik implementasi heksagonal membutuhkan banyak bacaan lebih lanjut. Silakan lihat seri tutorial ini untuk pemahaman dasar. Teori ini diimplementasikan di helper class HexHelperHorizontal yang bisa ditemukan di folder utils.

Konversi Koordinat Heksagonal

Script game Sokoban Heksagonal memanfaatkan kemudahan dari helper class untuk konversi koordinat dan fitur heksagonal lainnya. Helper class HexHelperHorizontal hanya akan bekerja dengan grid heksagonal yang sejajar secara horizontal. Helper class ini mencakup metode untuk mengubah koordinat antara sistem offset, aksial, dan kubik.

Koordinat offset sama dengan koordinat Cartesian 2D. Koordinat offset juga mencakup metode getNeighbors yang menerima koordinat aksial dan mengembalikan List<Vector2> dengan keenam Neighbors dari koordinat sel tersebut. Urutan daftar akan searah jarum jam yang dimulai dengan koordinat sel bagian timur laut.

Perubahan dalam Kontrol

Dengan grid heksagonal, kita memiliki enam arah gerakan dan bukan hanya empat gerakan karena segi enam memiliki enam sisi sedangkan persegi memiliki empat sisi. Jadi, kita memiliki enam tombol keyboard untuk mengendalikan pergerakan hero kita, seperti yang ditunjukkan pada gambar di bawah ini.

Hexagonal keyboard control keys

Kunci diatur dalam tata letak yang sama seperti kotak heksagonal apabila anda menganggap tombol keyboard S sebagai sel tengah dengan semua tombol kontrol sebagai heksagonal neighbors. Hal ini membantu anda mengurangi kebingungan dengan mengendalikan gerak. Perubahan yang sesuai dengan kode input adalah seperti di bawah ini.

Tidak ada perubahan dalam seni maupun pivot yang diperlukan.

Perubahan Lainnya pada Kode

Saya akan menjelaskan perubahan kode yang berhubungan dengan tutorial Sokoban 2D asli (bukan versi isometrik di atas). Silakan merujuk ke kode sumber terkait untuk tutorial ini. Fakta yang paling menarik adalah hampir semua kodenya sama. Metode CreateLevel hanya memiliki satu perubahan, yaitu perhitungan middleoffset.

Salah satu perubahan besar yang jelas adalah cara koordinat layar ditemukan dalam metode GetScreenPointFromLevelIndices.

Di sini kita menggunakan helper class untuk mengkonversikan koordinat menjadi aksial terlebih dahulu dan kemudian menemukan koordinat layar yang sesuai. Harap perhatikan penggunaan variabel sideLength untuk konversi kedua. SideLength adalah nilai panjang sisi ubin heksagon yang sama dengan setengah jarak antara dua ujung runcing heksagon. Dengan begitu :

Satu-satunya perubahan lain yang diperlukan adalah metode GetNextPositionAlong yang digunakan oleh metode TryMoveHero untuk menemukan sel berikutnya dalam arah tertentu. Metode ini benar-benar berubah untuk mengakomodasi tata letak grid yang benar-benar baru.

Dengan menggunakan helper class, kita dapat mengembalikan koordinat neighbor ke arah yang diberikan secara mudah.

Hal lainnya tetaplah sama seperti implementasi 2D yang asli. Hal tersebut tidak sulit bukan? Memahami prosesnya hingga sampai pada persamaan konversi dengan mengikuti tutorial heksagonal tidaklah mudah. Inilah inti dari keseluruhan prosesnya. Jika anda bermain dan menyelesaikan level gamenya, anda akan mendapatkan hasilnya seperti di bawah ini.

hexagonal sokoban finished level

Kesimpulan

Elemen utama dalam kedua konversi yang telah kita bahas adalah konversi koordinat. Versi isometrik melibatkan perubahan tambahan dalam seninya dengan pivot point serta kebutuhan untuk depth sorting.

Saya yakin anda telah menemukan betapa mudahnya membuat game grid menggunakan data level berbasis 2D array dan pendekatan berbasis ubin. Masih banyak lagi kemungkinan dan game tidak terbatas yang bisa anda ciptakan dengan pemahaman baru ini.

Jika anda telah memahami semua konsep yang telah dibahas, saya akan mengajak anda mengubah metode kontrol untuk memanfaatkan dan menambahkan beberapa temuan. Semoga berhasil.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.