70
Teknologi Game Pengembangan Game 2D dengan Unity 3D dan Orthello Framework Jurusan D3 Teknik Informatika 2012 Ratno STMIK AMIKOM YOGYAKARTA 9/15/2012

Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

  • Upload
    hacong

  • View
    224

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

Teknologi Game Pengembangan Game 2D dengan Unity 3D dan Orthello Framework Jurusan D3 Teknik Informatika

2012

Ratno STMIK AMIKOM YOGYAKARTA

9/15/2012

Page 2: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

1

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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)

Page 3: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

2

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Java to C#

Java C#

package namespace Import Using Extends : (dibaca titik dua) Implements : (dibaca titik dua) For(type_data object : list) For(type_data object in list)

Page 4: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

3

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 5: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

4

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

a. Pada target pilih Android 4.0.3 – API Level 15

Page 6: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

5

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 7: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

6

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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 .

10. Silahkan tutup avd anda.

Page 8: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

7

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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 .

Page 9: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

8

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

3. Pada bagian project, orthello sudah ditambahkan beserta semua sample projectnya.

Page 10: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

9

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

4. Pada tab project akan ditambahkan folder Scenes dan didalamya terdapat file scene anda

Page 11: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

10

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Maka tampilan dari tab scene seperti berikut

Page 12: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

11

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

Page 13: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

12

Tek

no

logi

Gam

e |

9/1

5/2

01

2

9. Buka folder Orthello Objects Sprite, drag ke hierarchy

10. Sehingga di tab project tampak seperti berikut

Rename menjadi SpriteBackground dengan cara klik kanan rename

Page 14: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

13

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

12. Drag titleScreen ke property Image

13. Gunakan zoom-in zoom-out dengan scroll mouse pada tab scene, hasilnya seperti berikut

Page 15: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

14

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

3. Maka di tab scene tampak sebagai berikut

Page 16: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

15

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 17: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

16

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Sehingga hasilnya seperti berikut

Page 18: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

17

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 19: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

18

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Pada inspector

12. Ubah agar FontComicsSans menjadi child object dari SpriteButton

Page 20: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

19

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Membuat Prefabs 1. Tambahkan folder prefabs di Tab Project anda

2. Drag SpriteButton ke folder Prefabs

Maka akan menjadi berikut

3. Maka anda sudah memiliki 1 buah prefabs untuk template pembuatan button

Page 21: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

20

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

6. Untuk button sebelah kanan ubah namanya di tab project menjadi ButtonExit

Page 22: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

21

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

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

Page 23: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

22

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Scale berfungsi untuk melakukan melakukan perbesaran/pengecilan ukuran.

Page 24: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

23

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 25: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

24

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

Page 26: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

25

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

2. Buat 1 buah folder lagi dengan nama Scripts

Page 27: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

26

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

4. Dragdrop Script MainMenu ke objek Main Camera

Page 28: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

27

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

Page 29: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

28

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

2. Untuk mengetahui tombol mana yang mendapat input maka perlu dilakukan pengecekan. Tambahkan kode

program berikut di method eventDiTombol

Page 30: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

29

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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>();

}

Page 31: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

30

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

4. Cari property Register Input pada Inspector, kemudian beri tanda check

Page 32: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

31

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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…

Drag semua scene anda dari tab project ke Scenes in Build

Page 33: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

32

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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.

Shalat magrib dulu

Page 34: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

33

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Animasi 2D di Unity

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

2. Silahkan anda buka GamePlay Scene

Prefab Animation 3. Tambahkan object Animation yang terdapat di folder OrthelloObjectsSprites ke Tab Hierarchy

Sehingga seperti berikut

Page 35: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

34

Tek

no

logi

Gam

e |

9/1

5/2

01

2

4. Rename object Animation di group Animations menjadi AnimLegs

Sprite 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

7. Anda pilih objek AnimLegs, cek pada bagian Inspector, cari property Framesets

Page 36: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

35

Tek

no

logi

Gam

e |

9/1

5/2

01

2

8. Ubah agar sizenya menjadi 8

