Anda di halaman 1dari 128

PENGANTAR TEKNOLOGI INFORMASI

Modul 12
MEMBUAT GAME BALLOON SHOOTER DENGAN CONSTRUCT 2

Disusun oleh:
Harnis Tika Sukma
G41190647
Dosen Pengampu:
Mudafiq Riyan Pratama, S.Kom, M.Kom

PROGRAM STUDI REKAM MEDIK


JURUSAN KESEHATAN
POLITEKNIK NEGERI JEMBER
2019
Pengantar Teknologi Informasi

Modul 12
Membuat Game Balloon Shooter dengan Construct 2

Overview

Bab ini menjelaskan langkah-langkah dalam membuat game balloon shooter


menggunakan Construct 2. Dalam praktikum ini akan diinformasikan mengenai
sumber penyedia asset game seperti gambar dan audio untuk menunjang kebutuhan
pembuatan game.

1. TUJUAN
1) Mahasiswa mengetahui sumber penyedia asset game.
2)

2. DASAR TEORI
Komponen penting dalam sebuah game adalah desain visual / desain grafis dan audio / efek
suara. Bagus tidaknya game, yang pertama kali dinilai adalah desain visualnya. Maka ditahap ini,
harus menyiapkan desain seperti: background, karakternya, efek suara dan lain-lain. Urutan
cerita yang disusun agar alurnya jelas dari langkah awal sampai langkah akhir dari permainan.
Tahap awal harus menentukan tema dan genre game, agar dapat menyiapkan kebutuhan
selanjutnya. Suatu sketsa yang disusun secara berurutan yang sesuai dengan naskah yang ada.
Dengan adanya storyboard, dapat menyampaikan ide cerita kepada orang lain dengan lebih
mudah. Menentukan tools / software yang akan digunakan, karena ada banyak tools yang bisa
digunakan untuk membuat game, diantaranya: Construct2, Unity 3D, Game Maker Studio,
Greenfoot, dan lain-lain.
Pengantar Teknologi Informasi

2.1 Definisi Game


Game berasal dari kata bahasa inggris yang berarti dasar permainan. Permainan dalam
hal ini merujuk pada pengertian kelincahan intelektual (Intellectual Playability Game) yang
juga bisa diartikan sebagai arena keputusan dan aksi pemainnya.Dalam game, ada target-
target yang ingin dicapai pemainnya.Permainan adalah kegiatan yang kompleks yang
didalamnya terdapat peraturan, play dan budaya.Sebuah permainan adalah sebuah sistem
dimana pemain terlibat dalam konflik buatan, disini pemain berinteraksi dengan sistem dan
konflik dalam permainan merupakan rekayasa atau buatan, dalam permainan terdapat
peraturan yang bertujuan untuk membatasi perilaku pemain dan menentukan permainan.
Game bertujuan untuk menghibur, game banyak disukai oleh anakanak hingga orang
dewasa. Game sebenarnya penting untuk perkembangan otak, untuk meningkatkan
konsentrasi dan melatih untuk memecahkan masalah dengan tepat dan cepat karena dalam
game terdapat berbagai konflik atau masalah yang menuntut kita untuk menyelesaikannya
dengan cepat dan tepat. Tetapi game juga bisa merugikan karena apabila kita sudah
kecanduan game kita akan lupa waktu dan akan mengganggu kegiatan atau aktivitas yang
sedang kita lakukan.

2.2 Jenis Game


 Game Konvensional
Beberapa jenis permainan konvensional ada yang membutuhkan alat, juga ada yang
tidak membutuhkan alat. Game lebih menekankan pada permainan fisik dan
penggunaan alat yang sederhana.
 Arcade Games
Kontrol permainan lebih sederhana (tidak membutuhkan banyak tombol navigasi).
Game yang lebih cocok dimainkan anak-anak untuk menstimulasikan otak untuk
lebih kreatif dalam memecahkan masalah dengan waktu yang singkat. Game
semacam ini mampu membuat otak, mata, dan tangan dapat koordinasi dengan baik.
 PC Games
Pengantar Teknologi Informasi

Game yang dimainkan harus diinstall di komputer pribadi atau dengan


mengaksesnya secara online. Game PC biasanya memiliki kualifikasi yang tinggi
sehingga membutuhkan perangkat komputer dengan spesifikasi tinggi pula
 Console Games
Konsol permainan ini biasanya terhubung dengan televisi atau menggunakan alat
genggam yang terhubung dengan konsol yang disebut kontroler.
 Handheld Games
Contohnya: PSP Game yang dimainkan menggunakan alat tertentu yang bisa bisa
dibawa kemana-mana. Perangkat ini hanya khusus untuk kebutuhan game saja. Tidak
dapat difungsikan sebagai mobile phone.
 Mobile Games
Contohnya: Smartphone Game yang dimainkan menggunakan handphone.

2.3 Genre Game dan Contohnya

1. Maze Game Jenis game ini adalah jenis game yang paling awal muncul. Contoh yang
paling populer di Indonesia adalah game pacman dan Digger.
2. Board game Jenis game ini sama dengan game board tradisional, seperti monopoly.
Umumnya game ini lebih menekan kan pada kemampuan komputer menjadi lawan tanding
dari pemain. Melibatkan kemampuan AI( artificial intelegence) yang menjadikan game ini
menantang contoh Chess, Chess Master 2000, Monopoly, Scrabble.
3. Card Game Hampir sama dengan board game, jenis game ini tidak memberikan
perubahan bearti dari game versi tradisional yang sejenis. Contohnya, game solitaire
danhearts, versi asli dan versi elektroniknya nyaris tidak ada bedanya. Variasi yang ada
adalah kemampuan multiplayer dan tampilan yang lebih bervariasi dari tradisional. Game ini
termasuk game yang muncul pada awal game komputer seperti genre maza dan board game
contoh: hearts, spider, blackjack, poker, solitaire.
4. Trading Card game Jenis game ini jarang masuk ke Indonesia. Contoh yang populer di
luar negri adalah battle card pokemon. Adalah beberapa stasiun televise di 10 Indonesia
Pengantar Teknologi Informasi

