Memulai Membuat Project

7/26/2019 Memulai Membuat Project

1/24

Memulai Membuat Project

Kamu dapat mengakses template game infinite jumpingseperti ini pada saat membuat

project baru di Construct 2. Tapi untuk kali ini mari kita membuat game dari nol.

Buka aplikasi Construct 2 lalu pilih menu File > New, dan pilihNew empty project.

Maka akan muncul halaman awal yang masih kosong untuk membuat game.

Pada bagian Projectsdi sebelah kanan aplikasi Construct 2, klik older New

Project*. Kemudian pada bagian Properties di sebelah kiri, ganti beberapa

properti seperti berikut, sesuaikan dengan keinginanmu!

Name! "ninite #umping

Description! $ame hasil tutorial "ntel %&K

ID! com.codepolitan.ininitejumping

Author! Toni 'aryanto

Website! https!((www.codepolitan.comWindow Size! )2*, +*

Fullscreen in browser! Crop

rientations! Portrait

Kemudian pilih !ayouts"!ayout #pada bagian Projects, lalu di bagianPropertiesnya

set properti !ayout Sizeke $%&' ()&'dan set propertinbounded

Scrollin+menjadi ,es. Kalo semua pengaturan awal sesuai, ruang kerja Construct 2

akan tampil seperti ini!


2/24

Klik menu File > Sa-e, lalu pilih older dan beri nama untuk menyimpan project.

Memasukkan Asset Gambar

-ekarang kita masukkan satu per satu asset gambar ke dalam ruang kerja Construct 2.

Menambahkan Latar Belakang

Pada bagian !ayout, .li. .ananlalu pilih menu Insert New

bjectuntuk menambahkan objek baru pada layout. Pada #endela "nsert ew /bject

pilih object /iled 0ac.+round, kemudian klik tombol Insertdan .li. pada area

layoutuntuk menyimpan objek. 0kan muncul jendela 1dit Ima+euntuk mengatur

gambar background.


3/24

Pada toolbar 1dit "mage, pilih ikon penuntuk memuat gambar dari ile, kemudian

pilih ile asset yang sudah didownload sebelumnya, yang bernamab+2pn+. $ambar

akan dimuat di jendela 1dit "mage. Klik ikon 3esizepada toolbar, kemudian pada

jendela 3esize ima+e can-as' set kolom Widthmenjadi # pi4el dan set

kolom Ima+emenjadi Ali+n top5le6t. Klik 7. $ambar background akan berubah

ukurannya menjadi 3 4** pi3el. Kita buat demikian supaya asset background tidak

terlalu besar, dan juga karena kita akan membuat backgrounya berulang 5tiled6 secara

hori7ontal.

Tutup jendela 1dit "mage. Masih pada objek background dalam keadaan akti,

pada bagian Propertiesdi sebelah kanan, set

properti Namemenjadi0ac.+round'properti Sizemenjadi (&&' 8&&dan

properti Positionmenjadi5(&' 58&.

Menambahkan Aset Pijakan

Pada bagian sebelah kanan, klik tab !ayersdi sebelah tab Projects untukmenampilkan bagian 8ayer. &isitu sudah ada 8ayer *. 7li. i.on plusuntuk

menambah layer sehingga kini ada dua buah layer pada list, yakni !ayer #dan!ayer

&dengan 8ayer berada di atas 8ayer *. 9rutan ini menunjukan urutan lapisan layer,

yang paling atas berarti menindih layer di bawahnya. 7li. !ayer #untuk bekerja

pada 8ayer , karena kita akan menambahkan objek baru pada 8ayer .

Klik kanan pada area layout lalu pilih menu "nsert ew /bject. Pilih objek

bernama Sprite, lalu klik tombol "nsert. Klik pada area layout untuk menyimpan

objek -prite. 0kan muncul jendela 1dit Ima+e9 Sprite, diikuti

jendela Animationsdan Animation Frames. #endela 1dit "mage berungsi untuk

memodiikasi gambar sprite, sedangkan jendela 0nimation untuk membuat animasi


4/24

sprite dan jendela 0nimation :rames untuk mengatur urutan animasi gambar untuk

setiap list animasi.

Pada jendela 1dit "mage, klik ikon penuntuk memasukkan gambar. Pilih gambar

dengan nama ile plat6orm&2pn+lalu klik /K sehingga gambar pijakan panjang

muncul di jendela 1dit "mage. Kemudian pada jendelaAnimation 6rames, klik kanan

kemudian pilih menu Add 6ramesehingga sekarang ada dua rame yakni rame *

dan . Klik rame lalu klik ikon /pen dan pilih gambar dengan nama

ile plat6orm#2pn+. Buat satu rame lagi lalu isi dengan ile plat6orm%2pn+. Tutup

jendela 1dit "mage.

-ampai sini 0nimation deault sudah memiliki ) buah rame gambar, masing;masing

gambar pijakan panjang, sedang dan pendek. Kalau Kamu menjalankan game dengan

menekan tombol :< pada keyboard, maka Kamu akan lihat gambar pijakan pada

layout akan berubah dari panjang menjadi sedang dan pendek. "tu terjadi karena rame

akan dijalankan untuk menampilkan animasi. Karena kita tidak membutuhkan animasi

untuk pijakan, melainkan dipasang secara random, maka kita akan menonaktikan

animasinya. Caranya adalah dengan mengklik 0nimation &eault dari objek pijakan

tersebut, kemudian pada bagian Propertiesuntuk animations, set

nilai Speedmenjadi &. Tutup jendela 1dit "mage. Masih dalam keadaan objek pijakan

akti, set properti Namemenjadi =Pija.an=. Kemudian pada properti0eha-iors, klik

link Beha>iors hingga muncul jendela Pija.an9 0eha-iors. Klik ikon plus lalu pilih

beha>ior :umpthru. Tutup jendela Beha>iors. :ungsi beha>ior adalah memberikan

siat tertentu pada objek. Beha>ior #umpthru membuat objek pijakan dapat dilewatidari bawah tapi dapat digunakan untuk mendarat oleh objek tokoh nantinya.

-ekarang sudah ada objek pijakan di layout. Kita akan memperbanyak dan

menyimpannya secara random pada layout. 7li. .anan obje.lalu pilih ;opy,


5/24

kemudian .li. .anan pada area layoutdan pilih Pastelalu klik pada posisi tertentu

untuk menyimpan salinan objek. 8akukan seperti itu hingga objek pijakan dirasa

cukup memenuhi layout. Pada setiap objek Pijakan, Kamu dapat mengeset

properti Initial 6rameke &, #atau %untuk memilih mau mengunakan gambar pijakan

yang panjang, sedang atau pendek. 'asil akhirnya kira;kira seperti ilustrasi berikut!

Menambahkan Animasi Tokoh

Klik kanan pada area layout lalu pilih menu "nsert ew /bject. Pilih objek

bernama Sprite, lalu klik tombol "nsert. Klik pada area layout untuk menyimpan

objek -prite. Pasti.an !ayer # sedan+ a.ti6 .arena .ita a.an menempat.an obje.


6/24

to.oh ini pada layer #. Kalo Kamu terlanjur menyimpan objek tokoh ini di layer *,

maka Kamu tinggal set ulang properti!ayeruntuk objek ini ke !ayer #.

Pada jendela 0nimations, sudah ada satu animasi dengan nama De6ault. Pada jendela

1dit "mage, klik ikon penuntuk memasukkan gambar. Pilih ile asset

bernama idle&2pn+. Buat rame baru pada jendela Animation Frames. Klik rame

lalu klik ikon /pen dan masukkan ile bernama idle#2pn+. 9langi langkah

tersebut untuk ile idle%2pn+. 0nimasi ini akan kita gunakan pada saat tokoh hendak

mulai loncat.

Pada jendela 0nimations, klik kanan lalu pilih menu Add animationsehingga

muncul Animation%. Klik kanan Animation%lalu pilih menu 3enamedan ganti

nama animasi menjadi =:ump=. &alam keadaan animasi #ump akti, masukkan ile

assetjump&2pn+ke 6rame &, jump.png ke rame , dan seterusnya hingga ile

jump+.png.

Perhatikan gambar;gambar pada animasi #ump. Pada animasi tersebut gambar tokoh

sedang dalam keadaan meloncat dengan gambar gas di bawah kakinya. Bila Kamu

mengklik ikon Set collision poly+onyang ada di sebelah kiri paling bawah pada

toolbar samping di jendela 1dit Ima+e, akan nampak garis biru yang mengelilingi

gambar. $aris tersebut adalah batas tumbukan antar objek pada layout. 9ntuk gambar

pada rame ; < pada saat tokoh melayang di udara, garis biru mengelilingi tidak

hanya tubuh si tokoh, tapi juga dengan bagian gambar gasnya. "ni akan jadi masalah

ketika proses animasi berjalan nantinya, karena tumbukan terjadi meskipun tubuh sitokoh sudah tidak menempel pada pijakan.

-elain itu, bila kamu mengklik ikon Set ori+in and ima+e pointsyang ada di sebelah

atas ikon -et collision polygon, akan nampak simbol plus dengan lingkaran di tengah


7/24

yang muncul di atas gambar tokoh. -imbol tersebut adalah patokan posisi koordinat

dari objek tokoh. -imbol tersebut di semua rame terletak di tempat yang sama, yakni

tengah;tengah dari ukuran rame. "ni akan menimbulkan ketidakkonsistenan posisi

tokoh karena tubuh tokoh melayang dan tidak berada di tempat yang sama saat

animasi berjalan. 9ntuk itu ubah garis poligon dengan menggeser node kotak

berwarna merah seperti pada gambar berikut!

Perbaiki collision polygon menjadi seperti pada ilustrasi baris kedua

Perbaiki juga posisi origin untuk semua rame agar berada di posisi yang sama!


8/24

8akukan hal yang sama juga untuk setiap rame di animation &eault.

-etelah semua collision polygon dan origin disesuaikan posisinya, close jendela 1dit

"mage. Pada kondisi objek sprite tokoh ini dalam keadaan akti terpilih, set

properti Namedengan =/o.oh=. Kemudian pada properti0eha-iors, klik tautan

Beha>iors sehingga muncul jendela /o.oh9 0eha-iors. Klik ikon plus pada toolbar

jendela Beha>iors, lalu pilih beha>ior Plat6orm. Tutup jendela Beha>iors. Beha>ior

Platorm memberikan siat platormer pada objek Tokoh, sehingga si tokoh ini dapat

dikendalikan menggunakan keyboard dan tertarik gra>itasi.


9/24

Kalo kamu coba jalankan game ini dengan menekan tombol :itasi dan juga dapat digerakkan ke kiri;kanan dan

melompat dengan menekan tombol panah pada keyboard. Karena kita ingin supaya si

tokoh ini tidak meloncat saat ditekan tombol panah atas, maka kita akan nonaktikan

properti De6ault ;ontrolsdengan mengeset nilainya ke No.

Menambahkan Caption Skor

0uat !ayer %terlebih dahulu. Kita akan menempatkan caption, tombol dan teks pada

layer 2. Klik kanan area layout dan pilih menu "nsert new object. Pilih objek /e4tdan

tempatkan di kiri atas layout. -et properti berikut!

ame! cap'ighscore

Color! 2


10/24

ame! t3t'ighscore

Color! 2


11/24

Posisi akhir objek-objek pada layout

Menambahkan Objek Touch dan Local Storage

Klik kanan area layout lalu pilih menu "nsert new object. Pilih objek /ouch, klik

tombol "nsert. 8akukan hal yang sama untuk memasukkan objek dengan nama !ocal

Stora+e. /bjek Touch ini akan kita gunakan untuk membuat e>ent user menyentuh

layar handphone, dan objek 8ocal -torage akan kita gunakan untuk menyimpan data

highscore.

Menuliskan Kode Program


12/24

Buka tab 1>ent -heet . &isinilah kita akan menuliskan program. Program yang kita

tulis berbasis e>ent;action, artinya kita mendeinisikan kondisi atau e>ent yang akan

terjadi dan menentukan aksi apa yang harus dilakukan pada saat e>ent tersebut terjadi.

0gar lebih paham kita langsung praktekkan.

Klik kanan pada area 1>ent sheet, lalu pilih Add +lobal -ariable. Muncul jendela

ew global >ariable. -et Namedengan =play=, /ypedengan Numberdan Initial

-aluedengan &. ?ang kita lakukan barusan adalah membuat sebuah >ariabel

bernama playdengan tipe data number dengan nilai *.

Kemudian kita akan mendatarkan sebuah e>ent. Klik kanan lalu pilih Add e-ent.

Muncul jendela 0dd e>ent. &obel klik objek /ouch, kemudian dobel klik action Is

touchin+ object. Pada jendela parameter, klik parameter bjectdan pilih objek

tombol Play.

Klik link Add actionyang ada di samping e>ent /ouch 5 Is touchin+ Play, hingga

muncul jendela 0dd action. &obel klik objek System, kemudian dobel klik action Set

-alue, kemudian pilih -ariable playdan set parameter ?aluemenjadi #.

Klik link Add actionyang ada di samping e>ent /ouch 5 Is touchin+ Play, hingga

muncul jendela 0dd action. &obel klik objek tombol Play, lalu pilih action Set ,. -et

parameter ,menjadi =&&.

&engan demikian kita sudah memasang satu buah e>ent untuk mengangani ketikauser menyentuh layar di atas objek tombol Play, yang kemudian akan mengeset

>ariabel play menjadi dan menyembunyikan tombol Play ke bawah layout.

Tampilan e>ent sheetnya harusnya seperti ini.


13/24

9ntuk selanjutnya menambahkan e>ent, action dan parameter tahapannya selalu

seperti itu. Mudah bukan@ !&

Membuat Tokoh Meloncat

Buat e>ent System, pilih action ;ompare ?ariable. Cek >ariabel playapakahsama

den+an #.

Kemudian klik kanan pada e>ent System 5 Play @ #, pilih menu Add, lalu pilih

menu Add sub5e-ent. Buat e>ent untuk /o.oh, pilih kondisi Is on 6loor. Pada

e>ent /o.oh 5 Is on 6loor, dobel klik objek /o.oh, lalu buat actionSimulate ;ontrol.

Pilih parameter ;ontrol 9 :ump.

-ampai titik ini, Kalau Kamu menjalankan game, maka Tokoh akan meloncat;loncat

setelah tombol Play ditekan. Kamu bisa memainkan tin++i loncatandengan mengeset

properti 0eha-iors > Plat6orm > :ump stren+thmilik objek/o.ohke nilai yang

lebih tinggi. -aya mengeset #ump strength ke #&&&.

Mengontrol Tokoh


14/24

-ekarang kita akan buat supaya objek tokoh bisa bergeser ke kiri dan ke kanan bila

tombol panah kiri dan kanan ditekan.

Buat -ub;e>ent dari e>ent System 5 Play @ #, pilih objek /ouch. Pilih kondisiIs

touchin+ object. "si parameter object Arrowent

ini, pilih objek /o.oh, pilih action Simulate ;ontrol'pilih parameter Control!e6t.

Buat lagi action untuk e>ent yang sama untuk objek/o.oh, pilih action Set

mirrored'pilih parameter -tate irrored.

Buat lagi -ub;e>ent dari e>ent System 5 Play @ #, pilih objek /ouch. Pilih kondisi Is

touchin+ object. "si parameter object Arrowent ini, pilih objek /o.oh, pilih action Simulate ;ontrol'pilih parameter

Control3i+ht. Buat lagi action untuk e>ent yang sama untuk objek/o.oh, pilih

action Set mirrored'pilih parameter -tate Not mirrored.

Menjalankan Animasi Tokoh

Kita sudah punya dua buah animasi untuk Tokoh, yaitu &eault dan #ump. 0nimasi

#ump akan kita mainkan saat Tokoh meloncat, dan animasi &eault kita mainkan saat

Tokoh mulai jatuh.

Buat e>ent untuk objek /o.oh. Pilih kondisi n jump. Buat action Set

animationuntuk objek /o.oh, isi parameter dengan animation A:umpA.

Buat e>ent untuk objek /o.oh. Pilih kondisi n 6all. Buat action Set

animationuntuk objek /o.oh, isi parameter dengan animation ADe6aultA.


15/24

-ampai sini, Tokoh akan meloncat dengan animasi, serta dapat digerakkan ke kiri dan

ke kanan.

Menaikkan Laar

Tokoh harus terus naik setiap kali loncat. Maka kita akan menambah Pijakan sertiap

kali pijakan yang lama turun.

Buat Blobal -ariabledengan nama minScroll, beri >alue 8&&. ariabel ini akan kita

gunakan untuk menyimpan posisi ? dimana layar harus scroll. Buat

e>ent Systemdengan kondisi 1-ery thic., lalu tambahkan action Set scroll

,pada objek Systemdengan nilai parameter , 9 minScroll. 1>ent ini akan membuat

layar terus discroll terus hingga mencapai posisi min-croll.

Buat e>ent baru untuk objek /o.oh, pilih kondisi ;ompare ,, pilih

parameter;omparisondengan C less than, dan parameter , co5

ordinatedenganminScroll. Tambahkan action untuk e>ent ini, pada objek System,pilih aksiSet -alue, pilih parameter ?ariabledengan minScrolldan

parameter ?aluedengan /o.oh2,.

-ampai sini objek tokoh akan meloncat dan naik melewati pijakan;pijakan. Tapi

background dan tombol pun ikut terlewati. Kita ingin agar background dan tombol

tetap pada posisinya dan hanya pijakan saja yang terlewati. &isinilah ungsi

distribusi objek pada layer. Karena background sudah ada pada 8ayer * dan objek

tombol dan teks sudah ada pada layer 2, maka kita akan memanipulasi properti

Paralla3 untuk 8ayer * dan 2. Klik !ayer &lalu pada panel Properties, set

properti Paralla4ke &'&. 8akukan hal yang sama pada 8ayer 2.


16/24

-elain itu pijakannya pun habis setelah Tokoh sampai di atas. Kita harus membuat

pijakan baru setiap kali pijakan terakhir sudah melewati batas minimum dari garis atas

layer. 9ntuk itu kita buat -ariabel ne4tPija.andengan nilai &. ariabel ini akan kita

set dengan nilai posisi ? dimana sistem harus membuat objek pijakan selanjutnya.

Kemudian buat sub5e-entbaru di bawah e-ent /o.oh 9 , C minScroll, pilih

objek System, pilih kondisi;ompare -ariable2Pilih

parameter ?ariable dengan ne4tPija.an, parameter;omparisondengan Breater or

eual, dan isi parameter?aluedengan ?iewport/opE!ayer #G. 1>ent ini untuk

mengecek apakah nilai >ariabrl ne3tPijakan sudah melewati batas atas layer .

Kemudian buat action untuk objek System, pilih aksi ;reate bject, isi

parameter bject to createdengan objek Pija.an, parameter !ayerdengan !ayer

#5menggunakan kutip6, parameter Hdengan randomE#&' $#&G, dan

parameter ,dengan?iewport/opE!ayer #G. Kemudian tambahkan lagi action

untuk objekSystem, pilih aksi Set -alue, pilih

parameter ?ariabledengan ne4tPija.an, dan isi

parameter ?aluedengan ?iewport/opE!ayer #G 5 randomE#&&' #(&G.

#alankan game, dan sekarang mestinya game sudah bisa dimainkan sesuai target game

kita. $ambaran keseluruhan program yang sudah kita tulis dapat dilihat pada gambar

di bawah ini.


17/24

Menempurnakan Gamepla


18/24

-ampai titik ini gamenya memang sudah bisa dimainkan, tapi masih belum sempurna,

belum bisa mencatat skor, restart game, bahkan game o>ernya pun belum ada. /leh

karena itu, mari kita sempurnakan gamenya supaya layak untuk dimainkan !&

Mencatat Skor dan !ighscore

Kita sudah punya dua objek Te3t untuk menampilkan skor dan skor tertinggi. -kor

dihitung dari nol setiap kali bermain. 0pabila skor melebihi skor tertinggi

sebelumnya, maka skor tertinggi diisi oleh skor tersebut. -kor tertinggi kemudian

disimpan di local storage agar dapat diakses kembali.

Buat dua buah -ariablebernama scoredan hi+hscoredengan nilai deault *.

Buat sebuah e>ent untuk objek !ocalStora+e, pilih kondisi n item missin+. "si

parameter 7eydengan Ahi+hscoreA 5gunakan kutip6. Buat action untuk

objek !ocalStora+e, pilih aksi Set item. "si parameter 7eydengan Ahi+hscoreA

5gunakan kutip6, dan parameter ?aluedengan hi+hscore. 1>ent ini mengecek jikapada local storage tidak ditemukan key =highscore=, maka kita buat item dengankey

=highscore= dan >alue * 5>alue dari >ariabel highscore6.

Buat e>ent untuk objek System, pilih kondisi n start o6 layout21>ent ini dijalankan

saat pertama kali layout dimuat. Buat action untuk objek!ocalStora+e, pilih

aksi ;hec. item e4ists, isi parameter 7eydengan Ahi+hscoreA. Karena local storage

ini bersiat asynchronous 5tidak langsung mengembalikan nilai6, maka kita harus

memanggil ungsi callbacknya untuk mendapatkan hasil dari aksi yang sudah diminta

sebelumnya.


19/24

Buat e>ent untuk objek !ocalStora+e, pilih kondisi n item e4ists, isi

parameter 7eydengan Ahi+hscoreA. Buat action untuk objek !ocalStora+e, pilih

aksi Bet item. "si parameter 7eydengan Ahi+hscoreA 5dengan kutip6. 1>ent ini

memastikan apakah data =highscore= sudah ada di local storage, sehingga kita dapat

memanggil data tersebut.

Buat e>ent untuk objek !ocalStora+e, pilih kondisi n item +et, isi

parameter7eydengan Ahi+hscoreA. Kemudian buat action untuk objek System, pilih

aksiSet -alue, pilih parameter ?ariabledengan hi+hscore, dan isi

parameter?aluedengan !ocalStora+e2Item?alue . Kemudian buat lagi action untuk

objek t4ti+hscore, pilih aksi Set te4t, isi parameter /e4tdengan hi+hscore.

-ekarang kita akan mencatat setiap pijakan yang sudah terlewati sebagai nilai skor.

Buat e>ent untuk objek Pija.an, pilih kondisi Is outside layout. Buat action untuk

objek Pija.an, pilih aksi Destroy. 0ksi ini berungsi untuk menghapus objek pijakan

yang sudah keluar dari layar dan tidak digunakan lagi, agar tidak memakan resource

memori. Buat lagi action untuk objekSystem, pilih aksi Add to. "si

parameter ?ariable dengan scoredan isi parameter ?aluedengan #. Buat satu lagi

action untuk objek t4tScore, pilih aksi Set te4t, lalu isi parameter /e4tdengan score.

Kedua aksi ini untuk menambah dari nilai sebelumnya pada >ariabel score dan

menampilkannya pada objek t3t-core.

Kita akan sa>e highscore ke local storage setelah game berakhir. Katakanlah indikator

game berakhir adalah bila >ariabel Play 5yang sudah kita buat sebelumya6 bernilai 2.Maka buatlah e>ent untuk objek System, pilih kondisi ;ompare -ariable, pilih

parameter ?ariabledengan play, parameter;omparisondengan 1ual to, dan

parameter ?aluedengan %. Buat lagi sub;e>ent di bawah e-ent System 9 play @ %,

untuk objek System, pilih kondisi;ompare -ariable, pilih


20/24

parameter ?ariabledengan hi+hscore, parameter;omparisondengan !ess than, dan

parameter ?aluedengan score. Buat action pada sub;e>ent ini, untuk objek System,

pilih aksi Set -alue, isi parameter ?ariabledengan hi+hscore, dan

parameter ?aluedengan score. Buat lagi action untuk objek t4ti+hscore, pilih

aksi Set te4t, isi parameter/e4tdengan hi+hscore. &ua aksi ini untuk menampilkan

highscore terbaru. Buat satu lagi action untuk objek !ocalStora+e, pilih aksi Set

item, isi parameter 7eydengan Ahi+hscoreA dan parameter ?aluedengan hi+hscore.

0ksi ini untuk menyimpan data highscore terbaru di local storage.

'asil dari sa>e data ini akan terlihat bila Kamu sudah membuat kondisi game o>er.

8anjut ke langkah di bawah ini.

Membuat Kondisi Game O"er

$ame berakhir ketika objek tokoh tidak dapat mendarat di pijakan. -edangkan pada

langkah sebelumnya kita telah menghapus objek pijakan bila melebihi batas bawah

layar. Maka cara termudah untuk menentukan objek Tokoh tidak dapat mendaratadalah dengan membandingkan posisi ? objek tokoh dengan batas bawah layar.

Buat e>ent untuk objek /o.oh, pilih kondisi;ompare ,, pilih

parameter;omparisondengan Breater or eual, dan isi parameter , co5

ordinatedengan ?iewport0ottomE!ayer #G. Buat action untuk objek System, pilih

aksi Set -alue, pilih parameter ?ariabledengan playdan isi

parameter ?aluedengan %. Buat satu lagi action untuk objek /o.oh, pilih

aksi Destroy.


21/24

-ekarang coba mainkan gamenya. Mestinya highscore berhasil disimpan di local

storage browser dan dia akan dapat diambil meskipun Kamu sudah menutup

browsernya.

Membuat #estart Game

0gar user tidak perlu merestart game untuk bermain kembali, kita harus memasilitasi

mereka untuk mengulang permainan. 9ntuk itu, kita akan siapkan satu tombol untuk

merestart game. Pada tab 8ayout , Insert new objectbertipe Sprite, isi sprite

tersebut dengan ile gambar bernamarestart2pn+. -et properti Namedengan 3estart.

-impan objek tombol estart tersebut di luar area layout.

Kembali ke 1>ent sheet , pada e>ent /o.oh 9 , >@ ?iewport0ottomE!ayer

#G yang sudah kita buat sebelumnya, tambahkan action untuk objek tombol 3estart,

pilih aksi Set Position, isi parameter Hdengan #8&dan ,dengan ($&.

Buat lagi e>ent untuk objek tombol /ouch, pilih kondisi n tap object, pilihparameter bjectdengan objek tombol 3estart. Buat action untuk objekSystem,

pilih aksi 3eset +lobal -ariable. Buat lagi action untuk objek System, pilih

aksi 3estart layout. 1>ent ini akan membuat game kembali ke posisi awal saat layout

dimuat ketika tombol estart ditekan.

Menggabungkan Kedua Sisi Kiri dan Kanan Laar

-upaya game lebih menarik lagi, kita buat supaya objek tokoh tidak dapat lari

kemana;mana. -eperti yang Kamu lihat, hingga titik ini, game sudah terbilang layak

main. Tapi masih ada celah yang harus ditangani, yakni ketika objek tokoh kita geser

ke kiri atau ke kanan hingga melewati batas samping layar, objek kita akan


22/24

menghilang dan jatuh karena tidak terlihat dan tidak ada pijakan di luar layar.

Maka ada ) solusi untuk itu, 6 membiarkannya seperti itu dan menjadikannya sebagai

