Teknologi Game Pengembangan Game 2D dengan Unity 3D dan Orthello Framework

Teknologi Game

Pengembangan Game 2D dengan Unity 3D

dan Orthello Framework

Jurusan D3 Teknik Informatika

2012

Ratno STMIK AMIKOM YOGYAKARTA 9/15/2012

1

T ek no lo gi G am e | 9 /1 5/ 20 12

Intro Unity

Unity adalah software pengembangan yang unik, dimana banyak developer menghabiskan waktunya untuk menulis kode. Unity lebih memfokuskan pada asset daripada kode, dimana fokusnya adalah bagaimana meletakkan asset dalam ruang 3d atau 2d.

Projects

Bagian projects meliputi semua elemen dalam game yang anda buat, seperti models, scripts, levels, menu.

Scenes

Setiap project terdiri dari 1 sampai banyak scenes. Satu buah scene mewakili satu buah level atau tampilan dalam suatu game.

Game Objects

GameObject adalah bagian terpenting di Unity. GameObject adalah container untuk menampung fungsionalitas yang disebut komponen. GameObject biasanya terdiri dari lebih dari satu komponen.

Components

Komponen adalah komponen pembangun dari GameObject, dimana tanpa komponen, maka game object tidak akan berarti apapun. Komponen merepresentasikan entity, material data, script dll. Komponen selalu terpasang di gameobject, tidak bisa berdiri sendiri.

Assets

Terdiri dari material, texture, audio files maupun Prefab.

Prefab

Prefab adalah asset yang sudah didefinisikan menjadi template. Ketika anda meletakkan prefab kedalam scene, maka anda sama dengan melakukan proses instantiasi.

Bahasa Pemrograman

 C#  JavaScript  Boo

Editor

 MonoDevelop  Visual Studio 20xx (2005,2008,2010 dll)

2

T ek no lo gi G am e | 9 /1 5/ 20 12

Java to C#

Java C# package namespace Import Using

Extends : (dibaca titik dua)

Implements : (dibaca titik dua)

3

T ek no lo gi G am e | 9 /1 5/ 20 12

Honeycomb Rush versi Unity

Yang akan dipelajari

1. Perpindahan dari satu layar ke layar yang lain 2. Pembuatan GUI dengan image

3. Tumbukan antar objek 4. Pengendalian karakter 5. Timer

6. Tileset untuk animasi 2D 7. HighScore

Software yang dibutuhkan

1. Unity 3D 3.5.3 (addon android untuk android game) 2. Java SDK

3. Android SDK dengan android platform >=15 4. Orthello 2D Free

Software tambahan yang mungkin dibutuhkan

1. Hiero(Bitmap Fonts)

2. BitmapCombine 3. BitmapMasking

4

T ek no lo gi G am e | 9 /1 5/ 20 12

Membuat Android Virtual Device

1. Jalankan AVD Manager yang terletak di C:\android-sdk r20.0.3

2. Setelah muncul gambar berikut

Pilih New

3. Pada window create android virtual device

Beri nama virtual device seperti berikut AVDxx.xx.xxxx dimana xx adalah nomor induk anda contoh AVD05.11.0718

5

T ek no lo gi G am e | 9 /1 5/ 20 12

b. Untuk size sdcard beri nilai 50 MiB

c. Skin pilih Built-in dengan jenis Default Pada bagian hardware Max VM beri nilai 256

4. Kemudian klik Create AVD, Maka anda akan mendapatkan pesan berikut

5. Dan daftar android virtual device anda sudah bertambah.

6. Jalankan AVD anda dengan memilih AVD yang baru anda buat, kemudian klik start, pada tampilan gambar berikut beri tanda check pada Scale display to real size kemudian ScreenSize beri nilai 5, lalu klik Launch

6

T ek no lo gi G am e | 9 /1 5/ 20 12

7. Karena anda menggunakan Android Virtual Device, bukan device android yang sesungguhnya maka harap bersabar.

8. Proses loading android virtual device

9. Apabila avd anda sudah berhasil jalan dengan baik maka seperti berikut, dan yang menandakan tidak perlu mencari computer lain .

7

T ek no lo gi G am e | 9 /1 5/ 20 12

Membuat project baru di Unity 3D

1. Jalankan unity dengan cara melakukan klik ganda ikon yang terdapat pada desktop anda, jangan lupa segera tekan ctrl + alt + panah bawah agar unity tidak membuka contoh project 3d (biasanya jika contoh projectnya terbuka cukup berat dan memakan waktu lama).

