Riki Fantoni | 1

BAB I

Pengenalan Adobe Flash

Pada bahasan awal ini, akan saya bahas mengenai dasar-dasar pengenalan tools dari
Adobe Flash. Kalau anda dulu sempat mengenal Flash yang masih vendor Macromedia, tools-
tools yang dipakai sebenarnya hampir sama seperti yang masih bervendor Macromedia. Dan
kini, adobe flash juga masih menerapkan standarisasi dari macromedia. Hanya beberapa opsi saja
yang berbeda. Saat ini adobe sudah memunculkan versi terbarunya. Yakni versi CS6, walau pun
versinya tinggi tetapi kalau saya lihat, tools-tools dan default workspace-nya masih tetap hampir
sama seperti versi sebelumnya. Hanya ada beberapa saja yang berbeda, di versi terbaru. Pada
versi terbaru tersebut terdapat tools yang memungkinkan kita membuat efek ruang (3D).

1.1 Halaman Awal

Halaman awal adalah tampilan yang pertama kali muncul ketika kita membuka
Adobe Flash CS6 Profesional. Cara membuka Adobe Flash CS6 Profesional pertama kali
yaitu double klik pada icon yang ada didesktop atau lihat dari daftar program. Tampilan
start page pada awal membuka aplikasi Adobe Flash CS6 Profesional seperti pada gambar
berikut :

Gambar 1.1 Tampilan Start Page Adobe Flash CS6

Riki Fantoni | 2
1.2 Lingkungan Kerja Adobe Flash CS6 Profesional

Secara garis besar, lingkungan kerja (Workspace) adobe flash CS6 terdiri dari beberapa
komponen utama yang bisa anda lihat seperti pada gambar 1.2 :

1. Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan
dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save,
Import, Export, dan lain-lain.
2. Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan dan
mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa tayang
objek, pengaturan layer, dan lain-lain.
3. Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk
mengkomposisi frame-frame secara individual dalam sebuah movie.
4. Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi,
menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau
objek. 5.
5. Properties adalah informasi objek-objek yang ada di stage. Tampilan panel
properties secara otomatis dapat berganti-ganti dalam menampilkan informasi
atribut-atribut properties dari objek yang terpilih.
6. Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan
memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah.

Gambar 1.2 Komponen Utama Adobe Flash CS6 Profesional

Riki Fantoni | 3
1.3 Toolbox

Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau alat
yang mempunyai fungsi-fungsi tersendiri untuk keperluan desain (lihat Gambar 1.3). Berikut
penjelasan setiap tool yang terdapat pada Toolbox :
1. Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi untuk
memilih atau menyeleksi suatu objek.
2. Subselection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada
selection tool.
3. Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi.
4. Lasso Tool, berfungsi untuk memotong gambar secara manual.
5. Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu
seperti dalam pembuatan garis, kurva atau gambar.
6. Text Tool digunakan untuk membuat objek teks
7. Line Tool digunakan untuk membuat atau menggambar garis.
8. Oval Tool digunakan untuk menggambar bentuk lingkaran atau elips.
9. Pencil Tool digunakan untuk membuat garis.
10. Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk
bebas.
11. Ink Bottle tool digunakan untuk mengisi/mengganti Stroke(garis luar) suatu
objek.
12. Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan
untuk
13. Eye Dropper Tool digunakan untuk mengambil sampel warna.
14. Eraser Tool digunakan untuk menghapus objek.
15. Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah
pembesaran.
16. Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.
17. Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis.
18. Fill Color digunakan untuk memilih atau memberi warna pada suatu objek.
19. Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari
suatu gambar atau objek.

Riki Fantoni | 4
 Gambar 1.3 Toolbox

1.4 Library

Fungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah
yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan
panel library :

Riki Fantoni | 5
 Gambar 1.4 Library Panel

1.5 Action Script

Salah satu kelebihan FLASH dibanding dengan perangkat lunak animasi lain yaitu
adanya action script. ActionScript adalah bahasa pemrograman Adobe Flash yang digunakan
untuk membuat animasi atau interaksi, ActionScript mengizinkan untuk membuat intruksi
berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah
sebelum melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara
menekan tombol F9 pada keyboard. Atau melalui menubar dengan cara klik Window >
Actions

Gambar 1.5 Panel Action Script

Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen yang
berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar ActionScript
dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya

Riki Fantoni | 6
dengan benar, maka hasil yang didapat kan akan berbeda atau file flash tidak akan bekerja
sama sekali. ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie
clip, dan lain-lain. Action frame adalah action yang diterapkan pada frame untuk mengontrol
navigasi movie, frame, atau objek lain-lain. Salah satu fungsi ActionScript adalah
memberikan sebuah konektivitas terhadap sebuah objek, yaitu dengan menuliskan perintah-
perintah didalamnya. Tiga hal yang harus diperhatikan dalam ActionScript yaitu:

