Membuat Game Wearable Sederhana dengan Construct 2

Skenario Game

sumber gambar dari: http://www.greatbitblog.com/im-going-to-play-pinball-for-charity/

  sumber gambar dari http://www.technobezz.com/samsung-gear-s2-comes-with-full-circle-design-and-rotating-bezel-ifa-2015/

Instal Software yang akan Digunakan

• Construct 2 r232 (free edision)
• Java Development Kit 8 (JDK)
• Tizen 2.4 SDK with IDE 

Membuat Project Baru

Memasukkan Asset Gambar

Ada beberapa langkah untuk memasukkan asset gambar ke game, antara lain:

Menyiapkan Asset gambar

Asset yang digunakan game ini anda dapat unduh Asset RotaryBall.zip. isi file tersebut berisi seperti gambar dibawah ini:

Menambahkan Latar Belakang

Supaya latar belakang tidak kosong maka kita perlu menambahkan sebuah gambar yang sudah disiapkan. caranya dengan klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Background. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file background.jpg dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout.

Menambahkan Border

Untuk mempercantik pinggiran pada layar wearable maka kita perlu untuk membuat sebuah lingkaran yang berukuran 360x360 pixel. Caranya sama seperti memasukkan latar belakang. Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Border. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file border.png dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout

Menambahkan Dinding (wall)

tujuan penambahan dinding atau wall ini adalah untuk memantulkan bola supaya tidak keluar dan wall ini dapat digerakkan dengan dikontrol oleh bezel yang terdapat di Samsung Gear S2. agar dalam bermain nyaman, kita membutuhkan dua wall kanan dan kiri untuk memantulkan bola. pertama-tama kita masukkan dulu dinding/wall1 dengan cara Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Wall1. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file wall.png dari asset yang telah didownload. atur juga Collision Poligon untuk menentukan area sebagai pantulan object. dan jangan lupa atur posisi ke 180,180 sehingga tampak tepat pada garis border.

kemudian untuk wall yang kedua. kita menggunakan asset yang sama dan cara yang sama tetapi kita perlu mengubah nama menjadi Wall2 dan mengubah posisi dinding dari sebelah kiri menjadi berapa di sebelah kanan dengan menggunakan icon Mirror pada jendela Edit Image.

Setelah itu, berilah sifat Solid pada Wall1 dan Wall2 supaya dapat memantulkan object dari garis collision yang telah ditentukan. cara menambahkan sifat solid dengan cara klik object Wall1 di kolom Objects kemudian pada kolom Properties klik Behaviors, kemudian akan muncul jendela "Wall1: Behaviors", setelah itu klik icon Plus(Add new) dan tambahkan Solid. Fungsi solid itu sendiri supaya object tidak dapat ditembus oleh oject yang lain yang memiliki sifat grafitasi.

Lakukan juga terhadap Wall2 untuk menambahkan sifat solid seperti penambahan di Wall1. Jadi tampilan Wall1 dan Wall2 di layout seperti berikut:

Kemudian, untuk menggerakan wall tersebut akan menggunakan kontrol bezel yang dimana nilai tersebut didapat dari fungsi yang sudah terintegrasi dengan javascript. penggunaan javascript akan dibahas ditahap selanjutnya. untuk menambahkan fitur Fungsi, caranya dengan Klik kanan pada layout, pilih insert New Object > pilih Function. function ini akan digunakan ditahap selanjutnya.

 

Menambahkan bola (ball)

Bola ini berfungsi sebagai player yang dapat menentukan kapan berakhirnya permainan. Pemain harus menjaga bola tetapi berapa didalam lingkaran merah dengan dibantu oleh wall untuk memantulkan si bola agar tetepdi dalam. wall ini dapat berputar dengan dikontrol oleh bezel. kemudian cara untuk menambahkan bola (ball) ini dengan cara   Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama Ball. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file ball.png dari asset yang telah didownload. pasisikan bola persis ditengah-tengah dengan memberi nilai posisi 180,180 pada kolom Properties.

Setelah bola ditambahkan, kemudian memberi sifat Peluru pada bola agar dapat bergerak dan memantul. Caranya dengan klik Object Ball pada kolom Objects dan kemudian pada kolom Properties, klik Behaviors. setelah muncul jendela "Ball: Behaviors", klik icon Plus(add new) dan tambahkan Bullet. kemudian atur konfigurasi Bullet pada Properties dengan membari nilai 0 pada speed.

Menambahkan Text untuk Skor

Terasa kurang jika bermain game tetapi kita tidak tahu berapa skor yang kita peroleh. maka kita akan membutuhkan 3 text untuk menampilkan informasi skor. baik itu saat gameplay atau pada saat di home/gameover. Cara menambahkan Text dengan  Klik kanan pada layout, pilih insert New Object > pilih Text. tambahkan untuk 3 Text. Untuk masing-masing konfigurasi text tersebut sebagai berikut:

Text 1

• Name: LabelScore
• Position: 180,36
• Size: 200,30
• Text: Last Score
• Font: Arial(21)
• Horizontal alignment: Center
• Vertical alignment: Top
• Hotspot: Top

Text 2

• Name: TextLastScore
• Position: 180, 54
• Size: 200, 141
• Text: 0
• Font: Arial(72)
• Horizontal alignment: Center
• Vertical alignment: Top
• Hotspot: Top