yang menayangkan kartun tentang trading card ini. Versi game elektroniknya sangat di
gemari di luar negri. Contoh pokemon, Yu gi oh, Duel Master, Magic The Gathering.
5. Quiz Game Salah satu yang umum di kenal adalah game kuis Who Wants To Be
Milionare, sebuah game dengan nama yang sama dari acara kuis televisi. Game ini
sederhana dalam cara bermain hanya memilih jawaban yang benar dari beberapa pilihan
jawaban.
6. Puzzle Game Game ini memberikan tantangan kepada pemainya dengan cara
menjatuhkan sesuatu dari sisi sebelah atas ke bawah. Pemain harus menyusun sedemikian
rupa dan tidak ada yang tersisa ketika susunan di atas nya sudah akan di buat. Susunan ini di
lakukan secepat dan sebaik mungkin. Contoh Tetris, Magic Inlay, Adventure Inlay, Rocket
Mania, Chip Challenge.
7. Shooting Game Secara standar bahwa semua game yang bertipe atau di mainkan dengan
cara menembak objek game ini yang bertipe 2D ataupun 3D. Contoh Deer Hunter, Hunting
Unlimited 3.
8. Shoot Them Up Jenis yang bayak di minati karena udah di mainkan game aksi tembak
menembak dan menghancurkan lawan secepat dan sebanyak mungkin. Game ini adalah
game 2D. Contoh Twin Bee, Astro Raid, Arcanoid, Macross.
9. Adventure Game Game ini adalah game pertualangan menuju ke suatu tempat. di
sepanjang jalan yang akan menemui banyak hal dan peralatan yang akan di simpan,
peralatan yag akan di gunakan selama perjalanan. Game ini tidak terfokus pada pertarungan,
namun game ini menekan kan kepada pemecahan misteri dari pada pertarungan sampai mati.
Contoh Sam& Max, Maniac Mansio.
10. Side Scrooller Game Game ini di dasarkan kepada 2D bergerak ke sepanjang alur
permainan ke satu arah dan menyelesaikan tugasnya. Ada yang meloncat, berlari,
mengendar dan menghindar halangan seperti jurang dan proyektil baik dari musuh maupun
yang lainya. Contoh Super Mario Bros, Megaman series.
11. Fighting Game Game ini mengetengahkan pertarungan. Game ini memberikan
kesempatan untuk pemain dalam bertarung menggunakan berbagai kombinasi gerakan
dalam pertarungan. Ada gerakan bela diri da nada juga gerakan liar. Contoh Kungfu, King
Of Fighters.
Pengantar Teknologi Informasi

12. Sport Game Game ini sama dengan genre edutaiment. Game ini mengetengahkan genre
olah raga maka di sebut genre sport. Contoh Winning Eleven, FIFA
13. Racing Game Game balap memeberikan permainan lomba kecepatan dari kendaraan
yang di mainkan oleh pemain. Di dalam arena terkadang di luar arena balap. Contoh Driver,
Need For Speed. 12
14. Simulation Game Genre ini mengetengahkan permainan simulasi yang berbeda dengan
flight Simulator. Pemain membangun secra simulasi sebuah kota, Negara, atau Koloni yang
mengatur berbagai sumber daya dan menentukan berbagai keputusan yang di inginkan.
Contoh The Sim dan Sim City.
15. Turn Based Strategy ( TBS) Game Game ini memerlukan strategi dari pemain untuk
memenangkan permainan. Pemain melakukan gerakan setelah pemain lainya melakukan
nya, bisa di bilang mirip dengan catur tetapi dengan variasi gerakan dan efek yang jauh lebih
banyak. Contoh Empire, Heroes Of Might and Magic.
16. Real Time Strategy ( RTS ) Game Pada game ini pemain yang tercepat yang besar
kemungkinannya untuk menang, pada game ini harus melakukan berbagai gerakan sesuai
dengan strategi pertempuran di mana secepat mungkin menggumpulkan emas untuk
membangun kekuatan. Contoh Warcraft, Starcraft.
17. Firs Person Shooter ( FPS) Game Game ini mengutamakan kecepatan gerakan kita di
dalam permainan. Banyak baku tembak dan bertahan selama mungkin. Contoh Doom.

2.4 Apa itu Construct 2?


Construct 2 adalah tools pembuat game berbasis HTML5 yang dikhususkan untuk
platform 2D yang dikembangkan oleh Scirra. Construct 2 tidak menggunakan bahasa
pemrograman khusus, karena semua perintah yang digunakan pada game diatur dalam
EvenSheet yang terdiri dari Event dan Action.
2.5 Keunggulan Construct 2
Construct 2 memiliki keunggulan antara lain Quick and Easy. Construct 2 memiliki
antarmuka Ribbon yang cepat dan mudah dipahami. Layout editor menyediakan
Pengantar Teknologi Informasi

antarmuka what you see is what you get untuk mempercepat perancangan game. Sehingga
apapun yang di lihat dalam desain layout adalah tampilan yang didapatkan ketika game
dijalankan. Dengan demikian kita dapat menggunakan Construct 2 untuk membuat game
dan aplikasi dengan lebih mudah.
Keungulan lainnya yaitu Powerfull Event System. Dengan Construct 2 kita dapat
membuat game atau aplikasi, termasuk media pembelajaran berbasis mobile, dengan lebih
mudah. Hal ini dikarenakan kita tidak perlu menggunakan bahasa pemrograman yang rumit
sebagaimana sofware lainnya. Construct 2 menyediakan EventSheet yang berisi pernyataan
kondisi atau pemicu. Jika kondisi tersebut terpenuhi, tindakan atau fungsi dapat dilakukan.
Construct 2 dapat mempublikasikan game atau aplikasi dengan berbagai pilihan platform
hanya dengan satu project. Game Construct 2 dapat diterbitkan pada platform berbasis web
seperti Chrome Web Store, Facebook, Kongregate, Newgrounds, Firefox Marketplace.
Construct 2 juga dapat di ekspor ke desktop PC, Mac, dan Linux dengan menggunakan
Node Webkit. Selain mempublikasikan ke Windows 8 Store atau sebagai aplikasi Windows
Phone 8. Pengguna dapat pula mengekspor game ke iOS dan Android dengan menggunakan
CocoonJS, appMobi dan PhoneGap. Dengan dukungan platform yang luas pengguna dapat
memiliki akses yang luas untuk pemain.
2.6 Sumber Asset Game Free Source
Asset game merupakan salah satu hal penting yang diperlukan agar game Anda terlihat
dan terasa lengkap. Asset game bisa terdiri dari gambar/grafik dan audio/musik. Bagi
developer game yang bekerja secara individual, tentu sulit sekali jika semua asset dikerjakan
sendiri. Selain memakan banyak waktu, diperlukan pula skill yang luas dan mendalam agar
hasilnya dapat dinikmati user. Sebagai solusinya, berikut ini terdapat beberapa sumber
website yang menyediakan asset-asset gratis mulai dari gambar/grafik dan audio/musik.
Namun ingat satu hal. Cantumkan nama pembuat asset dan/atau website yang menyediakan
asset tersebut pada game yang sedang Anda buat untuk menghargai jasanya.

