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

Membuat Game Endless Runner 3D dengan Three.js

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Final product image
What You'll Be Creating

Platform web memiliki perkembangan yang pesat beberapa tahun belakangan dengan bantuan HTML5, WebGL, dan peningkatan kekuatan perangkat generasi saat ini. Sekarang perangkat mobile dan browser bisa menjalankan konten dengan performa tinggi baik 2D atau 3D. Popularitas JavaScript sebagai bahasa scripting juga menjadi faktor pendorong, setelah platform Flash berakhir.

Sebagian besar developer web sudah tahu seberapa rumit ekosistem JS dengan berbagai framework dan standar yang tersedia, yang biasanya bisa memusingkan developer baru. Tapi dalam hal 3D, pilihannya cukup mudah, berkat Mr.Doob. Three.js miliknya saat ini adalah pilihan terbaik untuk membuat konten 3D WebGL dengan performa tinggi. PIlih lainnya adalah Babylon.js, yang bisa juga digunakan untuk membuat game 3D.

Pada tutorial ini, kamu akan belajar membuat game endless runner sederhana dengan native web game 3D menggunakan framework Three.js. Kamu akan menggunakan tombol panah untuk mengontrol bola salju yang bergulir ke bawah gunung agar bisa menghindari pohon di tengah jalur. Tidak ada art yang dibutuhkan, semua viusal dibuat dengan kode.

1. Scene 3D Dasar

Envato Tuts+ sudah memiliki beberapa tutorial untuk bisa memulai dengan Three.js. Berikut adalah beberapa diantaranya agar kamu langsung memulai.

Kita buat scene 3D dasar terlebih dahulu, seperti yang terlihat di sini ada kubus yang berputar. Kamu bisa menggunakan mouse drag untuk berputar di sekitar kubus.

Semua gambar yang ditampilkan di layar dua dimensi pada dasarnya bersifat 2D, dengan beberapa elemen penting yang menyediakan ilusi 3D: pencahayaan, perbedaan warna, bayangan, dan sihir proyeksi 3D ke 2D terjadi via kamera. Pada scene di atas, kita mengaktifkan pencahayaan dengan kode-kode berikut.

renderer memerlukan shadowMap diaktifkan, scene harus memiliki cahaya dengan castShadow aktif, dan semua objek 3D perlu pengaturan properti castShadow dan receiveShadow dengan benar. Agar perbedaan warna yang benar terjadi, kita juga perlu menggunakan MeshStandardMaterial atau material lain yang lebih kaya untuk objek 3D kita. Kamera dikontrol dengan skrip OrbitControls. Saya sarankan bermain dulu dengan scene 3D dasar dengan menambahkan lebih banyak bentuk primitif atau bermain dengan pencahayaan, dan lain-lain, sebelum melanjutkan dengan tutorial ini.

2. Konsep Endless Runner

Ada banyak jenis game endless runner, dan game kita adalah 'endless roller'. Kita akan buat game di mana sebuah bola salju bergulir ke bawah gunung yang tidak terbatas di mana kita menggunakank tombol panah untuk menghindari pohon yang bergerak ke arah kita. Satu hal yang menarik adalah game ini tidak menggunakan aset art, semua komponen akan dibuat dengan kode. Berikut adalah game akhir untuk kamu coba.

3. Komponen dari Game

Komponen utama atau elemen dari game adalah:

  • bola salju yang bergulir
  • pohon acak
  • tanah yang bergerak
  • kabut di kejauhan
  • efek tabrakan

Kita akan mendetailkan masing-masing elemen pada bagian berikut.

Kabut

Kabut atau fog adalah properti dari scene 3D pada Three. Ini adalah trik yang baik untuk mensimulasikan kedalaman atau menampilkan horizon. Warna kabut penting agar ilusi bisa bekerja dengan benar, dan tergantung pada warna scene dan pencahayaan. Seperti yang bisa kamu lihat di kode di bawah, kita juga mengatur clearColor dari renderer agar mirip dengan warna fog.

Agar sesuai dengan suasananya, kita juga menggunakan warna yang serupa untuk cahaya yang digunakan pada scene. Setiap warna ambience memiliki warna putih yang berbeda yang bersama menghasilkan efek yang diharapkan.

