online buku membuat game j2me agate academy

106
i

Upload: joe-siman

Post on 09-Aug-2015

101 views

Category:

Documents


16 download

TRANSCRIPT

Page 1: ONLINE Buku Membuat Game J2ME Agate Academy

i

Page 2: ONLINE Buku Membuat Game J2ME Agate Academy

ii

DAFTAR ISI

DAFTAR ISI II

1 KATA PENGANTAR 5

1.1 TIM AGATE ACADEMY 6

2 APA YANG AKAN KITA LAKUKAN? 7

2.1 PLATFORM YANG DIGUNAKAN 7

2.2 KEBUTUHAN 7

2.2.1 SPESIFIKASI PC 7

2.2.2 SOFTWARE YANG DIBUTUHKAN 7

2.2.3 FILE-FILE PENDUKUNG 7

3 GAME DEVELOPMENT OVERVIEW 9

3.1 PERAN TIM DEVELOPER 9

3.1.1 GAME DESIGNER 9

3.1.2 GAME ARTIST 10

3.1.3 GAME PROGRAMMER 10

3.2 PROSES PEMBUATAN GAME 10

3.2.1 PRE-PRODUCTION 10

3.2.2 PRODUCTION 10

3.2.3 RELEASE 11

4 PRE-PRODUCTION 12

Page 3: ONLINE Buku Membuat Game J2ME Agate Academy

iii

4.1 GAME DESIGN 12

4.1.1 CORE GAMEPLAY 12

4.1.2 FITUR DALAM GAME DAN GAME LOGIC 12

4.2 VISUAL DESIGN 13

4.2.1 MOCKUP 13

4.2.2 ASSET LIST 15

5 PRODUCTION 17

5.1 GAME ART PRODUCTION 17

5.1.1 PENGENALAN TOOLS UNTUK MEMBUAT ASET GAME 17

5.1.2 PEMBUATAN SPRITE 19

5.1.3 TILING 23

5.1.4 MAIN MENU/ SCREEN FLOW 25

5.2 GAME PROGRAMMING 28

5.2.1 PENGENALAN TOOLS PROGRAMMING YANG DIGUNAKAN 28

5.2.2 GAME LOOP 32

5.2.3 ARRAY MULTIDIMENSI 34

5.2.4 MEMASUKKAN GAMBAR DALAM GAME 36

5.2.5 MENGHANDLE INPUT PEMAIN 44

5.2.6 INTERAKSI ANTAR OBJECT 47

5.2.7 STATE MANAGEMENT 60

5.2.8 SAVE DAN LOAD GAME 79

5.2.9 EFEK SUARA 82

5.2.10 ENCHANCE YOUR GAME! 87

5.3 LEVEL DESIGN 88

5.3.1 TOOLS UNTUK MEMBUAT LEVEL 88

5.3.2 TIPS DALAM MEMBUAT LEVEL 92

6 RELEASE 94

Page 4: ONLINE Buku Membuat Game J2ME Agate Academy

iv

6.1 DIMANA KITA BISA RILIS GAME KITA? 94

6.2 CARA PUBLISH GAME DI NOKIA STORE 94

7 PENUTUP 101

LAMPIRAN A. MEMBUKA PROJECT PADA ECLIPSE PULSAR 102

Page 5: ONLINE Buku Membuat Game J2ME Agate Academy

5

1 KATA PENGANTAR

Dalam beberapa tahun belakangan pasar dan industri mobile device berkembang

dengan pesat. Di Indonesia saja, pengguna mobile device meningkat lebih dari 10%

dari tahun 2010 ke 2011, dengan total pengguna 78% dari penduduk Indonesia di

tahun 2011. Industri yang mendorong perkembangan pasar mobile adalah mobile

gaming, karena pengguna mobile device cenderung menggunakan device mereka

untuk bermain game. Nilai industri mobile game dunia diperkirakan mencapai 8

miliar USD tahun ini.

Di Indonesia, industri mobile game sedang menjadi trend. Banyak sekali start-up

mobile game developer dalam setahun belakangan. Setidaknya lima mobile game

startup di Indonesia mendapat perhatian dari berbagai investor asing dari US dan

Jepang dalam bentuk investasi. Di luar itu, puluhan mobile game studio sedang

berkembang dan sebagian besar membuka kesempatan untuk bekerja menjadi

mobile game developer.

Buku ini dibuat untuk membuka wawasan pembacanya terhadap industri game,

terutama dari sisi teknis pembuatan sebuah mobile game. Kami harap dengan buku

ini, pembaca bisa mendapat gambaran tentang bagaimana cara membuat game, dan

semoga pembaca bisa menikmati proses pembuatan game di buku ini.

Mei 2012

Tim Penulis

Page 6: ONLINE Buku Membuat Game J2ME Agate Academy

6

1.1 TIM AGATE ACADEMY

Berikut ini adalah orang-orang yang terlibat dalam pembuatan buku ini:

ADITIA DWIPERDANA

Co-founder Agate studio dan Guild Master di Agate Academy. Aditia sering menjadi

pembicara dalam event-event Seminar atau Workshop Game Development bersama

Agate Studio. [email protected]

ARDIKA PRASETYO

Memiliki gelar Academy Author, Ardika adalah orang yang berperan penting dalam

pembuatan berbagai artikel tutorial dari Agate Academy baik di media cetak atau

pun media online. [email protected]

HENKY JAYA DINATA

Salah satu Wizard di Agate Studio. Selain membantu Agate Academy, Henky juga

terlibat aktif dalam pembuatan game Football Saga 2. [email protected]

Page 7: ONLINE Buku Membuat Game J2ME Agate Academy

7

2 APA YANG AKAN KITA LAKUKAN?

2.1 PLATFORM YANG DIGUNAKAN

Pada buku ini, kita akan mempelajari bagaimana membuat game di J2ME. J2ME

merupakan platform yang memiliki konsep OOP yang kuat. Karena programming

J2ME merupakan bahasa yang sangat dasar, maka ketika kita dapat menguasai J2ME,

kita akan mudah untuk mempelajari bahasa pemrograman di platform lain.

2.2 KEBUTUHAN

2.2.1 SPESIFIKASI PC

Spesifikasi komputer yang dibutuhkan tidak begitu besar, karena kita menggunakan

eclipse sebagai IDE. Komputer dengan spesifikasi setara dengan netbook pun dapat

digunakan. Jika teman – teman menggunakan NetBean, maka spesifikasi komputer

yang dibutuhkan pun harus lebih tinggi.

2.2.2 SOFTWARE YANG DIBUTUHKAN

Software yang kita butuhkan:

JDK 7, sebagai bahasa pemrograman,

Eclipse Pulsar, sebagai IDE untuk membuat game.

GIMP, sebagai tools untuk membuat asset gambar.

Sun WTK, sebagai emulator default dari Java.

File-file installer untuk software-softare di atas dapat ditemukan juga pada CD yang

menyertai buku ini atau dapat di akses di http://bit.ly/agatebooks-game-j2me.

2.2.3 FILE-FILE PENDUKUNG

Page 8: ONLINE Buku Membuat Game J2ME Agate Academy

8

Selain file Instalasi software-software yang dibutuhkan, pada CD yang disertakan

dengan buku ini juga terdapat beberapa file project yang merupakan hasil akhir dari

setiap bab pemrograman pada buku ini. File-file tersebut disediakan untuk

membantu Anda dalam mengikuti tutorial dalam buku ini, tapi diharapkan Anda

tetap mencoba menulis setiap kode yang diberikan dalam tutorial dan memahami

maksud dari setiap bagian kode.

Petunjuk untuk membuka file project untuk setiap bab dapat dilihat di Lampiran A.

Membuka project pada Eclipse Pulsar. Atau bisa juga diakses di http://bit.ly/Lv1bRo.

Page 9: ONLINE Buku Membuat Game J2ME Agate Academy

9

3 GAME DEVELOPMENT OVERVIEW

3.1 PERAN TIM DEVELOPER

Dalam sebuah tim game developer ada beberapa peran yang wajib ada, namun tidak

harus satu peran full dilakukan oleh satu orang, tapi bisa saja memiliki peran rangkap

kalau anggota tim terlalu sedikit.

3.1.1 GAME DESIGNER

Game designer berperan merancang game yang akan dibuat dari sisi konsep,

gameplay atau aturan main. Disini game designer akan merancang seluruh desain

dari game yang akan dibuat. Mulai dari alur cerita, gameplay, art style, dan lain – lain.

Game Designer juga akan membuat Game Design Document (GDD) sebagai tempat

untuk mencurahkan idenya dan menyampaikan kepada artist dan programmer. GDD

juga berguna sebagai panduan agar revisi dari game yang sedang dibuat tidak terlalu

meleceng. Seorang Game Designer biasanya menggunakan tools untuk mendesain

gamenya. Mulai dari GIMP untuk mendesain tampilan visual game, Tile Map Editor

(dijelaskan di akhir buku) untuk mendesain level game, bahkan notepad untuk

menulis catatan.

Untuk mengetahui lebih jauh tentang game designer Anda bisa buka

http://bitly.com/LuPt9w.

Page 10: ONLINE Buku Membuat Game J2ME Agate Academy

10

3.1.2 GAME ARTIST

Game artist berperan membuat semua aspek visual dari game, mulai dari karakter,

background, sampai menu dan antarmuka/UI. Game artist bertanggung jawab agar

game terlihat menarik. Seorang Game Artist biasanya menggunakan GIMP untuk

membuat asset spritesheet, kadang menggunakan tool tersendiri untuk membuat

sprite.

3.1.3 GAME PROGRAMMER

Game programmer berperan menggabungkan game design dan art asset yang ada

untuk menjadi sebuah video game yang dapat dimainkan. Seorang Game

Programmer harus memiliki dasar logika yang kuat, karena game biasanya

memasukkan unsur – unsur matematika dan fisika dalam pembuatannya. Game

programmer juga bertanggung jawab agar gamenya tidak terlalu memakan terlalu

banyak (khususnya pada handphone yang memorynya terbatas).

3.2 PROSES PEMBUATAN GAME

Pembuatan sebuah game melibatkan beberapa langkah yang perlu dilakukan, disini

akan diberikan gambaran umum proses pembuatan game pada umumnya.

3.2.1 PRE-PRODUCTION

Pada tahap ini kita menentukan game apa yang kita buat, seperti apa tampilannya,

dan apa saja yang kita perlukan untuk mulai membuat game tersebut. Termasuk

membuat prototype dari game kita dan negosiasi jika game ini untuk perusahaan

lain. Disinilah seorang game designer banyak bekerja, mulai dari memikirkan ide,

konsep art, gameplay, dan sebagainya.

3.2.2 PRODUCTION

Page 11: ONLINE Buku Membuat Game J2ME Agate Academy

11

Pada tahap ini kita terjun langsung mengerjakan game yang kita inginkan, dari sisi

art, programming, dan level desain. Game artis dan programmer banyak bekerja.

Dalam pembuatan game, programmer disarankan untuk memperlihatkan progress

programmingnya, termasuk memasukkan asset ke dalam game walaupun hanya

menggerakkan sprite. Hal itu perlu dilakukan karena biasanya pengembangan game

yang cukup lama dapat menyebabkan motivasi dari artist dan designer menurun.

Sehingga perlu dilakukan testing sehingga artist dan designer dapat melihat progress

dan melakukan revisi jika terdapat kekurangan.

3.2.3 RELEASE

Setelah game kita selesai pastinya kita perlu merilis game kita agar dapat dimainkan

oleh orang banyak. Kita harus melakukan promosi agar game kita dikenal oleh

banyak orang. Kita dapat melakukan publikasi di media ternama atau share melalui

jejaring sosial ternama. Jangan lupa untuk melakukan maintenance ketika ada yang

report bug. Dan jika perlu, kita dapat melakukan update agar game kita tetap

dimainkan oleh orang.

Page 12: ONLINE Buku Membuat Game J2ME Agate Academy

12

