LEVEL: BEGINNER

GAME
D E S I G N
FOR BEGINNER

DISUSUN OLEH
DIDIT PRASETYO, ST, MT
PRAYODI BAGUS A.
ACHMAD FAUZAN A.
COPYRIGHT 2015
DAFTAR ISI

Pendahuluan 2

DESAIN KARAKTER
Pertemuan 1: Membuat Karakter Utama dan Musuh 3
Pertemuan 2: Mewarnai Karakter 9
Pertemuan 3: Membuat Animasi ( sprite ) bag. 1 12
Pertemuan 4: Membuat Animasi ( sprite ) bag. 2 16

DESAIN ENVIRONMENT ( LINGKUNGAN)

Pertemuan 5: Membuat Platform 21
Pertemuan 6: Membuat Background 24

PROGRAMMING GAMES
Pertemuan 7: Template 27
Pertemuan 8: Memasukkan Sprite bag 1 31
Pertemuan 9: Memasukkan Sprite bag 2 36
Pertemuan 10: Finishing, layouting, dan Advancing 39

1
PENDAHULUAN

Dalam pembelajaran kali ini, yang akan kita lakukan adalah bagaimana cara
membuat game dari awal pembuatan karakter dan lingkungan, sampai ke
pemogramannya. Game yang akan dibuat bergenre platform shooter.

Pembuatan Karakter, ligkungan serta animasinya menggunakan software

standar seperti Corel Draw dan Adobe Photoshop. Hardware yang diperlukan
adalah laptop/komputer dan mouse. Untuk pemograman game sendiri
menggunakan software Construct 2.

Mari Kita mulai pembuatan games ini, semoga semua materi dapat diserap
dengan baik.

2
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

Game yang baik memiliki karakter utama dan musuh serta objektif tertentu.
Untuk pembuatan karakter utama bukan hanya sekedar pembuatan karakter
secara utuh, namun dibuat dari bagian tubuh satu per satu, karena elemen ini
akan digunakan dalam proses berikutnya.

Pembuatan karakter dibagi menjadi dua yaitu karaker utama dan musuh,
dengan hasil seperti ini:

KARAKTER UTAMA

1. Mulai dengan membuka sofware CorelDRAW, maka akan tampak tab seperti di
bawah ini, set dengan ukuran A4:

Gambar 1

2. Setelah klik OK, maka akan tertuju ke layar kerja

3
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

3. Kemudian yang dilakukan adalah membuat bentukan persegi sederhana

dengan menggunakan Rectangle Tools (atur ukuran menjadi 55mmx70mm):

ukuran

rectangle tool

Gambar 3

4. Setelah itu, klik Shape Tool dan lalu klik ikon Convert to Curves yang ada di
kanan atas seperti yang ditunjukkan pada Gambar 4:

shape tool convert to curve

Gambar 4

5. Setelah itu, akan muncul titik titik di setiap ujung sudut yang dinamakan
Nodes. Tambah nodes dengan cara double klik masing masing di sisi terpendek
persegi kemudian tarik (drag) nodes itu sesuai instruksi dibawah:

double klik lalu drag ke atas

drag ke kiri

double klik lalu drag ke bawah

Gambar 5

4
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

6. Kemudian berikutnya memberikan bentukan seperti contoh pada gambar di

bawah dengan menggunakan rectangle tools:

ukuran

rectangle tool

Gambar 6

7. Kemudian, langkah selanjutnya adalah membuat bentukan mata dengan

ellipse tool, dan letakkan seperti contoh gambar di bawah ( copy dan paste):

ellipse tool

Gambar 7.1 Gambar 7.2

8. Dengan menggunakan B-Spline Tool, buatlah mulut karakter seperti pada

contoh dengan cara klik dan drag searah dengan bentuk mulutnya seperti yang
ada di contoh:

b-spline tool

Gambar 8.1 Gambar 8.2

5
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

9. Untuk membuat garis pemisah dan tangan , gunakan tools b-spline tools
dengan cara klik dan drag yang sudah dipraktekan sebelumnya.

b spline tool

Gambar 9.1 Gambar 9.2

10. B-spline tools juga digunakan pada pembuatan aksesoris yal, dengan
bentukkan seperti contoh di bawah ini:

Gambar 10
11. Dengan menggunakan B-Spline Tool, buat bentuk kaki per bagian nya. dari
bagian kaki atas dan bagian kaki bawah (yang bersepatu), lalu copy dan paste
seperti pada contoh di bawah ini:

Gambar 11.1 Gambar 11.2 Gambar 11.3

6
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

KARAKTER MUSUH

1. Langkah pertama adalah membuat bentukan lingkaran seperti pada contoh di

bawah dengan menggunakan ellipse tool ( Tekan shift ketika membuatnya)

ellipse tool

Gambar 1
[Link] selanjutnya adalah membuat bentukkan tangan seperti contoh di
bawah dengan menggunakan b-spline tool:

b-spline tool

Gambar 2
3. B-spline tools juga digunakan dalam pembuatan topeng tengkorak karakter (
begitu juga ellipse tool) seperti pada gambar 3 di bawah ini:

Gambar 3

7
DESAIN KARAKTER

Pertemuan 1: Membuat Karakter

4. Langkah selanjutnya adalah membuat bagian kaki Berbeda dengan karakter

sebelumnya, kaki ini dibuat dalam 1 bagian utuh. Lakukan seperti contoh di
bawah

Gambar 4

5. Maka tampak hasilnya seperti contoh di bawah ini.

Setelah ini adalah mewarnai karakter

8
DESAIN KARAKTER

Pertemuan 2: Mewarnai Karakter

Pertemuan kali ini mempelajari bagaimana mewarnai karakter yang kita telah
buat sebelumnya

KARAKTER UTAMA

1. Langkah pertama dalam mewarnai karakter ini adalah dengan melakukan tata
cara seperti contoh di bawah ini. Klik salah satu objek (misal:badan) dan double-
klik kotak kecil yang ada di pojok bawah kanan seperti pada contoh:

klik tubuh

double-klik kotak putih

Gambar 1 ini
2. Setelah di double-klik akan muncul tab warna seprti di bawah ini. Pilih warna
sesuka kamu, misal disini: Biru, lalu klik OK.

Gambar 2

9
DESAIN KARAKTER

Pertemuan 2: Mewarnai Karakter

3. Untuk mewarnai objek tanpa bentukan pasti, seperti area yang dikelilingi
garis, gunakan Smart Fill Tool, klik pada area yang ingin diwarnai, seperti pada
contoh gambar 3 di bawah ini:

smart fill tool

Gambar 3

4. Maka hasilya akan tampak seperti pada gambar di bawah. Untuk mengganti
warna, hanya mengklik kotak kecil yang sebelumnya diajarkan, dan pilihlah
warna.

double klik
Gambar 4.1 Gambar 4.2

5. Setelah itu, sesuai kreasi, warnai pilihan warna dengan menggunakan cara-
cara yang telah diajarkan sebelumnya. Jika sudah, hapus garis hitam di
sekeliling objek dengan cara seperti gambar 5.1. Hapus semua garis hitam
kecuali garis pada tangan. Hasil seperti gambar 5.2 :

Gambar 5.1 Gambar 5.2

10
DESAIN KARAKTER

Pertemuan 2: Mewarnai Karakter

KARAKTER MUSUH

1. Untuk musuh, lakukan seperti langkah yang dilakukan sebelumnya, dengan

pewarnaan tubuh misal Hijau dan untuk warna lainnya sesuai kreasi sendiri:

Gambar 2.1
2. Setelah semua warna selesai, hapus outline (garis hitam) di semua objek
kecuali bagian tangan. Maka hasilnya akan tampak seperti gambar 2.2:

Gambar 2.1 Gambar 2.2

11
DESAIN KARAKTER

Pertemuan 3: Membuat Sprite Bagian 1

Sprite adalah potongan-potongan gambar yang nantinya dapat membentuk

sebuah alur animasi seperti lari atau loncat. Hal ini yang dibutuhkan dalam
menggerakkan karakter game. Proses ini terbilang cukup lama karena
membutuhkan ketelatenan yang tinggi. Sprite yang harus dibuat adalah lari,
idle, menembak.

KARAKTER UTAMA

SPRITE LARI
Untuk lari dibutuhkan empat potongan gambar. Maka buka gambar yang telah
diwarnai tersebut

1. Pembuatan sprite lari dimulai dengan gerakan lari pertama seperti pada
gambar di bawah. Pada gambar karakter, klik objek sepatu dan khaki bagian
bawah (tahan tombol shift saat mengklik objek). Lalu setelah kedua objek
terpilih, klik sekali lagi sampai muncul sebuah lingkaran kecil di tengah. Geser
lingkaran tersebut ke area yang ditunjukkan di gambar. Hal ini yang dinamakan
Membuat Sendi.