Gambar / Grafik
 https://www.kenney.nl/assets?q=2d
 OpenGameArt.org
Pengantar Teknologi Informasi

 TokeGameArt.net
 GameArt2D.com
 Craftpix.net
 itch.io
 MobileGameGraphics.com
 GameDevMarket.net

Audio / Musik
 Soundjay.com
 SoundImage.org
 Freesound.org
 FreeMusicArchive.org
 Incompetech.com

3. PRAKTIKUM
ATURAN PRAKTIKUM

 Dasar teori wajib diisi sesuai sub-topiknya. Sumber bisa didapatkan dari internet
ataupun dari materi yang diberikan dikelas teori.
 Setiap langkah, mahasiswa wajib menunjukkan bukti screenshot dan keterangan/
penjelasannya.
 Laporan praktikum dikumpulkan dalam format file PDF ke: e-learning.polije.ac.id
dengan format nama file: TugasGame_NIM_GOLONGAN (contoh:
TugasGoogle_G41161320_A), pengumpulan maksimal tanggal 12 Desember 2019 jam
23.55 WIB. Pengumpulan pada topik PENGANTAR TEKNOLOGI GAME.
 DILARANG COPY-PASTE HASIL PEKERJAANNYA TEMANNYA, JIKA ADA
YANG SAMA, LANGSUNG MENDAPAT NILAI 0.
Pengantar Teknologi Informasi

3.1 Kebutuhan Software dan Bahan


Sebelum memulai pembuatan game dengan Construct 2, diharuskan untuk menyiapkan
beberapa tools/ aplikasi berikut ini:
a. JDK 8, download di https://www.oracle.com/technetwork/java/javase/downloads/jdk8-
downloads-2133151.html

b. JRE 8, download di https://www.java.com/en/download/


c. Construct 2, download di https://www.scirra.com/construct2/releases
d. Web Browser (Chrome, Mozilla Firefox, Microsoft Edge, dll)
e. Asset Game Balloon Shooter, download di http://gg.gg/assetballoonshooter

3.2 Konsep Game Balloon Shooter


Dalam modul ini, Anda akan mempelajari bagaimana membuat permainan dengan judul
Balloon Shooter. Di sini pemain akan menembak balon dalam berbagai warna sesuai dengan
target warna yang telah ditentukan oleh sistem.
Pengantar Teknologi Informasi

Dalam pembuatan game Ballon Shooter, terdapat beberapa materi yang akan dipelajari:
1) Mengatur ukuran kanvas.
2) Menambahkan objek karakter, peluru, dan balon.
3) Menambahkan control plugin.
4) Menambahkan behavior (tingkah laku) pada setiap objek yang ditambahkan.
5) Menambahkan Global Variable dan Objek Text.
6) Menggerakkan karakter dan menembakkan peluru menggunakan keyboar dan mouse.
7) Membuat blaon keluar terus-menerus.
8) Menambahkan objek partikel.
9) Membuat kondisi perbandingan antara warna balon dan target.
10) Membuat kondisi Game Over menggunakan Layer.

3.3 Membuat Game


3.3.1 Membuat Project
1) Jalankan aplikasi Construct 2, kemudian pilih menu File > New > New empty
project.
Pengantar Teknologi Informasi

Maka tampilan awal yang muncul adalah seperti gambar di bawah ini
Pengantar Teknologi Informasi

HASIL PRAKTIK

2) Simpan proyek yang baru saja Anda buat dengan cara menekan menu File >
Save atau bisa dengan keyboard Ctrl+S atau tekan icon Save di bagian Quick
Access Toolbar.
HASIL PRAKTIK :
Pengantar Teknologi Informasi

3) Simpan dengan format nama: Balloon Shooter NIM, dalam type .capx. Contoh:

4) Untuk mencegah crash / lupa save / listrik padam tiba-tiba / corrupt, sebaiknya
Anda siapkan file backup dan autosave. Buka menu File > Preferences
HASIL PRAKTIK :
Pengantar Teknologi Informasi

5) Buka tab Autosave, pastikan Anda mengaktifkan autosave dengan cara memberi
tanda centang pada checkbox Enable autosave dan atur frekuensi setiap berapa
Pengantar Teknologi Informasi

lama sistem akan menyimpan otomatis file Anda. Disarankan mengaturnya


setiap 10-15 menit saja.

6) Selanjutnya buka tab Backup, pastikan Anda mengaktifkan auto-backup dengan


cara memberi tanda centang pada checkbox Backup. Atur frekuensi setiap
berapa lama sistem akan menggandakan secara otomatis serta lokasi folder di
mana semua berkas backup Anda nantinya disimpan. Disarankan backup setiap
30-45 menit.
Pengantar Teknologi Informasi

7) Tekan OK apabila sudah selesai. Restart Construct 2 agar bisa menyesuaikan


dengan perubahan sistem. Buka kembali file proyek yang sudah Anda simpan
tadi.
8) Jangan lupa menyimpan terlebih dahulu sebelum lanjut ke materi berikutnya.

3.3.2 Mengatur Window Size & Layout Size


Window Size
Window Size merupakan sebuah pengaturan ukuran inti dalam construct 2 yang
memutuskan sebesar apa tampilan game di layar ketika diekspor nantinya.
Contohnya, setiap PC memiliki resolusi layar masing-masing, mulai dari 640x360,
1280x720, 1920x1080, dan lain-lain. Window size inilah yang akan menentukan
berapa besar resolusi game di layar monitor Anda.
Pengantar Teknologi Informasi