SpriteSheet 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

11. Drag file walkLegs ke property Texture

Page 37: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

36

Tek

no

logi

Gam

e |

9/1

5/2

01

2

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

Page 38: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

37

Tek

no

logi

Gam

e |

9/1

5/2

01

2

AnimationSprite 17. Untuk memunculkan animasi pencari lebah, tambahkan AnimatingSprite dari folder Objects Sprites

AnimatingSprite ke tab Hierarchy

Rename menjadi AnimSpriteLges maka hasilnya pada hierarchy seperti berikut,

18. Cari property SpriteContainer dan Animation dari objek AnimSpriteLegs, untuk property sprite container beri

nilai SheetLegs, kemudian property Animation beri property AnimLegs

19. Pada depth,beri nilai -10 agar tampak di layar

20. Ulangi langkah 17 sampa 19 untuk AnimSpriteTorso

21. Jalankan melalui tombol Play, cek hasilnya, apakah animasi anda sudah berjalan dengan baik?? Semoga

berhasil .

22. Agar animasi orang selalu mengarah ke selatan, atur agar property dari Animation Frameset menjadi South,

untuk objek AnimSpriteLegs dan AnimSpriteTorso

Groping Object 23. Untuk mempermudah pengaturan objek beekeeper, tambahkan empty objek dari menu GameObject

Create Empty

Page 39: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

38

Tek

no

logi

Gam

e |

9/1

5/2

01

2

24. Sehingga pada tab hierarchy tampak seperti gambar berikut

25. Rename dari GameObject menjadi BeeKeeper

26. Drag AnimSpriteLegs dan AnimSpriteTorso kemudian drop di BeeKeeper

Page 40: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

39

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Kendali Karakter di Unity

Game yang akan kita buat ditargetkan minimal berjalan di platform Windows dan Android, misalnya di

Windows, untuk menggerakkan karakter kita menggunakan tombol panah dan di Androd kita menggunakan

analog.

Kendali di Android Di Android kita akan menggunakan Analog sebagai kendali

1. Dari menu Assets Import package Standard Asset (Mobile), maka akan muncul windows berikut

Pilih Import

2. Maka anda akan mendapatkan folder baru di Project yaitu Standard Assets (Mobile)

3. Cek pada folder Standard Assets (Mobile) Scripts, apakah anda menemukan Joystick?

Page 41: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

40

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Call JavaScript dari C# 4. Sekarang tambahkan folder 1 lagi bernama Standard Assets

Folder ini haruslah bernama Standard Assets karena nantinya script Joystick akan kita move ke folder ini.

Mengingat Joystick adalah script dengan bahasa JavaScript dan game kita buat dengan C# maka harus

dipindahkan ke folder Standard Assets. Karena yang berada di folder Standard Assets adalah script yang

akan decompile untuk pertama kali

5. Pastikan GamePlay scene terbuka

6. Cari prefab Single Joystick di folder Standard Assets (Mobile) Prefabs

7. Drag Single Joystick ke tab hierarchy

Page 42: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

41

Tek

no

logi

Gam

e |

9/1

5/2

01

2

8. Pada Tab Game kurang lebih tampak seperti gambar berikut

9. Untuk menghubungkan antara BeeKeeper anda dengan Single Joystick, tambahkan 1 buah Script dengan

nama BeeKeeper, kemudian letakkan di folder Scripts

10. Buka BeeKeeper scripts dengan klik ganda

11. Deklarasikan attribute joystick dengan tipe Joystick dengan modifier public

public Joystick joystick;

Character Controller 12. Deklarasikan CharacterController untuk legs dan torso

public CharacterController cLegs;

public CharacterController cTorso;

CharacterController adalah kelas yang memudahkan kita untuk menggerakkan suatu objek.

13. Pada method Update di kelas BeeKeeper, deklarasikan local variable, dengan tipe Vector3, nama

vMovement dan inisialisasi dengan nilai diambil dari objek joystick

Vector3 vMovement = new Vector3 (joystick.position.x, joystick.position.y, -10);