Bola Salju

Bola salju adalah sebuah DodecahedronGeometry, objek primitif dari Three yang dibuat dengan kode di bawah ini.

Untuk semua elemen 3D dalam game ini, kita menggunakan THREE.FlatShading untuk mendapat efek low poly yang diinginkan.

Gunung yang Bergerak

Tanah yang bergerak diberi nama rollingGroundSphere a dalah sebuah objek primitif SphereGeometry, dan kita memutarnya pada sumbu x untuk membuat ilusi tanah yang bergerak. Bola salju sebenarnya tidak berputar di atas apapun, kita hanya membuat ilusi dengan membuat tanah berputar sementara bola salju diam di tempat yang sama.

Primitif bola biasa akan terlihat sangat mulus dan tidak menyediakan efek kasar yang dibutuhkan untuk permukaan gunung. Kita perlu melakukan beberapa manipulasi vertex untuk mengubah permukaan mulus bola menjadi permukaan kasar. Berikut adalah kode yang dibutuhkan dan penjelasannya.

Kita membuat primitif bola dengan 40 segmen horizontal (sides) dan 40 segmen vertikal (tiers). Setiap vertex dari geometri pada Three bisa diakses via properti array vertices. Kita memproses dengan loop semua tier antara atas dan bawah untuk manipulasi vertex kita. Setiap tier dari bola memiliki jumlah sides yang tepat, yang membuat cincin sekeliling bola.

Langkah pertama adalah untuk memutar setiap cincin vertex ganjil untuk mematahkan keseragaman kontur permukaan. Kita geser setiap vertex pada cincin dengan nilai acak antara 0.25 dan 0.75 dari jarak ke vertex berikutnya. Hasilnya, vertex vertikal dari bola tidak berada dalam garis lurus, dan kita mendapat kontur zigzag yang bagus.

Langkah kedua, kita ubah ketinggian setiap vertex disesuaikan dengan garis normal pada vertex tersebut, tidak peduli ada pada tier mana vertex tersebut. Ini menghasilkan permukaan yang kasar dan tidak rata. Saya harap matematika verktor yang digunakan di sini cukup mudah dimengerti jika kamu ingat titik pusat bola adalah titik awal (0,0).

Pohon

Pohon yang muncul di luar jalur kita bergerak memberi kedalaman untuk dunia, dan yang muncul di dalam jalur sebagai rintangan. Membuat pohon sedikit lebih rumit dari permukaan tanah tapi menggunakan logika yang sama. Kita menggunakan objek primitif ConeGeometry untuk membuat bagian atas dari pohon dan CylinderGeometry untuk membuat bagian bawah dari pohon.

Untuk bagian atas kita perlu memprose setiap tier dari vertex dan memperbesar cincin vertex dan memperkecil cincin berikutnya. Kode berikut menunjukkan fungsi blowUpTree yang digunakan untuk memperbesar cincin dan tightenTree yang digunakan untuk memperkecil cincin vertex berikutnya.

Fungsi blowUpTree mendorong vertex secara selang seling pada cicin vertex dan mengurangi ketinggian vertex lainnya. Ini membuat ranting yang tajam pada pohon. Jika kita gunakan vertex ganjil pada satu tier, kita akan gunakan vertex genap pada tier berikutnya agar tidak seragam. Setelah pohon terbentu, kita beri rotasi acak pada sumbu y agar terlihat sedikit bebeda satu sama lain. 

Efek ledakan

Efek ledakan piksel bukan yang paling elegan yang bisa kita gunakan, tapi performanya baik. Efek partikel ini sebenarnya geometri 3D yang dimanipulasi agar terlihat seperti efek dengan kelas THREE.Points.

Fungsi addExplosion menambahkan 20 vertex pada array vertices dari particleGeometry. Fungsi explode dipanggil ketika kita perlu menjalankan efek, yang secara acak mengubah posisi geometri tersebut. doExplosionLogic dipanggil pada fungsi update jika objek partikel muncul, di mana kita gerakkan setiap vertex ke luar. Setiap vertex pada objek points dirender sebagai sebuah kubus.