2. Setelah muncul window berikut, pilih create new project, pada project location silahkan pilih folder anda kemudian buat folder dengan nama HoneyCombRush, lalu klik Create

3. Setelah window unity muncul, coba cek pada folder yang tadi anda buat, isinya akan seperti berikut

Assets adalah tempat semua gambar, script, game object dan scene dari game anda. 4. Selamat anda sudah berhasil membuat project unity anda yang pertama .

8

T ek no lo gi G am e | 9 /1 5/ 20 12

Menambahkan orthello ke project

1. Pastikan anda sudah mendapatkan Orthello 2D Framework.unitypackage di komputer anda.

Orthello 2D Framework

Orthello 2D Framework untuk unity ditulis dalam bahasa pemrograman C#. Mengingat unity pada dasarnya dibuat untuk mengembangkan game 3D maka Orthello sangat memudahkan kita dalam membuat game 2D diatas lingkungan 3D. Framework ini akan mempermudah dalam menambahkan gambar 2D atau sprite, dan animasi yang akan berinteraksi satu sama lain atau terhadap pengguna. Orthello menggunakan camera Orthographic.

2. Double klik Orthello 2D Framework.unitypackage dari windows explorer, kemudian pada window Importing package pilih All lalu Import

9

T ek no lo gi G am e | 9 /1 5/ 20 12

MainMenuScene

Membuat scene

1. Project pertama anda secara default akan memberikan Scene yang belum disimpan dan diberi nama Untitled. Untuk menyimpan scene pertama ini silahkan anda tekan ctrl + s

2. Pada window save scene buat folder baru dengan nama Scenes

3. Pilih folder scenes, kemudian pada file name beri nama MainMenu lalu simpan

10

T ek no lo gi G am e | 9 /1 5/ 20 12

Menambahkan objek orthello

5. Expand folder Objects dibawah folder Orthello, cari objek OT kemudian drag ke tab Hierarchy

Sehingga seperti berikut

6. Agar perpektifnya menjadi 2D dan nilai 0,0 untuk sumbu x dan y ada di kanan bawah klik kanan pada penanda xyz, kemudian pilih back

11

T ek no lo gi G am e | 9 /1 5/ 20 12

Membuat background

7. Tambahkan folder texture di project

8. Import titleScreen.png ke folder Texture dengan cara drag titleScreen.png dari windows explorer ke folder texture di Unity.

12

T ek no lo gi G am e | 9 /1 5/ 20 12

9. Buka folder Orthello  Objects  Sprite, drag ke hierarchy

10. Sehingga di tab project tampak seperti berikut

13

T ek no lo gi G am e | 9 /1 5/ 20 12

11. Pada property dari SpriteBackground, di bagian inspector cari property image

12. Drag titleScreen ke property Image

14

T ek no lo gi G am e | 9 /1 5/ 20 12

Menambahkan button

1. Drag buttonBackground.png ke folder texture di unity

2. Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton

Kemudian drag buttonBackground ke property dari SpriteBackground Ubah depthnya menjadi -1

Depth diset -1 artinya bahwa objek ini akan terletak di atas tombol yang memiliki depth =0, semakin besar nilai depth maka suatu objek akan semakin jauh dari posisi user.

15

T ek no lo gi G am e | 9 /1 5/ 20 12

Menambahkan Bitmap Font

4. Cek folder font yang sudah anda dapatkan, disana terdapat 2 file, yaitu

5. Buat folder font dibawah folder texture di unity

6. Drag file ComicSansBitmap.fnt dan ComicSansBitmap.png kedalam folder font yang sudah dibuat

7. Drag SpriteAtlas-Cocos2D-fnt ke tab hierarchy, prefabs ini terletak di folder Orthello Objects Sprites SpriteAtlas

16

T ek no lo gi G am e | 9 /1 5/ 20 12

8. Cek di tab Hierarchy pada objek OT Containers terdapat 1 buah tambahan objek baru, bila di cek di Inspector maka jenisnya adalah OTSprite Atlas BMFont Xml

9. Ubah nama dari Container (id=-18106) menjadi ComicSans

10. Agar bitmap dari font anda di mapping, drag ke Atlas Data File file ComicSansBitmap.png anda

17

T ek no lo gi G am e | 9 /1 5/ 20 12

11. Drag TextSprite ke Hierarchy untuk digunakan menampilkan tulisan, rename menjadi FontComicSans