4 PRE-PRODUCTION

4.1 GAME DESIGN

4.1.1 CORE GAMEPLAY

Game yang akan kita buat akan menggunakan tile map dan pixel art. Disini kita akan

membuat game dimana player akan berusaha membantu John, seorang karyawan,

untuk kabur dari kantornya. John harus menuju ke pintu keluar agar dapat

menyelesaikan levelnya.

4.1.2 FITUR DALAM GAME DAN GAME LOGIC

Berikut contoh konsep game yang akan kita buat,

- Map terbentuk dari array 2D. Terdapat bermacam – macam obstacle, mulai dari

pintu, tembok, kunci, dan switch.

- Game ini memiliki tujuan mengantarkan hero kita ke tempat tujuan, yaitu pintu

finishnya.

- Hero akan berjalan per kotak array. Ketika hero kita menemukan obstacle pintu

dan tidak membawa kunci, maka hero akan diam. Lain halnya ketika hero

membawa kunci, pintu akan terbuka. Lalu hero juga akan menemui switch,

dimana ketika hero berada 1 kotak dengan switch, maka sesuatu akan terjadi,

seperti pintu akan terbuka atau muncul kunci lainnya

Page 13: ONLINE Buku Membuat Game J2ME Agate Academy

13

Untuk itu, inilah urutan dari pembuatan game kita nanti:

a. Membuat layer map, berupa array2D, berfungsi untuk menyimpan data map.

b. Membuat layer obstacle, berupa array 2D, berfungsi untuk menyimpan data

obstacle, seperti kunci, switch, pintu, dan lain – lain.

c. Membuat layer hero, berupa posisi X dan Y yang akan mempresentasikan posisi

dari array map.

d. Membuat input handler, agar ketika kita menekan tombol atas bawah kiri kanan

akan menggerakkan hero kita.

e. Cek collision by data, periksa apakah hero menabrak dinding, kunci, switch, atau

pintu.

f. Play SFX tertentu jika hero mengambil kunci atau menekan switch.

4.2 VISUAL DESIGN

4.2.1 MOCKUP

Mock-up adalah gambaran kasar/sketsa atau bahkan bisa berupa gambar final yang

menggambarkan game seperti apa yang kita inginkan. Dengan menggunakan mockup

kita bisa menentukan beberapa hal seperti :

Page 14: ONLINE Buku Membuat Game J2ME Agate Academy

14

1. Perbandingan antara karakter dengan layar atau karakter dengan environment (

Lihat Gambar 1 )

2. Menentukan sudut pandang game (Lihat Gambar 2)

3. Menentukan layout User Interface (tombol-tombol atau menu)

New Zealand Story © Taito

Bubble Bobble © Taito

Gambar 1 Perbandingan Karakter dengan Layar/Environment

Turn-based tactics game Kenneth Fejer

(Isometric View)

Bomberman © Hudson soft

(3/4 View) Gambar 2 Penentuan Sudut Pandang Game

Page 15: ONLINE Buku Membuat Game J2ME Agate Academy

15

4.2.2 ASSET LIST

Asset List adalah daftar objek-objek grafis yang diperlukan untuk membuat game

tersebut. Yang diperlukan dalam membuat asset list antara lain adalah :

1. Nama asset 2. Prioritas pengerjaan asset 3. Format asset (PNG,SWF,JPEG,dll) 4. Ukuran asset 5. Jenis animasi dan jumlah frame tiap animasi (Apabila asset tersebut beranimasi)

Berikut contoh sebagian asset list dari game yang akan dibuat :

Prioritas Nama Animasi Format Size Frame Ket.

1 Hero_Front - PNG 16x16 1 Hero Hadap depan

2 Hero_Back - PNG 16x16 1 Hero Hadap belakang

3 Hero_Left - PNG 16x16 1 Hero Hadap Kiri

4 Hero_Right - PNG 16x16 1 Hero Hadap Kanan

5 Key - PNG 16x16 1 -

6 Door_Open - PNG 16x16 1 Pintu terbuka

7 Door_Closed - PNG 16x16 1 Pintu tertutup

8 Switch_On - PNG 16x16 1 On = Pada saat ditekan

9 Switch_Off - PNG 16x16 1 Off = Idle

10 Etc … … … … …

Page 16: ONLINE Buku Membuat Game J2ME Agate Academy

16

2D ARTIST RECRUITMENT

Some of a 2D artist's tasks in a game development process are:

Creating concept arts based on the

ideas and feel from the game design.

Creating 2D Animation for character

Making Visual effects to polish the

game feel and look

Creating the Graphic al User

Interface (GUI)

Making illustrations

Making textures for 3D models

2D Artist Requirements

Proficiency in digital drawing

programs: raster and/or vector.

Able to create good quality 2D

animation.

A good skill and sense in creating

concept sketches.

Knowledge and good sense in art

basics.

Good teamwork, good

communicating skills, self-motivated.

Passion for creating and playing

video games.

Passion to push your skills to the next

level.

Variations in art styles.

Do you think you are ready to take this position? If you are, apply to

[email protected] with subject Recruitment 2D Artist, be sure to send us

your portfolio and CV. More info: http://agatestudio.com/index.php?page=career

Page 17: ONLINE Buku Membuat Game J2ME Agate Academy

17

5 PRODUCTION

5.1 GAME ART PRODUCTION

5.1.1 PENGENALAN TOOLS UNTUK MEMBUAT ASET GAME

Software yang digunakan untuk membuat asset game pada mobile game adalah

GIMP 2. Ada beberapa hal yang perlu kita lakukan untuk membuat aset game

menggunakan GIMP 2, yaitu :

1. Bekerja di resolusi Kecil dengan background transparan.

Untuk membuat halaman baru kita bisa mengakses File>New Image (Shortcut :

Ctrl+N). kemudian atur resolusi halaman di bagian Image Size dengan warna

background transparent. (Lihat gambar 4). Untuk memudahkan kita dalam

pembuatan aset, maka kita perlu window tambahan yang menampilkan asset

pada ukuran sebenarnya. Window tersebut bisa di akses di View > New View.

2. Mengatur tools yang diperlukan untuk membuat aset.

Tools yang akan sering digunakkan untuk membuat aset adalah sebagai berikut :

a. Pencil tools ( Shortcut : N )

Digunakkan untuk menggambar aset game menggunakan pensil.bisa di

akses dari toolbox. Karena gambar yang dibuat bersolusi kecil maka kita

akan menggunakan pencil tools dengan scale pencil 0.10 (Lihat gambar 5 .)

b. Eraser tools ( Shortcut : Shift+E)

Digunakan untuk menghapus gambar. Atur penghapus menjadi “Hard Edge”

(Lihat gambar 6).

c. Eyedropper (Shortcut : O)

Eyedropper digunakkan untuk mengambil warna berdasarkan warna yang

dipilih pada gambar.

Page 18: ONLINE Buku Membuat Game J2ME Agate Academy

18

Gambar 4 Membuat Halaman Baru

Page 19: ONLINE Buku Membuat Game J2ME Agate Academy

19

Gambar 5 Pengaturan Pencil tools Gambar 6 Pengaturan Eraser

5.1.2 PEMBUATAN SPRITE

Sprites adalah graphic object / image yang dapat digerakkan terpisah dengan benda

lain seperti background. Sprites yang digunakan dalam game ini mepresentasikan

hero, obstacle, object kunci, object, object pintu. Selain itu, sprites dapat berupa

animasi atau statis dan juga dapat digunakan untuk mewakili object game yang

sudah ditentukan seperti harta karun, dan power up juga. Karena sprite dibuat

terpisah terhadap layar background, maka background sprites tersebut harus

transparan. Berikut akan dijelaskan membuat sprite Hero_front ( karakter

menghadap kedepan) menggunakan GIMP :

1. Buka halaman baru File > New (Ctrl N) dan atur resolusi 16x16 pixel dengan

background transparant.

Page 20: ONLINE Buku Membuat Game J2ME Agate Academy

20

2. Untuk memudahkan pengerjaan kita bisa menampilkan grid pada menu

View > Show Grid. Kemudian ke menu Image > Configure Grid untuk

mengatur grid sehingga ukurannya pixel.

Page 21: ONLINE Buku Membuat Game J2ME Agate Academy

21

3. Dengan menggunakan Pencil tool yang scalenya berukuran 0.1 buat base

outline karakter.

4. Beri warna dasar dengan menggunakan tools pencil yang memiliki warna

yang berbeda.

Page 22: ONLINE Buku Membuat Game J2ME Agate Academy

22

5. Tambahkan detail dengan menambahkan warna gelap pada tiap warna

dasar.

6. Agar sprite kita terlihat lebih halus maka Outline hitam bisa diganti menjadi

warna gelap yang mendekati warna dasar sprite.

Dengan menggunakan cara diatas maka kita bisa membuat sprite-sprite lainnya.

Page 23: ONLINE Buku Membuat Game J2ME Agate Academy

23

5.1.3 TILING

Dalam membuat background dapat menggunakkan berbagai cara, salah satunya

adalah background tiles. Background tiles terdiri dari potongan-potongan gambar

kecil (tile), dimana nantinya masing-masing tile tersebut akan disusun oleh oleh

programmer menjadi background berukuran besar. Dengan menggunakan

background tiles penggunaan memory dan disk space akan lebih sedikit daripada

menggunakan background yang terdiri dari satu gambar utuh.

Tileset adalah sekumpulan gambar yang terdiri dari beberapa tile yang akan

digunakkan sebagai background game. Berikut contoh tileset yang akan kita

gunakkan dalam game kita :

Berikut contoh pengaturan background tile.

Page 24: ONLINE Buku Membuat Game J2ME Agate Academy

24

Page 25: ONLINE Buku Membuat Game J2ME Agate Academy

25

5.1.4 MAIN MENU/ SCREEN FLOW

Screen flow menunjukkan flow/aliran layar/menu-menu dalam game yang kita buat.

Screen flow tersebut mencakup Main menu, level selections, in-game, result, dan

about. Contoh screen flow dalam game yang akan kita buat :

Berikut adalah contoh menu yang akan kita buat :

Main Menu Level Selection

In-Game About

Page 26: ONLINE Buku Membuat Game J2ME Agate Academy

26

Page 27: ONLINE Buku Membuat Game J2ME Agate Academy

27

Page 28: ONLINE Buku Membuat Game J2ME Agate Academy

28

5.2 GAME PROGRAMMING

5.2.1 PENGENALAN TOOLS PROGRAMMING YANG DIGUNAKAN

5.2.1.1 PENGERTIAN J2ME

Java2 Micro Edition atau yang biasa disebut J2ME adalah lingkungan pengembangan

yang didesain untuk meletakkan perangkat lunak JAVA pada barang elektronik

berserta perangkat pendukungnya. Pada J2ME, jika perangkat lunak berfungsi

dengan baik pada sebuah perangkat maka belum tentu juga berfungsi baik pada

perangkat yang lain. J2ME membawa Java ke dunia informasi, komunikasi, dan

perangkat komputasi yang lebih kecil dibandingkan dengan computer desktop. J2ME

biasa digunakan pada telepon selular, pager, PDA, dan sejenisnya. Teknologi J2ME

juga memiliki beberapa keterbatasan jika diaplikasikan pada ponsel. J2ME sangat

bergantung pada device yang digunakan, bisa dari merk ponsel, maupun kemampuan

ponsel, dan dukungan terhadap teknologi J2ME. MIsalnya, jika sebuah ponsel tidak

memiliki kamera maka jelas J2ME pada ponsel tersebut tidak dapat mengakses

kamera.

5.2.1.2 CONNECTED LIMETED DEVICE CONFIGURATION (CLDC)

CLDC atau Connected Limited Device Cofiguration adalah perangkat dasar dari J2ME,

spesifikasi dasar yang berupa library atau API yang diimplementasikan pada J2ME,

seperti yang digunakan pada telepon selular, pager, dan PDA. Perangkat tsb dibatasi