1.5.1 Event

Event merupakan peristiwa atau kejadian untuk mendapatkan aksi sebuah objek.
Event pada Adobe Flash ada empat, yaitu:

a) Mouse event Event yang berkaitan dngan penggunaan mouse.

b) Keyboard Event Kejadian pada saat menekan tombol keyboard.

c) Frame Event Event yang diletakkan pada keyframe.

d) Movie Clip Event Event yang disertakan pada movie clip.

1.5.2 Target

Target adalah objek yang dikenai aksi atau perintah. Sebelum dikenai aksi atau
perintah, sebuah objek harus dikonversi menjadi sebuah simbol dan memiliki nama
instan. Penulisan nama target pada skrip harus menggunakan tanda petik ganda (” ”)

1.5.3 Action

Pemberian action merupakan lagkah terakhir dalam pembuatan interaksi

antarobjek. Action dibagi menjadi dua antara lain:

a) Action Frame: adalah action yang diberikan pada keyframe. Sebuah keyframe
akan ditandai dengan huruf a bila pada keyframe tersebut terdapat sebuah
action.

b) Action Objek/button: adalah action yang diberikan pada sebuah objek, baik
berupa tombol maupun movie clip.

Riki Fantoni | 7
 BAB II

DASAR – DASAR ANIMASI FLASH

Animasi di dalam adobe flash dibagi menjadi 5 meliputi animasi :

1. Frame by frame
2. Masking
3. Guide
4. Motion tween
5. Motion shape

Dalam adobe flash juga terdapat symbol yang di bagi menjadi 3 yaitu movie clip, button
dan grapich

2.1 Animasi Movie clip Matahari

1. Buatlah sebuah file baru dengan ukuran 1024 x 768 px dengan 24fps.

2. Gambar lingkaran menggunakan oval tool

3. Warnai dan dan buat menurut kreatifitas masing-masing, sehinga menjadi sperti berikut

Riki Fantoni | 8
4. Gambar segitiga yang mengelilingi lingkaran matahari

5. Seleksi gambar matahari dan jadikan movie clip

Klik kanan pada object (f8) convert to symbol pilih type Movie clip

Riki Fantoni | 9
6. Klik dua kali pada object yang telah di jadikan movie clip, kalian akan masuk ke dalam
movie clip matahari

7. Buatlah 2 layer dan pisahkan antara cahaya dan mataharinya

Riki Fantoni | 10
8. Insert frame smapai ke frame 10 pada masing-masing layer

9. Insert keyframe pada frame 5 di layer cahaya

Riki Fantoni | 11
10. Pada keyframe 5 ubah posisi cahaya seperti berikut

11. Copy keyframe pada frame 1 pada layer cahaya, dan paste pada keyframe 10

12. Kembali ke scene 1, sekarang kita akan membuat pergerakan naik turun pada matahari.
jadikan movie clip matahari tadi menjadi movie clip lagi, klik objek matahari
13. Klik kanan pada object (f8) convert to symbol pilih type Movie clip

14. Insert keyframe pada frame 10

Riki Fantoni | 12
15. Pada frame 10 ubah posisi matahari agak ke bawah
16. Berikan motion tween diantara frame 1 dan 10

17. Copy keyframe 1 ke frame 20

Riki Fantoni | 13
 18. Berikan motion tween diantara frame 10 dan 20

19. Kembali ke scene 1, dan CTRL+ Enter untuk melihat hasilnya

20.
2.2 Animasi Movie clip Karakter
1. Import karakter yang sudah tersedia

2. Seleksi karakter dan jadikan symbol movieclip: seleksi gambar karakter  klik
kanan convert to symbol → rubah bagian type menjadi → movieclip → beri
nama karakterk (nama bebas) → setelah itu ok.

Riki Fantoni | 14
3. Masuk kedalam movie clip tersebut, klik 2x pada karakter
4. Buat layer baru dan tempatkan bagian tubuh karakter menurut nama bagian tersbut

Riki Fantoni | 15
5. Insert frame masing-masing layer sampai frame 20

6. Create motion classic tween pada masing-masing layer

Riki Fantoni | 16
7. Tempatkan poros pada masing-masing anggota tubuh di titik sendi, menggunakan

free transform tool

8. Insert keyframe di frame 10 pada masing-masing layer

Riki Fantoni | 17
9. Gerakan setiang anggota tubuh seolah-olah berayun di masing-masing layer,
merubah posisi usahakan di frame 10