Anda bisa menemukan pengaturan Window Size di dalam Project Settings. Klik
pada nama Project atau bisa juga dengan klik opsi Project Properties pada
LayouProperties.

Coba perhatikan parameter Preview browser di atas, Anda bisa mengatur browser
mana yang biasa Anda gunakan.

Layout Size
Layout Size merupakan sebuah pengaturan yang berfungsi untuk menentukan
seberapa besar kanvas layout dapat terisi. Tentunya ada perbedaan antara Window
Size dan Layout Size. Jika Layout Size lebih besar daripada Window Size, anda bisa
melihat garis hitam putus-putus yang mengelilingi kanvas layout.
Objek yang anda letakkan diluar garis hitam putus-putus tidak akan pernah kelihatan
saat di running / di preview. Sebabnya, project hanya menampilkan sesuai berapa
besar Window Size nya.
Pengantar Teknologi Informasi

Untuk game browser, umumnya ukuran Window yang digunakan adalah 640x360
atau 640x480. Untuk game Balloon Shooter ini, kita akan menggunakan resolusi
640x480 pixel. Ubah Window Size pada project yang sudah dibuat menjadi 640x480.

Maka ketika melihat kanvas layout, hasilnya akan menjadi seperti berikut:

Selanjutnya ubah parameter Layout Size menjadi sama seperti Window Size yaitu
640x480.
Pengantar Teknologi Informasi

Maka ketika melihat kanvas layout, hasilnya akan menjadi seperti ini
Pengantar Teknologi Informasi

Apakah masih terlihat garis hitam putus-putus? Seperti yang sudah dijelaskan di atas,
garis hitam putus-putus tesebut menunjukkan besaran area tampilan layout yang
hanya akan terlihat di layar monitor anda nanti. Jadi, ketika anda mengubah ukuran
layout sama dengan ukuran window, maka seperti itulah hasilnya.
Jangan lupa menyimpan terlebih dahulu sebelum lanjut ke tahap selanjutnya.

HASILPRAKTIK :
Pengantar Teknologi Informasi

3.3.3Manambahkan Objek
Pastikan bahwa aset game telah didownload.
1) Menambahkan Objek Balon
Agar dapat menambahkan objek, klik kanan pada area kanvas layout, lalu pilih
Insert new object. Anda juga bisa menggunakan klik kiri yang ada pada mouse
atau juga menekan area kanvas layout sebanyak dua kali.

Setelah memilih Insert new object, maka akan tampil kotak kumpulan plugin
yang bisa kita gunakan. Cari plugin Sprite menggunakan kotak search yang ada
di pojok atas kanan, lalu pilih plugin Sprite. Berikan nama “Balon” sebagai
nama objek.
Pengantar Teknologi Informasi

Setelah memberikan nama “Balon” pada objek, tekan Insert dan klik sembarang
di area kanvas layout untuk menuruh posisi objek itu nantinya. Setelah
menempatkan posisi objek, akan muncul kotak Image Editor sebagai berikut.

Selanjutnya tekan tombol Load an image from a file yang ada di bagian pojok
atas kiri, lalu pilih folder penyimpanan di mana anda menyimpan gambar objek
yang telah diundah dan di ekstrak tersebut.

Pilih gambar balon warna biru terlebih dahulu, lalu tekan Open. Di Image Editor
akan terlihat balon biru di sana.
Pengantar Teknologi Informasi

Dan yang perlu anda lakukan berikutnya ialah menambahkan balon lainnya
dengan cara yang lain, yaitu klik kanan pada Animation Frames > Import
frames > From files

Kemudian pilih balon hijau, balon kuning, dan balon merah.


Pengantar Teknologi Informasi

Maka hasil akhirnya akan seperti berikut (jika tidak berurutan, tinggal di drag
saja ke urutan frame yang tepat)

Pastikan objek yang aktif saat ini adalah gambar balon biru. Gunakan tools set
collision polygon untuk menentukan area sentuh pada gambar balon, di mana
anda akan membuat area sentuh pada gambar balon. Lalu klik kanan pada
sembarang area kanvas image editor, kemudian pilih Guess polygon shape.

Kemudian klik kanan pada area image editor, lalu pilih opsi Apply to whole
animations. Alhasil, frame balon yang lain (merah, kuning, hijau) mengikuti
titik sudut merah / titik polygon yang tampak di balon biru.
Pengantar Teknologi Informasi

Selanjutnya agar animasi balon tersebut tidak terus menerus berjalan, atur
kecepatan atau Speed dari animations balon ini dengan cara klik Animations
Default, maka akan tampil tab Animations „Default‟ properties.

Atur parameter Speed menjadi 0, karena animasi balon yang anda gunakan harus
dalam posisi tidak sedang berjalan.

Setelah itu tutup image editor pada tombol X dipojok kanan atas.
Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

2) Menambahkan Objek Karakter dan Peluru


Selanjutnya tambahkan objek karakter, caranya sama seperti menambahkan
objek balon, yaitu Insert new object > sprite > beri nama Karakter. Kemudian
pilih Load an image from a file, pilih file bernama karakter-1.png.
Pengantar Teknologi Informasi

Kemudian klik kanan pada area image editor, dan pilih Set to bounding box.
Jika sudah selesai, tutup image editor tersebut dengan klik tombol X.

Setelah itu tambahkan objek Peluru. Lakukan langkah yang sama seperti yang
penambahan objek sebelumnya, dan beri nama Peluru. Lakukan load image file
peluru.png. Dan klik kanan dan pilih Set to bounding box.

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

Jangan lupa save perubahannya.

3.3.3 Menambahkan Behaviour Balon. Peluru, dan Karakter


Tekan objek Balon, lalu di bagian Properties tekan menu Behaviours.
Pengantar Teknologi Informasi

Akan tampil kotak jendela Balon: Behaviours. Dalam jendela tersebut, tekan tombol
+ seperti berikut

Di dalam behaviour terdapat banyak sektor yang menjelaskan fungsinya masing-


masing, seperti General (umum), Movements (pergerakan), Attributes (atribut
khusus), dan banyak yang lainnya. Selanjutnya, cari behaviour Bullet. Kenapa
memilih bullet, karena behaviour bullet ini agar objek dapat terus bergerak maju ke
arah yang ditentukan layaknya peluru. Kemudian klik Add.

Maka hasilnya adalah sebagai berikut:


Pengantar Teknologi Informasi

Kemudian tutup jendela Behaviours tersebut. Berikutnya tambahkan behaviour


untuk objek Peluru dengan cara yang sama seperti behaviour balon.
Sedangkan untuk behaviour pada Karakter, maka pilih jenis behaviour 8 Direction.

Agar objek Karakter dapat bergerak, kita sudah menambahkan behaviour 8


Direction. Namun agar sistem dapat menerima input atau masukan seperti keyboard
atau mouse dan joystick, tambahkan plugin yang sesuai dengna perangkat input yang
akan digunakan. Untuk game browser, alat masukan yang biasa digunakan ialah
Mouse dan Keyboard.
Pengantar Teknologi Informasi

HASIL PRAKTIK:
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.4 Menambahkan Plugin


Objek balon, karakter, dan peluru merupakan bagian dari Visual Plugin (objek yang
dapat terlihat di atas kanvas layout anda saat ini). Plugin yang perlu ditambahkan
berikutnya ialah plugin Keyboard dan Mouse. Caranya: tekan dua kali pada
layout atau cukup klik kanan mouse > insert new object > Keyboard. Selanjutnya
tambahkan juga Mouse. Sehingga Project Bar akan ditemukan lima objek berikut:

Agar dapat melihat bagaimana cara kerja masing-masing behavior yang sudah
diberikan pada setiap objek, jalankan project ini dengan cara menekan tombol Run
Layout yang ada pada Ribbon Tab ataupun pada Menu Bar.
Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi

3.3.5 Mengubah Arah Gerak Objek Balon


Objek Balon dan Peluru bergerak ke arah kanan, karena ia mengikuti arah dari angle
objek saat itu (terlihat titik putih saat objek diklik)

Saat ini objek Balon masih mengarah ke kanan, ubah rotasi angle objek Balon ke
arah atas dengan cara ubah nilai parameter Angle: 270.
Pengantar Teknologi Informasi

Selanjutnya double click pada objek balon tersebut sehingga terbuka Image editor.
Kemudian tekan Shift+Klik Rotate 90 degree clockwise. Maka semua rotasi frame
Balon akan berubah. Apabila tidak menggunakan Shift maka yang berubah hanya
frame di image editor saja.

Kemudian tutuplah image editor tersebut dengan klik tombol X.


Pengantar Teknologi Informasi

Untuk memastikan bahwa balon sudah berjalan ke atas, maka jalankan kembali
dengan cara menekan tombol Run Layout yang ada pada Ribbon Tab.
HASIL PRATIKUM :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.6 Mengatur Parameter & Ukuran Objek


Sekarang objek Balon sudah dapat bergerak ke atas. Susun posisi objek Peluru,
Balon, dan Karakter hingga seperti berikut.

Mengapa objek Balon dan Peluru ditaruh di bagian abu-abu atau diluar kanvas
layout? Game hanya kana menampilkan apa saja yang ada di dalam area Window
Size. Dengan begitu objek-objek yang sifat keberadaannya temporary (sementara)
diletakkan di luar kanvas saja. Sekarang coba lakukan preview kembali.
Pengantar Teknologi Informasi

Karena objek Balon bergerak terlalu cepat, ubah kecepatannya dalam satuan Pixel
per Detik pada behaviour Bullet objek Balon menjadi 100 saja.

Lalu ubah nilai kecepatan (speed) objek Peluru menjadi -400, sehingga objek
Peluru akan berjalan terbalik dari angle yang ditentukan.
Pengantar Teknologi Informasi

Dan ubah ukuran objek Peluru menjadi 30x15 seperti berikut ini:

Selanjutnya untuk objek Karakter, ubah parameter behaviour 8Direction seperti


berikut
Pengantar Teknologi Informasi

Selanjutnya objek Balon, lalu ubah ukurannya menjadi 80x50.

Jangan lupa menyimpannya.

3.3.7 Membuat Sistem Penggerak Objek Karakter


Karena akan menambahkan perintah, maka pilih Even sheet 1, kemudian tambahkan
sebuah event di dalam kondisi on start of layout dengan cara klik kanan pada
Event sheet 1 > Add event > System.
Pengantar Teknologi Informasi

Kemudian pilih On start of layout > Done.

Agar objek Karakter dapat bergerak ke atas dan ke bawah menggunakan Keyboard,
anda perlu memberikan perintahnya di Event sheet. Buka tab Event sheet 1, dan
tambahkan event baru dengan klik kanan > add event, pilih Keyboard > Next >
Key is down > Next.
Pengantar Teknologi Informasi

Lalu tekan tombol <click to choose> dan tekan “W” (tanpa tanda kutip), tekan OK
kemudian klik done.

Maka hasilnya adalah

Selanjutnya tambahkan lagi event baru dengan kondisi Keyboard “S” is down
seperti langkah tadi. Sehingga hasilnya sebagai berikut
Pengantar Teknologi Informasi

Setelah menambahkan kondisi ketika tombol W dan S ditekan oleh pemain, perlu
adanya action agar dapat memberitahu Karakter untuk bergerak. Pada event nomor
2, tambahkan action Karakter > Simulate control > Next.

Lalu akan muncul dialog berikutnya. Pilih Up agar memerintahkan Karakter untuk
bergerak ke atas, dan tekan Done.

Sehingga hasilnya adalah sebagai berikut


Pengantar Teknologi Informasi

Untuk event nomor 3, tambahkan action Karakter > Simulate 8Direction pressing
Down. Sehingga hasilnya seperti ini

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.8 Membuat Sistem Menembak Peluru


Beirkutnya saat tombol spasi ditekan, Karakter akan mengeluarkan objek Peluru
dari alat yang sedang dia gunakan. Namun, perlu anda tandai terlebih dhaulu pada
titik mana objek Peluru akan dikeluarkan.

Buka image editor objek Karakter, lalu gunakan tool Set origin and image points.

Tekan tombol tambah “+” dan gunakan Zoom tool untuk memperbesar daerah alat
yang digunakan karakter. Klik pada ujung alat tersebut agar menandakan titik
lokasi objek Peluru dikeluarkan, lalu klik kanan pada Imagepoint. Pilih opsi Apply
to whole animation agar titik baru ini diterapkan ke semua frame. Kemudian tutup
window Image Point dan Image Editor.