dengan keterbatasan memory, sumber daya, dan kemampuan memproses.

Spesifikasi CLDC pada J2ME adalah spesifikasi minimal pada package, class, dan

sebagian fungsi Java Virtual Machine yang dikurangi agar dpat diimplementasikan

dengan keterbatasan sumber daya pada alat tersebut, JVM yang digunakan adalah

KVM (Kilobyte Virtual Machine).

5.2.1.3 MOBILE INFORMATION DEVICE PROFILE (MIDP)

Page 29: ONLINE Buku Membuat Game J2ME Agate Academy

29

MIDP atau Mobile Information Device Profile adalah spesifikasi untuk sebuah profil

J2ME. MIDP memilik lapisan diatas CLDC, API tambahan untuk daur hidup aplikasi,

antar muka, jaringan, dan pemyimpanan persisten.

5.2.1.4 MIDLET

Suatu aplikasi Mobile Information Device Profile (MIDP) pada J2ME disebut MIDlet.

mIdlet adalah bagian dari package javax.microedition.midlet. sebuah MIDlet harus di-

extend dengan class MIDlet. MIDlet terdiri dari beberapa method yang harus ada,

yaitu contructor(), startApp(), pauseApp(), destroyApp(). Method yang pertama

adalah startApp() dipanggil oleh Application Management Software (AMS) ketika

MIDlet dijalankan atau diresume. Resume, dengan kata lain startApp() akan kembali

dijalankan setelah di-pause. Maka berhati-hatilah ketika kita menempatkan

inisialisasi di dalam startApp().

Method yang kedua adalah pauseApp(), yang akan di-invoke oleh AMS ketika dalam

situasi tertentu, seperti pengguna menerima telepon ketika bermain game,

peringatan low battery, dan lain-lain. Dan dapat digunakan untuk meminimasi CPU,

memory, atau konsumsi baterenya, ketika game kita tidak dalam active state.

Method yang terakhir adalah destroyApp(). Method ini dipanggil untuk destroy

MIDlet oleh AMS. Dalam method ini harus clean-up resource, action, dan lain-lain.

Dan memberitahukan AMS untuk menyempurnakan cleanup dengan notifDestroy()

Ketiga method di atas merupakan bagian dari MIDP Lifecycle. Sangat penting untuk

semua programmer J2ME memahaminya.

Page 30: ONLINE Buku Membuat Game J2ME Agate Academy

30

MIDP Lifecycle

5.2.1.5 GAME CANVAS

Class utama Game API dari MIDP adalah class GameCanvas. Class GameCanvas

merupakan perluasan dari class Canvas yang kita gunakan dalam pembuatan low –

level user interface. Dua kelemahan utama dari class Canvas dalam pemrograman

game adalah tidak memadainya kemampuan untuk mengatur proses repaint dan

ketidakmampuan untuk mengatur bagaimana pointer events serta quick keys

diteruskan pada canvas.

Komponen user interface dari MIDP umumnya berupa event driven. Events berupa

antrian berurutan dan diteruskan terhadap aplikasi satu persatu, beserta tunda

waktu antar waktu dimana event dibuat (key press).

GameCanvas memungkinkan aplikasi mengumpulkan events yang terbuat dan

melakukan proses repaint pada canvas dengan cepat. Struktur program menjadi lebih

bersih karena terdapat rangkaian perulangan utama dimana proses painting dan

pengumpulan events dilakukan.

Page 31: ONLINE Buku Membuat Game J2ME Agate Academy

31

GameCanvas menggunakan teknik double buffering. Seluruh proses pembuatan

interface dilakukan di off-screen buffer, kemudian di transfer dari area buffer

tersebut menuju area yang terlihat pada canvas. Aplikasi anda harus menggunakan

instance method dari class Graphics berupa method getGraphics().

Setiap pemanggilan terhadap method ini mengembalikan sebuah instance baru dari

offscreen buffer yang anda gunakan dalam proses pembuatan user interface.

Untuk memperbaharui screen tersebut, anda harus memanggil flushGraphics() untuk

melakukan proses repaint secara cepat dengan isi dari off-screen buffer. Perhatikan

bahwa anda hanya perlu memanggil method getGraphics() sekali saja, karena sebuah

buffer teralokasi setiap kali anda memanggil method ini.

Page 32: ONLINE Buku Membuat Game J2ME Agate Academy

32

5.2.2 GAME LOOP

Game Loop merupakan jantung dari sebuah game. Biasanya Game Loop menangani

user input, update game state, menangani AI, memainkan musik dan sound effect,

dan menampilkan display game.

bool game_is_running = true; while( game_is_running ) { update_game(); display_game(); }

Penanganan Game Loop khususnya pada game mobile,

harus di atur sedemikian rupa dan seefisien mungkin,

karena game mobile memiliki memory yang terbatas,

input yang terbatas, ukuran display yang kecil, cpu yang

lambat, dan lain-lain. Sehingga akan menjadi tantangan

tersendiri bagi developer untuk mengembangkan game di

J2ME. Gambar di samping ini adalah contoh dari Game

Loop:

Page 33: ONLINE Buku Membuat Game J2ME Agate Academy

33

Untuk mengimplementasikan sebuah game loop, kita harus membuat game loop

berjalan sendiri menggunakan thread. Sehingga game loop akan terus berjalan

selama perulangannya bernilai true. Pertama – tama, buat kelas bernama

GameScreen meng-inherit GameCanvas dan implements interface.

public class GameScreen extends GameCanvas implements Runnable

Lalu tambahkan inisialisasi proses Thread ke dalam konstruktor GameScreen.