10. Copy keyframe 1 pada masing-masing frame ke frame 20

11. Kembali ke scene 1 dan lihat hasilnya, CTRL+Enter

Riki Fantoni | 18
2.3 Animasi Bone Tool
1. Buat file baru menggunakan action script 3.0 dengan ukuran 800 x 600 pixel dengan 24 fps
2. Buat bagian tubuh seperti kepala, leher, lengan kanan, tangan kanan, lengan kiri, tangan kiri, pinggul, kaki kakan,
kaki kiri sebagai berikut.

3. Jadikan masing-masing bagian tersebut menjadi movie clip. Seleksi gambar  klik kanan convert to symbol →
ubah bagian type menjadi → movieclip → beri nama (nama bebas) → setelah itu ok

4. Pilih Tool Bone Tool.

Riki Fantoni | 19
5. Kemudia klik tahan lalu geser dari atas sampai bagaian sikut. Selanjutnya dari sikut ke ujung tangan.

6. Jika objek tangan sudah ada Bone Tool maka akan muncul sebuah layer baru.

7. Untuk menggerakan tagan yaitu menggunakan Selection Tool.

8. Lakukan langkah-langkah yang sama pada tangan kiri, kaki kanan, dan kaki kiri menggunakan bone tool.

9. Laukakn pergerakan berjalan pada objek kaki dengan cara klik frame 5.

10. Pada frame 5 seleksi semua objek

11. Geser semua bagian objek ke depan dan ubah anggota badan dengan posisi yang berbeda dari seblumnya

Riki Fantoni | 20
Riki Fantoni | 21
 BAB III

PEMBUATAN ANIMASI
12. Buat file baru actionscript 2.0 dengan ukuran 1024 x 768 pixel

Riki Fantoni | 22
Langkah Pembuatan Layoutnya adalah sebagai berikut ;
1. Buatlah 4 Layer dan tata letaknya sesuaikan pada gambar berikut beserta beri nama :

2. Import file image yang ingin di gambar. File  import  import to Library  kemudian
pilih image yang ada di computer. Pilih bgn1.jpg, bgn2.jpg, bgn3.jpg
Otomatis gambar yang di import masuk ke dalam library

Riki Fantoni | 23
3. Cara memasukkan gmbar pada library ke stage sebagai berikut
Pilih layer bgn frame 1 Drag bgn1.jpg pada library ke dalam Stage,

Drag objek pada

library ke stage

Riki Fantoni | 24
4. Kemudian untuk membuat sungai sebagai berikut :
Pilih layer sungai frame 1 gambarlah persegi panjang menggunakan Ractangle tool dan
beri warna serta seusiakan tata letak seperti gambar berikut :

5. Sekarang animasikan sungai tersebut secara berulang-ulang dengan menjadikannya

movieclip, langkahnya sebagai berikut :
Seleksi gambar sungai  klik kanan convert to symbol → rubah bagian type menjadi
→ movieclip → beri nama sungai (nama bebas) → setelah itu ok.

Riki Fantoni | 25
6. Setelah itu klik 2x pada gambar sungai, masuk kedalam movieclip yang dibuat tadi
dengan nama sungai

7. Animasikan sebagai berikut, pada frame 1 birkan tetap gambar seperti berikut:

8. Pada frame 30 jadikan gambar sungai tadi seperti berikut :

9. Pada frame 60 samakan gambar seperti pada frame 1

Riki Fantoni | 26
10. Kemudian pada frame 1 dan frame 30 klik kanan  pilih shape tween
(Test movie dengan Ctrl+enter)

Riki Fantoni | 27
11. Klik scene scene 1 dan kembali ke tampilan awal
12. Sekarang membuat animasi intro, ambil gambar movieclip matahari yang tersedia

lalu jadikan Movieclip lagi dengan cara : klik kanan pada objek convert to symbol →
rubah bagian type menjadi → movieclip → beri nama intro (nama bebas) → setelah itu
ok.

13. Setelah itu klik 2x pada gambar matahari, masuk kedalam movieclip yang dibuat tadi
dengan nama intro
14. Pada frame 1 posisikan matahari di luar stage, seolah-olah matahari belum kelihatan

Riki Fantoni | 28
15. Berikan keyframe pada frame 95, klik kanan pada frame 95 → insert keyframe
16. Posisikan matahari seperti gambar berikut

17. Diantara frame 1 dan frame 95 berikan animasi Motion Tween dengan langkah :
Klik kanan → pilih create classic tween

18. Maka akan ada garis berwarna biru seperti gambar berikut :