digeser ke area ini

Gambar 1
2. Setelah lingkaran kecil (center) dipindah, maka putar objek tersebut seperti
pada contoh di bawah

Gambar 2
12
DESAIN KARAKTER

Pertemuan 3: Membuat Sprite Bagian 1

3. Karena putaran masih melebihi batas khaki sebelahnya, maka kaki tersebut
harus diputar lagi. Setelah memilih dua objek, kali ini , objek khaki bagian atas
juga dipilih dengan menahan tombol shift sehingga ada 3 objek yang dipilih.
Setelah itu klik sekali lagi dan akan muncul lingkaran seperti langkah
sebelumnya. Geser lingkaran menuju area yang sudah dicontohkan di bawah:

digeser ke area ini

Gambar 3
4. Lakukan langkah yang sama untuk khaki sebelahnya. Dan putar seperti
contoh pada gambar 4 di bawah ini;

Gambar 4

5. Copy dan paste karakter dan buat gerakan khaki masing-masing sebanyak 4
kali dengan urutan seperti pada gambar di bawah ini:

Gambar 5.1 Gambar 5.2 Gambar 5.3 Gambar 5.4

13
DESAIN KARAKTER

Pertemuan 3: Membuat Sprite Bagian 1

6. Setelah dibuat satu per satu karakter, maka hal selanjutnya adalah
mengeluarkan karakter tersebut dalam bentukkan gambar bitmap PNG. Yaitu
dengan cara memasukkan masing masing perubahan gerakan ke dalam kotak
seperti contoh di bawah:

Gambar 6

7. Kemudian pilih kedua bentukan ( sambil menekan shift), lalu pilih pilihan
export pada bar menu

Gambar 7.1 Gambar 7.2

8. Pilih destinasi dimana gambar akan di export, lalu centang Selected Only,
kemudian klik export dan kemudian mucul tab baru, langsung klik OK seperti
pada contoh di bawah:

Gambar 8.1 Gambar 8.2

14
DESAIN KARAKTER

Pertemuan 3: Membuat Sprite Bagian 1

SPRITE IDLE
Idle merupakan gerakan diam, jadi yang diberikan adalah gambar ketika
Karakter pada gerakan awal tanpa pergerakkan. Lalu gambar ini diexport dalam
format PNG seperti yang sudah diajarkan sebelumnya. Gambar yang diminta
seperti contoh di bawah ini:

Gambar 1

15
DESAIN KARAKTER

Pertemuan 4: Membuat Sprite Bagian 2

Di bagian dua adalah melanjutkan sprite untuk menembak, dan sprie lari untuk
karakter musuh:

SPRITE MENEMBAK
Sprite menembak adalah gerakan saat karakter menembak musuh. Jika
menembak juga diperlukan peluru yang ditembakkan. Di segmen ini, akan
dibahas juga bagaimana membuat peluru tersebut.

1. Untuk pembuatan sprite menembak yang dibutuhkan hanya 2 gerakan/sprite.

Gambar pertama adalah gambar yang sama seperti sprite idle:

Gambar 1
2. Untuk sprite kedua, yang dibutuhkan adalah gerakan menembak. Cukup
simpel, yaitu hanya merubah gerakan mulut dan mata. Untuk itu, copy dan paste
pose awal, dan selanjutnya diubah. Pertama, dengan tools B-Spline, buat
bentuk mulut dan lidah seperti gambar di bawah:

B-spline

Gambar 2

16
DESAIN KARAKTER

Pertemuan 4: Membuat Sprite Bagian 2

3. Setelah itu, untuk membuat mata yang marah, pertama buat Persegi dengan
rotasi di atas mata seperti gambar di bawah:

Gambar 3

4. Setelah itu, klik kedua objek (tahan shift), lalu pada bar yang ada di kanan
atas, pilih opsi Back minus Front, seperti pada gambar di bawah:

Gambar 4
5. Ulangi pada mata yang kedua, maka, hasilnya akan tampak seperti di bawah
ini:

Gambar 5

17
DESAIN KARAKTER

Pertemuan 4: Membuat Sprite Bagian 2

6. Selah itu, kedua gerakan di expport ke dalam gambar PNG seperti pada
langkah sebelumnya. Maka telah dibuat 2 gerakan seperti gambar di bawah
ini:

Gambar 6.1 Gambar 6.2

7. Untuk membuat peluru, gunakan tools B-Spline dan buat bentukan seperti
gambar di bawah ini;

Gambar 7

[Link] itu beri Lingkaran dengan menggunakan Ellipse Tool di tengah

bentukan seperti pada gambar di bawah ini:

Gambar 8

18
DESAIN KARAKTER

Pertemuan 4: Membuat Sprite Bagian 2

9. Warnai sesuka kamu, atau bisa meniru seperti contoh di bawah ini:

10. Eksport peluru tersebut dalam bentukan PNG.

SPRITE LARI KARAKTER MUSUH

Sprite lari karakter ini hampir sama dengan sprite lari sebelumnya, yaitu hanya
pergerakkan kaki

1. Pertama dari gerakan dasar, klik salah satu kakinya. Klik lagi, maka akan
muncul lingkaran kecil di tengah. Lingkaran itu (center) kemudian pindah ke
daerah yang ditunjukkan di gambar di bawah ini:

pindah ke area ini

Gambar 1

2. Setelah itu putar kakinya searah jarum jam seperti pada gambar di bawah ini:

Gambar 2

19
DESAIN KARAKTER

Pertemuan 4: Membuat Sprite Bagian 2

3. Lakukan langkah tersebut di kaki belakang sehingga menjadi seperti contoh

di bawah ini:

Gambar 3

4. lakukan menjadi 4 tahap sehingga urutan menjadi seperti ini:

Gambar 4.1 Gambar 4.2 Gambar 4.3 Gambar 4.4

5. Export setiap gerakan menjadi gambar PNG seperti yang sudah dijelaskan di
langkah langkah berikutnya.

Ini akhir dari segmen Desain Karakter, selanjutnya adalah segmen Desain
Environment.

20
DESAIN ENVIRONMENT

Pertemuan 5: Membuat Platform

Pada pertemuan kali ini, akan dibahas pembuatan environment yang jika sudah
selesai akan terlihat seperti gambar di bawah ini:

background

platform
Gambar a
Seperti yang tertera di atas, pembuatan environment ini terpisah dibagi menjadi
2 elemen, yaitu platform dan background yang akan dijelaskan di masing-
masing pertemuan. Untuk kali ini akan dibahas bagaimana membuat platform
dasar

1. Dimulai dengan membuka CorelDraw, di menu utama kita harus mengubah

ukuran lembar kerja menjadi 1280x720pixel (ukuran standard) seperti gambar
di bawah ini:

Gambar 1

21
DESAIN ENVIRONMENT

Pertemuan 5: Membuat Platform

2. Setelah itu pada bar Snap To harus dicentang beberapa bagian untuk
memudahkan dalam proses kerja. Lihat gambar di bawah ini:

Gambar 2
3. Kemudian, di area kerja yang tersedia, buatlah suatu persegi panjang dengan
ukuran 1280x160 pixel menggunakan Rectangle tools. Buat dengan pas di
unjung sudut lmbar kerja seperti pada contoh di bawah ini:

Gambar 3

4. Warni persegi panjang tersebut sesuka kamu. Untuk warna platform dasar
biasanya berwarna ke abu-abuan. Jika sudah memilih klik OK:

pilih warna
abu-abu

double klik
Gambar 4

22
DESAIN ENVIRONMENT

Pertemuan 5: Membuat Platform

5. Kemudian buat persegi lagi sebagai lapisan atas platform dengan warna abu-
abu yang lebbih terang seperti pada contoh di bawah ini:

Gambar 5
6. Setelah, buat detail platform dengan kreasi mu. Setelah selesai, hapus semua
outline nya:

Gambar 6
7. Eksport bentukan tersebut dalam bentuk PNG ( jangan lupa centang Selected
Only pada saat pemilihan destinasi folder). Sehingga hasil akhir menjadi sepert
ini:

Gambar 7

23
DESAIN ENVIRONMENT

Pertemuan 6: Membuat Background

Pertemuan kali ini adalah membuat background yang nantinya diletakkan di

belakang platform

1. Di lembar kerja yang sama seperti platform sebelumnya, yaitu 1280x720 pixel,
buatlah persegi menggunakan Rectangle tool dengan ukuran sama seperti
lembar kerja ( presisi posisi) seperti pada gambar di bawah ini:

Gambar 1