public GameScreen() { . . . Thread t = new Thread(this); // create the game thread t.start(); }

Contoh game loop pada J2ME:

public void run() { //Inisialisasi variable //yang hanya dipakai 1x while (gameIsRun) { //Berisi fungsi-fungsi //yang dipanggil agar game berjalan getInput(); update(); try { Thread.sleep(30); }catch (InterruptedException ie) { } flushGraphics(); } }

Pada contoh di atas, merupakan game loop yang paling simple. Belum memiliki state,

menghandle pause game, dan lain-lain.

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.2.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

Page 34: ONLINE Buku Membuat Game J2ME Agate Academy

34

5.2.3 ARRAY MULTIDIMENSI

Array 2D atau yang sering disebut juga dengan matrix, merupakan array 2 dimensi.

Array 2D sering kali dipakai di dalam pengembangan game. Khususnya pada game

yang akan kita buat sekarang, untuk membuat map, letak obstacle, dan posisi hero.

Pada game ini, kita akan membuat array 2 dimensi yang akan kita gunakan untuk

menggambar map dan obstacle. Karena kita akan memakai device dengan ukuran

lebar 240 dan tinggi 320, dengan kata lain ukuran layar akan portrait. Asumsikan

lebar dan tinggi tiap tile kita akan berukuran 16. Maka jumlah kolom tile kita adalah

240/16 = 15 kotak. Dan secara vertikal, 320/16 = 20 kotak, tapi kita coba sisakan 2

tile, sehingga untuk baris tile kita buat 18 kotak.

Oke, pertama –tama kita buat 2 layer, yang pertama untuk menggambar map dan

yang kedua untuk menggambar obstacle.

public int[][] mapLVL1 = new int[][] { { 1, 2, 2, 2, 2, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 2, 2, 2, 3}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 7, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9} };

Page 35: ONLINE Buku Membuat Game J2ME Agate Academy

35

Array diatas merupakan array 15 x 18. Nanti kita akan membuat 9 macam tile seperti

ini,

Tile di atas akan dipresentasikan dalam angka, pada program ini tile tersebut akan bernilai

1 2 3

4 5 6

7 8 9

Setiap nilai dari array 2D di atas, akan di isi oleh asset kita, sesuai dengan nilainya. Pada chapter selanjutnya, kita akan membahas bagaimana menggambar semua itu ke canvas kita.

public int[][] obsLVL1 = new int[][] { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 3, 3, 3, 0, 3, 3, 0, 0, 0, 0, 0, 7, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 4, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 3, 3, 3, 4, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0},

Page 36: ONLINE Buku Membuat Game J2ME Agate Academy

36

{ 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 9, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, };

Sama seperti ketika menggambar map, disini kita akan menggambar obstacle yang ada. Berikut adalah asset yang akan digunakan:

1 2 3

4 5 6

7 8 9

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.3.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.4 MEMASUKKAN GAMBAR DALAM GAME

Image dibutuhkan untuk membuat game kita ini lebih menarik. Pada game ini, kita

membutuhkan image terrain, hero, pintu, kunci, dan switch. Kita sudah memiliki

array 2D untuk menggambar map dan obstacle. Sekarang mari kita coba gambar

array yang sudah kita buat tadi, menjadi map di canvas.

Pertama – tama mari kita inisialisasi dahulu variable image, di scope global.

Image tile1, tile2, tile3, tile4,

Page 37: ONLINE Buku Membuat Game J2ME Agate Academy

37

tile5, tile6, tile7, tile8, tile9; Image c_front, c_back, c_right, c_left; Image obs_down, obs_up, obs_mid, obs_single; Image door_close, door_open; Image key; Image switch_on, switch_off; public void init() { //Initialize image try { //game tile1 = Image.createImage("/tile1.png"); tile2 = Image.createImage("/tile2.png"); tile3 = Image.createImage("/tile3.png"); tile4 = Image.createImage("/tile4.png"); tile5 = Image.createImage("/tile5.png"); tile6 = Image.createImage("/tile6.png"); tile7 = Image.createImage("/tile7.png"); tile8 = Image.createImage("/tile8.png"); tile9 = Image.createImage("/tile9.png"); obs_down = Image.createImage("/obs_down.png"); obs_mid = Image.createImage("/obs_mid.png"); obs_single = Image.createImage("/obs_single.png"); obs_up = Image.createImage("/obs_up.png"); c_back = Image.createImage("/c_back.png"); c_front = Image.createImage("/c_front.png"); c_left = Image.createImage("/c_left.png"); c_right = Image.createImage("/c_right.png"); switch_off = Image.createImage("/switch_off.png"); switch_on = Image.createImage("/switch_on.png"); key = Image.createImage("/key.png"); door_close = Image.createImage("/door_close.png"); door_open = Image.createImage("/door_open.png"); } catch (IOException e) { e.printStackTrace(); } }

Lalu pada kode di atas, kita akan menginisialisasi variable sebelumnya. Dengan cara

Image.createImage(“/obs_down.png”), yang berada didalam tanda kurung

merupakan lokasi dan nama file gambar yang akan diload. Semua file gambar harus

diletakkan pada folder res di project eclipse kita. Seperti pada gambar berikut:

Page 38: ONLINE Buku Membuat Game J2ME Agate Academy

38

public void drawMapLv1() { for (int i = 0; i < mapLVL1.length; i++) { for (int j = 0; j < mapLVL1[0].length; j++) { switch (mapLVL1[i][j]) { case 1: g.drawImage(tile1, j*16, i*16, 0); break;

Page 39: ONLINE Buku Membuat Game J2ME Agate Academy

39

case 2: g.drawImage(tile2, j*16, i*16, 0); break; case 3: g.drawImage(tile3, j*16, i*16, 0); break; case 4: g.drawImage(tile4, j*16, i*16, 0); break; case 5: g.drawImage(tile5, j*16, i*16, 0); break; case 6: g.drawImage(tile6, j*16, i*16, 0); break; case 7: g.drawImage(tile7, j*16, i*16, 0); break; case 8: g.drawImage(tile8, j*16, i*16, 0); break; case 9: g.drawImage(tile9, j*16, i*16, 0); break; } } } }

Fungsi diatas akan memeriksa nilai setiap array, dan menggambarnya kedalam

canvas. Fungsi drawImage untuk menggambar gambar, dengan parameter pertama

Image, posisi X, posisi Y, dan terakhir reference point dari gambar tersebut. 0 berarti

titik reference point berada pada posisi kiri atas. j*16 maksudnya untuk menggambar

tile tersebut pada posisi mana. Misalkan pada iterasi pertama, berarti j masih bernilai

0, sehingga hasilnya pun akan (0, 0). Iterasi kedua j = 1, maka akan (0, 16), dst.

public void run() { System.out.println("getWidth: " + getWidth()); System.out.println("getHeight: " + getHeight()); init(); while (true) { g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); drawMapLv1(); flushGraphics();

Page 40: ONLINE Buku Membuat Game J2ME Agate Academy

40

try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } }

Lalu kita panggil fungsi drawMapLvl1() pada game loop. Kemudian kita akan

mencoba menjalankan pada emulatornya.

Gambar di atas adalah hasil susunan array 2D kita sebelumnya.

public void drawObsLv1() { for (int i = 0; i < obsLVL1.length; i++) { for (int j = 0; j < obsLVL1[0].length; j++) { switch (obsLVL1[i][j]) { case 1: //obs down g.drawImage(obs_down, j*16, i*16, 0); break; case 2: //obs mid g.drawImage(obs_mid, j*16, i*16, 0); break; case 3: //obs single g.drawImage(obs_single, j*16, i*16, 0); break; case 4: //obs up

Page 41: ONLINE Buku Membuat Game J2ME Agate Academy

41

g.drawImage(obs_up, j*16, i*16, 0); break; case 5: //switch off g.drawImage(switch_off, j*16, i*16, 0); break; case 6: //switch on g.drawImage(switch_on, j*16, i*16, 0); break; case 7: //door close g.drawImage(door_close, j*16, i*16, 0); break; case 8: //door open g.drawImage(door_open, j*16, i*16, 0); break; case 9: //kunci g.drawImage(key, j*16, i*16, 0); break; } } } }

Lalu kita lakukan hal yang sama pada obstacle kita, lalu panggil kembali di game loop.

Lalu run kembali ke emulator.

Page 42: ONLINE Buku Membuat Game J2ME Agate Academy

42

Gambar di atas merupakan hasil dari penambahan obstacle. Lalu sekarang kita akan

menambahkan hero kita. Kode dibawah untuk variable yang akan digunakan. posX

dan posY merupakan posisi dari hero kita. 2, 2 artinya hero kita berada di baris ke 2

dan kolom ke 2. Variable arahChar untuk menentukan kemana arah dari hero kita.

Kita inisialisasikan dengan 4, yang artinya hero kita akan menghadap ke bawah.

//state char int posX = 2, posY = 2; public int arahChar = 4; public static final int KIRI = 1; public static final int KANAN = 2; public static final int ATAS = 3; public static final int BAWAH = 4;

Lalu kode berikutnya untuk menggambar hero pada canvas. Caranya hampir sama

ketika kita menggambar map dan obstacle. Bedanya kita bukan mengecek nilai array,

Page 43: ONLINE Buku Membuat Game J2ME Agate Academy

43

tapi mengecek posX dan posY, jika nilainya sama, maka kita buka statement SWITCH

– CASE yang berguna untuk mengecek hadapan dari hero kita.

public void drawChar() { for (int x = 0; x < mapLVL1.length; x++) { for (int y = 0; y < mapLVL1[0].length; y++) { if (y == posX && x == posY) { switch (arahChar) { case ATAS: g.drawImage(c_back, posX*16, posY*16, 0); break; case BAWAH: g.drawImage(c_front, posX*16, posY*16, 0); break; case KANAN: g.drawImage(c_right, posX*16, posY*16, 0); break; case KIRI: g.drawImage(c_left, posX*16, posY*16, 0); break; } } } } }

Jangan lupa kita panggil fungsi di atas pada game loop kita.

g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); drawMapLv1(); drawObsLv1(); drawChar(); flushGraphics();

Lalu jalankan kembali emulator kita.

Page 44: ONLINE Buku Membuat Game J2ME Agate Academy

44

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.4.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.5 MENGHANDLE INPUT PEMAIN

Input handler merupakan fungsi yang akan menangani ketika player menekan suatu

tombol di device kita. Pada game ini kita akan buat 2 macam input, yang pertama

untuk menangani input pada layar menu dan pada permainan. Karena ketika kita

menekan tombol atas pada layar menu akan berbeda hasilnya ketika kita menekan di

dalam game. Pada layar menu, tombol atas akan menggerakkan kursor ke atas,

sedangkan pada game akan menggerakkan hero 1 kotak ke atas.

Pada contoh game kali ini, game input hanya digunakan untuk menggerakkan hero

dan pada menu utama.

Page 45: ONLINE Buku Membuat Game J2ME Agate Academy

45

Pertama – tama kita tentukan terlebih dahulu, variable apa yang akan digunakan.

buttonHold berguna untuk menahan gerakan ketika kita menekan dan menahan

suatu tombol. x dan y digunakan untuk mengubah posX dan posY.

//game input boolean buttonHold = false; int x = 0, y = 0;

Lalu kita buat fungsi movePlayer(), pada awal fungsi kita buat agar x dan y bernilai 0,

sehingga x dan y hanya berubah nilainya ketika kita menekan. Jika kita tidak merubah

nilai x dan y, maka hero akan terus bergerak meskipun kita sudah melepas

tombolnya. getKeyState() merupakan fungsi yang mengembalikan nilai int, yang

merupakan penanda bahwa suatu tombol sedang ditekan. Lalu ada pengecekan,

apakah keyState dan GameCanvas.LEFT_PRESSED tidak 0. Jika true, maka lakukan

kode berikutnya. Kode selanjutnya ada pengecekan kembali, yaitu pengecekan

terhadap buttonHold. Disini kita akan mengecek apakah player masih menekan

tombol atau tidak. Jika YA, maka skip kode di dalamnya. Jika TIDAK, maka x kita rubah

nilainya menjadi -1 . Lalu kita rubah nilai buttonHold menjadi true sehingga kode di

dalam IF ini tidak akan dilakukan lagi sampai player melepas tombol. Dan juga kita

rubah arahChar menjadi ke KIRI. Dan begitu selanjutnya, sampai pada bagian akhir

dari IF – THEN – ELSE terdapat fungsi untuk merubah kembali buttonHold menjadi

false, sehingga ketika player melepas tombol maka buttonHold pun berubah kembali

menjadi false. Lalu kita rubah kembali arahChar menjadi ke bawah, ini bersifat

opsional jika kita ingin posisi char tetap pada posisi hadapnya, maka teman – teman

dapat menghapus kode arahChar = BAWAH;.

public void movePlayer() { int keyState = getKeyStates(); x = 0; y = 0; if ((keyState & GameCanvas.LEFT_PRESSED) != 0) { if(!buttonHold) { x = -1; buttonHold = true; arahChar = KIRI; }

Page 46: ONLINE Buku Membuat Game J2ME Agate Academy

46

}else if ((keyState & GameCanvas.RIGHT_PRESSED) != 0) { if(!buttonHold) { x = 1; buttonHold = true; arahChar = KANAN; } }else if ((keyState & GameCanvas.UP_PRESSED) != 0) { if(!buttonHold) { y = -1; buttonHold = true; arahChar = ATAS; } }else if ((keyState & GameCanvas.DOWN_PRESSED) != 0) { if(!buttonHold) { y = 1; buttonHold = true; arahChar = BAWAH; } }else{ if(buttonHold) buttonHold = false; //arahChar = BAWAH; } posX += x; posY += y; }

Jangan lupa kita panggil fungsinya di game loop. Lalu coba jalankan ke emulator, dan

coba gerakkan dengan tombolnya.

g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); drawMapLv1(); drawObsLv1(); drawChar(); movePlayer(); flushGraphics();

Page 47: ONLINE Buku Membuat Game J2ME Agate Academy

47

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.5.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.6 INTERAKSI ANTAR OBJECT

Pada bab ini, akan menjabarkan tentang bagaimana interaksi hero dengan object

yang ada di map. Kode berikut ini hanyalah mengubah dari fungsi movePlayer(),

misalnya pada bagian x = -1, kita rubah menjadi kode dibawah tanpa mengubah

susunan kode sebelum dan sesudahnya. Berikut list interaksi hero dengan objek:

a. Pertama – tama, kita buat interaksi hero dengan wall, dengan kata lain layer

pertama.

LEFT_PRESSED

if ((keyState & GameCanvas.LEFT_PRESSED) != 0) { if(!buttonHold)

Page 48: ONLINE Buku Membuat Game J2ME Agate Academy

48

{ if (mapLVL1[posY][posX-1] == 5) { x = -1; } buttonHold = true; arahChar = KIRI; step++; } }

RIGHT_PRESSED

Sama dengan LEFT_PRESSED susunannya. Begitu pula pada DOWN dan

UP_PRESSED

else if ((keyState & GameCanvas.RIGHT_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY][posX+1] == 5) { x = 1; } buttonHold = true; arahChar = KANAN; step++; } }

UP_PRESSED

else if ((keyState & GameCanvas.UP_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY-1][posX] == 5) { y = -1; } buttonHold = true; arahChar = ATAS; step++; } }

Page 49: ONLINE Buku Membuat Game J2ME Agate Academy

49

DOWN_PRESSED

else if ((keyState & GameCanvas.DOWN_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY+1][posX] == 5) { y = 1; } buttonHold = true; arahChar = BAWAH; step++; } }

Kode di atas maksudnya, kita akan mengecek terlebih dahulu, apakah tile

disampingnya bernilai 5, jika YA maka hero akan bergerak ke arah tersebut. Gambar

dibawah merupakan tampilan dari emulator setelah kita rubah.

Page 50: ONLINE Buku Membuat Game J2ME Agate Academy

50

b. Karena pada pembuatan obstacle, kita berbeda layer dengan map, maka kita

juga harus membuat interaksi hero dengan obstacle, khususnya obstacle meja.

Pada pengecekan ini, kita coba dengan cara yang berbeda, yaitu menggunakan

fungsi untuk mengecek dengan parameter masukan posisi dari hero.

public boolean cekObs(int x, int y) { if (obsLVL1[x][y] == 1 || obsLVL1[x][y] == 2 || obsLVL1[x][y] == 3 || obsLVL1[x][y] == 4) { return true; }else

Page 51: ONLINE Buku Membuat Game J2ME Agate Academy

51

return false; }

Fungsi di atas akan mengecek apakan lokasi dari hero (x, y) berisi obstacle (1, 2,

3, 4) atau tidak. Jika ya, kembalikan nilai true, dan sebaliknya. Untuk cara

pengecekannya, kita letakkan didalam IF sebelumnya. Sehingga pada game

input, pengecekannya menjadi seperti ini.

Oh iya, pengecekan dibawah kita update dari pengecekan sebelumnya.

LEFT_PRESSED

if ((keyState & GameCanvas.LEFT_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY][posX-1] == 5 && !cekObs(posY, posX-1)) { x = -1; } buttonHold = true; arahChar = KIRI; step++; } }

RIGHT_PRESSED

Sama dengan LEFT_PRESSED susunannya. Begitu pula pada DOWN dan

UP_PRESSED

else if ((keyState & GameCanvas.RIGHT_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY][posX+1] == 5 && !cekObs(posY, posX+1)) { x = 1; } buttonHold = true; arahChar = KANAN; step++; } }

UP_PRESSED

Page 52: ONLINE Buku Membuat Game J2ME Agate Academy

52

else if ((keyState & GameCanvas.UP_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY-1][posX] == 5 && !cekObs(posY-1, posX)) { y = -1; } buttonHold = true; arahChar = ATAS; step++; } }

DOWN_PRESSED

else if ((keyState & GameCanvas.DOWN_PRESSED) != 0) { if(!buttonHold) { if (mapLVL1[posY+1][posX] == 5 && !cekObs(posY+1, posX)) { y = 1; } buttonHold = true; arahChar = BAWAH; step++; } }

Lalu kita coba run pada emulator.

Page 53: ONLINE Buku Membuat Game J2ME Agate Academy

53