Kembali ke Event sheet 1, tambahkan event baru dengan kondisi Keyboard > On
key pressed > click to chose > tekan spasi. Sehingga hasilnya seperti berikut.
Pengantar Teknologi Informasi

Tambahkan action Karakter > Spawn another object pada event nomor 4, dan
tekan Next.

Maka akan muncul kotak dialog berikutnya. Pilih objek Peluru dan atur nilai Image
point menjadi 1, sesuai dengan ID number image point Karakter yang anda
tambahkan tadi, dan tekan Done.
Pengantar Teknologi Informasi

Maka hasilnya:

Lakukan simpan projectnya, dan silahkan di preview / di play untuk melihat hasilnya.

Setiap objek Peluru yang dikeluarkan oleh Karakter akan terus menerus berada
diluar kanvas layout, yang berarti dapat membuat performa game menjadi rendah
(nge-lag). Agar performa tidak menurut, objek Peluru perlu dihancurkan ketika
sudah keluar layout. Caranya, tambahkan behaviour Destroy outside layout pada
objek Peluru.
Pengantar Teknologi Informasi

Maka behaviour yang terdapat pada objek Peluru menjadi seperti beirkut (terdiri dari
behaviour Bullet dan Destroy outside layout).

Jangan disimpan.
Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.9 Membuat Sistem Memunculkan Balon


Selanjutnya objek Balon akan dikeluarkan setiap detik dari bawah layar secara acak,
baik posisinya maupun warnanya. Buka tab Event sheet 1, tambahkan event baru
dengan kondisi System > Every X seconds, dan berikan interval 1.0 detik. (1.0 = 1
detik, 2.5 = 2.5 detik). Sehingga hasilnya menjadi seperti berikut.
Pengantar Teknologi Informasi

Berikutnya tambahkan action baru pada event nomor 5, System > Create object >
Balon, dengan X = random(25,421), dan Y = 540.

Di mana random(25,421) berarti mengambil nilai secara acak antara angka 25 hingga
420.

Untuk menampilkan frame Balon secara acak, tambahkan action baru pada event
nomor 5, Balon > Set frame > int(random(0,4)). Sehingga hasilnya menjadi seperti
berikut.
Pengantar Teknologi Informasi

Di mana expression int berarti Integer (Bilangan bulat), dan random (0,4) berarti
mengambil nilai secara acak antara angka 0 hingga 3, dari frame yang ada di objek
Balon berikut.

Agar objek Balon tidak menurunkan performa game, objek Balon juga perlu
dihancurkan ketika sudah berada di luar layout, permasalahannya ialah, pada
awalnya, objek Balon sendiri dimunculkan diluar layout, yakni pada koordinat Y =
540, tentu apabila menggunakan behavior Destroy outside layout, maka objek
Balon tidak akan pernah sampai di tengah-tengah layout, karena sudah dihancurkan
terlebih dahulu saat muncul. Maka perlu menggunakan cara manual melalui perintah
event. Tambahkan event baru dengan kondisi Balon > Compare Y, ubah
perbandingan menjadi Lebih kecil dari "< Less than", pada kolom Y co-ordinate
tambahkan expression ViewportTop(0).
Pengantar Teknologi Informasi

Lalu tambahkan action Balon > Destroy pada event nomor 6.

Sistem akan membandingkan setiap Balon yang tampil di layout. Apabila koordinat
Y pada Balon tersebut sudah melewati batas viewport (tampilan) khususnya Top /
atas, maka objek Balon akan dihancurkan. Sehingga saat preview project, hasilnya
akan menjadi seperti berikut ini.
Pengantar Teknologi Informasi

Jangna lupa simpan project anda.


HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.10 Membuat Sistem Peluru Mengenai Balon


Selanjutnya sistem yang akan dibuat ialah pada saat objek Peluru mengenai objek
Balon. Tambahkan event baru dengan kondisi Peluru > On collision with another
object > Next.
Pengantar Teknologi Informasi

Lalu pilih objek Balon dan tekan Done.

Maka hasilnya akan seperti ini:

Sehingga apabila Balon terkena Peluru, maka Balon akan dihancurkan. Namun akan
lebih terlihat bagus apabila menambahkan efek Balon meletus. Untuk membuat efek
Pengantar Teknologi Informasi

tersebut, tambahkan plugin Particle dengan klik kanan pada Layout 1 > Particles,
beri nama Letusan dan letakkan di luar area layout.

Maka akan muncul image editor. Ubah ukuran kanvas image editor menjadi 32x32
menggunakan Resize tool.

Selanjutnya gunakan Fill tool dan pilih sembarang warna di Color Palette, lalu
tuangkan di daerah kanvas image editor.
Pengantar Teknologi Informasi

Tutup image editor dan pastikan objek Letusan masih dalam keadaan terseleksi.
Lihat tab Properties. Sesuaikan parameternya seperti gambar berikut.
Pengantar Teknologi Informasi

Rate berarti jumlah partikel yang ditampilkan, Spray cone berarti angle atau sudut
arah partikel, dan Type berarti jenis partikel yang dihasilkan (Continuous spray =
Terus-menerus, dan One-shot = Sekali tembak).

Buka kembali tab Event sheet 1, pada event nomor 7, tambahkan action Balon >
Spawn another object > Letusan > Done.

Dan tambahkan lagi action Balon > Destroy, dan Peluru > Destroy. Sehingga
hasilnya menjadi seperti berikut.
Pengantar Teknologi Informasi

Maka ketika dipreview hasilnya seperti berikut:

Agar warna Letusan dapat sesuai dengan warna Balon, objek Letusan akan
menggunakan efek WebGL, di mana WebGL merupakan salah satu keunggulan dari
fitur yang dimiliki oleh HTML5. Dengan efek WebGL, selama device atau browser
mendukung, maka tampilan dalam game bisa diberi berbagai macam efek, seperti
pewarnaan hitam putih dan lainnya, efek air, efek bayangan, dan lain sebagainya.
Untuk objek Letusan, kita akan menggunakan efek WebGL pewarnaan.
Pengantar Teknologi Informasi

Pastikan objek Letusan sedang terseleksi, lalu pada bagian Properties, tekan tombol
Effects.

Selanjutnya tekan tombol Tambah dan cari efek Set color. Sehingga hasilnya
menjadi seperti berikut.