Pada bagian Inspector untuk objek ComicSans cari property Sprite Container, drag ComicSans ke property ini

18

T ek no lo gi G am e | 9 /1 5/ 20 12

Ubah agar posisi x dan y menjadi 10 dan 50 (misal), scale menjadi 2 maka akan tampak seperti berikut

Pada inspector

19

T ek no lo gi G am e | 9 /1 5/ 20 12

Membuat Prefabs

1. Tambahkan folder prefabs di Tab Project anda

2. Drag SpriteButton ke folder Prefabs

Maka akan menjadi berikut

20

T ek no lo gi G am e | 9 /1 5/ 20 12

4. Tambahkan 1 buah button lagi, dimana button kedua diambil dari prefabs yang sudah anda buat

5. Untuk button yang sebelah kiri ubah namanya di tab project menjadi ButtonPlay

21

T ek no lo gi G am e | 9 /1 5/ 20 12

7. Pilih FontComicSans yang merupakan child objek dari ButtonExit, pada Inspector cari property Text, ubah menjadi Exit

8. Pilih juga FontComicSans yang merupakan child objek dari ButtonPlay, pada Inspector cari property Text, ubah menjadi Play. Coba anda perhatikan pada tab Scene

9. Tampak bahwa play dan exit tulisannya terlalu besar, pilih FontComicSans yang merupakan child objek dari SpriteButton di folder prefabs, lihat pada property Scale, ubah nilai X menjadi 0.008 dan Y menjadi 0.02.

22

T ek no lo gi G am e | 9 /1 5/ 20 12

10. Ubah juga position, untuk x menjadi 0.02 dan y menjadi 0

11. Tampak bahwa sekarang tampilan tulisan sudah didalam tombol

Position untuk FontComicSans karena merupakan child objek dari SpriteButton, maka posisi x dan y diukur berdasarkan ukuran dari SpriteButton

23

T ek no lo gi G am e | 9 /1 5/ 20 12

Resolusi Screen

1. Apabila anda perhatikan, tampak area hitam yang tersisa diantara gambar dan kotak berwarna kuning, warna kuning adalah resolusi yang hendak kita ambil, oleh karena itu, pilih objek OT kemudian View

2. Coba anda cek berapa scale dari SpriteBackground (ditempat saya 1024x512).

3. Oleh karena itu ukuran PixelPerfectResolution juga harus disamakan, cari property Pixel Perfect Resolution di Inspector dari object View, ubah nilai Y menjadi 512

24

T ek no lo gi G am e | 9 /1 5/ 20 12

Latihan

1. Tambahkan 1 buah scene lagi dengan nama Instructions, gunakan gambar Instructions.png untuk membuat background, Instructions scene tidak menggunakan tombol apapun

2. Tambahkan 1 buah scene lagi dengan nama GamePlay, gunakan gambar GamePlayBackground.png untuk membuat background. Disini juga tidak menggunakan tombol apapun.

25

T ek no lo gi G am e | 9 /1 5/ 20 12

Event Handling di Unity

Untuk menangani event handling di OrthelloFramework yang berjalan di Unity, kita akan menggunakan C# (baca CSharp). Dengan bantuan editor MonoDevelop atau Visual Studio.

1. Pastikan Scene yang anda pilih adalah MainMenu, jika belum maka double klik MainMenu. Kita masih mirip seperti gambar

Double klik pada MainMenu di tab Project agar MainMenuScene terpilih.

26

T ek no lo gi G am e | 9 /1 5/ 20 12

3. Klik pada tombol Create, kemudian pilih C# Script, kemudian beri nama MainMenu

27

T ek no lo gi G am e | 9 /1 5/ 20 12

5. Coba anda piliih Main Camera, cek pada Inspector, maka script MainMenu sudah menjadi component dari Main Camera

6. Untuk membuka editor double klik pada script MainMenu

7. Maka anda akan mendapatkan script MainMenu.cs seperti gambar berikut

Kelas MainMenu adalah kelas turunan MonoBehaviour, jika anda menggunakan JavaScript maka secara otomatis akan merupakan turunan dari MonoBehaviour, tapi jika menggunakan C# atau Boo anda harus menuliskan di kode program bahwa suatu kelas turunan MonoBehaviour, dimana disini ditulis dengan kode program

: MonoBehaviour

Method Start

Method ini adalah method yang dipanggil sebelum method update dipanggil untuk yang pertama kali. Start hanya dipanggil sekali pada setiap Behaviour.