c. Lalu kita buat interaksi hero dengan tuas. Ketika kita berada di atas tuas, maka

akan terjadi sesuatu. Misalkan ada meja yang hilang, atau muncul kunci, dan lain

– lain. Pada stage pertama ini, kita akan membuat 1 tuas, ketika hero kita berada

pada tile yang sama dengan tuas tersebut, maka akan ada sebuah meja yang

hilang. Tentu saja ketika kita menonaktifkan tuas tersebut, maka meja pun akan

kembali muncul.

Pertama – tama kita tentukan dahulu variable yang akan digunakan. stateTuas

digunakan untuk mendefinisikan keadaan dari tuas, apakah sedang terbuka atau

tertutup. Ini berguna untuk mengubah gambar tuas ketika sedang terbuka atau

tertutup.

Page 54: ONLINE Buku Membuat Game J2ME Agate Academy

54

int stateTuas = 0;

Lalu kita buat fungsi openObstacle(), untuk melakukan pengecekan terhadap

posisi hero kita. Karena posX dan posY merupakan posisi dari hero kita (yang

merupakan posisi dalam array juga), maka dapat kita gunakan untuk mengecek

nilai dari array obstacle. Lalu ada SWITCH – CASE, untuk memeriksa apakah tuas

berada dalam posisi ON atau OFF. Jika bernilai 0, maka obstacle pada baris ke 13

kolom ke 1 kita rubah menjadi 0, yang artinya meja pun hilang dan stateTuas

pun berubah nilainya menjadi 1. Jika kita menginjaknya lagi, maka meja pun

muncul lagi dan stateTuas berubah menjadi 0 kembali.

public void openObstacle(int x, int y) { //fungsi ngebuka obstacle if (obsLVL1[posY][posX] == 5) { switch (stateTuas) { case 0: obsLVL1[x][y] = 0; stateTuas = 1; break; case 1: obsLVL1[x][y] = 3; stateTuas = 0; break; } } }

Page 55: ONLINE Buku Membuat Game J2ME Agate Academy

55

Page 56: ONLINE Buku Membuat Game J2ME Agate Academy

56

d. Setelah itu kita buat interaksi hero dengan kunci. Ketika kita berada di atas objek

kunci, maka kunci akan pindah ke inventory hero.

Pertama – tama kita buat variable invent, yang berguna untuk menyimpan

jumlah kunci. Disini kita simpan dalam bentuk int, sehingga ketika hero

mengambil kunci, maka invent hanya kita tambah 1 saja.

int invent = 0;

Lalu kita tambahkan kode berikut pada fungsi openObstacle(). Caranya sama

dengan pengecekan tile wall dan obstacle, kita cek apakah posisi berdiri hero ini

bernilai 9 (obstacle kunci). Jika YA, maka invent kita tambah nilainya, lalu object

kunci kita hilangkan dari canvas dengan cara mengubah nilai array menjadi 0.

public void openObstacle(int x, int y) { //fungsi ngebuka obstacle

Page 57: ONLINE Buku Membuat Game J2ME Agate Academy

57

if (obsLVL1[posY][posX] == 5) { switch (stateTuas) { case 0: obsLVL1[x][y] = 0; stateTuas = 1; break; case 1: obsLVL1[x][y] = 3; stateTuas = 0; break; } } //fungsi ngambil kunci else if (obsLVL1[posY][posX] == 9) { invent++; obsLVL1[posY][posX] = 0; } }

Setelah itu kita jalankan kembali emulatornya.

Page 58: ONLINE Buku Membuat Game J2ME Agate Academy

58

e. Dan yang terakhir, kita buat interaksi hero dengan pintu. Dimana pintu ini adalah

tempat tujuan dari hero kita. Ketika hero kita tidak membawa kunci, maka kita

tidak bisa melalui pintu tersebut. Ketika kita membawa kunci, maka hero kita

pun akan memenangkan stage itu.

Kita buat fungsi cekPintu(), untuk mengecek apakah disekeliling hero terdapat

pintu atau tidak. Jika YA, maka periksa lagi, apakah invent tidak bernilai 0, jika YA

baru kita rubah obstaclenya menjadi 8, yaitu gambar pintu terbuka. Dan jangan

lupa, kita rubah juga map kita menjadi 5, agar hero kita bisa masuk ke dalam

pintu (cek fungsi pada movePlayer()). Lalu kita kurangi jumlah invent. Parameter

masukan x dan y berguna untuk menentukan posisi pintu yang akan dibuka

(berdasarkan array).

public void cekPintu(int x, int y) { if (obsLVL1[posY-1][posX] == 7 || obsLVL1[posY+1][posX] == 7 || obsLVL1[posY][posX-1] == 7 || obsLVL1[posY][posX+1] == 7) { if (invent != 0) { obsLVL1[x][y] = 8; mapLVL1[x][y] = 5; invent--; } } }

Susunan terakhir dari game loop kita,

Page 59: ONLINE Buku Membuat Game J2ME Agate Academy

59

public void run() { System.out.println("getWidth: " + getWidth()); System.out.println("getHeight: " + getHeight()); init(); while (true) { g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); drawMapLv1(); drawObsLv1(); drawChar(); movePlayer(); openObstacle(13,1); cekPintu(6,12); flushGraphics(); try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } }

Page 60: ONLINE Buku Membuat Game J2ME Agate Academy

60

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.6.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.7 STATE MANAGEMENT

State management pada sebuah game sering dipakai dalam membuat alur screen

flow dari sebuah game. Misalkan pada game ada splash screen, menu utama, level

selection, level 1, level 2, highscore, dan lain – lain. Agar susunan kode program

lebih rapih dan lebih mudah melakukan debugging jika terjadi error.

Pada buku ini, kita akan membuat main menu yang memiliki 3 pillihan, yaitu Play,

About, dan Exit. Play akan membuka ke Level Selection setelah itu baru kita dapat

bermain. Sedangkan About akan menuju ke menu about, dan terakhir Exit, tentu saja

untuk keluar dari game.

Pada tutorial kali ini, kita akan membuat 5 state:

a. Menu Utama

Pertama – tama kita buat dulu variable lokal yang dibutuhkan. Variable pilih

digunakan sebagai key pada SWITCH – CASE statement. Lalu kita buat variable

int statis, untuk menyimpan nilai pilihan. Lalu kita buat variable curMenu, untuk

membuat posisi pointer kita nanti (cursor menu). Jangan lupa kita buat variable

untuk memuat image yang dibutuhkan.

//state management int pilih = 0; protected final static int LVL_SEL = 1; protected final static int ABOUT = 2; protected final static int EXIT = 3; protected final static int LVL1 = 11; protected final static int LVL2 = 12; protected final static int LVL3 = 13; protected final static int MENU = 0; protected final static int GAMEOVER = 99; int curMenu = 1;

Image b_about_off, b_about_on, b_exit_off, b_exit_on, b_play_off, b_play_on, bg_about, bg_mainmenu, hand_pointer;

Page 61: ONLINE Buku Membuat Game J2ME Agate Academy

61

Sekarang kita inisialisasi image, letakkan kode berikut pada fungsi init()

//main menu b_about_off = Image.createImage("/mainMenu/b_about_off.png"); b_about_on = Image.createImage("/mainMenu/b_about_on.png"); b_exit_off = Image.createImage("/mainMenu/b_exit_off.png"); b_exit_on = Image.createImage("/mainMenu/b_exit_on.png"); b_play_off = Image.createImage("/mainMenu/b_play_off.png"); b_play_on = Image.createImage("/mainMenu/b_play_on.png"); bg_about = Image.createImage("/mainMenu/bg_about.png"); bg_mainmenu = Image.createImage("/mainMenu/bg_mainmenu.png"); hand_pointer = Image.createImage("/mainMenu/hand_pointer.png");

Setelah memuat inisialisasi gambar, mari kita buat fungsi mainMenu(), ini akan

kita panggil sebagai menu utama pada game ini. Pertama – tama, kita

drawImage terlebih dahulu bg_mainmenu. Lalu kita buat SWITCH – CASE

statement dengan curMenu sebagai kuncinya. Ini berguna ketika kita menekan

atas atau bawah, maka nilai curMenu akan ikut berubah. Sehingga CASE – nya

pun akan selalu berubah. Misalkan pada case 1, maka button Play yang sedang

aktif, dan hand_pointer pun berada pada posisi Play. Lalu kita buat fungsi input

agar ketika kita menekan atas atau bawah, akan merubah nilai dari curMenu.

Dan jika tombol FIRE ditekan, maka variable pilih pun akan berubah. Variable

pilih digunakan untuk menentukan menu mana yang akan dijalankan, apakah

menu utama, about, level selection, atau yang lain – lain.

public void mainMenu() { g.drawImage(bg_mainmenu, 0, 0, 0); switch (curMenu) { case 1: g.drawImage(b_play_on, getWidth()/2, 180, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_about_off, getWidth()/2, 220, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_exit_off, getWidth()/2, 260, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5+5, 180, Graphics.HCENTER | Graphics.VCENTER); break; case 2: g.drawImage(b_play_off, getWidth()/2, 180, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_about_on, getWidth()/2, 220, Graphics.HCENTER | Graphics.VCENTER);

Page 62: ONLINE Buku Membuat Game J2ME Agate Academy

62

g.drawImage(b_exit_off, getWidth()/2, 260, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5+5, 220, Graphics.HCENTER | Graphics.VCENTER); break; case 3: g.drawImage(b_play_off, getWidth()/2, 180, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_about_off, getWidth()/2, 220, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_exit_on, getWidth()/2, 260, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5+5, 260, Graphics.HCENTER | Graphics.VCENTER); break; default: break; } int keyState = getKeyStates(); if ((keyState & UP_PRESSED) != 0) { if (curMenu <= 1) { curMenu = 3; }else curMenu--; }else if ((keyState & DOWN_PRESSED) != 0) { if (curMenu >= 3) { curMenu = 1; }else curMenu++; } if ((keyState & FIRE_PRESSED) != 0) { pilih = curMenu; } }

Lakukan sedikit perubahan pada game loop kita (yang terdapat di fungsi run()).

Pada awalnya, kita langsung menulis kode pada level 1 di game loop. Sekarang

kita buat SWITCH – CASE statement sehingga kita bisa mengatur menu mana

yang akan dijalankan. Variable pilih menjadi kunci pada pemilihan CASE. MENU

memiliki nilai 0, maka dari itu, pilih kita inisialisasikan dengan nilai 0 terlebih

dahulu.

Page 63: ONLINE Buku Membuat Game J2ME Agate Academy

63

public void run() { System.out.println("getWidth: " + getWidth()); System.out.println("getHeight: " + getHeight()); init(); while (true) { switch (pilih) { case MENU: mainMenu(); break; case LVL_SEL: menuLevel(); break; case ABOUT: menuAbout(); break; case EXIT: parent.notifyDestroyed(); break; case LVL1: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer(); openObstacle(13,1); cekPintu(6,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 12) { openLevel = 12; } } break; case GAMEOVER: menuResult(); break; } flushGraphics(); try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } }

Page 64: ONLINE Buku Membuat Game J2ME Agate Academy

64

b. Menu Level Selection

Buat variable curLevel dan openLevel. curLevel untuk cursor ktia pada level

selection. Karena pada sebelumnya LVL1 kita inisialisasikan dengan nilai 11,

maka diusahakan ketika kita menekan tombol FIRE, maka variable pilih harus

berubah menjadi 11. openLevel merupakan level yang dibuka. Pada awalnya,

kita inisialisasikan 11, sehingga ketika pertama kali memainkan game ini, maka

level 1 sudah pasti terbuka. Nantinya akan kita tambahkan fitur load, sehingga

akan melihat level mana yang sudah terbuka atau belum.

int curMenu = 1; int curLevel = 11;

Lalu seperti biasa, buat variable untuk image.

Page 65: ONLINE Buku Membuat Game J2ME Agate Academy

65

Image bg_tileset, b_level1, b_level2, b_level3, b_locked, levelselection_mid, levelselection_down, levelselection_top;