Riki Fantoni | 29
19. Animasi intro sudah selesai, animasi intro akan berulang-ulang maka dari itu untuk
menghentikannya, berikan action script frame
klik kanan pada keyframe 95 → pilih action

20. Masukkan script di bawah ini:

stop();

21. Kembali ke scene 1, berikan frame masing-masing layer sampai frame 20

Riki Fantoni | 30
22. Selanjutnya pindah ke frame 2
Seleksi semua pada frame 2 → Klik kanan → pilih insert blank keyframe

23. Ganti bgn1 dengan bgn2 di layer bgn,

pilih blank keyframe pada frame 2 → drag bgn2 yang tersedia di library ke stage

24. Test movie (ctrl+enter) animasi akan berjalan terus-menerus, maka dari itu harus
dihentikan dengan memberikan actionscript frame di frame 1

Riki Fantoni | 31
25. Selanjutnya membuat animasi movieclip pada frame 2, lock aatau kunci layer bgn dan
sungai agar tidak bergeser

26. Untuk frame 2 pada layer sungai biarkan blank keyframe, karena pada frame 2, bgn2
tidak memerlukan animasi sungai.selanjutnya drag karakter kinnu tampak depan yang
tersedia di bahan animasi ke dalam stage dan pada frame 2 layer animasi.

27. Selanjutnya menganimasikannya dengan movieclip lagi, jadikan karakter tersebut

menjadi movieclip : klik kanan → convert to symbol → pilih movieclip → beri nama
bebas → klik OK

Riki Fantoni | 32
28. Masuk ke dalam moviclip karakter tersebut, maka layer akan menjadi satu lagi,

Riki Fantoni | 33
29. kemudian pisahkan tangan kiri yang membawa sampah dengan badan , buat layer baru
layer badan dan layer tangan kiri.

30. Selanjutnya menggerakan tangan tersebut, klik kanan pada frame 1 layer tangan kiri →
pilih create classic tween

Riki Fantoni | 34
31. Kemudian posisikan poros pada tangan kiri karakter pada bahunya, dengan menggunan

ractangle tool

32. Kembali ke layer, insert frame di frame 35 pada masing-masing layer.

33. Insert keyframe di frame 35 pada layer tangan kiri, maka hasilnya sebagai berikut

Riki Fantoni | 35
34. Animasikan tangan kiri karakter dari atas ke bawah, seperti berikut
Klik pada frame 1 → posisikan tangan kiri ke bawah

35. Insert blank keyframe di frame 100 pada masing-masing layer, kemudian buat layer baru
untuk karakter yang hendak berjalan dari samping,

36. insert blank keyframe di frame 100 juga pada layer baru, kasih nama layer tersebut agar
anda tidak bingung

Riki Fantoni | 36
37. kemudian masukkan karakter yang tampak samping, sesuaikan ukurannya dengan
karakter tampak depan menggunakan onion skin

Riki Fantoni | 37
38. insert keyframe sampai frame 170 kemudian klik kanan create classic tween diantara
frame 100 dan 170

39. pilih keyframe 170 kemudian atur posisi karakter secara horizontal keluar dari stage

Riki Fantoni | 38
40. sama seperti movieclip sebelumnya agar bisa berhenti pada frame terakhir berilah
actionscript stop pada keyframe 170
stop();

41. silahkan test movie (ctrl+enter). Masih belum bisa berpindah frame kan, antara frame 1
ke frame 2 pada scene 1, untuk itu lanjutkan ke step berikutnya
42. kembali ke scene 1 → buka kembali movieclip intro/keyframe 1 pada layer animasi
→ pilih keyframe 95 → berilah actionscript
_parent.nextFrame();

Riki Fantoni | 39
43. Begitupula dengan keyframe 2 pada scene 1 untuk animasi ke 2 tadi, pada keyframe 170
tambahkan script

44. Selanjutnya buat animasi ke 3

Insett blank keyframe di frame 3 pada 3 layer sebagai berikut

Riki Fantoni | 40
45. Copy paste keyframe 1 pada layer bgn ke blank keyframe 3 layer bgn di frame 3
Klik kanan pada frame 1 → pilih copy frames → pilih frame 3→ paste frames

46. Begitu juga dengan sungainya, maka tampilan frame 3 sebagai berikut sama sperti frame
1

Riki Fantoni | 41
47. Masukkan karakter bejalan yang dari samping tadi pada layaaer animasi frame 3

48. Jadikan movieclip, kemudian masuk ke dalam movieclip tersebut

Riki Fantoni | 42
49. Gunakan animasi guide,
Buat 2 layer dengan nama (path dan karakter)