14. Untuk menggerakkan cLegs dan cTorso, panggil method move

cLegs.Move (vMovement);

cTorso.Move (vMovement);

Page 43: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

42

Tek

no

logi

Gam

e |

9/1

5/2

01

2

15. Kembali ke UnityEditor, pilih objek AnimSpriteLegs, kemudian dari menu pilih Component Physics

Character Controller

Apabila anda cek inspector dari AnimSpriteLegs maka sudah ditambahkan component Character Controller

16. Ulangi langkah 15 untuk AnimSpriteTorso

17. Untuk mengkoneksikan antara script BeeKeeper dengan objek BeeKeeper maka drag Script BeeKeeper ke

Object BeeKeeper

18. Pilih Objek BeeKeeper yang ada di tab Hierarchy, pada inspector terdapat 3 property

19. Drag Single Joystick ke property Joystick, Drag AnimSpriteLegs ke CLegs, Drag AnimSpriteTorso ke CTorso

Page 44: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

43

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Persiapan Virtual Device 20. Jalankan Android Virtual Device anda sambil berdoa semoga AVD bisa berjalan dan sambil belajar bersabar

21. Buka command prompt anda, masuk ke folder platform-tools di sdk manager

22. Jalankan perintah adb devices

23. Apabila sudah tampak ada emulator-5544(mungkin di tempat anda berbeda), ini menandakan bahwa ADB

anda sudah terhubung dengan emulator. ADB adalah tools yang memungkinkan kita untuk berkomunikasi

dengan emulator atau android device kita.

Page 45: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

44

Tek

no

logi

Gam

e |

9/1

5/2

01

2

24. Dari menu Edit Preferences, pada window Unity Preferences, pilih External Tools, pada Android SDK

Location, pilih lokasi sdk anda, misal punya saya c:/android-sdk r20.0.3

Switch Platform 25. Apabila build platform dari Unity anda masih PC and Mac Standalone maka dari menu File Build Settings

26. Pada window Build Setting, tambahkan semua scene anda

Dengan cara dragdrop dari tab Project ke bagian Scenes in Build

27. Pada window Build Settings, pilih Android kemudian klik Switch Platform

Page 46: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

45

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Android Player Setting 28. Bila symbol Unity sudah ada di samping tulisan Android maka proses switch sudah berhasil

Kemudian klik Player Settings, maka pada inspector tampak Players Settings, silahkan anda pilih yang icon

android other settings, pada bagian Bundle Identifier ubah menjadi com.teknogame.honeycombrush

29. Kemudian pada Window BuildSetting sambil mengucap bismillah atau sesuai kepercayaan masing – masing

klik tombol Build and Run, beri nama file sesuai selera anda missal HoneyCombRush.apk

30. Kemungkinan besar di emulator muncul not responding atau semacamnya, coba kita turunkan konfigurasi

buildnya menjadi

Property Value

Device Filter ARMv6 with FVP

Graphics Level OpenGL ES 1.x

31. Coba anda Build and Run lagi, bila anda ingin membuat device anda menjadi horizontal (miring ) maka

tekan CTRL + F11, waduh kok orangnya kakinya diatas

32. Kembali ke bagian build setting, pada bagian Resolution and Presentation, untuk Default Orientation

menjadi Landscape Right, Show Loading Indicator menjadi large

Page 47: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

46

Tek

no

logi

Gam

e |

9/1

5/2

01

2

33. Build and Run lagi

34. Coba anda gerakkan analognya, tampak gerakan dari orang sangat lambat, tambahkan kode program

berikut di method Update kelas BeeKeeper

vMovement *= 10;

35. Sehingga method update anda tampak seperti berikut

void Update ()

{

Vector3 vMovement = new Vector3 (

joystick.position.x, joystick.position.y, -10);

vMovement *= 10;

cLegs.Move (vMovement);

cTorso.Move (vMovement);

}

36. Coba lagi, apkah anda menemukan hal yang aneh?? Hehehe

37. Tambahkan vMovement.Normalize() sebelum vMovement dikali 10 dan coba lagi dijalankan . Apabila

