Upload
teungku-janten
View
240
Download
3
Embed Size (px)
Citation preview
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!
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
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,
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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/26/2019 Memulai Membuat Project
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!
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
10/24
ame! t3t'ighscore
Color! 2
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
17/24
Menempurnakan Gamepla
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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
7/26/2019 Memulai Membuat Project
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.
7/26/2019 Memulai Membuat Project
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'
7/26/2019 Memulai Membuat Project
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.