Dan inisialisasikan image sebelum game loop.

//level selection b_locked = Image.createImage("/mainMenu/b_locked.png"); bg_tileset = Image.createImage("/mainMenu/bg_tileset.png"); b_level1 = Image.createImage("/mainMenu/b_level1.png"); b_level2 = Image.createImage("/mainMenu/b_level2.png"); b_level3 = Image.createImage("/mainMenu/b_level3.png"); levelselection_mid = Image.createImage("/mainMenu/levelselection_mid.png"); levelselection_down = Image.createImage("/mainMenu/levelselection_down.png"); levelselection_top = Image.createImage("/mainMenu/levelselection_top.png");

Kemudian kita buat fungsi menuLevel(), kita drawImage bg_tileset sebagai

lapisan paling belakang. Lalu levelselection_top, levelselection_mid, dan

levelselection_down sesuaikan posisinya pada canvas. Baru setelah itu kita

masukkan gambar level dan pointer dengan menggunakan SWITCH – CASE

statement menggunakan openLevel sebagai kuncinya. Lalu kita buat SWITCH –

CASE statement 1 lagi untuk menggambar pointer, dengan menggunakan

curLevel sebagai kuncinya. Kita juga membuat input handle difungsi ini, yang

menangani tombol atas, bawah dan fire. Tombol atas dan bawah secara fungsi

sama seperti sebelumnya. Pada tombol FIRE, akan terjadi pengecekan, apakah

curLevel lebih kecil atau sama dengan openLevel, jika YA berarti level tersebut

sudah bisa dimainkan.

public void menuLevel() { g.drawImage(bg_tileset, 0, 0, 0); g.drawImage(levelselection_top, 0, 0, 0); g.drawImage(levelselection_mid, getWidth()/2, getHeight()/3,

Page 66: ONLINE Buku Membuat Game J2ME Agate Academy

66

Graphics.HCENTER | Graphics.VCENTER); g.drawImage(levelselection_down, 0, getHeight(), Graphics.LEFT | Graphics.BOTTOM); switch (openLevel) { case 11: g.drawImage(b_level1, getWidth()/2, 150, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_locked, getWidth()/2, 200, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_locked, getWidth()/2, 250, Graphics.HCENTER | Graphics.VCENTER); break; case 12: g.drawImage(b_level1, getWidth()/2, 150, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_level2, getWidth()/2, 200, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_locked, getWidth()/2, 250, Graphics.HCENTER | Graphics.VCENTER); break; case 13: g.drawImage(b_level1, getWidth()/2, 150, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_level2, getWidth()/2, 200, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_level3, getWidth()/2, 250, Graphics.HCENTER | Graphics.VCENTER); break; } switch (curLevel) { case 11: g.drawImage(hand_pointer, getWidth()/3, 150, Graphics.LEFT | Graphics.VCENTER); break; case 12: g.drawImage(hand_pointer, getWidth()/3, 200, Graphics.LEFT | Graphics.VCENTER); break; case 13: g.drawImage(hand_pointer, getWidth()/3, 250, Graphics.LEFT | Graphics.VCENTER); break; }

Page 67: ONLINE Buku Membuat Game J2ME Agate Academy

67

int keyState = getKeyStates(); if ((keyState & UP_PRESSED) != 0) { if (curLevel <= 11) { curLevel = 13; }else curLevel--; }else if ((keyState & DOWN_PRESSED) != 0) { if (curLevel >= 13) { curLevel = 11; }else curLevel++; } if ((keyState & FIRE_PRESSED) != 0) { if(curLevel <= openLevel){ pilih = curLevel; level = curLevel - 10; } } }

Page 68: ONLINE Buku Membuat Game J2ME Agate Academy

68

Untuk mengubah nilai dari openLevel, kita tambahkan kode berikut pada case

LVL1.

case LVL1: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer(); openObstacle(13,1); cekPintu(6,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 12) { openLevel = 12; } score = (56*100)/step; } break;

Ketika posisi hero berada pada pintu yang terbuka, maka kita rubah nilai pilih

menjadi 99 dan rubah nilai dari openLevel menjadi 12. Lakukan hal yang sama

pada LVL2 dan LVL3.

c. Menu About

Menu about sangat simple, hanya drawImage lalu input handle ketika kita

menekan tombol FIRE, yang akan merubah nilai pilih menjadi 0.

public void menuAbout() { g.drawImage(bg_about, 0, 0, 0); int keyState = getKeyStates(); if ((keyState & FIRE_PRESSED) != 0) { pilih = 0; } }

Page 69: ONLINE Buku Membuat Game J2ME Agate Academy

69

d. Menu Result

Seperti biasa, tentukan variable yang dibutuhkan. curResult untuk cursor selama

di menu result. Variable step dan score untuk pemberian penilaian tentang

berapa step yang telah dilalui dan berapa persen kemenangan dari player. Lalu

variable image beserta inisialisasinya.

int step = 0; int score = 0; int curResult = 1; Image bg_result, b_nextlevel_off, b_nextlevel_on, b_tryagain_off, b_tryagain_on;

Inisialisasi,

//win condition bg_result = Image.createImage("/mainMenu/bg_result.png");

Page 70: ONLINE Buku Membuat Game J2ME Agate Academy

70

b_nextlevel_off = Image.createImage("/mainMenu/b_nextlevel_off.png"); b_nextlevel_on = Image.createImage("/mainMenu/b_nextlevel_on.png"); b_tryagain_off = Image.createImage("/mainMenu/b_tryagain_off.png"); b_tryagain_on = Image.createImage("/mainMenu/b_tryagain_on.png");

Dan seperti sebelumnya kita buat SWITCH – CASE statement dengan kunci

curResult, untuk memberi tanda pointernya. Ketika menekan FIRE,

menggunakan SWITCH – CASE statement lagi.

public void menuResult() { g.drawImage(bg_result, 0, 0, 0); switch (curResult) { case 1: g.drawImage(b_nextlevel_on, getWidth()/2, getHeight()/2+45, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_tryagain_off, getWidth()/2, getHeight()/2+75, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5, getHeight()/2+45, Graphics.LEFT | Graphics.VCENTER); break; case 2: g.drawImage(b_nextlevel_off, getWidth()/2, getHeight()/2+45, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(b_tryagain_on, getWidth()/2, getHeight()/2+75, Graphics.HCENTER | Graphics.VCENTER); g.drawImage(hand_pointer, getWidth()/5, getHeight()/2+75, Graphics.LEFT | Graphics.VCENTER); break; } g.setColor(0, 0, 0); g.drawString(" " + step, getWidth()/2, getHeight()/3 + 3, 0); g.drawString(" " + score + " %", getWidth()/2, getHeight()/3 + 23, 0); int keyState = getKeyStates();

Page 71: ONLINE Buku Membuat Game J2ME Agate Academy

71

if ((keyState & UP_PRESSED) != 0) { if (curResult <= 1) { curResult = 2; }else curResult -= 1; }else if ((keyState & DOWN_PRESSED) != 0) { if (curResult >= 2) { curResult = 1; }else curResult += 1; } if ((keyState & FIRE_PRESSED) != 0) { switch (curResult) { case 1: pilih = LVL_SEL; posX = 2; posY = 2; stateTuas = 0; invent = 0; step = 0; score = 0; arahChar = BAWAH; break; case 2: pilih = MENU; posX = 2; posY = 2; stateTuas = 0; invent = 0; step = 0; score = 0; arahChar = BAWAH; break; } } }

Berikut tampilan setelah kita run pada emulator.

Page 72: ONLINE Buku Membuat Game J2ME Agate Academy

72

e. Menu Exit

Buat variable parent, untuk mengakses MIDlet dari gamecanvas.

Lalu pada konstruktor, buat parameter masukan MIDlet. Pada bagian bawahnya

kita tambahkan this.parent = parent agar kita bisa mengakses fungsi – fungsi dari

MIDlet dengan menggunakan parent.

public GameScreen(MIDlet parent) { super(false); t = new Thread(this); g = getGraphics(); setFullScreenMode(true); this.parent = parent; }

Page 73: ONLINE Buku Membuat Game J2ME Agate Academy

73

Tentu saja, pada game MIDlet kita juga ada yang sedikit dirubah, dengan

menambahkan this sebagai parameter masukan.

protected void startApp() throws MIDletStateChangeException { if (gScreen == null) { gScreen = new GameScreen(this); } gScreen.startGame(); Display.getDisplay(this).setCurrent(gScreen); }

Pada case EXIT kita tambahkan fungsi parent.notifyDestroyed() agar memaksa

MIDlet menutup program kita.

case EXIT: parent.notifyDestroyed(); break;

f. Menu 1, 2, 3

Untuk mempermudah dalam membuat level dan menghemat resource memory,

kita akan membuat fungsi initMap(). Dimana fungsi ini akan digunakan untuk

memuat array dan menggambarnya. Pada tutorial ini aka dijelaskan bagaimana

cara memuat level map dengan 1 variable, yaitu variable mapLVL dan obsLVL.

Pada fungsi menuLevel(), pada bagian tombol FIRE ditekan, ada kode program

level = curLevel – 10; kode itu berfungsi untuk memberikan nilai pada variable

level yang nantinya akan digunakan sebagai kunci pada SWITCH – CASE

statement dibawah. Pada bagian akhir CASE, level akan dirubah nilainya menjadi

0, sehingga pada perulangan selanjutnya, CASE akan menjalankan kode di

DEFAULT.

public void initMap() { switch (level) { case 1: mapLVL = new int[][] { { 1, 2, 2, 2, 2, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0},

Page 74: ONLINE Buku Membuat Game J2ME Agate Academy

74

{ 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 2, 2, 2, 3}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 7, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9} }; obsLVL = new int[][] { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 3, 3, 3, 0, 3, 3, 0, 0, 0, 0, 0, 7, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 4, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 3, 3, 3, 4, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0}, { 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0}, { 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 9, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, }; level = 0; break; case 2: mapLVL = new int[][] { { 1, 2, 2, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0},

Page 75: ONLINE Buku Membuat Game J2ME Agate Academy

75

{ 7, 8, 8, 8, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 4, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 4, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 4, 5, 6, 0, 0, 0, 1, 2, 2, 2, 2, 3}, { 0, 0, 0, 4, 5, 6, 0, 0, 0, 4, 5, 5, 5, 5, 6}, { 1, 2, 2, 2, 5, 6, 0, 0, 0, 4, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 4, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 4, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 2, 2, 2, 2, 2, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 6, 8, 8, 8, 8, 8, 8, 8, 8, 9}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 4, 5, 5, 5, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 7, 8, 8, 8, 8, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0} }; obsLVL = new int[][] { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0}, { 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, }; level = 0; break; case 3: mapLVL = new int[][] { { 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6},

Page 76: ONLINE Buku Membuat Game J2ME Agate Academy

76

{ 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 7, 8, 8, 8, 8, 8, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 0, 0, 0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 0, 0, 0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 0, 0, 0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 0, 0, 0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 6}, { 0, 0, 0, 0, 0, 4, 5, 5, 5, 5, 5, 5, 5, 5, 9}, { 0, 0, 0, 0, 0, 7, 8, 8, 8, 8, 8, 8, 8, 8, 9} }; obsLVL = new int[][] { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 6, 0, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 1, 3, 3, 3, 3, 3, 0}, { 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 3, 3, 3, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 3, 3, 3, 3, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0}, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0} }; break;

Pada bagian DEFAULT dari SWITCH – CASE di atas, kita akan memindahkan kode

di dalam fungsi drawMapLvl1() dan drawObsLvl1().