Text 3

• Name: TextScore
• Position: 180, 180
• Size: 200, 30
• Text: <kosong>
• Font: Arial(12)
• Horizontal alignment: Center
• Vertical alignment: Center
• Hotspot: Center

Menambahkan Tombol Play

Supaya dari tampilan utama dan biar bisa masuk ke permainan, maka kita perlu tombol play. cara penambahan sebagai berikut Klik kanan pada layout, pilih insert New Object > pilih Sprite dan beri nama BtnPlay. setelah itu, klik layout untuk menempatkan object dan kemudian akan muncul jendela Edit Image. klik icon Open dan cari file btnPlay.png dari asset yang telah didownload. atur posisi ke 180,180 sehingga tampak full di layout

Jangan lupa untuk memasukkan Touch, yaitu Kontrol Sentuh yang dimana itu akan digunakan sebagai kontrol respon ketika player menekan tombol player.  caranya menambahkannya dengan  klik kanan pada layout, pilih insert New Object > pilih Touch.

 

Tampilan secara keseluruhan sebagai berikut:

Jangan lupa untuk menyimpan project anda. kemudian tahap senlanjutnya adalah membuat code program.

Membuat Code Program

• Name= score
• Type= Number
• Inisial value=0

• Name= gameover
• Type= Number
• Inisial value=1

• Function > On function > beri nama "Rotate".

• Function > Compare parameter > kemudian isi Index = 0, Comparizon = Equal to, value = "CW".

• Wall1 > Rotate clockwise > Degree = 20.
• Wall2 > Rotate clockwise > Degree = 20.

• System > Else

• Wall1 > Rotate clockwise > Degree = -20.
• Wall2 > Rotate clockwise > Degree = -20.

• System > Compare variable > Variable = gameover, Comparison = Equal to, value = 1

• Touch > On touched object > BtnPlay

• BtnPlay > Set visible > Visibility = Invisible.
• TextLastScore > Set visible > Visibility = Invisible.
• LabelScore  > Set visible > Visibility = Invisible.
• System > Set value > Variable = gameover, value = 0
• System > Set value > Variable = score, value = 0
• Ball > Set gravity > Gravity = 1
• Ball > Set speed > speed = 1
• Ball > Set angle of motion > Angle = int(random(360))

• System > Compare variable > Variable = gameover, Comparison = Equal to, value = 0

• Ball > Compare speed > Comparison = Less or Equal, Speed = 400

• Ball > Set speed > Speed = Ball.Bullet.Speed + 1

• Ball > Is outside layout

• System > Set value > Variable = gameover, value = 0
• BtnPlay > Set visible > Visibility = Visible.
• TextLastScore > Set visible > Visibility = Visible.
• LabelScore  > Set visible > Visibility = Visible.
• TextLastScore > Set text > Text = score.
• TextScore  > Set text > Text = "".
• Ball > Set speed > Speed = 0
• Ball > Set gravity > Gravity = 0

• Ball > On collision with another object > Object = Wall1

• System > Add to > Variable = score, value = 1
• TextScore  > Set text > Text = score.

• Ball > On collision with another object > Object = Wall2

• System > Add to > Variable = score, value = 1
• TextScore  > Set text > Text = score.

Mengexport Project ke Tizen

 

Membuat Project Baru Tizen Web untuk Wearable

• 16 x 16 pixel -> icon-16.png
• 32 x 32 pixel-> icon-32.png
• 114 x 144 pixel-> icon-114.png
• 128 x 128 pixel-> icon-128.png
• 256 x 256 pixel-> icon-256.png

Menyiapkan Certificate

Menyempurnakan Project

< tizen:setting screen-orientation ="auto-rotation" context-menu ="disable" background-support ="disable" encryption ="disable" install-location ="auto" hwkey-event ="disable"/>

 <tizen:profile name= "wearable" />

<?xml version="1.0" encoding= "UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="https://ariska.dicoding.com" version="1.0.0" viewmodes="maximized" >
    <tizen:application id="xxxxxxxx.RotaryBall" package ="xxxxxxxx" required_version="2.2" />
    <author href="https://www.dicoding.com/academies" email="ariska@dicoding.com" >ariska hidayat </author>
    <content src="index.html"/>
    <description >Game Wearable Sederhana</description >
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <feature name="http://tizen.org/feature/input.rotating_bezel"/>
    <icon src="icon-128.png" height="128" width="128"/>
    <name >RotaryBall</ name>
    <tizen:profile name= "wearable" />
</widget>

window.onload = function() {
    // TODO :: Do your initialization job
  window .addEventListener("tizenhwkey" , keyEventHandler);
  document.addEventListener("rotarydetent", rotaryEventHandler);
    function rotaryEventHandler(event) {
        var direction = event.detail.direction;
        if (c2_callFunction){
            c2_callFunction( "Rotate",[direction]);
        }
    }
 
    function keyEventHandler(event) {
        if (event.keyName === "back" ) {
                try {
                    tizen.application.getCurrentApplication().exit();
                } catch (ignore) {}
        }
    }
};

< script type ="text/javascript" src ="js/main.js"></script >

Menguji Game di Device Wearable

Pengembangan Lanjut