4. Gameplay

Sekarang kita tahu bagaimana membuat masing-masing barang yang dibutuhkan untuk game, kita masuk ke gameplay. Komponen utama gameplay ini adalah sebagai berikut:

  • game loop
  • penempatan pohon
  • interaksi pemain
  • deteksi tabrakan

Kita bahas masing-masing dengan detail.

Game Loop

Semua mekanik game utama muncul pada game loop, dalam hal ini adalah fungsi update. Kita panggil untuk pertama kali dari fungsi init, yang dipanggil saat jendela dibuka. Setelah ini, dia menempel pada loop render dokumen menggunakan fungsi requestAnimationFrame sehingga dipanggil berulang kali.

Pada update, kita panggil fungsi render, yang menggunakan renderer untuk menggambar scene. Kita panggil fungsi doTreeLogic, yang memeriksa tabrakan dan menghilangkan pohon setelah keluar dari pandangan.

Bola salju dan bola tanah berputar sambil memberi efek memantul acak pada bola salju. Pohon baru ditempatkan di jalur dengan memanggil addPathTree setelah waktu tertentu berlalu.Waktu dicatat menggunakan objek THREE.Clock. Kita juga memperbarui score kecuali terjadi tabrakan.

Penempatan pohon

Satu  set pohon disimpan di luar jalur bola salju untuk membuat dunia menggunakan fungsi addWorldTrees. Semua pohon ditambahkan sebagai anak dari rollingGroundSphere jadi mereka akan ikut bergerak saat bola diputar.

Untuk menempatkan pohon dunia, kita panggil fungsi addTree dengan melempar nilai sekitar keliling bola permukaan kita. sphericalHelper membantu kita menemukan posisi pada permukaan bola.

Untuk menempatkan pohon pada jalur, kita gunakan sekumpulan pohon yang kita buat di awal menggunakan fungsi createTreesPool. Kita juga memiliki sudut untuk setiap jalur pada bola disimpan pada array pathAngleValues.

Fungsi addPathTree dipanggil dari update saat waktu yang cukup sudah berlalu setelah menempatkan pohon terakhir. Lalu fungsi tersebut akan memanggil fungsi addTree yang ditampilkan sebelumnya dengan parameter yang berbeda di mana pohon ditempatkan di jalur yang dipilih. Fungsi doTreeLogic akan mengembalikan pohon ke pool setelah keluar dari pandangan.

Interaksi Pemain

Kita menambahkan listener pada dokumen untuk mencari event keyboard yang relevan. Fungsi handleKeyDown mengatur nilai currentLane jika tombol panah kanan atau kiri ditekan dan mengatur bounceValue jika tombol atas ditekan.

Saat update, posisi x bola salju secara berkala ditambahkan untuk mencapai posisi currentLane dengan berpindah baris.

Deteksi tabrakan

Tidak ada perhitungan fisika pada game ini, walaupun kita bisa menggunakan berbagai framework physics untuk deteksi tabrakan. Tapi seperti yang kamu tahu, physics engine menambahkan beban performa untuk game kita, dan kita sebisa mungkin mencari cara untuk menghindarinya.

Pada kasus kita, kita cukup menghitung jarak antara bola salju dengan masing-masing pohon untuk memicu tabrakan jika mereka sangat dekat. Ini terjadi pada fungsi doTreeLogic, yang dipanggil dari update.

Seperti yang kamu perhatikan, semua pohon yang muncul di jalur disimpan pada array treesInPath. Fungsi doTreeLogic juga menghilangkan pohon dari tampilan kembali ke pool setelah keluar dari pandangan menggunakan kode berikut.

Kesimpulan

Membuat game 3D adalah proses yang rumit jika kamu tidak menggunakan perangkat visual seperti Unity. Hal ini bisa terlihat mengintimidasi atau terlalu sulit, tapi saya pastikan setelah kamu terbiasa, kamu akan merasa lebih hebat dan kreatif. Saya sarankan kamu melakukan eksplorasi lebih jauh dengan berbagai framework physics, sistem partikel, atau contoh-contoh resminya.

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.