Method Update

Method ini adalah method yang dipanggil setiap frame ketika sebuah behavior bersifat enable. Update adalah fungsi yang umumnya digunakan untuk menuliskan logic atau behavior dari objek.

28

T ek no lo gi G am e | 9 /1 5/ 20 12

8. Deklarasikan field bertipe OTSprite dengan nama buttonPlay untuk menghubungkan dengan GameObject ButtonPlay yang terdapat di hierarchy

private OTSprite btnPlay;

9. Deklarasikan juga field bertipe OTSprite dengan nama buttonExit

private OTSprite btnExit;

Menghubungkan Field dengan GameObject

1. Untuk menghubungkan field buttonPlay dengan GameObject ButtonPlay maka tambahkan kode program berikut dimethod update

if(btnPlay==null)

btnPlay=GameObject.Find("ButtonPlay").GetComponent<OTSprite>();

Sehingga kode program di method Update menjadi seperti kode program berikut

void Update () { if(btnPlay==null)

btnPlay=GameObject.Find("ButtonPlay").GetComponent<OTSprite>(); }

Kode program diatas dibaca :

Apabila field btnPlay masih null atau belum diinisialisasi maka field btnPlay akan diinisialisasi dengan memanggil method Find dari kelas GameObject, dimana GameObject yang dicari bernama

ButtonPlay, kemudian memanggil method GetComponent yang bertipe OTSprite untuk mendapatkan kelas OTSprite di GameObject ButtonPlay

Latihan

1. Tuliskan kode program untuk menghubungkan field btnExit dengan GameObject ButtonExit

Event Handling

1. Untuk berpindah dari satu scene ke scene yang lain, adalah dengan menangkap event onInput yang dimiliki oleh objek OTSprite. Untuk menangkap event onInput kita perlu mendefinisikan method untuk menangani kejadian yang akan dilakukan. Definisikan method berikut didalam kelas MainMenu.

void eventDiTombol(OTObject owner){ }

Method diatas bernama eventDiTombol, silahkan apabila anda hendak mengganti nama method menjadi nama yang lain, yang penting parameter method harusnya bertipe OTObject dan berjumlah satu parameter

29

T ek no lo gi G am e | 9 /1 5/ 20 12

2. Untuk mengetahui tombol mana yang mendapat input maka perlu dilakukan pengecekan. Tambahkan kode program berikut di method eventDiTombol

if(owner==btnPlay){

//kode program yang akan dijalankan //apabila kondisi terpenuhi

}

3. Untuk menghubungkan antara method eventDiTombol dengan GameObject ButtonPlay maka tambahkan kode program ada bagian inisialisasi btnPlay

Kode program sebelum

if(btnPlay==null) btnPlay=GameObject.Find("ButtonPlay").GetComponent<OTSprite>(); Diubah menjadi if(btnPlay==null){ btnPlay=GameObject.Find("ButtonPlay").GetComponent<OTSprite>(); btnPlay.onInput=eventDiTombol; } Dibaca :

Apabila field btnPlay masih null atau belum diinisialisasi maka field btnPlay akan diinisialisasi dengan memanggil method Find dari kelas GameObject, dimana GameObject yang dicari bernama

ButtonPlay, kemudian memanggil method GetComponent yang bertipe OTSprite untuk mendapatkan kelas OTSprite di GameObject ButtonPlay.

Kemudian jadikan method eventDiTombol menjadi event yang akan mendengarkan event dari onInput. (delegate)

Sehingga method update anda menjadi

void Update () { if(btnPlay==null){ btnPlay=GameObject.Find("ButtonPlay").GetComponent<OTSprite>(); btnPlay.onInput=eventDiTombol; } if(btnExit==null) btnExit=GameObject.Find("ButtonExit").GetComponent<OTSprite>(); }

30

T ek no lo gi G am e | 9 /1 5/ 20 12

Berpindah Scene

1. Untuk berpindah dari scene yang sekarang aktif ke scene yang lain, tambahkan kode program di method eventDiTombol dimana kode program ini dieksekusi apabila syarat bahwa tombol yang mendapat event adalah btnPlay. Kode programnya sebagai berikut

Application.LoadLevel ("Instructions");

Dimana instructions adalah nama scene yang akan kita tuju.

Sehingga kode program dari method eventDiTombol sebagai berikut

