Teknologi Game v2 6 PDF
Teknologi Game v2 6 PDF
Teknologi Game
Pengembangan Game 2D dengan Unity 3D
dan Orthello Framework
Jurusan D3 Teknik Informatika
Ratno
STMIK AMIKOM YOGYAKARTA
9/15/2012
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
1
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)
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
3
Membuat Android Virtual Device
1. Jalankan AVD Manager yang terletak di C:\android-sdk r20.0.3
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
4
b. Untuk size sdcard beri nilai 50 MiB
4. Kemudian klik Create AVD, Maka anda akan mendapatkan pesan berikut
5
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 .
6
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 .
7
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.
8
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
9
Menambahkan objek orthello
5. Expand folder Objects dibawah folder Orthello, cari objek OT kemudian drag ke tab Hierarchy
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
10
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.
11
9. Buka folder Orthello Objects Sprite, drag ke hierarchy
12
11. Pada property dari SpriteBackground, di bagian inspector cari property image
13. Gunakan zoom-in zoom-out dengan scroll mouse pada tab scene, hasilnya seperti berikut
13
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
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 Teknologi Game | 9/15/2012
14
Menambahkan Bitmap Font
4. Cek folder font yang sudah anda dapatkan, disana terdapat 2 file, yaitu
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
Teknologi Game | 9/15/2012
SpriteAtlas
15
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
10. Agar bitmap dari font anda di mapping, drag ke Atlas Data File file ComicSansBitmap.png anda
16
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
17
Ubah agar posisi x dan y menjadi 10 dan 50 (misal), scale menjadi 2 maka akan tampak seperti berikut
Pada inspector
18
Membuat Prefabs
1. Tambahkan folder prefabs di Tab Project anda
3. Maka anda sudah memiliki 1 buah prefabs untuk template pembuatan button
19
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
20
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.
21
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.
22
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
23
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.
24
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
25
3. Klik pada tombol Create, kemudian pilih C# Script, kemudian beri nama MainMenu
26
5. Coba anda piliih Main Camera, cek pada Inspector, maka script MainMenu sudah menjadi component dari
Main Camera
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 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.
27
8. Deklarasikan field bertipe OTSprite dengan nama buttonPlay untuk menghubungkan dengan GameObject
ButtonPlay yang terdapat di hierarchy
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>();
}
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.
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
28
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>();
}
29
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");
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
30
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…
31
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
32
Animasi 2D di Unity
1. Drag file walkLegs.png dan walkTorso.png ke folder Texture
Prefab Animation
3. Tambahkan object Animation yang terdapat di folder OrthelloObjectsSprites ke Tab Hierarchy
33
4. Rename object Animation di group Animations menjadi AnimLegs
Sprite
5. Perhatikan gambar berikut
34
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
35
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
36
AnimationSprite
17. Untuk memunculkan animasi pencari lebah, tambahkan AnimatingSprite dari folder Objects Sprites
AnimatingSprite ke tab Hierarchy
18. Cari property SpriteContainer dan Animation dari objek AnimSpriteLegs, untuk property sprite container beri
nilai SheetLegs, kemudian property Animation beri property AnimLegs
Groping Object
23. Untuk mempermudah pengaturan objek beekeeper, tambahkan empty objek dari menu GameObject
Teknologi Game | 9/15/2012
Create Empty
37
24. Sehingga pada tab hierarchy tampak seperti gambar berikut
38
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? Teknologi Game | 9/15/2012
39
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
40
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
Character Controller
12. Deklarasikan CharacterController untuk legs dan torso
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
Teknologi Game | 9/15/2012
Vector3 vMovement = new Vector3 (joystick.position.x, joystick.position.y, -10);
cLegs.Move (vMovement);
cTorso.Move (vMovement);
41
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
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
42
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
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.
43
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
44
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
45
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;
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); Teknologi Game | 9/15/2012
vMovement.Normalize();
vMovement *= 10;
cLegs.Move (vMovement);
cTorso.Move (vMovement);
}
46
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.
Platform define for compiling/executing code specifically for Mac
UNITY_STANDALONE_OSX
OS (This includes Universal, PPC and Intel architectures).
UNITY_DASHBOARD_WIDGET Platform define when creating code for Mac OS dashboard widgets.
Use this when you want to compile/execute code for Windows
UNITY_STANDALONE_WIN
stand alone applications.
Platform define for web player content (this includes Windows and
UNITY_WEBPLAYER
Mac Web player executables).
UNITY_WII Platform define for compiling/executing code for the Wii console.
Platform define for compiling/executing code for the iPhone
UNITY_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.
Platform define when compiling code for Google native client (this
UNITY_NACL
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
void Start ()
{
Teknologi Game | 9/15/2012
#if UNITY_STANDALONE_WIN
joystick.Disable();
#endif
}
47
2. Coba anda tekan play atau CTRL+P maka analog tidak akan tampak
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
48
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
6. Tambahkan kode program untuk mengubah arah BeeKeeper, tambahkan sebelum pemanggilan method
Normalize()
49
BeeHive
Prefab BeeHive
1. Tambahkan beehive.png ke folder Texture
3. Cari property image dari object BeeHive, kemudian beri nilai beehive
6. Geser kekiri, kita akan berusaha menambahkan bar untuk jumlah madu yang masih tersedia
50
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
51
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
52
21. Tambahkan script BeeHive ke GameObject BeeHive
23. Buat 4 lagi BeeHive dari prefabs BeeHive, sehingga seperti gambar berikut
53
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
2. Tambahkah OTSprite pada beekeeper kemudian beri nama CheckCollision, depthnya menjadi -20,
3. beri tanda check pada collidable, dengan tipe collider type box
Teknologi Game | 9/15/2012
54
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;
}
55
9. Untuk mendeteksi collision kita akan menggunakan method OnCollision dan OnExit pada beeHive.cs
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);
}
Teknologi Game | 9/15/2012
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
56
Mengumpulkan Madu
1. Tambahkan attribute arrow pada BeeHive.cs
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
6. Pada method OnExit atur agar gather menjadi false, kemudian arrow disembunyikan
57
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;
}
}
}
58
9. Tambahkan 1 buah game object Animation ke group animations, beri nama AnimCollect
59
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
60
15. Tambahkan Animating Sprite ke BeeKeeper, beri nama AnimCollect
16. Atur agar property Sprite Container menjadi SheetCollect, kemudian Animation menjadi AnimCollect
18. Tambahkan deklarasi animCollect di BeeKeeper.cs, kemudian buat animCollect tidak tampak dan depth
menjadi -10 Teknologi Game | 9/15/2012
61
joystick.Disable();
//analogValue=0;
#endif
checkCollision.visible = false;
}
19. Pada method collect, jika animCollect tidak muncul maka munculkan, sembunyikan animTorso dan animLegs
21. Pada method stopCollect, jika animCollect muncul maka sembunyikan, munculkan animTorso dan animLegs
62
22. Hubungkan antara field animCollect di beeKeeper dengan game object animCollect
63
27. Tambahkan attribute greenBar di kelas BeeHive
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)
void Update () {
if (gather)
{
timer += Time.deltaTime;
if (timer > 0.15 && greenBar.size.x>0.01f)
{
greenBar.size -= new Vector2(0.01f, 0);
}
Teknologi Game | 9/15/2012
if (timer > 0.2)
{
timer = 0.0f;
arrow.visible = !arrow.visible;
}
}
64
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)
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();
}
}
65
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 Teknologi Game | 9/15/2012
66
5. Untuk greenjar atur perpertinya seperti berikut
7. Buat script dengan nama HoneyJar, kemudian drag ke game object honey jar
67
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);
}
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 Teknologi Game | 9/15/2012
68
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)
{
Teknologi Game | 9/15/2012
timer = 0.0f;
arrow.visible = !arrow.visible;
}
}
if (gather && (greenBar.size.x < 0.01f || greenJar.size.x>0.9f) )
{
gather = false;
beeKeeper.stopCollect();
}
}
69