bagian dari aturan main, 26 membatasi objek Tokoh supaya tidak dapat melewati batas

kiri kanan layar, dan )6 membuat supaya sisi kiri dan kanan layar seolah saling

terhubung, yang mana bila objek tokoh melewati batas kiri layar, maka dia akan

muncul dari batas kanan layar, dan begitu juga sebaliknya. Kali ini kita akan gunakan

opsi ke;).

Buat e>ent untuk objek /o.oh, pilih kondisi ;ompare H, pilih

parameter;omparisondengan !ess than, dan parameter H co5ordinatedengan 5#&.

Buat action untuk objek /o.oh, pilih aksi Set H, isi

parameter Hdengan!ayoutWidth J #&.

Buat lagi e>ent untuk objek /o.oh, pilih kondisi ;ompare H, pilih

parameter;omparisondengan Breater than, dan parameter H co5

ordinatedengan!ayoutWidth J #&. Buat action untuk objek /o.oh, pilih aksi Set H,

isi parameter Hdengan 5#&.

Menambahkan Aksesoris

Kamu bisa menambahkan gambar co>er atau judul, menambah latar yang lebih

meriah, atau menambahkan item lain yang bisa menambah poin permainan supaya

game Kamu lebih menarik dan asyik dimainkan. Tapi untuk project tutorial ini saya