anda gerakkan analog, mungkin tampak lambat, itu karena di emulator, sehingga direkomendasikan dengan

device sesungguhnya.

void Update ()

{

Vector3 vMovement = new Vector3 (

joystick.position.x, joystick.position.y, -10);

vMovement.Normalize();

vMovement *= 10;

cLegs.Move (vMovement);

cTorso.Move (vMovement);

}

Page 48: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

47

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Predefined Preprocessor Untuk memisahkan antara kendali di windows dan di android kita menggunakan preprocessor yang sudah

didefinisikan di unity, berikut ini daftar yang sudah didefinisikan

UNITY_EDITOR Define for calling Unity Editor scripts from your game code.

UNITY_STANDALONE_OSX Platform define for compiling/executing code specifically for Mac

OS (This includes Universal, PPC and Intel architectures).

UNITY_DASHBOARD_WIDGET Platform define when creating code for Mac OS dashboard widgets.

UNITY_STANDALONE_WIN Use this when you want to compile/execute code for Windows

stand alone applications.

UNITY_WEBPLAYER Platform define for web player content (this includes Windows and

Mac Web player executables).

UNITY_WII Platform define for compiling/executing code for the Wii console.

UNITY_IPHONE Platform define for compiling/executing code for the iPhone

platform.

UNITY_ANDROID Platform define for the Android platform.

UNITY_PS3 Platform define for running PlayStation 3 code.

UNITY_XBOX360 Platform define for executing Xbox 360 code.

UNITY_NACL Platform define when compiling code for Google native client (this

will be set additionally to UNITY_WEBPLAYER).

UNITY_FLASH Platform define when compiling code for Adobe Flash.

Kendali di Windows 1. Agar analog ketika dijalankan di Unity Editor/Window tidak Nampak maka tambahkan kode program berikut

di kelas BeeKeeper method start

Menonaktifkan joystick #if UNITY_STANDALONE_WIN

joystick.Disable();

#endif

Sehingga kode program dari method start seperti berikut

void Start ()

{

#if UNITY_STANDALONE_WIN

joystick.Disable();

#endif

}

Page 49: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

48

Tek

no

logi

Gam

e |

9/1

5/2

01

2

2. Coba anda tekan play atau CTRL+P maka analog tidak akan tampak

3. Ubah kode program untuk inisialisasi vMovement menjadi seperti berikut

Menangkap input panah di Keyboard #if UNITY_EDITOR || UNITY_STANDALONE_WIN

Vector3 vMovement=new Vector3

(Input.GetAxis("Horizontal"),Input.GetAxis("Vertical"),-10);

#else

Vector3 vMovement = new Vector3 (joystick.position.x,

joystick.position.y, -10);

#endif

4. Coba anda jalankan, kendalikan dengan arah panah, maka karakter anda bisa dikendalikan tanpa joystick.

Arah Animasi Untuk merubah arah animasi, baik di windows maupun di android, kode programnya kurang lebih sama

1. Gunakan vector untuk menangkap arah, dengan ketentuan sebagai berikut

Arah X Y

North 0 >0

South 0 <0

East >0 0

West <0 0

NorthEast >0 >0

NorthWest <0 >0

SouthEast >0 <0

SouthWest <0 <0

2. Tambahkan attribute animLegs dan animTorso, dengan tipe OTAnimatingSprite dengan modifier public (cara

ini tentunya masih harus diperingkas lagi secara kode program)

public OTAnimatingSprite animLegs;

public OTAnimatingSprite animTorso;

Page 50: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

49

Tek

no

logi

Gam

e |

9/1

5/2

01

2

3. Tampak pada Inspector dari BeeKeeper, tampak ada 2 tambahan property baru, yaitu Anim Legs dan Anim

Torso

4. Drag AnimSpriteLegs di tab Hierarchy ke Anim Legs, dan AnimSpriteTorso di tab Hierarchy ke Anim Torso

5. Deklarasikan analogValue sebagai attribute

public float analogValue = 0.3f;