Kemudian tutup window tersebut.


Pengantar Teknologi Informasi

Di bagian properties Letusan, Anda dapat melihat tiga parameter warna utama yakni
Red, Green, dan Blue. Di tiga warna inilah Anda akan mengatur warna pada objek
Letusan.

Buka Event sheet 1, lalu klik kanan pada event nomor 7, dan pilih Add > Add sub-
event. Perlu diingat, lakukan klik kanan pada area gambar berikut.

Lalu pilih objek Balon > Compare frame > comparison "= equal to" > number 0 >
Done. Dengan kondisi ini, akan membandingkan apabila frame pada objek Balon
Pengantar Teknologi Informasi

yang terkena peluru bernilai 0, maka warna akan disesuaikan dengan warna di frame
0 yakni warna biru. Apabila 1, maka warna nya hijau, apabila 2 maka kuning, dan 3
maka merah.

Lakukan hal yang sama seperti menambahkan sub-event yang tadi, sehingga hasilnya
menjadi seperti berikut ini.

Selanjutnya tambahkan action pada event nomor 8, Letusan > Set effect parameter
> parameter index 0 > value 0 > Done.
Pengantar Teknologi Informasi

Masih di event nomor 8, tambahkan lagi action yang sama di bawahnya Letusan >
Set effect parameter > parameter index 1 > value 0 > Done. Dan sekali lagi
Letusan > Set effect parameter > parameter index 2 > value 100 > Done.
Sehingga hasilnya menjadi seperti berikut.

Parameter index berarti urutan parameter yang ada pada efek SetColor, (Red = 0,
Green 1, Blue = 2). Karena frame 0 merupakan Balon warna biru, maka
pewarnaannya Merah = 0, Hijau = 0, dan Biru = 100.

Selanjutnya untuk event action pada animation frame 1, 2 dan 3, tambahkan action
yang sama namun dengan nilai berbeda. Seperti gambar berikut ini.
Pengantar Teknologi Informasi

Sehingga ketika dilakukan preview project, hasilnya akan telrihat seperti berikut:
Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.11 Membuat Sistem Target Balon

Berikutnya akan membuat sistem target, di mana sistem akan mengacak target warna
balon yang harus ditembakkan. Pada materi ini Anda akan menggunakan global
variable.

Buka tab Event sheet 1, lalu klik kanan pada area event sheet, dan pilih Add
global variable.

Maka akan timbul kotak dialog New global variable, isi seperti gambar berikut.
Pengantar Teknologi Informasi

Nama variable yang ditambahkan ialah "Target", dengan tipe Angka/Number, dan
Nilai awal atau Initial value 0. Fungsi dari global variable Target ialah untuk
memberikan nilai acak dari frame Balon 0 - 3. Sehingga setelah ditambahkan, akan
muncul gambar berikut. Umumnya posisi global variable yang baru saja
ditambahkan berada di urutan event paling atas. Namun demikian, Anda juga dapat
mengubah posisi global variable ke urutan mana saja, selama tidak mengubah fungsi
global variable menjadi local variable (pembahasan akan ada di materi selanjutnya).

Selanjutnya tambahkan action baru pada event nomor 1 (On start of layout),
System > Set value > Target > int(random(0,4)) > Done.

Sehingga hasilnya menjadi seperti berikut ini. Di mana pada saat layout dimulai,
maka sistem akan mengacak nilai Target antara 0 sampai 3.
Pengantar Teknologi Informasi

Selanjutnya tambahkan sub-event pada event nomor 7, Balon > Compare frame >
"= Equal to" > Target > Done.

Lalu tambahkan action System > Set value > Target > int(random(0,4)) > Done.
Sehingga hasilnya menjadi seperti berikut.
Pengantar Teknologi Informasi

Selanjutnya tambahkan lagi sub-event pada event nomor 7, di mana Balon >
Compare frame > "≠ Not equal to" > Target > Done. Sehingga hasilnya menjadi
seperti berikut.
Pengantar Teknologi Informasi

Lalu buka tab Layout 1, tambahkan object Text dan beri nama TextScore, taruh di
sembarang lokasi terlebih dahulu, dan tambahkan object Text satu lagi yang diberi
nama TextTarget. Atur posisi tampilannya seperti gambar bergerak berikut.

Atur properties objek TextScore menjadi seperti berikut ini.


Pengantar Teknologi Informasi

Dan atur pula parameter properties pada objek TextTarget menjadi seperti berikut
ini.

Selanjutnya tambahkan lagi Global variable dengan nama Score, Type number,
Initial value 0. Sehingga saat ini terdapat dua global variable.

Kembali ke event nomor 12 dan 13, pada kedua event tersebut, berfungsi untuk
membandingkan apakah Balon yang ditembakkan oleh pemain sesuai dengan target
yang ditetapkan atau tidak, apabila iya, maka event nomor 12 akan berjalan, apabila
tidak, maka event nomor 13 yang akan berjalan.
Pengantar Teknologi Informasi

Tambahkan action pada event nomor 12, System > Add to > Score > 10 > Done.
Action ini berfungsi untuk menambahkan nilai 10 pada global variable Score.

Lalu tambahkan lagi action pada event nomor 12, System > Wait > 0.5 > Done.
Action ini berfungsi untuk memberi jeda 0.5 detik pada sistem sebelum menjalankan
action berikutnya.

Selanjutnya tambahkan lagi action pada event nomor 12, TextScore > Set text >
Score > Done. Action ini berfungsi untuk memperbarui tulisan pada objek
TextScore sesuai dengan nilai yang ada pada variable Score.
Pengantar Teknologi Informasi

Sehingga hasil akhirnya menjadi seperti berikut.

Karena ini masih belum berurutan, maka urutkan menjadi seperti berikut, dengan
cara drag dan drop ke posisi yang telah ditentukan.

Selanjutnya untuk event nomor 13, di mana event ini hanya berfungsi apabila frame
Balon yang terkena tembakkan pemain tidak sesuai dengan target, tambahkan action
Karakter > Set ignoring input > Start ignoring > Done. Action ini berfungsi untuk
menghentikan perintah pergerakkan kepada objek Karakter.
Pengantar Teknologi Informasi

Berikutnya tambahkan lagi action pada event 13, System > Wait > 2 > Done. Serta
action System > Reset global variables, dan action System > Restart layout.
Sehingga hasilnya menjadi seperti berikut.