void eventDiTombol(OTObject owner){ if(owner==btnPlay){

//kode program yang akan dijalankan //apabila kondisi terpenuhi

Application.LoadLevel ("Instructions"); }

}

2. Coba anda jalankan project anda dengan menekan CTRL+P atau menekan tombol Play

3. Bila sudah jalan (pilih tab game), coba anda klik tombol play, pasti tidak terjadi sesuai. . Hal ini bisa terjadi karena GameObject ButtonPlay dan ButtonExit pada prefabnya yaitu SpriteButton belum kita aktifkan kemampuannya untuk menerima input, sekarang pilih SpriteButton pada folder Prefabs

31

T ek no lo gi G am e | 9 /1 5/ 20 12

5. Jalankan lagi project anda dengan menekan tombol Play atau CTRL+P 6. Ops, error lagi ya, hehheheeh . Kok bisa? Kenapa?

7. Muncul error seperti ini???

Level 'Instructions' (-1) couldn't be loaded because it has not been added to the build settings.

To add a level to the build settings use the menu File->Build Settings... UnityEngine.Application:LoadLevel(String)

8. Error itu karena anda mencoba pindah dari scene MainMenu ke scene Instructions sedangkan level atau scene anda belum ditambahkan ke build setting dari unity, oleh karena itu, pilih menu File Build Settings…

32

T ek no lo gi G am e | 9 /1 5/ 20 12

9. Sehingga pada bagian Scens in Build tampak seperti gambar berikut

10. Tutup window Build Setting kemudian play lagi project anda, berhasil to pindah Scene, Alhamdulillah 

Latihan

1. Tambahkan event untuk ButtonExit, dimana perintah untuk exit adalah

Application.Quit();

2. Tambahkan event di Instruction Scene, ketika anda menekan dimanapun, maka akan berpindah ke GamePlay Scene, jangan lupa tambahkan 1 script lagi dengan nama Instructions untuk menangani event handling di instruction scene.

33

T ek no lo gi G am e | 9 /1 5/ 20 12

Animasi 2D di Unity

1. Drag file walkLegs.png dan walkTorso.png ke folder Texture

2. Silahkan anda buka GamePlay Scene

3. Tambahkan object Animation yang terdapat di folder OrthelloObjectsSprites ke Tab Hierarchy

34

T ek no lo gi G am e | 9 /1 5/ 20 12

4. Rename object Animation di group Animations menjadi AnimLegs

5. Perhatikan gambar berikut

Pada gambar diatas terdiri dari 16 kolom dan 4 baris. 6. Gambar diatas dibaca berikut

Arah Baris Kolom Index

Selatan 1 0-7 0-7 Utara 1 8-15 8-15 Barat 2 0-7 16-23 Timur 2 8-15 24-31 Barat Daya 3 0-7 32-39 Tenggara 3 8-15 40-47 Barat Laut 4 0-7 48-55 Timur Laut 4 8-15 56-63

35

T ek no lo gi G am e | 9 /1 5/ 20 12

8. Ubah agar sizenya menjadi 8

9. Kembali ke bagian tab Hierarchy, tambahkan SpriteSheet, tambahkan ke tab hierarchy, maka objek ini akan masuk ke bagian Containers, ubah nama objek ini menjadi SheetLegs

10. Cek pada bagian Inspector dari objek SheetLegs, disana terdapat 2 property penting yang akan kita gunakan yaitu Frames XY dan Texture

36

T ek no lo gi G am e | 9 /1 5/ 20 12

12. Untuk property X dan Y, X mewakili kolom, Y mewakili baris X 16 dan Y 4

13. Pilih lagi objek AnimLegs, cari Element 0 di inspector, ubah name menjadi North agar Element 0 menjadi North, untuk container ubah menjadi SheetLegs, start frame menjadi 0, end frame jadi 7.

Pengaturan Frame

14. Sesuaikan semua Element dengan tabel berikut Name Start Frame-End Frame

South 0-7 North 8-15 West 16-23 East 24-31 SouthWest 32-39 SouthEast 40-47 NorthWest 48-55 NorthEast 56-63

15. Ubah nilai fps dari objek AnimLegs menjadi 8

16. Lakukan langkah 3 sampai langkah 15, dimana anda akan memiliki objek baru di Containers dengan nama AnimTorso dan objek baru di Containers dengan nama SheetTorso, gambar yang digunakan adalah walkTorso

37

T ek no lo gi G am e | 9 /1 5/ 20 12 17. Semoga beruntung 