6. Tambahkan kode program untuk mengubah arah BeeKeeper, tambahkan sebelum pemanggilan method

Normalize()

if (vMovement.x > analogValue) {//kanan

if (vMovement.y > analogValue && animLegs.animationFrameset!="NorthEast" ) {

animLegs.animationFrameset="NorthEast";

animTorso.animationFrameset="NorthEast";

} else if (vMovement.y < -analogValue && animLegs.animationFrameset!="SouthEast" ) {

animLegs.animationFrameset="SouthEast";

animTorso.animationFrameset="SouthEast";

}

else if(vMovement.y < analogValue && vMovement.y > -analogValue &&

animLegs.animationFrameset!="East"){

animLegs.animationFrameset="East";

animTorso.animationFrameset="East";

}

}

7. Tambahkan untuk arah mata angin yang lain.

Page 51: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

50

Tek

no

logi

Gam

e |

9/1

5/2

01

2

BeeHive

Prefab BeeHive 1. Tambahkan beehive.png ke folder Texture

2. Tambahkan Sprite ke hierarchy, beri nama BeeHive

3. Cari property image dari object BeeHive, kemudian beri nilai beehive

4. Ubah dept dari BeeHive menjadi -10

5. Ubah scale dari BeeHive menjadi 96x96

6. Geser kekiri, kita akan berusaha menambahkan bar untuk jumlah madu yang masih tersedia

Page 52: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

51

Tek

no

logi

Gam

e |

9/1

5/2

01

2

7. Tambahkan file barBlackBorder.png ke dan Arrow.png ke folder Texture

8. Tambahkan Filled Sprite agar menjadi child object dari BeeHive, rename menjadi BlackBar

9. Ubah depthnya menjadi -11, position x menjadi -0.035 dan y menjadi -0.33

10. Ubah scale x menjadi 0.95 dan y menjadi 0.12

11. Property image diisi dengan nama barBlackBorder

12. Maka tampilannya seperti berikut

13. Tambahkan barGreen.png ke folder Texture

14. Tambahkan lagi FilledSprite menjadi child dari beeHive, rename menjadi GreenBar, atur property nya seperti

berikut

Page 53: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

52

Tek

no

logi

Gam

e |

9/1

5/2

01

2

15. Atur agar depthnya menjadi -12, kemudian property Image menjadi barGreen, maka tampilannya seperti

berikut

16. Tambahkan panah penanda bahwa beehive tersebut sedang diambil madunya, tambahkan sprite menjadi

child dari BeeHive, rename menjadi Arrow

17. Atur agar propertynya seperti berikut

18. Depthnya menjadi -10

19. Atur property image menjadi Arrow, tampilannya menjadi seperti berikut

20. Tambahkan scripts C# dengan nama BeeHive ke folder Scripts

Page 54: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

53

Tek

no

logi

Gam

e |

9/1

5/2

01

2

21. Tambahkan script BeeHive ke GameObject BeeHive

22. Tambahkan BeeHive ke folder Prefabs

23. Buat 4 lagi BeeHive dari prefabs BeeHive, sehingga seperti gambar berikut

Page 55: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

54

Tek

no

logi

Gam

e |

9/1

5/2

01

2

24. Ubah scale dari prefabs beehive menjadi 64x64 maka semua gameobject yang mengacu akan menjadi kecil

Tugas BeeHive1 Buat agar beekeeper hanya beranimasi ketika menekan arah saja

Collision Detection pada BeeHive dan BeeKeeper 1. Pilih prefabs BeeHive, kemudian beri tanda check pada property Collidable

Collidable pada property

2. Tambahkah OTSprite pada beekeeper kemudian beri nama CheckCollision, depthnya menjadi -20,

3. beri tanda check pada collidable, dengan tipe collider type box

4. Tambahkan field checkCollision pada BeeKeeper.cs

public OTSprite checkCollision;

Page 56: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

55

Tek

no

logi

Gam

e |

9/1

5/2

01

2

5. Tambahkan kode program berikut untuk mengatur posisi dari checkCollision, tambahkan sebelum

vMovement.Normalize()