2. Buat 3 garis lengkung melewati persegi panjang ( menggunakan b-spline

tool) seperti pada contoh di bawah ini:

Gambar 2

24
DESAIN ENVIRONMENT

Pertemuan 6: Membuat Background

3. Gunakan Smart Fill Tool untuk memberikan warna pada area yang tertutupi
garis ( ada 4 area kosong). Seperti pada contoh di bawah ini:

Gambar 3.1 Gambar 3.2

4. Jika sudah ke 4 area tertutupi warna, yang dilakukan adalah mengganti warna
tersebut dengan cara yang pernah diajarkan sebelumnya. Kesan yang ingin
ditampilkan background adalah kesan sore, jadi buatlah warna orange, dari
oranye yang paling atas bergradasi sampai kuning yang paling bawah seperti
pada gambar di bawah ini:

Gambar 4

25
DESAIN ENVIRONMENT

Pertemuan 6: Membuat Background

5. Hapus outline pada warna tersebut:

Gambar 5

6. Dengan kreasi kamu, tambahkan awan dan gedung gedung dengan

menggunakan tools-tools yang sudah diajarkan sebelumnya sehingga nanti
menjadi seperti gambar di bawah ini:

Gambar 6

7. Export gambar tersebut dalam bentuk PNG seperti yang sudah dijelaskan
pada langkah-langkah sebelumnya.

Elemen background, dan juga karakter sebelumnya akan digunakan di proses

programing game selanjutnya.

26
PROGRAMMING

Pertemuan 7: Template

Untuk permulaan, maka untuk pemograman game ini menggunakan template

yang sudah ada. Pemograman menggunakan software Construct2

1. Jika sudah diterima, dan memiliki software yang ditentukan, buka lah le
template

Gambar 1

2. Setelah dibuka, maka akan muncul tampilan berikut ini:

Gambar 2
Kotak-kotak tersebut menandakan hal-hal yang harus kita masukkan di dalam
template ini. Semua hal yang kita butuhkan telah kita buat di bagian sebelumnya

27
PROGRAMMING

Pertemuan 7: Template

3. Pertama adalah memasukkan elemen background yang sudah dalam format

PNG. Langkah awal adlah klik kotak hitam bertuliskan background.

Gambar 3

4. Maka akan muncul tampilan gambar 4 di bawah ini

Gambar 4

5. Setelah itu adalah membuka gambar yang sudah dibuat dengan klik ikon
Open seperti pada gambar 5 di bawah ini;

open

Gambar 5
28
PROGRAMMING

Pertemuan 7: Template

6. Pilih gambar background yang sudah dibuat, di folder yang telah disesuaikan.
Klik OPEN:

Gambar 6
7. Maka tampilan akan muncul seperti gambar di bawah ini:

Gambar 7
8. Jika selesai, bar di atas diclose, dan akan tampak gambar tersebut hanya ada
di 1 kotak tidak penuh, maka yang harus kita lakukan adalah memperpanjang
gambar ( mengulangnya) dengan cara klik dan drag lalu geser seperti gambar di
bawah:

Gambar 8

29
PROGRAMMING

Pertemuan 7: Template

9. Hal yang sama dilakukan untuk pembuatan platform. Klik Kotak Tanah

Gambar 9
10. Lalu masukkan gambar PNG platform yang telah dibuat sebelumnya:

Gambar 10

11. Setelah diperpanjang seperti langkah sebelumnya, maka akan tampak

seperti gambar di bawah ini;

Gambar 11

30
PROGRAMMING

Pertemuan 8: Memasukkan Sprite Bag.1

Setelah background dibuat, hal selanjutnya memasukkan unsur karakter begitu

juga spritenya:

[Link] pertama adalah dengan double klik Box karakter seperti contoh
gambar di bawah ini:

Gambar 1
2. Maka tampilan akan menjadi seperti gambar 2 di bawah ini:

Gambar 2

3. Pada Bar Animasi, pilih opsi Diam seperti Gambar 3 di bawah ini

Gambar 3

31
PROGRAMMING

Pertemuan 8: Memasukkan Sprite Bag.1

4. Setelah itu, masukkan gambar diam karakter seperti gambar di bawah ini:

Gambar 4

5. Maka tampilan akan menjadi sepert gambar 5 di bawah ini:

Gambar 5

6. Jika Bar di close maka tampilan awal akan berubah menjadi seperti gambar di
bawah ini:

Gambar 6

32
 PROGRAMMING