default: for (int i = 0; i < mapLVL.length; i++) { for (int j = 0; j < mapLVL[0].length; j++) { switch (mapLVL[i][j]) {

Page 77: ONLINE Buku Membuat Game J2ME Agate Academy

77

case 1: g.drawImage(tile1, j*16, i*16, 0); break; case 2: g.drawImage(tile2, j*16, i*16, 0); break; case 3: g.drawImage(tile3, j*16, i*16, 0); break; case 4: g.drawImage(tile4, j*16, i*16, 0); break; case 5: g.drawImage(tile5, j*16, i*16, 0); break; case 6: g.drawImage(tile6, j*16, i*16, 0); break; case 7: g.drawImage(tile7, j*16, i*16, 0); break; case 8: g.drawImage(tile8, j*16, i*16, 0); break; case 9: g.drawImage(tile9, j*16, i*16, 0); break; } } } for (int i = 0; i < obsLVL.length; i++) { for (int j = 0; j < obsLVL[0].length; j++) { switch (obsLVL[i][j]) { case 1: //obs down g.drawImage(obs_down, j*16, i*16, 0); break; case 2: //obs mid g.drawImage(obs_mid, j*16, i*16, 0); break; case 3: //obs single g.drawImage(obs_single, j*16, i*16, 0); break; case 4: //obs up g.drawImage(obs_up, j*16, i*16, 0); break; case 5: //switch off g.drawImage(switch_off, j*16, i*16, 0); break; case 6: //switch on

Page 78: ONLINE Buku Membuat Game J2ME Agate Academy

78

g.drawImage(switch_on, j*16, i*16, 0); break; case 7: //door close g.drawImage(door_close, j*16, i*16, 0); break; case 8: //door open g.drawImage(door_open, j*16, i*16, 0); break; case 9: //kunci g.drawImage(key, j*16, i*16, 0); break; } } } break; } }

Dengan begini, mapLVL dan obsLVL penggunaannya akan reuseable, seiring

dengan penambahan level. Cara penggunaannya, hanya panggil initMap() di

level utama. Kode diatas hanya membuat 3 level saja.

case LVL1: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer(); openObstacle(13,1); cekPintu(6,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 12) { openLevel = 12; } score = (56*100)/step; } break; case LVL2: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer();

Page 79: ONLINE Buku Membuat Game J2ME Agate Academy

79

openObstacle(9,4); cekPintu(8,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 13) { openLevel = 13; } score = (42*100)/step; } break; case LVL3: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer(); //openObstacle(9,4); //cekPintu(8,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 13) { openLevel = 13; } score = (42*100)/step; } break;

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.7.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.8 SAVE DAN LOAD GAME

Penyimpanan data pada J2ME dapat kita lakukan dengan menggunakan Record

Management Store (RMS). Sebenarnya masih banyak teknik penyimpanan data yang

bisa digunakan, salah satunya dengan penyimpanan ke eksternal file. Tapi pada

tutorial kali ini, kita akan mempelajari bagaimana penyimpanan data dengan

menggunakan RMS.

Sekarang waktunya membuat game ini bisa di save dan di load. Pada kesempatan ini,

save dan load hanya sebatas penyimpanan data level saja, dimana dia terakhir

Page 80: ONLINE Buku Membuat Game J2ME Agate Academy

80

berada di level berapa. Kita akan menyimpan nilai dari openLevel yang berfungsi

untuk menentukan level mana yang sudah mainkan.

Buat variable untuk menyimpan string. Nanti akan kita gunakan sebagai nama

database kita.

//save dan load public static final String STORE = "simpanLevel";

Lalu kita buat fungsi ambilData() untuk load data yang sudah ada di dalam RMS.

Jangan lupa kita harus meng-import package RMS. Nanti fungsi ini akan

mengembalikan nilai integer. Variable retVal untuk menyimpan nilai dari database.

static int ambilData(){ int retVal = 0; RecordStore store = null; try { store = RecordStore.openRecordStore(STORE, true); int numRecords = store.getNumRecords(); if (numRecords > 0) { byte[] rec = store.getRecord(1); retVal = rec[0]; } } catch (Exception e) { }finally{ try { store.closeRecordStore(); } catch (Exception e) { } } return(retVal); }

Setelah itu kita akan membuat fungsi simpanData(), untuk menyimpan data

openLevel ke database. Dengan parameter masukan bertipe integer yang berfungsi

sebagai nilai yang akan disimpan ke database.

static void simpanData(int size){ RecordStore store = null; try { if (size > 127) { size = 127; }

Page 81: ONLINE Buku Membuat Game J2ME Agate Academy

81

store = RecordStore.openRecordStore(STORE, true); byte[] record = new byte[1]; record[0] = (byte)(size); int numRecord = store.getNumRecords(); if (numRecord > 0) { store.setRecord(1, record, 0, 1); }else { store.addRecord(record, 0, 1); } } catch (Exception e) { } finally{ try { store.closeRecordStore(); } catch (Exception e) { } } }

Lalu lakukan penambahan kode sebelum game loop (sebelum while (true)). Kita

ambil datanya terlebih dahulu lalu simpan pada variable openLevel. Cek dahulu

apakah ada datanya, kalau belum pasti bernilai 0.

if (ambilData() != 0) openLevel = ambilData();

Kemudian untuk menyimpan openLevel, dapat kita simpan pada setiap level.

Contohnya pada kasus ini, kita akan menyimpannya pada CASE LVL1.

case LVL1: g.setColor(115, 130, 147); g.fillRect(0, 0, getWidth(), getHeight()); initMap(); drawChar(); movePlayer(); openObstacle(13,1); cekPintu(6,12); if (obsLVL[posY][posX] == 8) { pilih = 99; if (openLevel < 12) { openLevel = 12; } score = (56*100)/step; simpanData(openLevel); }

Page 82: ONLINE Buku Membuat Game J2ME Agate Academy

82

break;

Sekarang coba jalankan emulatornya, kode diatas akan menyimpan data level yang

telah diselesaikan sebelumnya.

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.8.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.9 EFEK SUARA

J2ME menyediakan API untuk menangani sound FX dan BGM, yang sering disebut

dengan Mobile Media API (MMAPI). MMAPI di desain untuk jalan di setiap virtual

machine berbasis J2ME, termasuk CDC dan CLDC virtual machine.

MMAPI memiliki fitur:

Mendukung untuk Tone Generation, Playback, and Recording of Time-Based

Media: paket ini mendukung setiap isi audio dan video yang berbasis waktu

(time-based).

Small Footprint: MMAPI bekerja pada batas-batas memori yang tegas dari alat-

alat CLDC.

Protocol- and Content-Agnostic: API tidak dibiaskan ke tipe atau protokol yang

spesifik.

Subsettable: pengembang dapat mendukung tipe tertentu.

Extensible: Fitur baru dapat ditambahkan dengan mudah tanpa menghilangkan

kemampuan sistem yang sebelumnya. Lebih penting lagi, format-format

tambahan dapat dengan mudah didukung, dikbuat framework dan ditempatkan

untuk kontrol tambahan.

Options for Implementers: API menawarkan fitur untuk tujuan-tujuan yang

tertentu. API didesain dan dirancang untuk mengizinkan developer

meninggalkan beberapa fitur jika mereka tidak bisa didukung.

Ada dua bagian untuk mengolah multimedia:

Page 83: ONLINE Buku Membuat Game J2ME Agate Academy

83

Protocol Handling: membaca data dari suatu sumber seperti sebuah file atau

suatu streaming server ke dalam sistem media-processing.

Content Handling: menguraikan (parsing) atau decoding data dan merendernya

menjadi sebuah keluaran seperti spiker audio atau layar video.

Agar dapat memfasilitasi operasi di atas, API menyediakan dua tipe obyek high-level:

DataSource mengencapsulasi penanganan protokol dengan penyembunyian

detail bagaimana data itu dibaca dari sumbernya. Method obyek mempunyai

berguna yang memungkinkan obyek Player menangani isi.

Player membaca data dari DataSource, memprosesnya merendernya untuk

ditampilkan di piranti. Obyek ini menyediakan metoda untuk mengendalikan

media untuk playback, termasuk metoda untuk mengendalikan tipe tertentu

mengakses fitur tipe media tertentu..

MMAPI menetapkan obyek ketiga, sebuah mekanisme yang dikenal sebagai Manager

yang memungkinkan aplikasi membuat Players dari DataSources, dan dari

InputStreams.

Obyek Manager menyediakan method createPlayer(), yang merupakan level tertinggi

API untuk memasukkan input. Berikut contoh penggunaannya:

Page 84: ONLINE Buku Membuat Game J2ME Agate Academy

84

Player player = Manager.createPlayer(String url);

Keterangan:

url : berisi protokol dan isi url

format pengisian url <protokol>:<isi lokasi>

Aplikasi menggunakan method yang dikembalikan Player untuk mengontrol data

yang didapatkan dan playback media yang berdasarkan waktu (time-based).

Life–cycle Player berisi lima keadaan: UNREALIZED, REALIZED, PREFETCHED,

STARTED, dan CLOSED. Ke enam method menghasilkan transisi keadaan:

realize() prefetch() start() stop() deallocate() close()

Ketika sebuah player dibuat, berubah ke keadaan UNREALIZED. Kemudian memanggil

realize() pindah ke keadaan REALIZED dan menganalisa informasi. Memanggil

prefetch() keadaan pindah ke PREFETCHED, menetapkan koneksi jaringan untuk

streaming data, dan melakukan tugas-tugas inisialisasi lainnya. Memangil start()

menyebabkan transisi ke keadaan STARTED, dimana player dapat memproses data.

Ketika selesai memproses data (sampai ke bagian terakhir data), akan

mengembalikan keadaan PREFETCHED. Memanggil close() meyebabkan player

pindah ke status CLOSED.

Pada kesempatan ini, kita akan memanggil 3 buah sound effect, ketika menginjak

tuas, mengambil kunci, dan membuka pintu. Simpan file musik ke dalam folder res.

Page 85: ONLINE Buku Membuat Game J2ME Agate Academy

85

Pertama – tama kita tentukan variable yang dibutuhkan.

//suara InputStream media; Player ambil_kunci, buka_kunci, menang, tuas; boolean stateTuasSFX = false;

Lalu inisialisasi Player dan InputStream, tambahkan kode berikut pada fungsi init().

//Initialize sound fx media = getClass().getResourceAsStream("/sfx/ambil_kunci.wav"); ambil_kunci = Manager.createPlayer(media, "audio/X-wav"); ambil_kunci.realize(); ambil_kunci.prefetch(); media = getClass().getResourceAsStream("/sfx/buka_kunci.wav"); buka_kunci = Manager.createPlayer(media, "audio/X-wav"); buka_kunci.realize(); buka_kunci.prefetch(); media = getClass().getResourceAsStream("/sfx/switch.wav"); tuas = Manager.createPlayer(media, "audio/X-wav"); tuas.realize(); tuas.prefetch();

Setelah itu, kita sisipkan pemanggilan Player pada event yang ingin kita tambahkan

suara. stateTuas berguna untuk menghandle agar sfx tidak loop terus menerus,

Page 86: ONLINE Buku Membuat Game J2ME Agate Academy

86

karena hero akan berada pada tile tersebut sampai dia pindah. Cek terlebih dahulu

nilai dari stateTuasSFX, jika bernilai false artinya kita akan memainkan tuas.start().

Lalu kita rubah nilai dari stateTuasSFX menjadi true. Sehingga tuas.start(0 hanya akan

di akses 1x, sampai hero pindah tile, yang akan mengakibatkan nilai dari

stateTuasSFX menjadi false kembali. Juga lakukan hal yang sama ketika hero

mengambil kunci. bedanya, tidak perlu menggunakan state, karena object kunci akan

langsung hilang dari canvas ketika hero mengambilnya.

public void openObstacle(int x, int y) { //fungsi ngebuka obstacle if (obsLVL[posY][posX] == 5) { if (!stateTuasSFX) { try { tuas.start(); } catch (MediaException e) { e.printStackTrace(); } switch (stateTuas) { case 0: obsLVL[x][y] = 0; stateTuas = 1; break; case 1: obsLVL[x][y] = 3; stateTuas = 0; break; } stateTuasSFX = true; } } //fungsi ngambil kunci else if (obsLVL[posY][posX] == 9) { invent++; try { ambil_kunci.start(); } catch (MediaException e) { e.printStackTrace(); } obsLVL[posY][posX] = 0; } else { if (stateTuasSFX) { stateTuasSFX = false;

Page 87: ONLINE Buku Membuat Game J2ME Agate Academy

87

} } }