Berikutnya tambahkan event baru, dengan kondisi System > Every tick.

Lalu tambahkan lagi sub-event pada event nomor 14, System > Compare variable
> Target > "= Equal to" > 0 > Done. Dan tambahkan action TextTarget > Set text
> "Target : Biru" > Done. Sehingga hasilnya menjadi seperti berikut.
Pengantar Teknologi Informasi

Lakukan langkah yang sama untuk target 1,2, dan 3, seperti gambar berikut.

Coba lakukan preview, maka hasilnya akan terlihat seperti berikut.


Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.12 Membuat Layar Game Over

Selanjutnya pada materi ini akan membuat layar yang bertuliskan Game over. Buka tab Layout
1, lihat pada sisi kanan, terdapat tab Layers.
Pengantar Teknologi Informasi

Apabila tidak ada, Anda bisa mengaktifkannya melalui menu View > beri centang
pada Layer Bar.

Lalu tekan tombol tambah + atau klik kanan pada area menu layer tersebut, lalu
pilih Add layer at top. Setelah menambahkan layernya, pastikan layer active adalah
Pengantar Teknologi Informasi

layer 1 (lihat di bagian paling bawah, Active layer : Layer ...) jika yang aktif masih
Layer 0, pilih Layer 1 pada layer bar.

Berikutnya tambahkan object Text dengan nama TeksGameOver dan atur


properties objek TeksGameOver seperti berikut ini.
Pengantar Teknologi Informasi

Pada event nomer 1, tambahkan action System > Set layer opacity > "Layer 0" >
100 > Done. Action ini berfungsi untuk membuat opacity pada layer 0 bernilai 100.
Pengantar Teknologi Informasi

Selanjutnya tambahkan lagi action System > Set layer visible > "Layer 1" >
Invisible > Done. Action ini berfungsi untuk menyembunyikan objek yang terdapat
di dalam layer 1.

Berikutnya pada event nomor 13, tambahkan action System > Set layer opacity >
"Layer 0" > 40 > Done.

Masih pada event nomor 13, tambahkan lagi action System > Set layer visible >
"Layer 1" > Visible > Done.
Pengantar Teknologi Informasi

Maka hasilnya akan terlihat seperti berikut ini.

Ubah posisi action hingga seperti berikut ini.

Silakan coba preview project-nya, dan jangan lupa simpan terlebih dahulu sebelum
lanjut ke materi berikutnya
HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

3.3.13 Finishing
Setelah merancang sistem gameplay, selanjutnya akan membahas tentang bagaimana
agar game menjadi lebih menarik saat dilihat. Tentu agar terlihat lebih menarik,
game perlu memiliki background yang cocok, objek yang tersusun rapi, musik, dan
lain sebagainya. Untuk itu, silakan unduh terlebih dahulu asset berikut untuk
digunakan nantinya.

Terlebih dahulu, silahkan download aset gambarnya: http://gg.gg/asset2ballonshooter


Pengantar Teknologi Informasi

Di dalam folder tersebut terdapat gambar Background dan gambar tiled Tali. Di
mana gambar Background akan di impor ke dalam plugin Sprite, sedangkan objek
Tali di impor ke dalam plugin Tiled Background.

Untuk mengimpor gambar yang menggunakan plugin Sprite, Anda tidak perlu
menambahkan plugin Sprite terlebih dahulu. Tinggal drag dan drop saja ke dalam
kanvas layout Construct 2, maka sistem akan otomatis membuat objek sprite sesuai
dengan nama file yang dipilih. Lakukan langkahnya seperti gambar bergerak berikut.
Pengantar Teknologi Informasi

Resolusi objek Background ini 1920x1080. Itulah sebabnya tampilan pada saat di
drag ke kanvas terlihat sangat besar. Ubah ukuran resolusi background menjadi
640x480 sesuai dengan ukuran Window yang digunakan.

Selanjutnya atur objek Background tepat hingga di tengah kanvas, dan pastikan
objek Background berada di dalam Layer 0.
Pengantar Teknologi Informasi

Saat ini posisi Background berada di dalam layer yang sama dengan objek Balon,
Letusan, Peluru, dan Karakter, sehingga ketika pertama kali menambahkan objek
baru ke dalam kanvas, maka objek tersebut akan berada di urutan layar teratas.
Urutan objek dalam layar ini dapat diatur menggunakan Z-Order. Untuk mengatur
Z-Order dilakukan dengan cara klik kanan pada objek yang dipilih yaitu gambar
background > sent to bottom layer.

Selanjutnya tambahkan objek Tiled Background, dan beri nama Tali, pastikan objek
Tali berada di Layer 0 sama seperti objek Karakter, dan lainnya.
Pengantar Teknologi Informasi

Lalu impor gambar Tali yang terdapat di dalam folder yang sama dengan objek
Background tadi.
Pengantar Teknologi Informasi

Sehingga hasilnya akan terlihat seperti ini di dalam kanvas layout.

Lalu atur properti objek Tali seperti berikut. Pastikan untuk mengatur Hotspot
terlebih dahulu sebelum mengubah posisi dan ukuran objek.
Pengantar Teknologi Informasi

Selanjutnya atur Z-Order objek Tali berada di belakang objek Karakter, namun
Background tetap berada urutan paling belakang. Hingga terlihat seperti berikut.

Agar objek Karakter tidak dapat keluar layout, tambahkan behavior Bound To
Layout pada objek Karakter.

Jangan lupa menyimpan terlebih dahulu sebelum lanjut ke materi berikutnya.


Pengantar Teknologi Informasi

HASIL PRAKTIK :
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi

4 KESIMPULAN
Membuat game dengan contruct 2 tidak memerlukan internet dalam mengerjakanya.
Hanya pada saat mendownlad beckground dan karakter saja pengguna contruct 2 membutukan
koneksi internet, selebihnya tidak perlu susah paya menggunakan internet. Membuat game
seperti ini ternyata tidak semuda cara memainkanya, dibutuhkan ketelitian dan kesabaran dalam
mengerjakan game ini. Dengan cara mengoprasikan contruct 2 ini, secara tidak langsung kita
bisamengoprasikan tools yang ada di contruct2 serta mengerti kegunaanya.

Anda mungkin juga menyukai