Pertemuan 8: Memasukkan Sprite Bag.1

7. Untuk selanjutnya adalah memindah kotak tosca dari posisi awal ke posisi
yang ada pada contoh di bawah ini:

Gambar 7.1 Gambar 7.2

8. Kemudian setelah memasukkan posisi diam, hal yang dilakukan selanjutnya
adalah memasukkan posisi lari. Pertama klik gambar karakter seperti pada
gambar di bawah ini:

Gambar 8

9. Kemudian pilih opsi lari seperti tampak pada gambar:

Gambar 9.1 Gambar 9.2

33
PROGRAMMING

Pertemuan 8: Memasukkan Sprite Bag.1

10. Ketika Opsi lari dipilih,maka tampilan yang keluar adalah sperti di bawah ini:

Gambar 10
11. Pada Bar Animation Frames, klik kiri dan pilih Import Frames > From Files
seperti pada contoh di bawah ini:

Gambar 11

12. Ambil semua bagian sprite lari, lalu klik OK:

Gambar 12

34
PROGRAMMING

Pertemuan 8: Memasukkan Sprite Bag.1

13. Pada bar Animation Frame, hapus frame 0:

Gambar 13

14. Maka tampak preview seperti pada gambar di bawah ini:

Gambar 14

35
PROGRAMMING

Pertemuan 9: Memasukkan Sprite Bag.2

Pada pertemuankali ini kita melanjutnya memasukkan elemen sprite, yaitu

sprite menembak dan sprite musuh

1. Double Klik pada ikon karakter

Gambar 1
2. Maka tampilan akan muncul seperti ini. Pada bar Animation pilih Opsi tembak
seperti pada contoh di bawah ini:

Gambar 2.1 Gambar 2.2

3. Kemudia pada bar Animataion Frame, sama seperti langkah sebelumnya,

yaitu Import Frames> From Files

Gambar 3

36
PROGRAMMING

Pertemuan 9: Memasukkan Sprite Bag.2

4. kemudian pilih semua sprite menembak ,kemudian klik OK seperti pada

contoh di bawah ini:

Gambar 4

5. Hapus frame 0 pada bar Animation Frame:

hapus

Gambar 5
6. Untuk sprite lari musuh, maka langkah pertama adalah memilih (double-klik)
box warna hijau gelap seperti pada gambar di bawah ini:

Gambar 6

37
PROGRAMMING

Pertemuan 9: Memasukkan Sprite Bag.2

7. Kemudia pada Animation Frame, pilih Import Frame>From Files seperti

langkah sebelumnya. Tidak ada opsi pada bar animasi yang dipilih karena
musuh ini tidak diam, hanya berjalan. Contohnya seperti gambar di bawah ini:

Gambar 7
8. Pilih Semua sprite jalan musuh, lalu klik OK:

Gambar 8
9. Jangan lupa untuk menghapus frame 0

hapus

Gambar 9

38
PROGRAMMING

Pertemuan 10: Finishing, Layouting, dan Advancing

Pada pertemuan terakhir ini, akan dibahas penempatan musuh dan beberapa
nishing

1. Pemasukkan ikon bullet (peluru) adalah dengan double klik box merah:

Gambar 1

2. Maka tampilam menjadi seperti ini. Klik Open:

open

Gambar 2

3. Masukkan ikon peluru lalu klik OK:

Gambar 3

39
PROGRAMMING

Pertemuan 10: Finishing, Layouting, dan Advancing

4. Maka tampilan akan berubah menjadi sepert ini:

Gambar 4

5. Selanjutnya adalah memindahkan box ungu. Box ungu merupakan box arah
Musuh. Berarti untuk membuat musuh bergerak ke arah kanan kiri, maka musuh
harus berada di antara dua kotak tersebut seperti pada gambar di bawah ini:

Gambar 5

6. Langkah selanjutnya meletakkan musuh-musuh, dengan banyak sesuai

keinginan kita

Gambar 6

40
PROGRAMMING

Pertemuan 10: Finishing, Layouting, dan Advancing

7. Langkah selanjutnya adalah export, pada File> Export Project:

Gambar 7

8. Pilih nOde-webkit:

Gambar 8
Untuk mencoba game maka klik tombol play pada bar kiri atas (harus memiliki
browser internet untuk mencobanya):

Pemograman ini hanya sebatas template yang sudah diprogram. Untuk

membuat program baru membutuhkan pelajaran lebih lanjut,.

41