50. Buat pola untuk alur jalan di layer path menggunakan Pencil Tool atau line

51. Klik kanan layer path, kemudian pilih guide. Layer path sekarang menjadi guide layer.

52. Geser layer karakter ke arah layer path

Riki Fantoni | 43
53. Atur poros pada karakter menjadi di kakinya

54. Buat classic motion tween pada karakter → atur posisi karakter mulai dari kanan stage

55. Insert keyframe sampai frame 300 pada masing-masing layer

56. Atur posisi karakter sampai kiri stage pada keyframe 300 tersebut

57. Berikan script pada keyframe 300

stop();
_parent.nextFrame();

Riki Fantoni | 44
58. Lanjut ke animasi ke 4, kembali ke scene 1, drag bgn3 pada library ke layer bgn pada
frame 4

Riki Fantoni | 45
59. Buat animasi lagi seperti langkah sebelumnya, jadikan movieclip lagi karakter dari
samping

60. Insert keyframe pada frame 200 → create classic motion tween → atur posisi karakter
seolah berjalan dari kanan ke kiri

Riki Fantoni | 46
61. Buatlah 2 layer dan beri nama (sampah dan karakter_buang) pada frame 201 dan insert
blank keyframe

62. Atur ukuran dan letak karakter 2 dengan karakter 1 pada layer karakter_buang,
63. Begitu juga dengan sampah pada layer sampah seusuaikan gambar berikut

Riki Fantoni | 47
64. Buatlah keyframe di frame 230 tiap masing-masing layer

65. Insert classic tween pada layer sampah dan pada keyframe 230 , posisikan sampah di atas
sungai

Riki Fantoni | 48
66. Kemudian insert keyframe di 400 tiap masing-masing layer

67. Pilih keyframe 400 pada layer sampah posisikan sampai keluar dari stage

68. Insert blank keyframe di 401 tiap masing-masing layer,

Riki Fantoni | 49
69. Masukkan karakter tanpa membawa sampah di blank keyframe 401

Riki Fantoni | 50
70. Animasikan dengan classic tween sampai frame 450 menuju keluar dari stage

71. Sama seperti animasi sebelumnya berilah actionscript di akhir keyframe (keyframe 450)
_parent.nextFrame();
72. Kembali ke scene 1, buat seolah olah karakter membuang sampah berkali-kali, caranya
cukup mudah → insert keyframe pada frame 5, otomatis animasi akan sama.

Riki Fantoni | 51
73. Copy paste bgn 1 ke frame 6 tetap di layer bgn

Riki Fantoni | 52
74. Pindah layer sungai diatas layer animasi,
75. Pilih frame 6 pada layer animasi ambil gambar sampah jadikan movieclip

Riki Fantoni | 53
76. Masuk ke dalam movieclip sampah, dan animasikan dri kiri ke kanan stage(dari frame 1
smpai frame 70)

77. Buatlah layer baru dan copy paste dari layer 1 animasinya, buatlah sekakan-akan banyak
sampah

Riki Fantoni | 54
78. Berikan actionscript pada keyframe terakhir
stop();
_parent.nextFrame();

79. Masukkan animasi hujan dan taruh di layer hujan

80. Pada layer sungai frame 7, buatlah keyframe dan jadikan movieclip baru

Riki Fantoni | 55
81. Masuk ke dalam movieclip sungai, animasikan seakan-akan sungai meluap sampai frame
50 dan beri keyframe di frame 80
82. beri actionscript di akhir keyframe
_parent. nextFrame();

83. Kembali ke scene 1, insert keyframe di 8 pada layer sungai

Riki Fantoni | 56
84. Duplicate movieclip sungai pada frame 8,
Seleksi movieclip sungai → klik kanan→ pilih duplicate symbol→klik OK

85. Masuk ke dalam movieclip sungai meluap2 tambahkan actionscript stop di akhir
keyframe
Stop();
_parent. nextFrame();

Riki Fantoni | 57
86. Copy paste bgn2 ke frame 8 pada layer bgn.

87. Insert blank keyframe di frame 8 pada layer animasi, masukkan karakterk kinnu dari
depan ke dalam frame tersebut

Riki Fantoni | 58
Langkah-langkah meng-Import file sound adalah sebagai berikut:
 Pilih menu File > Import > Import to Library

 Pilih file sound yang akan diimport.

 Drag file yang sudah diimport di Library ke stage.

 Sehingga akan tampil garis frekuensi suara di frame 1.

 Pilih Layer 1 lalu pada panel Property Pilih Loop agar sound diulang terus menerus.

Riki Fantoni | 59
 Ket:
- Sound : Untuk memilih file suara yang sudah diimport ke Library.
- Effect : Untuk memberikan efek pada suara.
- Repeat : Untuk perulangan suara dengan jumlah perulangan tertentu.
- Loop : Untuk perulangan suara terus menerus.
88. Lakukan Test Movie.
89. Tes movie (CTRL+ Enter) animasi sederhana telah selesai 

Riki Fantoni | 60
 BAB IV

PENGENALAN UNITY DAN CARA MEMBUAT GAME FLAPY BIRD

4.1 FUNGSI – FUNGSI TAB PADA UNITY

1. Tab Hierarchy
Tab Hierarchy adalah tab yang berfungsi untuk memasukan object yang akan di
tampilkan dalam game yang di buat.

Gambar 4.1 Tab Hierarchy.

2. Tab Inspector
Tab Inspector digunakan untuk mengedit property object yang akan diklik pada
komponen object yang berada di tab Hierarchy, pada tab ini juga digunakan untuk menyunting
dan menambahkan komponen – komponen seperti script.

Gambar 4.2 Tab Inspector.

Riki Fantoni | 61
3. Tab Console
Tab Console adalah tempat penampilan pesan error pada project yang di buat. Tapi
paling sering terjadi pesan error yang terjadi saat pemberitahuan script yang tidak dikenali oleh
system atau kesalahan – kesalahan dalam membuat script,seperti pada gambar 4.3.

Gambar 4.3 Tab Console.

4. Tab Scene
Tab Scene adalah berisi ruangan / tempat dimana kita meletakan komponen seperti
camera, terrain, object dan lain-lain.

Gambar 4.3 Tab Scane.

5. Tab Game
Tab Game adalah dimana berfugsi tempat uji coba game, dimana kita dapat menjalankan
dengan mengklik tombol play.

Riki Fantoni | 62
 Gambar 4.4 Tab Game.

4.2 FUNGSI – FUNGSI MENU BAR DI UNITY

1. File
a) New Scene : Untuk membuat tempat penyimpanan adegan game.
b) Open Scene : Untuk membuka penyimpanan adegan game yang telah ada.
c) Save Scene : Untuk Menyimpan adegan game.
d) New Scene As : Untuk membuat adegan game dengan tema/nama yang baru.
e) New Project : Untuk membuat proyek game baru.
f) Open Project : Untuk Membuka proyek game yang telah ada.
g) Save Project : Untuk menyimpan proyek game.
h) Build Setting : Untuk mengatur game kedalam format yang diinginkan.
i) Build & Run : Untuk mengatur game kedalam format yang diinginkan lalu
menjalankannya.

2. Edit
a) Undo : untuk membatalkan perintah.
b) Redo : untuk kembali dari pembatalan perintah.
c) Cut : untuk memindahkan object dari satu tempat ke tempat lain.
d) Copy : untuk menyalin object.
e) Duplicate : untuk menggandakan object.
f) Frame selected : digunakan untuk memilih kerangka object.
g) Lock view to selected : untuk mengunci object yang dipilih.
h) Find : untuk mencari object dengan cepat.
i) Sellect All : untuk memilih semua object.
j) Preference : untuk mengatur komponen external.
k) Modules : untuk memilih type perangkat build.
l) Play : digunakan untuk memulai game.
m) Pause : digunakan untuk menghentikan sementara game saat berjalan.
n) Step : untuk melanjutkan ke scene selanjutnya.
o) Selection : untuk menyimpan dan memuat pilihan.

Riki Fantoni | 63
 p) Project setting : berisi pengaturan game seperti audio, graphic, player, quality, jaringan
dll.
q) Network emulator : untuk memilih salah satu jaringan.
r) Graphics emulation : digunakan untuk memilih salah satu tipe grafik.
s) Snap setting : untuk mengatur snap dalam game.
3. Assets
a) Create :Untuk Membuat Assets baru.
b) Show in explorer : untuk menmpilkan folder yang berisi semua project yang sedang kita
buat di partisi komputer.
c) Open : untuk membuka assets.
d) Delete : untuk menghapus asset.
e) Import New Asset : digunakan untuk mengambil asset dari drive.
f) Export Package : menyimpan asset dalam drive.
g) Find References in Scne : untuk mencari scene.
h) Refresh : untuk menyegarkan atau mengatur ulang asset yang berantakan.
i) Reimport : untuk membatalkan satu asset yang telah di import.
j) Run API Updater : untuk memulai API updater .

4.3 PEMBUATAN GAME FLAPY BIRD BAGIAN 1

1. Buka aplikasi Unity3D dan buat new project.

2. Pilih 2D lalu klik button create.