Terakhir kita tambahkan suara pada fungsi cekPintu(), yaitu ketika kita berhasil

membuka pintu.

public void cekPintu(int x, int y) { if (obsLVL[posY-1][posX] == 7 || obsLVL[posY+1][posX] == 7 || obsLVL[posY][posX-1] == 7 || obsLVL[posY][posX+1] == 7) { if (invent != 0) { try { buka_kunci.start(); } catch (MediaException e) { e.printStackTrace(); } obsLVL[x][y] = 8; mapLVL[x][y] = 5; invent--; } } }

Jalankan emulator, coba mengambil kunci.

Untuk mengakses kode yang sampai akhir bab ini, Anda bisa load isi file "Source Code

& Assets\chapt5.2.9.zip" pada CD atau akses di http://bit.ly/agatebooks-game-j2me.

5.2.10 ENCHANCE YOUR GAME!

Selesai sudah tutorial pembuatan game ini. Game tersebut masih sangat simple.

Masih banyak hal yang harus dilakukan untuk membuat game tersebut menarik. Mari

kita buat agar game ini lebih menyenangkan. Ada beberapa aspek yang membuat

sebuah game akan menyenangkan, yaitu:

Desain level yang menarik dan menantang. Apa yang akan kurang dari game kita

sekarang? Yup, setiap level terlalu mudah. Belum ada musuh, atau teka – teki

yang lebih menantang. Dan tentu saja, media sharing ke facebook dan twitter.

Page 88: ONLINE Buku Membuat Game J2ME Agate Academy

88

Silahkan coba kembangkan dan masukkan ide – ide yang lebih fresh pada game

Pemberian background music yang tepat dan sound effect yang menarik. Tentu

saja game tanpa suara rasanya hambar.

Tentu saja, harus bugfree

5.3 LEVEL DESIGN

5.3.1 TOOLS UNTUK MEMBUAT LEVEL

Untuk membuat level, kita dapat menggunakan berbagai macam tool yang di desain

khusus untuk merancang map tile. Salah satunya adalah Tile Map Editor (TME)

v1.2.2. Aplikasi ini free dan termasuk mudah untuk penggunaannya.

Berikut tampilan awal dari TME.

Page 89: ONLINE Buku Membuat Game J2ME Agate Academy

89

Kita akan mencoba membuat map baru. Pilih File > New TileMap… akan ada window

baru, masukkan nama map dan ukuran dari map. Map Width dan Map Height

merupakan jumlah tile secara lebar dan tinggi. Sedangkan Tile Width dan Tile Height

merupakan lebar dan tinggi dari suatu tile. Pada contoh dibawah, akan di isi Map

Width 20, Map Height 15, Tile Width 16, dan Tile Height 16. Artinya width dari map

akan 20 x 16 = 320 dan heightnya akan 15 x 16 = 240 (sesuai dengan ukuran device).

Setelah itu kita akan diminta untuk mencari file image yang akan jadi map kita.

Contohnya seperti dibawah ini:

Page 90: ONLINE Buku Membuat Game J2ME Agate Academy

90

Ketika TME selesai me-load, maka akan muncul tampilan seperti dibawah.

Tekan OK, maka kita dapat segera memulai mendesain map. Klik tile yang ingin

dipasangkan lalu klik pada canvasnya.

Desain sedemikian rupa sehingga menjadi seperti gambar dibawah.

Page 91: ONLINE Buku Membuat Game J2ME Agate Academy

91

Lalu coba export ke array, File > Export Array… > Java , jika berhasil maka akan

muncul array yang dapat kita gunakan di game kita.

Dengan menggunakan tool ini, maka akan memudahkan desainer untuk merancang

level.

Page 92: ONLINE Buku Membuat Game J2ME Agate Academy

92

5.3.2 TIPS DALAM MEMBUAT LEVEL

Menjadi game designer adalah hal yang cukup sulit, karena seorang game designer

harus orang yang kreatif dan inovatif. Beberapa tips untuk mendesain level:

a. Buat level mudah dipelajari tapi sulit untuk mencapai best score. Juga buat

level tutorial untuk memudahkan player untuk mengerti cara bermainnya.

b. Jangan terlalu monoton, tambahkan tingkat kesulitan yang bertahap dari

mudah ke susah.

c. Tambahkan sound effect dan background music agar player tidak bosan.

d. Setiap level selalu ada tantangan tersendiri. Misalkan pada game yang telah

kita buat di bab sebelumnya, agar lebih menantang kita dapat

menambahkan AI di levelnya.

Masih banyak aspek yang dapat mempengaruhi agar sebuah game dapat menarik.

Misalnya kita ingin menargetkan gamer yang hanya ingin mengisi waktu, kita dapat

membuat game simple tapi dengan menambahkan fitur share highscore, atau game

yang kompleks seperti game RPG untuk gamer yang memang hobi bermain game

RPG.

Page 93: ONLINE Buku Membuat Game J2ME Agate Academy

93

Ag

ate

Stu

dio

is n

ow

hir

ing

!

Page 94: ONLINE Buku Membuat Game J2ME Agate Academy

94

6 RELEASE

6.1 DIMANA KITA BISA RILIS GAME KITA?

Banyak app store yang siap untuk menampung game kita. Salah satu yang terbesar

dan terbanyak usernya adalah Nokia Store.

Dengan hanya membayar 1 euro, kita akan memiliki akun di Nokia Ovi Store.

Keunggulan Ovi Store dibandingkan app store lainnya:

a. Pengguna Nokia yang cukup banyak dari Indonesia khususnya.

b. Banyak tipe handphone Nokia yang telah beredar dipasaran, sehingga

memperbesar peluang kita.

c. Pengguna Nokia dimudahkan dalam membeli aplikasi di Ovi Store, sehingga

memperbesar kemungkinan pengguna Nokia untuk membeli game kita.

d. Sistem QA yang bagus, game kita akan melalui serangkaian tes sehingga game

kita benar – benar siap dipasarkan.

6.2 CARA PUBLISH GAME DI NOKIA STORE

Untuk mempublish game ke Nokia Store, caranya cukup mudah, berikut adalah step

– by – step:

1. Daftarkan diri atau tim anda di Nokia Store sebagai publisher, melalui tautan

berikut https://publish.ovi.com/register/country_and_account_type masukkan

jenis akun yang ingin didaftarkan, corporate ketika kita ingin mempublish game

atas nama perusahaan atau tim. Lalu isi informasi yang dibutuhkan selanjutnya

sampai pada bagian pembayaran dengan menggunakan credit card. Biaya untuk

pendaftaran sebagai publisher hanya 1 Euro atau sekitar Rp. 12.000,00.

2. Setelah mendaftar menjadi publisher, kita dapat login ke http://publish.ovi.com/

untuk mensubmit game kita. Kita juga diberi page oleh Nokia untuk

menampilkan game – game yang telah kita publish. Contohnya page Agate

Page 95: ONLINE Buku Membuat Game J2ME Agate Academy

95

Studio http://store.ovi.com/publisher/Agate Studio/ disana terdapat berbagai

macam game yang telah dikembangkan oleh Agate Studio.

3. Mari kita mencoba membuat content baru, pilih Java Application ketika

ditanyakan tipe content kita.

4. Lalu kita akan diberi pertanyaan tentang kelegalan dari game kita.

5. Setelah itu kita akan diminta untuk mengisi metadata. Mulai dari category, nama

aplikasi, harga aplikasi, dan sebagainya.

Page 96: ONLINE Buku Membuat Game J2ME Agate Academy

96

Kita juga akan diminta screenshot dan logo dari game kita.

6. Setelah berhasil, kita akan ke halaman berikut.

7. Setelah itu kita pilih Content Files untuk mengunggah file game kita.

Page 97: ONLINE Buku Membuat Game J2ME Agate Academy

97

Ada beberapa ketentuan sebelum kita mengunggah game kita, diantaranya

game kita sizenya harus kurang dari atau sama dengan 2MB. Lalu nama filenya

harus 5 – 48 character. Gambar dibawah adalah ketentuan dalam mengunggah

game kita. Jangan lupa untuk mengubah file Application Descriptor pada project

game kita. Beberapa yang perlu dirubah yaitu Overview dan MIDlets. Untuk

membuild game kita, klik kanan pada project kita. Lalu pilih Mobile Tools for Java

> Create Package. Setelah itu, kita dapat mengambil file JAR kita di folder project

kita > deployed.

Page 98: ONLINE Buku Membuat Game J2ME Agate Academy

98

8. Setelah selesai mengunggah, kita akan berada pada page Distribution. Disini kita

akan memasukkan kompatibilitas game pada tipe handphone yang tersedia

(usahakan ada 1 device yang fully tested, jika fully tested tidak lolos QA maka

device lain pun akan gagal). Lalu memasukkan Negara dimana game kita akan

dipasarkan, terakhir kita akan memasukkan bahasa yang digunakan pada game

tersebut.

Page 99: ONLINE Buku Membuat Game J2ME Agate Academy

99

9. Langkah terakhir, kita Submit to QA. Disini kita akan menunggu tim Quality

Assurance Nokia untuk memeriksa game kita. Setelah submit, kita dapat melihat

progress QA kita.

10. Jika berhasil lolos pada QA, kita dapat melihat game kita di Nokia Store.

Contohnya seperti ini, http://bit.ly/KWUhBh, game Sexy Witch dari Agate Studio.

Page 100: ONLINE Buku Membuat Game J2ME Agate Academy

100

Page 101: ONLINE Buku Membuat Game J2ME Agate Academy

101

7 PENUTUP

Kami harap penjelasan yang ada di buku ini bisa membantu pembaca dalam

membuat mobile game, dan semoga bisa memberi pengalaman yang bermanfaat.

Jika Anda tertarik untuk mengetahui lebih lanjut tentang game development, baik

teknis atau non-teknis, Anda bisa kunjungi blog Agate Studio di

www.agatestudio.com/blog. Lalu jika tertarik untuk mengikuti berbagai pelatihan

Game Development, Anda bisa kunjungi website Agate Academy via

http://bit.ly/agateacademy.

Page 102: ONLINE Buku Membuat Game J2ME Agate Academy

102

LAMPIRAN A. MEMBUKA PROJECT PADA ECLIPSE PULSAR

Buku ini disertai dengan sebuah CD yang berisi file-file yang dibutuhkan untuk

mengikuti tutorial pada buku ini. Jika CD tidak tersedia, Anda bisa akses

http://bit.ly/agatebooks-game-j2me untuk mengunduh file-file yang dibutuhkan.

Pada folder “Source Code & Assets” terdapat beberapa file *.zip untuk setiap bab

pada bagian pemrograman.

Untuk membuka project di tiap file Anda perlu ekstrak file zip yang bersangkutan.

Page 103: ONLINE Buku Membuat Game J2ME Agate Academy

103

Buka Eclipse, lalu pilih File > New > MIDlet Project. Isi nama project sesuai kebutuhan

Anda. Pada bagian Contents, pastikan Anda memilih “Create project from existing

source”.

Page 104: ONLINE Buku Membuat Game J2ME Agate Academy

104

Lalu pilih folder hasil ekstrak yang sudah dibuat.

Page 105: ONLINE Buku Membuat Game J2ME Agate Academy

105

Jika berhasil, pada Eclipse akan muncul project baru dengan folder “res” dan “src”

yang sudah berisi file yang dibutuhkan.

Untuk menjalankan project, klik kanan pada nama project > Run As > Emulated Java

ME MIDlet.

Page 106: ONLINE Buku Membuat Game J2ME Agate Academy

106

Berikut adalah contoh hasil akhir dari bab 5.2.2.