IV. Materi
Untuk memahami elemen dasar untuk membuat game, kali ini kita akan mempelajari
aspek-aspek minimal pembuatan game dalam Unity, seperti Sprite, Input, Scene dan Audio.
A. Sprite
Sprite adalah obyek grafis 2D yang digunakan untuk game 2D. Jika Anda terbiasa
bekerja dalam 3D, sprite pada dasarnya hanya menggunakan tekstur standar. Namun,
demi efisiensi dan kenyamanan selama pengembangan, terdapat teknik khusus untuk
menggabungkan dan mengelola tekstur sprite tersebut.
Banyak file type yang mendukung sprite seperti PSD, TIFF, JPG, TGA, PNG, GIF,
BMP, IFF, dan PICT. Untuk meng-import gambar dengan multi-layer maka baiknya
Anda gunakan PSD atau TIFF. Untuk memasukkan gambar tidak transparan gunakan
JPEG, Tetapi, kalau gambarnya transparan lebih baik gunakan PNG.
Untuk ukuran asset Sprite -misalnya dengan resolusi 1280x720- dianjurkan untuk
mendesain asset menggunakan resolusi tersebut. Dengan contoh gambar background
1280x720, maka kita gunakan ukuran obyek yang lebih kecil, misalnya 512x512.
Dengan menyesuaikan ukuran , diharapkan asset yang tampil tidak pecah karena
diperbesar atau diperkecil. Lebih lanjut, dengan ukuran asset yang tepat dan tidak terlalu
besar, ukuran berkas jadi lebih optimal.
Tools yang digunakan untuk mengolah gambar antara lain : Adobe Photoshop
(berbayar), Paint.net (gratis), Gimp (gratis).
Dengan tools tersebut Anda dapat mengedit gambar sesuai kebutuhan, seperti
membuat, memotong, mengatur resolusi, mengatur warna gambar, dan banyak lagi.
Sementara untuk mencari gambar, Anda dapat menggunakan bantuan Google Images.
Tapi ingat, perhatikanlah lisensi dari masing-masing gambar yang digunakan. Beberapa
situs yang menyediakan asset game secara gratis antara lain:
https://itch.io/game-assets/free
http://www.gameart2d.com/freebies.html
https://opengameart.org/
https://kenney.nl/assets
1. Memasukkan Asset ke dalam Proyek
Extract file zip yang telah diunduh.
Copy kedua folder Images dan Audios hasil dari extracted zip tersebut.
Buka File Explorer, tempatkan langsung ke dalam folder Assets C:\Users\
nama_PC_kalian\My project (default)
Atau lewat menu “Assets” “Show in Explorer” :
Dari Editor Unity, Folder yang sudah dikopikan di atas akan otomatis muncul
pada window Project → Assets :
2. Mengatur Format Gambar
Guna membuat berkas gambar yang support object 2D dengan ukuran lebih
optimal, aturlah spesifikasi gambar pada pada jendela Inspector. Langkah-
langkahnya sebagai berikut:
Klik gambar Battleback2.png yang terdapat di Jendela Project.
Buka Jendela Inspector.
Atur tipe tekstur dengan Sprite (2D and UI).
Atur Max Size 2048.
Tekan tombol Apply untuk menerapkan pengaturan pada gambar
Battleback2.png
Pembahasan
Untuk membuat object 2D, tipe yang digunakan adalah Sprite (2D dan UI)
Jika kita set up proyek kita dengan mode 2D, otomatis semua gambar yang
dimasukkan memiliki tipe tekstur Sprite (2D and UI). Sedangkan jika menggunakan
mode 3D, otomatis semua gambar yang dimasukkan menggunakan format default.
Kemudian untuk size dan ukuran berkas gambar, aturlah di panel di bawah ini: .
B. Camera
Setiap membuat proyek baru di Hierarchy, secara default ada Main Camera. Area
Camera ditandai dengan garis yang berwarna putih. Anda dapat mengetahui Area
tersebut dengan memilih (select) Main Camera pada jendela Hierarchy.
Area camera tersebut merupakan tampilan (view) yang akan ditampilkan di jendela
game. Objek yang berada di luar jangakauan kamera tidak dapat ditampilkan di jendela
game.Oleh karena itu, kita perlu menyesuaikan resolusi yang terdapat di jendela Game.
Di Unity secara default menggunakan Free Aspect yang rasionya mengikuti rasio di
Jendela Game.
Berikut ini adalah resolusi dari beberapa peranti (device) :
QVGA (320×240)
HVGA (480×320)
WVGA (800×480)
FWVGA (854×480)
DVGA (960×640)
WSVGA (1024×600)
XGA (1024×768)
WXGA (1366×768 / 1360×768 / 1280×800)
QXGA (2048×1536)
qHD (960×540)
HD (1280×720)
FHD (1920×1080)
QHD (2560×1440)
Anda dapat memilih / menambahkan rasio atau nilai nilai fixed resolusi. Cukup klik
tanda plus kemudian masukkan nilai sesuai dengan resolusi peranti yang Anda
kembangkan. Perbedaannya adalah sebagai berikut:
Free Aspect, Dengan menggunakan Free Aspect, maka tampilan akan lebih
fleksibel dengan menyesuaikan view pada resolusi jendela Game. Tampilan
dapat terlihat lebih besar atau lebih kecil.
Menggunakan resolusi 1024x768 atau sama juga dengan menggunakan
perbandingan 4:3 dari kelipatan 256.
Menggunakan rasio 16:9, maka akan terlihat terpotong di setiap sisinya karena
menyesuaikan ukuran tersebut.
Jadi, penggunaan resolusi yang lebih lebar akan lebih aman. Anda juga dapat
membayangkan tampilannya jika game Anda dibuka di beberapa peranti.
Buka Inspector, atur nilai Pixels Per Unit menjadi 72, lalu klik Apply.
Pembahasan
Di modul ini, pembelajaran menggunakan resolusi 1280x720 atau dengan
perbandingan rasio 16:9. Sedangkan penentu berapa tinggi area yang ditampilkan
adalah dari nilai Size pada Inspector Main Camera dengan nilai default 5.
Kemudian untuk memahami resolusi pada unity, Anda dapat melihat gambar di
bawah ini:
Resolusi yang digunakan adalah 1280x720 atau perbandingan 16:9. Titik 0,0 sampai
garis atas dengan jarak 5 unit merupakan ukuran Camera Size sehingga total jarak garis
bawah sampai garis atas adalah 10 unit. Untuk menentukan berapa pixel per unit, kita
dapat memperolehnya dengan cara 720 px dibagi dengan 10 unit sehingga didapat nilai
72 px / unit.
Klik kanan pada GameObject di Hierarchy kemudian pilih object lain misal Cube. Secara
otomatis Cube baru tersebut merupakan Child dari GameObject tersebut.
Menambahkan Child dengan men-drag GameObject yang ingin dijadikan Child ke dalam
GameObject yang akan dijadikan sebagai Parent.
Untuk melepas Child dari Parent, Anda dapat men-drag Child tersebut ke luar GameObject
yang sebelumnya menjadi Parent.
Untuk mengatur Transform pada Sprite di Game, Anda juga dapat menggunakan
Toolbox yang telah disediakan Unity. Toolbox ini berada di kiri atas pada editor unity dan
digunakan untuk mengatur nilai Transform dengan visual.
Berikut ini adalah adalah tiga fungsi utama pada Toolbox tersebut:
Berikut ini adalah adalah tiga fungsi utama pada Toolbox tersebut:
Hand: untuk mengatur tampilan view pada jendela Scene tanpa harus mengubah posisi
gameobject. Klik tengah pada Mouse untuk shortcut ke mode Hand.
Tool 3D: untuk mengatur nilai x, y, dan z, baik itu posisi, rotasi, maupun skala.
Tool 2D: untuk mengatur nilai x dan y, baik itu posisi, rotasi, maupun skala.
Kondisi Child ditandai dengan perbedaan posisi yang lebih ke dalam. Hal ini
memudahkan kita untuk mengelompokkan object mana saja yang perlu di-trigger dalam satu
intruksi (rotasi, posisi, skala).
Setiap perubahan pada Parent dapat mempengaruhi perubahan pada Child. Jika
GameObject Parent tidak aktif, maka GameObject sebagai Child juga tidak aktif.
Selanjutnya kita akan menerapkan materi ini pada project terdahulu dengan beberapa latihan
sebagai berikut:
Praktik: Menyusun Hewan
Ayo kita mulai menyusun gambar-gambar hewan dengan sprite ini. Lakukan hal yang sama
dengan sprite kucing.
1. Pada Hierarchy atur posisi Background dengan nilai x:0, y:0 dan z:5.
2. Masukkan gambar sprite ke jendela Scene/Hierarchy dengan susunan kiri ke kanan berupa
Kucing, Anjing, Ayam dan Sapi.
3. Atur posisi masing-masing hewan dengan detail sebagai berikut:
o Posisi Kucing x:0,y:0 dan z:0
o Posisi Anjing x:18, y:0 dan z:0
o Posisi Ayam x:36, y:0 dan z:0
o Posisi Sapi x:54, y:0 dan z:0
Susunlah seperti dibawah ini:
Jika dilihat di Jendela Scene:
Pembahasan:
Ketiga gambar di luar view camera sehingga tidak akan nampak ketika kita membukanya di
jendela game. Kemudian atur posisi background pada nilai z:5. Tujuannya, agar background
tidak menutupi objek hewan, melainkan berada di belakangnya.
Secara default, posisi Camera pada posisi z: -10, sehingga semakin besar nilai z maka
semakin terlihat di belakang.
Praktik: Mengimplementasikan Parent dan Child
Untuk membuat Parent kita memerlukan GameObject kosong yang di dalamnya terdapat
GameObject sprite hewan tersebut.
1. Buka jendela Hierarchy.
2. Klik kanan > Pilih Create Empty.
3. Ganti nama GameObject yang telah dibuat menjadi Hewan (Klik kanan > Rename).
4. Atur posisi menjadi center dan skala menjadi 1.
6. Semua hewan akan mengikuti perubahan yang terjadi pada GameObject hewan. Dengan
ini, kita bisa mengatur banyak gambar secara sekaligus dengan mode perubahan yang
sama. Cukup gunakan satu GameObject sebagai Parent. Ketika Anda menggerakkan
GameObject Hewan, maka GameObject sebagai Childnya akan mengikuti perubahan
pada GameObject hewan.
D. Input
Anda dapat memperoleh data input dari Keyboard, Mouse, Joystick, Touch, Gyro,
Compass, Accelerometer, dan lain lain. Sedangkan untuk memperoleh nilai dari input peranti
tersebut, Anda dapat menggunakan Input Manager. Materi tentang Input Manager ini akan
kita praktikkan juga pada modul selanjutnya. OK, untuk menampilkan Input Manager ini,
Anda dapat mencari pada Menu Edit > Project Settings > Input.
Beberapa contoh input yang dapat Anda gunakan seperti Fire1, Jump, Horizontal,
Vertical, dan lain-lain. Salah satu contoh penggunaan Axis Fire1 misalnya dengan tekan
tombol Ctrl kiri atau klik kiri pada mouse. Sedangkan untuk memanggil di script, Anda dapat
menulis sebagai berikut :
. Input.GetAxis(“Fire1”)
Tanpa menggunakan Axis, Anda juga dapat langsung memanggil di script sebagai berikut
untuk merespon input klik kiri pada mouse.
. Input.GetButtonDown(0)
https://docs.unity3d.com/ScriptReference/Input.html.
Untuk menggerakkan gambar hewan, kita akan menjalankan input tombol panah kanan dan
kiri untuk menggerakkan gambar hewan dengan langkah-langkah sebagai berikut:
if (Input.GetKeyUp(KeyCode.RightArrow))
{
idx++;
}
if (Input.GetKeyUp(KeyCode.LeftArrow))
if (idx > 0)
{
idx--;
}
transform.position =
Vector3.MoveTowards(transform.position, new
Vector3(posX[idx], transform.position.y), 50 *
Time.deltaTime);
1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.
5. public class ImagesMove : MonoBehaviour
6. {
7.
8. int[] posX = new int[] { 0, -18, -36, -54 };
9. int idx = 0;
10.
11. // Use this for initialization
12. void Start()
13. {
14.
15. }
16.
17. // Update is called once per frame
18. void Update()
19. {
20. if (Input.GetKeyUp(KeyCode.RightArrow))
21. {
22. if (idx < posX.Length - 1)
23. {
24. idx++;
25. }
26. }
27. if (Input.GetKeyUp(KeyCode.LeftArrow))
28. {
29. if (idx > 0)
30. {
31. idx--;
32. }
33. }
34. transform.position =
Vector3.MoveTowards(transform.position, new
Vector3(posX[idx], transform.position.y), 50 *
Time.deltaTime);
35. }
36. }
Pembahasan:
Nilai 0, -18, -36 dan -54 didapat dari nilai posisi x pada GameObject Hewan untuk
menampilkan gambar hewan. Contohnya, untuk menampilkan gambar Ayam maka nilai
posisi x pada GameObject Hewan adalah -36.
. if (Input.GetKeyUp(KeyCode.RightArrow))
. {
. if (idx < posX.Length - 1)
. {
. idx++;
. }
. }
Jika inputan berupa tombol panah ke kanan(right arrow) maka akan menampilkan nilai dari
indeks 1, 2, dan 3. Indeks yang ditampilkan tidak lebih dari panjang array yaitu 3 (dengan
nilai 4 kemudian dikurangi 1).
Catatan:
Untuk langsung mengecek kondisi, kita menggunakan nilai panjang array bukan langsung
dengan nilai 3. Sebabnya, jika ada penambahan hewan, data di array juga ditambah.
Perpindahan secara otomatis menyesuaikan.
. if (Input.GetKeyUp(KeyCode.LeftArrow))
. {
. if (idx > 0)
. {
. idx--;
. }
. }
Tombol panah ke kiri akan menampilkan indeks 2, 1, dan 0 dengan kondisi lebih dari 0.
. transform.position = Vector3.MoveTowards(transform.position,
new Vector3(posX[idx], transform.position.y), 50 *
Time.deltaTime);
Waktu yang dibutuhkan untuk transisi adalah nilai kecepatan 50 dikali dengan selisih ketika
dari sebelumnya dengan menggunakan Time.deltatime.
E. Scene
Scene merupakan wadah yang menampung GameObject atau semua hal yang kita
butuhkan. Satu Scene dapat dipandang sebagai satu level atau satu screen/tampilan dari
sebuah object. Scene menyimpan semua GameObject yang terdapat di Hierarchy. Scene
memiliki Extensi dot Unity yang pernah dipraktikkan di modul terdahulu. Sekarang kita akan
membahas cara menggunakan Scene sebagai tampilan halaman pada sebuah game. Berikut
ini adalah gambaran Scene yang nanti akan dibuat.
Ketika aplikasi pertama kali dibuka, halaman Home akan tampil. Tekan tombol Enter,
maka halaman Gameplay muncul. Untuk keluar dari halaman Gameplay dan masuk Home,
tekan tombol Escape. Untuk keluar dari aplikasi, tekan tombol Escape. Kemudian muncul
pertanyaan apakah ingin keluar. Tekan tombol Escape sekali lagi, maka Anda akan keluar
game. Namun jika tekan Enter maka kembali ke Home.
Sebelum menambahkan scene baru, pastikan Anda sudah menyimpan scene yang
sedang aktif dengan tekan Ctrl+S. Langkah-langkah untuk membuat scene baru sebagai
berikut:
Menambahkan Scene
Agar script dapat mengakses scene, maka Anda harus menambahkan scene tersebut ke daftar
Scenes in Build. Langkah-langkahnya antara lain:
1. Buka SceneHome.unity.
2. Buka jendela Build Settings.. dengan klik menu File > Build Settings…
3. Klik Add Open Scenes untuk menambahkan Scene yang sedang dibuka.
4. Lakukan hal yang sama terhadap SceneKeluar.unity dan SceneAnimal.unity.
Anda dapat menghapus (tombol Delete pada Keyboard) atau mengatur urutan scene pada
daftar Scenes In Build. Scene yang memiliki indeks 0 adalah scene yang pertama dijalankan
ketika game running.
1. Buka SceneHome.unity.
2. Klik Main Camera.
3. Pada Inspector, Klik Add Component > New Script.
4. Beri nama ScenesManager dan atur Language C Sharp.
5. Klik tombol Create and Add.
Seperti ini hasilnya.
1. using UnityEngine.SceneManagement;
SceneManager.LoadScene(EnterScene);
if (Input.GetKeyUp(KeyCode.Escape))
{
if (isEscapeForQuit)
{
Application.Quit();
}
else
{
SceneManager.LoadScene(EscapeScene);
}
}
Ketika kita menekan tombol Escape pada keyboard, ada 2 hal yang
terjadi: keluar dari aplikasi atau kembali ke menu utama. Aplikasi akan keluar
ketika nilai isEscapeForQuit bernilai true. Sementara itu, aplikasi akan
kembali ke halaman menu ketika nilai isEscapeForQuit bernilai false.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
void Start()
{
}
void Update()
{
if (Input.GetKeyUp(KeyCode.Return))
SceneManager.LoadScene(EnterScene);
if (Input.GetKeyUp(KeyCode.Escape))
if (isEscapeForQuit)
Application.Quit();
else
{
SceneManager.LoadScene(EscapeScene);
}
1. Pada SceneAnimal.unity.
2. Klik Main Camera pada hierarchy.
3. Pada Inspector, Atur komponen Scenes Manager sebagai berikut:
Pembahasan:
F. Audio
Game akan terasa hambar jika tidak ada audio, elemen krusial dalam sebuah game.
Audio sangat membantu memberi suasana tertentu atau memperjelas material sebuah benda.
Dari audio kita mengenal tentang musik dan sound. Musik merupakan dari sebuah sound,
namun sebuah sound belum tentu sebuah musik.
AIFF
WAV
MP3
Ogg
Di dalam Unity, langkah langkah sampai dengan sebuah Audio berbunyi adalah
sebagai berikut:
Audio disimpan dalam variable AudioClip, kemudian dari Audio Source
memancarkan audio yang terdapat di variabel Audio clip. Audio Listener berperan sebagai
penerima dari yang dipancarkan oleh Audio Source. Audio Listener yang diterima itulah
yang sampai di telinga kita.
Tools Audio
Audacity.sourceforge.net
tazman-audio.co.uk
audiokinetic.com
Free Audio
http://www.get-sounds.com/
www.Freesound.org
http://soundimage.org/
https://www.partnersinrhyme.com/pir/PIRsfx.shtml
http://www.pygame.org/wiki/resources
Sound Generate
http://www.drpetter.se/project_sfxr.html
1. Buka scene SceneAnimal.unity.
2. Pada Hierarchy, Klik GameOject Kucing.
3. Pada Inspector Kucing, tambahkan komponen baru (Klik Add
Component > Audio > Audio Source).
4. Buka folder Audios di jendela project.
5. Drag AudioKucing.ogg ke dalam field AudioClip pada komponen Audio Source di
Inspector Kucing.
6. Hilangkan centang pada Play On Awake.
Mengubah Script
1. Pada Jendela Project.
2. Buka Script ImagesMove.cs.
3. Tambahkan kode deklarasi variabel.
audio[idx].Play();
Setelah diinisialisasikan, variabel audio tersebut dimainkan berdasarkan idx. Nilai Idx
atau Indeks mengarah pada urutan dari gameobject yang dimasukkan di Inspector.
1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.
5. public class ImagesMove : MonoBehaviour
6. {
7.
8. int[] posX = new int[] { 0, -18, -36, -54 };
9. int idx = 0;
10. public AudioSource[] audio;
11. // Use this for initialization
12. void Start()
13. {
14. audio[idx].Play();
15. }
16.
17. // Update is called once per frame
19. {
20. if (Input.GetKeyUp(KeyCode.RightArrow))
21. {
23. {
24. idx++;
25. audio[idx].Play();
26. }
27. }
28. if (Input.GetKeyUp(KeyCode.LeftArrow))
29. {
31. {
32. idx--;
33. audio[idx].Play();
34. }
35. }
37. }
38. }
Game Pukul Bola adalah video game seperti tenis meja yang terdiri dari dua pemukul
dan satu bola yang dapat dimainkan oleh dua orang pemain atau lebih dengan melawan
komputer. Setiap pemain harus bisa mengembalikan setiap bola yang mengarah padanya.
Setiap kali lawan gagal menerima bola, kita akan mendapatkan satu poin, dan sebaliknya.
Setelah mencapai batas poin tertentu, kita atau lawan akan keluar sebagai pemenangnya.
1. Buka Unity.
2. Klik New.
3. Masukkan nama proyek yang diinginkan. Mari kita gunakan nama "Pong2D."
4. Centang/pilih 2D.
5. Pilih tempat di mana proyek tersebut akan disimpan.
6. Untuk tutorial ini, pilih OFF di sebelah tulisan “Enable Unity Analytics.”
7. Klik tombol “Create project."
Setelah membuat berkas proyek, selanjutnya Anda akan mempelajari beberapa materi
antara lain:
Memasukkan Assets.
Membuat Area Game.
Membuat Paddle (Pemukul).
Membuat Bola.
Menambahkan Audio.
Membuat Score.
Membuat Halaman Game Over dan Halaman Menu.
Memasukkan Aset
Menyiapkan Asset
Kita memerlukan 2 gambar untuk mendukung permainan, yaitu lingkaran dan persegi.
Lingkaran
Nama : Lingkaran.png
Ukuran : 64x64 pixel
Warna : Putih
Keterangan : Lingkaran penuh dengan warna putih
Persegi
Nama : Persegi.png
Ukuran : 64x64 pixel
Warna : Putih
Keterangan : Blok penuh dengan warna putih
Praktik: Membuat Folder
Supaya penyusunannya rapi kita perlu mengelompokan jenis berkas yang sama dalam
satu folder. Caranya dengan buka panel Project, kemudian klik kanan pilih Create > Folder.
Beri nama Images.
Anda juga dapat mengganti nama folder dengan klik 2 (dua) kali pada nama folder
secara perlahan. Tunggu beberapa saat kemudian muncul edit teks pada nama folder. Cara
lainnya, Anda dapat klik Folder kemudian tekan F12 pada keyboard.
Masukkan gambar yang telah kita buat/unduh sebagai aset proyek. Berikut ini langkah-
langkahnya:
1. Masuk ke dalam folder Images yang telah dibuat dengan klik 2 kali kemudian klik
kanan > Import New Asset.
Setelah membuat proyek untuk pertama kali, pada panel Hierarchy terdapat sebuah Scene
(Untitled) yang memiliki satu Main Camera.
Scene yang pertama kali dibuat ini belum tersimpan. Untuk menyimpannya, ikuti langkah-
langkah berikut:
Membuat Background
1. Sebelum menyusun sebuah tampilan, baiknya tentukan terlebih dahulu resolusi yang
digunakan. Karena target platform adalah Android, maka kita gunakan resolusi 16:9.
Buka panel Game kemudian pilih resolusi 16:9.Anda juga dapat menambahkan
resolusi tertentu dengan menekan tombol plus (+).
Dan
Membuat Area Game
Pertama mari rumuskan dulu gambar apa saja yang diperlukan dalam Membuat Area
Game Pukul Bola, antara lain:
Dengan tool tersebut, Anda dapat melakukan menggerakkan, memutar atau mengatur
besar kecil object. Anda juga dapat mengatur nilai pada Komponen Transform di Panel
Inspector.
Selanjutnya kita akan membuat tepi dan garis pembatas tengah sebagai area game. Langkah
pertama kita akan membuat tepi atas terlebih dahulu.
5. Agar lebih menarik, Anda dapat mengubah warna pada Sprite Renderer dan pilih
warna yang Anda suka, contohnya seperti gambar di bawah ini.
6. Kemudian buatlah hal yang sama seperti TepiAtas untuk Tepi Bawah, Tepi-Kanan
, Tepi Kiri dan BatasTengah. Detailnya sebagai berikut:
o TepiBawah
Posisi X:0, Y:-4.5 dan Z:0
Skala X:26.8, Y:0.3 dan Z:1
o TepiKanan
Posisi X:8.5, Y:0 dan Z:0
Skala X:0.3, Y:14.37 dan Z:1
o TepiKiri
o BatasTengah
8. Selanjutnya, tambahkan tepi kiri, tepi kanan, dan batas tengah dengan cara
yang sama. Atur ukuran dan posisi tepi kiri, tepi kanan, dan batas tengah. Setelah
semua tepi dan batas ditambahkan, hasilnya sebagai berikut:
Setelah selesai membuat tampilan Area Game, Anda akan menambahkan Collider sebagai
pembatas area agar bola tidak dapat menembus keluar area. Berikut ini caranya:
Di submodul ini kita akan membuat Paddle yang bergerak ke atas dan ke bawah
dengan menekan tombol keyboard.
Selanjutnya kita akan membuat Paddle sebagai player. Langkah-langkahnya sebagai berikut:
4. Karena Paddle merupakan objek yang tidak dapat ditembus oleh objek lain maka
tambahkan Komponen Collision dengan cara Klik Add Component > Physics
2D > Box Collider 2D.
Dalam tutorial ini kedua paddle akan digerakkan dengan menggunakan keyboard.
Pemukul pemain pertama (sebelah kiri) digerakkan dengan tombol W dan S sementara
Pemukul pemain kedua (sebelah kanan) digerakkan dengan tombol ↑ dan ↓. Lakukan langkah
berikut untuk setting input:
Catatan: di versi Unity yang terbaru, jika Anda mengedit yang sudah ada misal
Vertical maka akan muncul error.
Vertical 1
Selanjutnya kita perlu membuat Script agar Pemukul dapat bergerak sesuai dengan masukan
dari keyboard.
1. Pada folder Assets, tambahkan folder baru. Klik kanan pada panel Project, kemudian
pilih Create > Folder dan beri nama Scripts.
2. Di dalam folder Scripts yang telah dibuat, tambahkan script baru dengan
nama PaddleController.cs. (Klik kanan > Create > C# Scripts).
3. Pada script PaddleController.cs, Klik dua kali pada file “ PaddleController.cs”
untuk mulai menambahkan script. Setiap Script pada Unity merupakan turunan dari
kelas MonoBehaviour sehingga semua fungsi dan prosedur yang ada pada kelas
MonoBehaviour dapat dimanfaatkan pada script.
Pada game Pong, script yang ditambahkan perlu mengatur:
o kecepatan pergerakan Paddle/Pemukul.
o varian input mana yang mengatur paddle tersebut: Vertical 1 atau Vertical 2.
o perubahan posisi pada sumbu Y sesuai dengan tombol yang ditekan.
1. using UnityEngine;
2. public class PaddleController : MonoBehaviour
3. {
4. public float kecepatan;
5. public string axis;
6. // Use this for initialization
7. void Start()
8. {
9. }
10. // Update is called once per frame
11. void Update()
12. {
13. float gerak = Input.GetAxis(axis) * kecepatan * Time.deltaTime;
Dalam pemrograman seringkali kita perlu mengatur sesuatu berdasarkan kondisi tertentu. Misalnya dalam
kasus Pemukul, perpindahan posisinya perlu dibedakan berdasarkan state dari Pemukul tersebut. Berikut ini logika
kondisi yang digunakan dalam pengaturan posisi Pemukul.
Apabila nilai yang diinput melebihi batas atas maka nilai inputan menjadi 0 berarti GameObject pemukul
tidak bergerak.
Apabila nilai yang diinput kurang dari batas bawah maka nilai inputan menjadi 0 berarti GameObject
pemukul tidak bergerak.
Apabila pemukul berada dalam batas bawah dan batas atas maka pemukul bebas untuk berpindah ke mana
pun.
3. {
4. gerak = 0;
5. }
7. {
8. gerak = 0;
9. }
1. using UnityEngine;
2. public class PaddleController : MonoBehaviour
3. {
4. public float batasAtas;
5. public float batasBawah;
6. public float kecepatan;
7. public string axis;
8. // Use this for initialization
9. void Start()
10. {
11. }
12. // Update is called once per frame
13. void Update()
14. {
15. float gerak = Input.GetAxis(axis) * kecepatan * Time.deltaTime;
26. }
27. }
Memprediksi nilai posisi posisi selanjutnya apakah melewati batas atas atau batas
bawah. Jika melewati maka paddle tidak ada pergerakan selanjutnya.
3. Untuk mengetahui batas atas dan batas bawah, Anda dapat menggeser paddle ke
posisi paling atas. Anda dapat melihat nilai Y pada komponen Transform.
Kita telah mendapatkan nilai batas atas yaitu sebesar 3.45, sedangkan untuk nilai batas
bawah adalah nilai negatif dari 3.45 yaitu -3.45. Setelah mendapatkan nilai tersebut,
jangan lupa untuk mengembalikan posisi semula pada paddle dengan nilai y sama
dengan 0.
4. Kemudian isikan kedua nilai tersebut pada field Batas Atas dan Batas
Bawah.
Sekarang Anda sudah dapat membuat paddle yang dapat bergerak ke atas dan ke
bawah tanpa menembus dinding.
Membuat Bola
Di submodul ini, kita akan menerapkan 2D Physics ke Bola, antara lain sebagai berikut:
RigidBody 2D, Sebuah komponen yang menerapan hukum fisika pada suatu
gameobject 2D.
Collider 2D, sebuah komponen yang menggambarkan bentuk sebuah fisik yang dapat
digunakan untuk mendeteksi benturan dengan benda lain.
Physics Material 2D, digunakan untuk mengatur nilai gesekan atau pantulan
terhadap benturan benda lain.
Pertama kita membuat objek bola terlebih dahulu dengan cara sebagai berikut:
3. Buat folder baru dengan nama Physics. Kemudian buat Physics Material 2D dengan
klik kanan pada panel Project > Create > Physics Material 2D dan beri
nama PhysicsBola.
4. Klik PhysicsBola pada panel Project. Kemudian pada Inspector atur nilai sebagai
berikut. Friction menjadi 0 dan Bounciness menjadi 1.
Kali ini kita akan mencoba menggerakkan Bola dengan menggunakan Force (tekanan).
Seperti dalam hukum Fisika, kecepatan dan arah pergerakan Bola ditentukan oleh dua hal:
Arah dan besaran Force (tekanan)
Massa bola
Force dalam Unity ditambahkan pada Rigidbody 2D. Dalam tutorial ini, kita mencoba
menambahkan Force sebagai pergerakan bola pertama kali. Berikut ini langkah-langkahnya.
2. Rigidbody2D rigid;
public int force; --> Dengan lewat inspector, nilai di atas untuk mengatur
kecepatan gerak bola.
1. gid = GetComponent<Rigidbody2D>();
3. rigid.AddForce(arah * force);
1. using UnityEngine;
2. public class BallController : MonoBehaviour
3. {
4. public int force;
5. Rigidbody2D rigid;
6. // Use this for initialization
7. void Start()
8. {
9. rigid = GetComponent<Rigidbody2D>();
10. Vector2 arah = new Vector2(2, 0).normalized;
11. rigid.AddForce(arah * force);
12. }
13. // Update is called once per frame
14. void Update()
15. {
16. }
17. }
18.
Saat bola menyentuh tepi kanan dan tepi kiri, bola kembali ke posisi start. Jika bola
mati di sebelah kanan maka bola akan mengarah ke kanan. Begitupun sebaliknya, jika bola
mati di sebelah kiri maka bola akan mengarah ke kiri. Bagaimana cara mengaturnya? Ikuti
langkah berikut ini:
1. void ResetBall()
2. {
5. }
2. {
3. if (coll.gameObject.name == "TepiKanan")
4. {
5. ResetBall();
7. rigid.AddForce(arah * force);
8. }
9. if (coll.gameObject.name == "TepiKiri")
10. {
11. ResetBall();
14. }
15. }
1. using UnityEngine;
3. {
5. Rigidbody2D rigid;
7. void Start()
8. {
9. rigid = GetComponent<Rigidbody2D>();
12. }
15. {
16. }
18. {
20. {
21. ResetBall();
24. }
26. {
27. ResetBall();
30. }
31. }
33. {
36. }
37. }
Kita akan membuat sebuah pantulan berdasarkan posisi pantulan Bola terhadap posisi
Paddle. Jika bola mengenai samping/pinggir Paddle, maka bola akan terpantul miring.
Ada beberapa hal yang perlu diperhatikan.Pantulan berdasarkan posisi bola mengenai
Paddle. Titik Paddle berfungsi sebagai acuan Pantulan bola. Jika bola mengenai bagian atas
paddle maka nilainya lebih besar 0 sehingga memantul ke atas. Sebaliknya, jika bola
mengenai bagian bawah Paddle maka nilainya kurang dari 0 sehingga memantul ke bawah.
Misalnya bola mengenai ujung atas Paddle yang mana posisi y pada bola senilai 5 dan
posisi Y pada paddle senilai 1, maka dari kedua nilai tersebut terdapat perbedaan 5 - 1 = 4
(lebih besar nilai 0 maka bola dipantul ke atas). Sedangkan jika posisi Y pada bola tepat
dengan posisi Paddle yaitu sama-sama 1 maka nilai selisih yang didapat adalah 0 (bola akan
dipantulkan lurus).
. {
rigid.velocity = new Vector2(0, 0); --> Reset gerak bola (dengan kode ini, bola akan
diam).
. using UnityEngine;
. {
. Rigidbody2D rigid;
. void Start()
. {
. rigid = GetComponent<Rigidbody2D>();
. rigid.AddForce(arah * force);
. }
. void Update()
. {
. }
. {
. if (coll.gameObject.name == "TepiKanan")
. {
. ResetBall();
. rigid.AddForce(arah * force);
. }
. if (coll.gameObject.name == "TepiKiri")
. {
. ResetBall();
. rigid.AddForce(arah * force);
. }
. {
. }
. }
. void ResetBall()
. {
. }
. }
Jika Anda masih kurang nyaman dengan pergerakan bola dan paddle, buka panel
Inspector pada masing masing gameobject tersebut.
Penggunaan teks sangat berhubungan dengan font. Anda dapat menggunakan berbagai model
font untuk menampilkan sebuah teks. Beberapa cara untuk mendapatkan sebuah font antara
lain:
Anda dapat mengunduh font dari berbagai situs dari yang gratis dan berbayar. Jangan
lupa perhatikan lisensinya ya.
Anda dapat menggunakan font dari Standard Asset Unity dengan mengimpor
Utilities.
Anda dapat membuat font sendiri dengan menggunakan tools vector seperti Adobe
illustrator, dll.
Pastikan style font selaras dengan style game Anda. Sebagai contoh, mengingat game pukul
bola tergolong game klasik mari kita gunakan font pixel saja.
1. Setelah Anda memiliki sebuah font buatlah folder baru dengan nama Fonts.
Kita akan menampilkan skor yang telah diperoleh, kemudian menampilkan skor tersebut
dengan UI Text. Langkah-langkahnya adalah sebagai berikut:
1. Tambahkan Teks baru dengan klik kanan pada Scene Main kemudian pilih
GameObject > UI > Text dan ubah nama GameObject Text menjadi Score1.
2. Klik Canvas. Pada Inspector atur UI Scale Mode di komponen Canvas Scaler menjadi Scale With
Screen. Atur Nilai Reference Resolution menjadi X: 1280 dan Y: 720.
3. Klik Score1 kemudian pada Inspector:
Selanjutnya kita akan masuk ke scripting. Pertama kita akan membuat variabel untuk menyimpan skor.
1. int scoreP1;
2. int scoreP2;
1. scoreP1 = 0;
2. scoreP2 = 0;
1. scoreP1 += 1;
2. scoreP2 += 1;
2. Simpan perubahan dengan tekan Ctrl+S sehingga seluruh kode menjadi seperti ini:
1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
5. {
6. public int force;
7. Rigidbody2D rigid;
8. int scoreP1;
9. int scoreP2;
12. {
16. scoreP1 = 0;
17. scoreP2 = 0;
18. }
21. {
22. }
24. {
26. {
27. scoreP1 += 1;
28. ResetBall();
31. }
33. {
34. scoreP2 += 1;
35. ResetBall();
38. }
40. {
45. }
46. }
48. {
51. }
52. }
Setelah menambahkan text (Score1 dan Score2 pada Canvas) kita perlu menampilkan
skor yang diperhitungan ke layar. Penambahan skor diatur dalam Script BallController.cs.
Oleh karena itu, penulisan skor juga akan ditangani dalam script ini dengan cara sebagai
berikut:
1. Buka Script BallController.cs dengan klik 2 kali kemudian tambahkan kode sebagai
berikut:
o Tambahkan library UnityEngine.UI.
1. Using UnityEngine.UI;
1. Text scoreUIP1;
2. Text scoreUIP2;
Fungsinya untuk mengakses GameObject yang memiliki Nama Score1 dan Score
2. Kemudian dari GameObject tersebut dicari komponen Text yang ada di
dalamnya. Komponent Text ini kemudian disimpan ke scoreUIP1 dan Score
UIP2.
o Tambahkan function di dalam class BallController.
1. void TampilkanScore()
2. {
6. }
1. TampilkanScore();
23. }
26. {
27. }
29. {
31. {
32. scoreP1 += 1;
33. TampilkanScore();
34. ResetBall();
37. }
39. {
40. scoreP2 += 1;
41. TampilkanScore();
42. ResetBall();
45. }
47. {
52. }
53. }
55. {
58. }
60. {
61. Debug.Log("Score P1: " + scoreP1 + " Score P2: " + scoreP2);
64. }
65. }
Menampilkan Halaman Selesai
Halaman Selesai/Halaman Gameover wajib ada di setiap akhir kita menyelesaikan sebuah game. Di
submodul ini kita akan membahas tentang cara menampilkan halaman selesai sesaat setelah salah satu
dari player mencapai target skor.
1. Tambahkan UI Panel pada Canvas dengan cara klik kanan pada Canvas kemudian
pilih UI > Panel. Ubah Nama dari Panel menjadi PanelSelesai.
2. Atur warna pada PanelSelesai dengan warna yang lebih gelap agar teks yang di atasnya dapat
lebih terbaca.
3. Tambahkan 2 Text di dalam Panel (Klik kanan pada PanelSelesai, Pilih UI > Text).
4. Tambahkan 2 Button di dalam PanelSelesai (Klik kanan pada Panel selesai > UI > Button).
Button 1
o Nama Object: BtnMenu
o Width: > 271
o Height: > 92
o Source Image: Persegi
o Normal Color: Putih
o Pressed Color: Oranye
Text pada Botton 1
Button 2
Setelah halaman selesai , berikutnya kita membuat kondisi bahwa jika salah satu player mencapai skor 5
maka dialah pemenangnya. Seperti ini alurnya:
Tampilkan skor.
Jika iya, tampilkan halaman selesai dan hentikan permainan (menghilangkan bola).
1. GameObject panelSelesai;
2. Text txPemenang;
Digunakan untuk menghandle UI Selesai.
4. panelSelesai.SetActive (false);
Tambahkan kode ini setelah menampilkan skor saat bola menyentuh tepi kanan.
1. if (scoreP1 == 5)
2. {
3. panelSelesai.SetActive (true);
6. Destroy (gameObject);
7. return;
8. }
Tambahkan kode ini setelah menampilkan skor saat bola menyentuh tepi kiri.
1. if (scoreP2 == 5)
2. {
3. panelSelesai.SetActive (true);
6. Destroy (gameObject);
7. return;
8. }
41.
42.
43. panelSelesai = GameObject.Find ("PanelSelesai");
44. panelSelesai.SetActive (false);
45. }
46.
47.
48. // Update is called once per frame
50. {
51.
52.
53. }
54.
55.
56. private void OnCollisionEnter2D (Collision2D coll)
57. {
59. scoreP1 += 1;
61. if (scoreP1 == 5) {
66. return;
67. }
71. }
72.
73.
74. if (coll.gameObject.name == "TepiKiri") {
75. scoreP2 += 1;
77. if (scoreP2 == 5) {
82. return;
83. }
87. }
88.
89.
90. if (coll.gameObject.name == "Pemukul1" || coll.gameObject.name == "Pemukul2") {
95. }
96.
97.
98. }
99.
100.
102. {
105. }
106.
107.
109. {
110. Debug.Log ("Score P1: " + scoreP1 + " Score P2: " + scoreP2);
113. }
114. }
permainan
halaman kredit
keluar
tutorial
Di pembelajaran ini kita hanya menggunakan satu tombol untuk masuk ke permainan. Selain membuat
halaman utama, tombol juga mengatur perpindahan halaman baik di halaman utama maupun di halaman
selesai.
o Text 1
Nama Object: Judul
Text: Pukul Bola
Font: joystix monospace
Font size: 96
Alignment: Center - Center
Color: Putih
o Button 1
Nama Object: btnMulai
Width: > 400
Height: > 150
Source Image: Persegi
Normal Color: Putih
Pressed Color: Oranye
Text: Mulai!
Font: joystix monospace
Font Size: 60
Alignment: Center-Center
Color: Hitam
2. Buka Script HalamanManager.cs dengan klik 2 kali lalu tambahkan script berikut:
1. using UnityEngine.SceneManagement;
Digunakan untuk menentukan fungsi tombol Escape untuk kembali ke Menu atau ke Main
(Gameplay).
2. {
3. SceneManager.LoadScene("Main");
4. }
6. {
7. SceneManager.LoadScene("Menu");
8. }
1. if (Input.GetKeyUp(KeyCode.Escape))
2. {
3. if (isEscapeToExit)
4. {
5. Application.Quit();
6. }
7. else
8. {
9. KembaliKeMenu();
10. }
11. }
12. {
13. if (Input.GetKeyUp(KeyCode.Escape))
14. {
15. if (isEscapeToExit)
16. {
17. Application.Quit();
18. }
19. else
20. {
21. KembaliKeMenu();
22. }
23. }
24. }
26. {
27. SceneManager.LoadScene("Main");
28. }
30. {
31. SceneManager.LoadScene("Menu");
32. }
33. }
4. Masukkan script HalamanManager.cs ke GameObject Main Camera.
Setelah Anda memasukkan script ke gameobject pada Inspector, centang “Is Escape to Exit.” Alhasil,
ketika user menekan tombol escape ia akan keluar dari aplikasi
Scene yang telah dibuat tidak dapat langsung diakses. Mengingat kita sudah memiliki 2 Scene, keduanya
harus dimasukkan terlebih dulu ke Scenes In Build.
Jika Anda memiliki lebih dari 1 scene, maka Anda harus buka scene tersebut kemudian klik Add Open
Scenes. Sehingga hasilnya seperti berikut:
Setelah script sudah dibuat dan scene sudah siap, selanjutnya hubungkan script yang telah dibuat ke
Button (btnMulai). Langkah-langkahnya antara lain:
Menambahkan Audio
Menuju bagian akhir dari modul ini, kali ini kita akan belajar menambahkan audio
agar game buatan kita lebih hidup. Dalam tutorial ini audio akan digunakan sebagai:
Background music
Sound effect ketika bola terpantul
Silakan gunakan audio lain yang Anda inginkan, tetapi perhatikan lisensinya ya. Jika
ingin konversi dari mp4 ke mp3, gunakan Online Video Converter
(https://www.onlinevideoconverter.com/mp3-converter).
Setelah mengunduh audio pilihan, buat folder Audios serta drag and drop berkas audio
tersebut ke folder tersebut.
Pada Unity terdapat beberapa istilah yang berkaitan dengan Audio. Beberapa istilah penting
antara lain:
Audio Listener
Audio Listener merupakan Component yang bertindak seperti microphone. Component ini
menerima semua input dari Audio Source pada sebuah Scene dan memainkan musik melalui
speaker komputer.
Audio Source
Audio Source merupakan Component yang memutar sebuah Audio Clip pada Scene. Efek
audio bisa ditambahkan pada Audio Source.
Audio Clip
Audio Clip berisi data audio yang akan digunakan oleh Audio Source. Format audio yang ada
dalam Unity yaitu: .aif, .wav, .mp3, and .ogg.
1. Buka Scene Main lalu klik Main Camera di Hierarchy. Pada Inspector tambahkan Audio
Source (Add Component > Audio > Audio Source).
2. Masukkan berkas “Chiptune Shopping Adventures.mp3” ke field AudioClip. Jangan lupa
untuk centang Loop.
Ketika dimainkan, musik langsung jalan dan secara otomatis mengulang ketika
selesai. Anda juga dapat mengatur Volume untuk menyesuaikan kenyamanan dalam
game yang Anda buat.
Penambahan sound effect akan dicontohkan dengan momen ketika Bola menabrak benda
lain. Langkah-langkah yang diperlukan cukup mirip dengan penambahan background music,
yaitu:
o Pada inisialisasi variabel tambahkan:
1. AudioSource audio;
o Pada prosedur Start() tambahkan:
1. audio = GetComponent<AudioSource>();
o Pada prosedur OnCollisionEnter2D tambahkan:
1. audio.PlayOneShot(hitSound);
1. using UnityEngine;
2. using UnityEngine.UI;
3.
4. public class BallController : MonoBehaviour
5. {
6. public int force;
7. Rigidbody2D rigid;
8. int scoreP1;
9. int scoreP2;
10. Text scoreUIP1;
11. Text scoreUIP2;
12. GameObject panelSelesai;
13. Text txPemenang;
14. AudioSource audio;
15. public AudioClip hitSound;
16.
17. // Use this for initialization
18. void Start()
19. {
20. rigid = GetComponent<Rigidbody2D>();
21. Vector2 arah = new Vector2(2, 0).normalized;
22. rigid.AddForce(arah * force);
23. scoreP1 = 0;
24. scoreP2 = 0;
25. scoreUIP1 = GameObject.Find("Score1").GetComponent<Text>();
26. scoreUIP2 = GameObject.Find("Score2").GetComponent<Text>();
27. panelSelesai = GameObject.Find("PanelSelesai");
28. panelSelesai.SetActive(false);
29. audio = GetComponent<AudioSource>();
30. }
31.
32. // Update is called once per frame
33. void Update()
34. {
35.
36. }
37.
38. private void OnCollisionEnter2D(Collision2D coll)
39. {
40. audio.PlayOneShot(hitSound);
41. if (coll.gameObject.name == "TepiKanan")
42. {
43. scoreP1 += 1;
44. TampilkanScore();
45. if (scoreP1 == 5)
46. {
47. panelSelesai.SetActive(true);
50. Destroy(gameObject);
51. return;
52. }
53. ResetBall();
56. }
58. {
59. scoreP2 += 1;
60. TampilkanScore();
61. if (scoreP2 == 5)
62. {
63. panelSelesai.SetActive(true);
66. Destroy(gameObject);
67. return;
68. }
69. ResetBall();
72. }
74. {
79. }
80. }
81.
83. {
86. }
87.
89. {
90. Debug.Log("Score P1: " + scoreP1 + " Score P2: " + scoreP2);
93. }
94. }
4. Terakhir buka Inspector Bola. Lalu masukkan berkas“Glass and Metal Collision.mp3” ke field Hit
Sound Ball Controller (Script).