Gambar 4.5 membuat project baru.

3. Buat folder untuk menyimpan data dengan cara klik kanan di tab Project lalu create,folder.

Gambar 4.6 forder penyimpanan data.

Riki Fantoni | 64
4. Import karakter ke dalam folder sprite dengan cara buka fordernya lalu klik kanan import new
assets, seperti pada gambar 4.7.

Gambar 4.7 memesukan karakter kedalam forder.

5. Jika sudah seperti gambar di atas selanjutnya kita akan memasukan background ke dalam tab scane.
6. Klik pada gambar background lakukan drag and drop gambar background ke bagian tab Hierarchy.
7. Maka akan seperti pada gambar di bawah ini pada bagian tab Hierarch dan background yang ada di
hierarchy akan muncul di tab scene.

Gambar 4.8 isi dari tab hierarchy.

8. Setelah itu lakukan setting camera agar gambar background full screen pada game yang di buat.
9. Klik tab scene dan sesuaikan ukuran camera agar pas dengan background dengan menggeserkan
sumbu x dan y seperti pada gambar 4.9.

Gambar 4.9 pengaturan ukuran camera.

Riki Fantoni | 65
10. Setelah itu buka tab game dan klik button play untuk melihat apakah ukuran background menjadi full
screen setelah itu save scene.
11. Setelah itu masukan karakter flappy bird ke bagian scene dengan cara drag and drop karekter ke
bagian tab Hierarchy.

Gambar 4.10 memasukan karakter flappy bird.

12. Setelah itu masukan componen Rigibody 2D di karakter Flappy Bird. Dengan cara klik karakter flapy
bird, buka tab Inspector, klik button add component physics 2D dan Rigidbody 2D.

Gambar 4.11 memasukan komponen ke dalam karakter.

13. Tambahkan juga componen Circle Collider 2D dengan cara sama seperti sebelumnya dan atur radius
menjadi 0.05.
14. Setelah menambahkan componen di karakter flappy bird, buka folder script yang terdapat di tab
project, klik kanan, create C# Script, beri nama BirdController, klik dua kali di script yang sudah ada di
folder script, seperti pada gambar 4.12.

Riki Fantoni | 66
 Gambar 4.12 membuat script untuk karakter.