switch (animLegs.animationFrameset)

{

case "North":

checkCollision.position = animLegs.position + new Vector2(0,0);

break;

case "South":

checkCollision.position = animLegs.position + new Vector2(0, -16);

break;

case "West":

checkCollision.position = animLegs.position + new Vector2(-16, -16);

break;

case "East":

checkCollision.position = animLegs.position + new Vector2(16, -16);

break;

}

6. Hubungkan antara field checkCollision dengan sprite Check Collision

7. Buka Script BeeHive.cs, tambahkan attribute beeHive dan beeKeeper

public OTSprite beeHive;

public OTSprite beeKeeper;

8. Tambahkan attribute allowMove pada beekeeper.cs

public bool allowMove = true;

Page 57: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

56

Tek

no

logi

Gam

e |

9/1

5/2

01

2

9. Untuk mendeteksi collision kita akan menggunakan method OnCollision dan OnExit pada beeHive.cs

public void OnCollision(OTObject owner)

{

beeKeeper.allowMove = false;

}

public void OnExit(OTObject owner)

{

beeKeeper.allowMove = true;

}

Jika terjadi collision maka beeKeeper tidak diperbolehkan untuk bergerak, jika keluar dari collision

beeKeeper boleh bergerak

10. Sambungkan event onCollision dengan method OnCollision serta onExit dengan method OnExit pada

BeeHive.cs di method start

void Start () {

beeHive.onCollision = OnCollision;

beeHive.onExit = OnExit;

}

11. Pada BeeKeeper.cs gunakan pengecekan allowMove untuk menggerakkan objek di method update

Semula

vMovement.Normalize();

vMovement *= 10;

cLegs.Move(vMovement);

cTorso.Move(vMovement);

Menjadi

if (allowMove)

{

vMovement.Normalize();

vMovement *= 10;

cLegs.Move(vMovement);

cTorso.Move(vMovement);

}

Tugas BeeHive2 1. Lengkapi kode program untuk mengatur posisi checkCollision untuk posisi selain North,South,West,East

2. Lengkapi kode program agar karakter atau BeeHive tidak dari batas background

Page 58: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

57

Tek

no

logi

Gam

e |

9/1

5/2

01

2

Mengumpulkan Madu 1. Tambahkan attribute arrow pada BeeHive.cs

public OTSprite arrow;

2. Hubungkan arrow dengan prefabs arrow pada folder prefabs

3. Tambahkan field gather dan timer di BeeHive.cs

public bool gather;

public float timer;

4. Atur agar arrow defaultnya adalah tidak tampil, gather adalah false dan timer adalah 0.0f, melalui method

start di kelas BeeHive.cs

void Start () {

beeHive.onCollision = OnCollision;

beeHive.onExit = OnExit;

arrow.visible = false;

gather = false;

timer = 0.0f;

}

5. Pada method OnCollision atur agar nilai dari gather menjadi true

public void OnCollision(OTObject owner)

{

beeKeeper.allowMove = false;

gather = true;

}

6. Pada method OnExit atur agar gather menjadi false, kemudian arrow disembunyikan

public void OnExit(OTObject owner)

{

beeKeeper.allowMove = true;

gather = false;

arrow.visible = false;

}

Page 59: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

58

Tek

no

logi

Gam

e |

9/1

5/2

01

2

7. Lakukan pengecekan di method update bila status gather adalah true maka arrow akan berkedip – kedip

void Update () {

if (gather)

{

timer += Time.deltaTime;

if (timer > 0.2)

{

timer = 0.0f;

arrow.visible = !arrow.visible;

}

}

}

8. Tambahkan file collect.png ke folder Texture anda

Sehingga di tab project seperti berikut

Page 60: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

59

Tek

no

logi

Gam

e |

9/1

5/2

01

2

9. Tambahkan 1 buah game object Animation ke group animations, beri nama AnimCollect

10. Pada framesets ubah size menjadi 1

11. Ubah nama dari Element 0 menjadi Collect

Page 61: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

60

Tek

no

logi

Gam

e |

9/1

5/2

01