cukupkan sampai sini penjelasannya. 9ntuk step selanjutnya kita akan okus tentang

bagaimana supaya game Construct 2 Kamu bisa dikon>ersi ke dalam bentuk game

0ndroid tanpa menggunakan lisensi.


23/24

$%port Project dan Modi&ikasi Kode

1kspor game Kamu dengan mengklik tombol 14port projectpada toolbar ribbon

'ome, lalu pilih opsi /! website, klik e3t. Pilih older lokasi dimana Kamu

akan menyimpan ile hasil ekspor, misalnya di C!DgamesayaDininite;jumpingD. Klik

e3t. Pilih opsi template ormal. Klik 13port.

-etelah selesai ekpor, buka aplikasi "ntel %&K dan login dengan akun "ntel.

Klik gambar older bertuliskan P/#1CT- di kiri atas aplikasi, lalu klik tombol plus

bertulis.an S/A3/ A N1W P3:1;/di kiri bawah. Pilih menu Import ,our

/! ;ode 0ase. Pada kolom Import 6romdi sebelah kanan, pilih older project

game Kamu, lalu klik tombol ;ontinuedi kanan bawah. Pada popup ew Project

ame, isi kolom Project Namedengan nama gamemu, misalnya ="ninite#umping=,

lalu klik ;reate. Pada popup Project importer resultsklik ;ontinue. Maka

akan terbuka tab &118/P dengan ile inde3.html dalam keadaan terbuka. Kita akan

mengedit ile inde3.html tersebut.

Cari baris script berisi alert("Exported games won't work..dst. lalu hapus satu tag

script tersebut beserta kontennya.

Tambahkan baris kode setelah baris kode

script jEuery, sekitar baris +.

Testing di Smartphone menggunakan AppPre"ie'


24/24

Kembali ke halaman project dengan mengklik ikon older bertuliskan P/#1CT- di

kanan atas aplikasi. Pada bagian '?B"& M/B"81 0PP B9"8& -1TT"$-, pada

bagian 0uild Settin+s, tab Android, isi kolom;kolom pada orm tersebut. ?ang harus

Kamu perhatikan adalah bagian chec.bo4 Fullscreenyang harus dicentang supaya

gamemu ullscreen pada handphone dengan layar yang lebih besar. Kemudian Pada

kolom rientationpilih opsi portrait. Kemudian pada kolom De-eloper ;erti6icate,

pilih &e>eloper Certiicate punyamu.

Memulai Membuat Project

Documents

Transcript of Memulai Membuat Project