15. Setelah membuat file untuk script, tuliskan script di bawah ini pada aplikasi Mono-Develop Unity.
using UnityEngine;
using System.Collections;
public class BridControler : MonoBehaviour {
public Vector2 loncat = new Vector2 (0, 100);
// Use this for initialization
void Start () {

// Update is called once per frame

void Update () {
if (Input.GetMouseButtonDown (0)) {
GetComponent<Rigidbody2D> ().velocity = Vector2.zero;
GetComponent<Rigidbody2D> ().AddForce (loncat);
}
}
}

16. Selanjutnya klik karakter flappy bird lalu drag and drop script yang telah di buat ke bagian
inspector,seperti pada gambar 4.13.

Riki Fantoni | 67
 Gambar 4.13 memasukkan script kedalam inspector.

17. Silakan coba flappy bird-nya.

18. Selanjutnya menambahkan karakter pipa ke dalam scene dengan cara drag and drop ke tab
Hierarchy. Pilih kedua pipa yang tersedia di folder sprite. Atur posisi pipa pada tab scenen.

Gambar 4.14 memasukkan object pipa.

19. Masukkan component Box collider 2D ke dalam dua pipa tersebut.

20. Selanjutnya buat Create Empty dengan cara klik menu GameObject lalu Create Empty dan beri nama
pipe dimana sebagai fungsi memberikan random pipe dan pilih kedua pipa dan drag and drop ke
bagian pipe,seperti pada gambar 4.15.

Riki Fantoni | 68
 Gambar 4.15 membuat game object.

21. Selanjutnya kita menambahkan component rigidbody2D ke dalam pipe dan pada bagian RigidBody2D
centang bagian Is Kenematic dimana fungsi gravitasi akan hilang.

Gambar 4.16 menghilangkan gravitasi pada objek.

22. Tahap selanjutnya buat script baru untuk perpindahan pipa secara acak dan berjalan.
using UnityEngine;
using System.Collections;

public class pipemove : MonoBehaviour {

public Vector2 pinda = new Vector2 (-1,0);
public float acak = 1;
// Use this for initialization
void Start () {
GetComponent<Rigidbody2D> ().velocity = pinda;
transform.position = new Vector3 (transform.position.x, transform.transform.po

Riki Fantoni | 69
 sition.y - acak * Random.value, transform.position.z);
}

// Update is called once per frame

void Update () {

}
}

23. Setelah itu masukan script di atas ke pipe dan masukkan pipe ke dalam forder prefab dengan cara
drag and drop.
24. Tahap selanjutnya kita akan membuat pipe keluar terus menerus, dengan cara buat game object
baru beri nama panggilpipe.

Gambar 4.17 membuat game object baru.

25. Hapus pipe yang berada di Hierachy yang berwarna tulisan biru.
26. Tahap selanjutnya, buka folder script dan buat script baru dengan nama Generate dan tuliskan
scriptnya.

using UnityEngine;
using System.Collections;
public class Generate : MonoBehaviour {
public GameObject pipe;
// Use this for initialization
void Start () {
InvokeRepeating ("panggil", 1f, 1.5f);
}

// Update is called once per frame

void Update () {

}
void panggil()
{
Instantiate (pipe);
}
}

Riki Fantoni | 70
27. Klik panggilpipe yang berada di tab Hierarchy dan tambahkan Component script di atas.

Gambar 4.18 memasukkan script generate ke dalam karakter.

28. Selanjutnya buka folder Prefab dan drag and drop Prefab pipe ke bagian Inspector.

Gambar 4.18 memasukkan pipe ke dalam script.

29. Selanjutnya kita membahkan lantai kedalam game tersebut, dengan cara drag and drop gambar lantai
ke dalam game. Tambahkan component box collider 2d.

Gambar 4.19 memasukan objek lantai.

30. Membuat script agar lantai berjalan.

using UnityEngine;
using System.Collections;

Riki Fantoni | 71
 public class floormove : MonoBehaviour {

// Use this for initialization

void Start () {

// Update is called once per frame

void Update () {
if (transform.localposition.x <-2f)
{
transform.localPosition = new Vector3(0, transform.localPosition.y,
transform.localPosition.z);
}
transform.Translate(-Time.deltaTime, 0, 0);
}
}

31. Masukkan scriptnya ke dalam komponen lantai.

32. Tahap selanjutnya kita akan menambahkan script mengulang jika burung bersentuhan dengan object
lainnya, tambahkan script ini ke script bridcontroler nya.

void OnCollisionEnter2D(Collision2D other)

{
Application.LoadLevel(Application.loadedLevel);
}

33. Kita akan menambahkan poin jika burung melewati pipa, terlebih dahulu buat teks dengan cara pilih
game object,ui dan text.lalu buatlah tag dengan nama poin di dalam komponen teks, seperti pada
gambar 4.20.

Gambar 4.20 menambahkan text ke dalam game.

34. Tahap selanjutnya kita membuat game object baru dengan nama skor dan masukkan ke dalam pipe.

Riki Fantoni | 72
 Gambar 4.21 menambahkan game object baru.
35. Buat tag baru dengan nama skor didalam game object skor tadi dan tambahkan komponen box collider
2D.

Gambar 4.21 mengaktifkan is trigger pada collider box.

36. Tambahkan script score di forder script.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class score : MonoBehaviour {
public static int skor;
public Text teks;
// Use this for initialization
void Start () {
skor=0;
teks =GetComponent<Text>();
}
// Update is called once per frame
void Update () {
teks.text=""+skor;
}
public void AddPoint(int poin)
{
skor += poin;
}
}

37. Tambahkan script barusan ke dalam komponen text.

Riki Fantoni | 73
 Gambar 4.22 menambahkan script kedalam komponen text.
38. Jika burung melewati pipa makan poin akan dijumlahkan, maka perbarui script ini ke dalam script
birdcontroler nya agar poin bisa berjalan dan bersuara.

using UnityEngine;
using System.Collections;

public class birdcontrol : MonoBehaviour {

public Vector2 loncat = new Vector2(0,200);
public score scoreman;
public int poin = 1;
public AudioClip musik;
// Use this for initialization
void Start () {
scoreman =
GameObject.FindGameObjectWithTag("poin").GetComponent<score>();
}

// Update is called once per frame

void Update () {
if (Input.GetMouseButtonDown(0))
{
GetComponent<Rigidbody2D>().velocity = Vector2.zero;
GetComponent<Rigidbody2D>().AddForce (loncat);
}
}
void die()
{
Application.LoadLevel(Application.loadedLevel);
}
void OnCollisionEnter2D(Collision2D other)
{
die();
}
void OnTriggerEnter2D(Collider2D col)
{
if (col.gameObject.tag == "skor")
{
scoreman.AddPoint(poin);
AudioSource.PlayClipAtPoint(musik, transform.position);
}

Riki Fantoni | 74
 }

39. Sekian dan terimakasih.

Riki Fantoni | 75