2

12. Tambah 1 buah SpriteSheet ke Container beri nama SheetCollect

13. Ubah nilai frames XY, untuk X menjadi 4 dan Y menjadi 1 kemudian Texture menjadi collect (ambil gambar

collect.png)

14. Kembali ke AnimCollect, untuk Container beri nilai SheetCollect, start Frame 0 dan End Frame 3.

pastikan fps 4

Page 62: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

61

Tek

no

logi

Gam

e |

9/1

5/2

01

2

15. Tambahkan Animating Sprite ke BeeKeeper, beri nama AnimCollect

16. Atur agar property Sprite Container menjadi SheetCollect, kemudian Animation menjadi AnimCollect

17. Buat method dengan nama collect di BeeKeeper.cs

public void collect()

{

}

18. Tambahkan deklarasi animCollect di BeeKeeper.cs, kemudian buat animCollect tidak tampak dan depth

menjadi -10

public OTAnimatingSprite animCollect;

// Use this for initialization

void Start()

{

animCollect.visible = false;

animCollect.depth = -10;

#if UNITY_STANDALONE_WIN

Page 63: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

62

Tek

no

logi

Gam

e |

9/1

5/2

01

2

joystick.Disable();

//analogValue=0;

#endif

checkCollision.visible = false;

}

19. Pada method collect, jika animCollect tidak muncul maka munculkan, sembunyikan animTorso dan animLegs

public void collect()

{

if (animCollect.visible)

{

animCollect.visible = true;

animLegs.visible = false;

animTorso.visible = false;

}

}

20. Tambahkan method stopCollect

public void stopCollect()

{

}

21. Pada method stopCollect, jika animCollect muncul maka sembunyikan, munculkan animTorso dan animLegs

public void stopCollect()

{

if (animCollect.visible)

{

animCollect.visible = false;

animLegs.visible = true;

animTorso.visible = true;

}

}

Page 64: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

63

Tek

no

logi

Gam

e |

9/1

5/2

01

2

22. Hubungkan antara field animCollect di beeKeeper dengan game object animCollect

23. Atur agar duration dari animCollect menjadi 0.5

24. Ubah ukuran animCollect untuk X menjadi 73 dan Y menjadi 83

25. Atur agar posisi animCollect mengikuti posisi animLegs, tambahkah di method collect

public void collect()

{

if (!animCollect.visible)

{

animCollect.position = animLegs.position;

animCollect.visible = true;

animLegs.visible = false;

animTorso.visible = false;

}

}

26. Di editor seperti berikut

Page 65: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

64

Tek

no

logi

Gam

e |

9/1

5/2

01

2

27. Tambahkan attribute greenBar di kelas BeeHive

public OTSprite greenBar;

28. Hubungkan antara greenBar di prefabs dengan field greenBar

29. Ubah agar pivot dari Greenbar menjadi left, ubah yang di prefabs

30. Tambahkan kode program untuk mengecilkan ukuran bar di kelas BeeHive, pada method update sebelum

pengecekan if(timer>0.2)

if (timer > 0.15 && greenBar.size.x>0.01f)

{

greenBar.size -= new Vector2(0.01f, 0);

}

Sehingga kode program pada method update seperti berikut

void Update () {

if (gather)

{

timer += Time.deltaTime;

if (timer > 0.15 && greenBar.size.x>0.01f)

{

greenBar.size -= new Vector2(0.01f, 0);

}

if (timer > 0.2)

{

timer = 0.0f;

arrow.visible = !arrow.visible;

}

}

}

Page 66: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

65

Tek

no

logi

Gam

e |

9/1

5/2

01

2

31. Jalankan game anda, dekatkan beeKeeper ke beeHive, tampak ketika greenBar sudah habis, beeKeeper

masih mengumpulkan pada, oleh karena itu tambahkan pengecekan, pada method update diluar blok

if(gather)

if (gather && greenBar.size.x < 0.01f)

{

gather = false;

beeKeeper.stopCollect();

}

Sehingga tampak seperti berikut

void Update () {

if (gather)

{

timer += Time.deltaTime;

if (timer > 0.15 && greenBar.size.x>0.01f)

{

greenBar.size -= new Vector2(0.01f, 0);

}

if (timer > 0.2)

{

timer = 0.0f;

arrow.visible = !arrow.visible;

}

}

if (gather && greenBar.size.x < 0.01f)

{

gather = false;

beeKeeper.stopCollect();

}

}

Menyimpan madu sementara (HoneyJar) 1. Tambahkan honeyJar.png ke folder texture

Page 67: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

66

Tek

no

logi

Gam

e |

9/1

5/2

01

2

2. Tambahkan 1 buah sprite ke tab Hierarchy, kemudian beri nama HoneyJar, depth menjadi -12

3. Property image beri nilai honeyjar.png, pada gameobject HoneyJar beri ukuran X 48 dan Y 64, letakkan di

sebelah pojok kiri atas

4. Tambahkan 2 filledSprite menjadi child dari HoneyJar, yang pertama beri nama blackJar, yang kedua beri

nama greenJar.

Untuk black jar atur propertinya seperti berikut

Deptnya menjadi -12, property image dengan barBlackBorder

Page 68: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

67

Tek

no

logi

Gam

e |

9/1

5/2

01

2

5. Untuk greenjar atur perpertinya seperti berikut

Deptnya menjadi -13, property image menjadi barGreen

6. Sehingga seperti gambar berikut

7. Buat script dengan nama HoneyJar, kemudian drag ke game object honey jar

8. Buka HoneyJar.cs, tambahkan field greenJar

public OTSprite greenJar;

Page 69: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

68

Tek

no

logi

Gam

e |

9/1

5/2

01

2

9. Hubungkan antara attribute greenJar dengan game object Green Jar

10. Ubah agar sizenya greenJar menjadi 0.01f melalui method start di kelas HoneyJar

void Start () {

greenJar.size = new Vector2(0.01f, greenJar.size.y);

}

11. Tambahkan attribute greenJar pada BeeHive.cs

public OTSprite greenJar;

12. Hubungkan antara game object greenJar dengan attribute greenJar pada kelas BeeHive, ingat ada 5 beeHive

jadi satu satu ya heheheh

13. Atur agar pivot dari greenJar menjadi left

Page 70: Teknologi Game - ratnokustiawan.files.wordpress.com · Tambahkan 1 buah Sprite objek ke bagian hierarcy kemudian ubah nama menjadi SpriteButton Kemudian drag buttonBackground ke property

69

Tek

no

logi

Gam

e |

9/1

5/2

01

2

14. Ubah agar kode program di method update anda akan meresize ukuran greenJar ketika greenBar berkurang

void Update () {

if (gather)

{

timer += Time.deltaTime;

if (timer > 0.15 && greenBar.size.x>0.01f && greenJar.size.x<0.9f)

{

greenBar.size -= new Vector2(0.01f, 0);

greenJar.size += new Vector2(0.02f, 0);

}

if (timer > 0.2)

{

timer = 0.0f;

arrow.visible = !arrow.visible;

}

}

if (gather && greenBar.size.x < 0.01f )

{

gather = false;

beeKeeper.stopCollect();

}

}

15. Coba anda jalankan, dekatkan beeKeeper ke tempat pengumpulan madu, tampak ketika honeyJar sudah

penuh si beeKeeper masih berusaha mengumpulkan madu, tambahkan validasi lagi agar ketika honeyJar

sudah penuh maka berhenti mengumpulkan madu

void Update () {

if (gather)

{

timer += Time.deltaTime;

if (timer > 0.15 && greenBar.size.x>0.01f && greenJar.size.x<0.9f)

{

greenBar.size -= new Vector2(0.01f, 0);

greenJar.size += new Vector2(0.02f, 0);

}

if (timer > 0.2)

{

timer = 0.0f;

arrow.visible = !arrow.visible;

}

}

if (gather && (greenBar.size.x < 0.01f || greenJar.size.x>0.9f) )

{

gather = false;

beeKeeper.stopCollect();

}

}