jak-stik.ac.idjak-stik.ac.id/.../workshop_2_hari/modul_silverlight.docx · web viewdaftar isi....

DAFTAR ISI1.Sekilas tentang Web Games ....................................................................................................................................1

2.Web Games Development ............................................................ ...........................................................................2

3.Pengantar Silverlight ...............................................................................................................................................4

3.1. Fitur-fitur Silverlight ........................................................... ........................................................................4

3.2. Menjalankan Aplikasi Silverlight ................................................................................................................5

3.3. Mengembangkan Aplikasi Silverlight ........................................ .................................................................5

4.Persiapan Penggunaan Silverlight 4 ............................................... .........................................................................7

4.1. Kebutuhan Perangkat Keras ............................................................................................................................7

4.2. Kebutuhan Perangkat Lunak ................................................... ...................................................................7

4.3. Instalasi Microsoft Visual Studio 2010 .......................................................................................................7

4.4. Instalasi Silverlight 4 .......................................................... ........................................................................8

5.Let's Make Our Web Game! ....................................................................................................................................9

6.The First Steps ....................................................................................................................................................... 10

6.1. Membuat Project Silverlight ......................................................................................................................10

6.2. Memasukkan Aset Game ......................................................................................................................... 13

6.3. Mengatur Layout Game di Microsoft Expression Blend 4 RC .....................................................................14

6.4. Membuat Game Loop ............................................................................................................................... 17

6.5. Membuat Content Manager ......................................................................................................................19

7.Objek-objek Game ................................................................................................................................................. 23

7.1. Membuat Kapal .........................................................................................................................................23

7.2. Menggerakkan Kapal dengan Menggunakan Input Device ...................................................................... 25

7.3. Membuat Peluru ........................................................................................................................................28

7.4. Membuat Kapal yang Dapat Menembakkan Peluru ................................................................................. 30

8.Interaksi Antar Objek ............................................................................................................................................. 34

8.1. Deteksi Tabrakan antara Peluru dan Kapal ...............................................................................................34

8.2. Membuat Objek Penghalang .................................................................................................................... 35

9.Menampilkan Score.................................................................................................................................................40

10.Menambahkan Suara ke Game ............................................................................................................................ 42

1

1. SEKILAS TENTANG WEB GAMES

Web games adalah game yang dimainkan menggunakan web browser. Web games dapat berupa:

1.Game yang berbasis Dynamic HTMLGame ini dibangun dengan menggunakan gabungan dari CSS, JavaScript, dan Document Object Model (DOM). Kita hanya membutuhkan web browser kita untuk memainkan game semacam ini.Contoh game tipe ini adalah game Tetris ini: http://www.lutanho.net/play/tetris.html

2.Game yang berbasis plugin tertentuGame ini berbasis plugin tertentu, seperti Java, Flash, Silverlight, dan Unity. Kita harus melakukan instalasi plugin tertentu untuk memainkan game semacam ini. Contoh dari game tipe ini antara lain game pada portal game seperti: Hamster Rush ( http://www.kongregate.com/games/agate —studio/hamster -rush), Sort The Foobars (http://www.spritehand.com/silverlight/2.0/sortthefoobars/testpage.html) . Banyak game di Facebook juga merupakan game tipe ini, misalnya Typing Maniac ( http://apps.facebook.com/typing-maniac /), dan Kiri Kiri ( http://apps.facebook.com/kirikiri/).

3.Game yang berbasis server-side scriptGame ini dibangun dengan server-side scripting, dalam bahasa seperti PHP, ASP, Ruby, Perl, Python, dan Java. Game seperti ini biasanya hanya mengirim kode HTML untuk diinterpretasi. Beberapa game tipe ini menggunakan Ajax untuk memungkinkan user melihat respon langsung begitu mereka melakukan aksi tertentu dan untuk membuat game lebih menarik. Contoh game ini adalah: Mafia Wars (http://apps.facebook.com/inthemafia /).

2

2

2. WEB GAME DEVELOPMENTWeb games development adalah sebuah proses pembuatan perangkat lunak yang keluarannya berupa - web-based game. Orang yang terlibat dalam prosesnya disebut web games developer. Secara umum, proses web games development hampir sama dengan game development biasa.

Peran-peran yang ada pada sebuah proses game development antara lain, producer (yang bertugas mengelola tim, jadwal, progress, alokasi anggota tim, dsb.), designer (yang bertugas merancang konsep game, gameplay, struktur game, dan aturan dalam game), artist (yang bertugas membuat aset visual game dan bertanggung jawab terhadap aspek visual game), programmer (yang bertugas membuat perangkat lunak dari konsep dan aset yang telah dibuat oleh designer dan artist), level designer (yang bertugas membuat atau merancang level, tantangan, atau misi pada game), sound engineer (yang bertugas membuat aset audio game dan bertanggung jawab terhadap aspek audio game), dan tester (yang bertugas mencari kecacatan pada game sebagai sebuah perangkat lunak).

Sebuah proses web game development melibatkan tahap-tahap sebagai berikut:

1. Pre-productionTahap ini adalah tahap perencanaan proyek yang fokus pada ide dan konsep dan pembuatan game design document (dokumen perancangan game). Tujuan dari pengembangan konsep adalah untuk menghasilkan dokumen yang jelas dan mudah dimengerti. Game design document inilah yang menjadi pedoman dalam proses produksi game sampai akhir.

2. ProductionTahap ini adalah tahap utama pada proses game development, di mana hasil akhirnya berupa aset dan source code game. Secara umum, tahap ini dapat dibagi menjadi 3:

a.Design : tahap merancang isi dan aturan gameb.Programming : tahap memprogram game sehingga menghasilkan source code gamec.Art Production : tahap membuat aset visual game sehingga siap dipakai untuk game

'

Di antara tahap -tahap pada game development, tahap yang memiliki aspek reusability yang paling tinggi, adalah tahap programming. Sehingga, tahap programming yang paling mungkin untuk ditingkatkan produktivitasnya, antara lain dengan penggunaan game engine, library, atau framework yang sudah membungkus kegiatan-kegiatan umum yang dilakukan oleh programmer game ketika membuat game.

3

' Reusability: penggunaan ulang apa yang telah dibuat sebelumnya, misalnya kode tertentu di game A, digunakan kembali di game B

4

Salah satu platform untuk web games yang cukup populer adalah Microsoft Silverlight. Dengan Microsoft Silverlight, kita dapat membuat aplikasi yang kaya akan graphic experience yang mengagumkan, dengan demikian kita juga bisa membuat game dengan fitur grafis yang bagus. Silverlight adalah platform untuk membuat aplikasi web yang cross-platform dan cross-browser, sehingga semua orang dapat menjalankannya dengan mudah, cukup dengan melakukan instalasi plugin nya. Selain itu, sejak versinya yang ke 3, aplikasi Silverlight tidak hanya dapat berjalan pada browser, tetapi dapat berjalan di luar browser, menjadi serupa aplikasi desktop biasa. Mari kita lihat Silverlight lebih dekat pada bagian berikutnya.

5

4

3. PENGANTAR SILVERLIGHTMicrosoft Silverlight adalah implementasi dari .NET Framework yang cross-browser dan cross-platform untuk membangun media dan aplikasi yang interaktif melalui web. Silverlight menggabungkan kemampuan server, web, dan desktop, kemampuan managed code dan bahasa pemrograman dinamik, kemampuan pemrograman deklaratif dan tradisional, dan kemampuan dari Windows Presentation Foundation (WPF).

3.1 FITUR-FITUR SILVERLIGHTSilverlight menggabungkan beberapa teknologi sekaligus ke dalam sebuah platform sehingga memudahkan kita untuk memilih tools dan bahasa pemrograman yang sesuai dengan kebutuhan kita. Berikut adalah beberapa fitur Silverlight:

1. WPF dan XAMLSilverlight mencakup subset dari teknologi Windows Presentation Foundation (WPF), yang meningkatkan jumlah elemen yang dapat digunakan untuk membuat user interface (UI) pada web. WPF dapat digunakan untuk membuat grafis yang menakjubkan, animasi, media, dan aplikasi klien yang kaya akan graphical experience, meningkatkan apa yang dapat dihasilkan oleh HTML biasa. Sedangkan XAML menyediakan sintaks deklaratif untuk menciptakan suatu elemen pada aplikasi Silverlight, seperti contoh di bawah ini, kode di bawah ini menciptakan sebuah objek User Control dengan sebuah Canvas sebagai anaknya, dan sebuah Image sebagai anak dari Canvas tersebut.

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="ShootingGameSL.MainPage"Width="640" Height="480"><Canvas x:Name="LayoutRoot" Background="White">

<Image x:Name="bg" Height="480" Source="Content/bg.jpg" Stretch="Fill"Width="640"/>

</Canvas></UserControl>

2.JavaScript ExtensionsSilverlight menyediakan extensionuntuk JavaScript, bahasa scripting universal untuk web browser yang mempunyai akses ke elemen UI pada browser, termasuk kemampuan untuk bekerja bersama dengan elemen WPF.

7

3.Cross-browser dan cross-platform

8

9

Silverlight dapat dijalankan pada semua browser yang populer, seperti Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, dengan sama baiknya. Para pengembang aplikasi dapat mengembangkan aplikasinya tanpa harus khawatir terhadap jenis browser dan platform yang digunakan oleh pengguna aplikasinya.

4.Kemampuan untuk diintegrasi dengan aplikasi yang sudah adaSilverlight dapat diintegrasi dengan mudah dengan kode JavaScript dan ASP.NET AJAX untuk melengkapi fungsionalitas yang telah ada sebelumnya.

5.Akses ke model pemrograman .NET Framework dan tools-nyaAplikasi Silverlight dapat dibuat dengan menggunakan bahasa pemrograman dinamik seperti IronPython, demikian pula dengan bahasa pemrograman seperti C# dan Visual Basic. Kita dapat menggunakan tools seperti Visual Studio untuk membuat aplikasi Silverlight.

6.Mendukung koneksi ke internetSilverlight mendukung koneksi HTTP dengan menggunakan TCP. Kita dapat membuat koneksi ke WCF, SOAP, atau ASP.NET AJAX service dan menerima data XML, JSON, atau RSS.

7.Language-integrated Query (LINQ)Silverlight mendukung LINQ, yang memungkinkan kita untuk mengakses suatu database dengan menggunakan sintaks yang mirip dengan query akses database namun dengan menggunakan mekanisme tipe objek yang tegas bahasa pemrograman pada .NET Framework.

3..2 MENJALANKAN APLIKASI SILVERLIGHTAplikasi Silverlight berjalan pada browser (kecuali aplikasi Silverlight 3 ke atas yang sudah mendukungkemampuan untuk berjalan out-of-browser). Silverlight memungkinkan kita untuk menjalankan aplikasi kita pada semua browser, tanpa perlu membuat kode yang spesifik untuk browser tertentu.

Untuk menjalankan aplikasi Silverlight, pengguna aplikasi harus men-download plug-in Silverlight yang berukuran kecil untuk browser mereka. Plug-in ini gratis. Jika pengguna aplikasi belum mempunyai plug-in tersebut, maka mereka akan diminta untuk melakukan instalasi plug-in tersebut. Proses download dan instalasi hanya memakan waktu beberapa detik saja dan tidak membutuhkan interaksi apapun dengan user kecuali permission untuk melakukan instalasi O

3.3 MENGEMBANGKAN APLIKASI SILVERLIGHT

9

Kita dapat membuat aplikasi Silverlight dengan menggunakan bahasa pemrograman Visual Basic dan C#. Microsoft Visual Studio 2010 dan Microsoft Expression Blend 4 mendukung pengembangan aplikasi Silverlight 4 (kita dapat menggunakan Visual Studio dan Blend versi sebelumnya untuk mengembangkan aplikasi Silverlight versi-versi sebelumnya).

Kita dapat membuat halaman web yang menggunakan HTML dan elemen WPF dengan menggunakan Silverlight. Seperti HTML, XAML memungkinkan kita untuk membuat elemen UI pada aplikasi web kita dengan sintaks deklaratif, tapi dengan kemampuan yang lebih keren! O

10

7

4. PERSIAPAN PENGGUNAAN SILVERLIGHT 4Untuk menggunakan Silverlight 4, Anda perlu menggunakan Microsoft Visual Studio 2010. Untuk itu, sekarang kita akan melakukan instalasi Microsoft Visual Studio 2010 terlebih dahulu, sebelum melakukan instalasi Silverlight 4.

4.1. KEBUTUHAN PERANGKAT KERASKebutuhan perangkat keras untuk melakukan instalasi Microsoft Visual Studio 2010 dan Silverlight 4 adalah sebagai berikut:

- Komputer dengan CPU 1.6 GHz atau lebih- 1 G B RA M- 3 GB space kosong pada hard disk- Hard disk 5400 RPM- DirectX 9 - kartu grafis yang dapat menjalankan resolusi 1024 x 768 atau lebih- DVD-ROM drive

4.2. KEBUTUHAN PERANGKAT LUNAKKebutuhan perangkat lunak untuk melakukan instalasi Microsoft Visual Studio 2010 dan Silverlight 4 adalah sebagai berikut:

Sistem operasi: Windows 7, Windows Vista , Windows XP SP 3, Windows Server 2003, Windows Server 2008

Silverlight 4 hanya dapat digunakan menggunakan IDE Microsoft Visual Studio 2010

4.3. INSTALASI MICROSOFT VISUAL STUDIO 2010

Kita akan melakukan instalasi Microsoft Visual Studio 2010 dengan langkah-langkah sebagai berikut:

1.Download installer Microsoft Visual Studio 2010 di:http://www.microsoft.com/downloads/details.aspx?FamilylD=e2a1a098 -995e -4468 -816d7fdbe0a64f38£tdisplaylang=en

2.Ikuti petunjuk instalasi sampai Microsoft Visual Studio 2010 selesai di-install pada komputer Anda.

12

8

4.4. INSTALASI SILVERLIGHT 4Kita akan melakukan instalasi Silverlight 4 dengan langkah-langkah sebagai berikut:

1.Download installer Microsoft Silverlight 4 di:http://download.microsoft.com/download/5/B/4/5B46BF8A -9350 - 49D5 -B1E7- 7789818FBF41/Silverlight4_Tools.exe

2.Ikuti petunjuk instalasi sampai Microsoft Silverlight 4 selesai di-install pada komputer Anda.

13

9

5. RANCANGAN PEMBUATAN GAME

Sekarang saatnya kita membuat sebuah web game. Game yang akan kita buat ini ber-genre shooting. Game ini melibatkan dua buah kapal yang saling menembak, di mana satu kapal terletak di bawah dan kapal yang lain terletak di atas. Di antara kedua kapal akan ada objek-objek penghalang yang dapat menghalangi datangnya peluru, sehingga akan menyulitkan kedua kapal untuk menembakkan pelurunya ke kapal lawannya.

Kita akan membagi pembuatan game ini ke dalam tahap-tahap kecil sebagai berikut:

1.Membuat project Silverlight di Microsoft Visual Studio 2010 atau Microsoft Expression Blend 4 RC

2.Mengatur layout game di Microsoft Expression Blend 4 RC3.Membuat game loop4.Membuat Content Manager5.Membuat kapal6.Menggerakkan kapal dengan menggunakan input device

7.Membuat peluru8.Membuat kapal yang dapat menembakkan peluru9.Deteksi tabrakan antara peluru dan kapal10.Membuat objek penghalang11.Menampilkan score12.Menambahkan suara ke game

Setiap tahapan di atas akan dijabarkan secara lebih detail pada bagian-

bagian selanjutnya. Let's begin the most interesting part now! AA

14

10

6. THE FIRST STEPS

Sebelum memulai pembuatan game, ada baiknya kita menyiapkan sebuah folder tertentu, misalnya di D:\Documents\My Games\ untuk menaruh semua file yang dibutuhkan dalam pembuatan game kita nantinya.

Lalu, kita juga perlu men-download file aset yang dibutuhkan untuk game kita di http://www.link.com/. Extract file zip.zip dan simpanlah hasil ekstraksi tersebut di dalam folder Content dalam folder yang telah kita siapkan tadi. Sehingga lokasi file aset kita adalah D:\Documents\My Games\Content.

6.1. MEMBUAT PROJECT SILVERLIGHT

Karena kita akan membuat game dengan menggunakan Silverlight 4, kita dapat membuat project dengan menggunakan IDE Microsoft Visual Studio 2010 atau menggunakan tools Microsoft Expression Blend 4 RC. Anda dapat memilih salah satu dari tools tersebut.

MEMBUAT PROJECT SILVERLIGHT PADA MICROSOFT VISUAL STUDIO 2010

Berikut adalah langkah-langkah untuk membuat project Silverlight dengan menggunakan Microsoft Visual Studio 2010:

1.Buka Microsoft Visual Studio 20102.Pilih File 4 New 4 Project...3.Pilih bahasa Visual C# dan template project Silverlight Application4.Isilah nama project dan lokasi project sesuai dengan yang Anda inginkan, misalnya:

Name : ShootingGameSLLocation : D:\Documents\MyGamesSolution Name : ShootingGameSL

15

Gambar 1 Membuat Project Silverlight pada Microsoft Visual Studio 2010

5.Pilih OK

MEMBUAT PROJECT SILVERLIGHT PADA MICROSOFT EXPRESSION BLEND 4 RC

Berikut adalah langkah-langkah untuk membuat project Silverlight dengan menggunakan Microsoft Expression Blend 4 RC:

1.Buka Microsoft Expression Blend 4 RC2.Pilih File 4 New Project...3.Pilih tipe project Silverlight 4 Silverlight Application4.Isilah nama project dan lokasi project sesuai dengan yang Anda inginkan, misalnya:

Name : ShootingGameSLLocation : D:\Documents\My Games

16

Gambar 2 Membuat Project Silverlight pada Microsoft Expression Blend 4 RC

5. Pilih OK

KOMPONEN PROJECT SILVERLIGHT

Setelah project ShootingGameSL berhasil dibuat, pada project tersebut terdapat beberapa komponen antara lain sebagai berikut:

Gambar 3 Komponen Project Silverlight

1.Properties : elemen proyek yang berisi informasi penting terkait proyek, misalnya tipe hasil kompilasi proyek (library, aplikasi Windows, dsb.), lokasi tempat hasil kompilasi berada, dan lain sebagainya.

2.References : library referensi yang diperlukan game.

17

3.App.xaml : kelas representasi aplikasi Silverlight yang merupakan titik awal aplikasi Silverlight berjalan (seperti main program pada program biasa).

18

4. MainPage.xaml : halaman aplikasi kosong yang otomatis dibuat ketika project dibuat. Jika project langsung dijalankan, halaman ini yang akan ditampilkan. Halaman ini adalah layar game kita, jadi nantinya kita akan menambahkan objek-objek game pada halaman ini.

6.2 MEMASUKKAN ASET GAME

Kita akan memasukkan aset game kita dengan cara sebagai berikut:

1.Karena kita akan menggunakan Microsoft Expression Blend 4 RC untuk tahap selanjutnya, kita buka project dengan menggunakan Microsoft Expression Blend 4 RC (jika Anda memilih untuk membuat project Anda dengan menggunakan Microsoft Expression Blend 4 RC, Anda tidak perlu membuka ulang project Anda).

2.Kita akan menaruh semua file aset game ke dalam folder Content pada project kita. Oleh karena itu, pada window Projects, klik kanan pada project kita, pilih Add New Folder. Beri nama Content pada folder tersebut.

3.Pada window Projects, klik kanan pada folder Content, pilih Add Existing Item...4.Jelajahi folder tempat Anda menaruh aset game yang telah di-download, lalu pilih

semua file dalam folder tersebut

Gambar 4 File Aset Game

5.Pilih Open.6.Semua file aset yang baru saja kita tambahkan dapat dilihat pada window Projects.

19

Gambar 5 File Aset Game pada Window Projects

6.3 MENGATUR LAYOUT GAME DI MICROSOFT EXPRESSION BLEND 4 RC

Dengan adanya konsep XAML dan editornya, Microsoft Expression Blend, kita dapat dengan mudah mengatur layout game kita. Berikut adalah langkah-langkah pengaturan layout game shooting kita:

1.Buka halaman utama game kita, MainPage.xaml, dengan menggunakan Design View.

Ada 3 macam view yang dapat digunakan untuk melihat isi dokumen XAML:1. Design ViewTipe view untuk melihat layout yang di-generate dari kode XAML dokumen yangsedang dibuka2. XAML ViewTipe view untuk melihat kode XAML dokumen yang sedang dibuka3. Split View

Tipe view untuk melihat layout dan kode XAML secara bersamaan

2.Pada window Objects and Timeline, kita dapat melihat objek-objek yang terdapat pada dokumen XAML yang sedang dibuka. Dokumen MainPage.xaml kita sekarang hanya terdiri dari sebuah objek Grid bernama LayoutRoot.

20

Gambar 6 Window Objects and Timeline

Grid LayoutRoot ini akan menjadi kontainer untuk semua objek yang akan kita ciptakan untuk dokumen MainPage.xaml. Secara default, ketika kita membuat dokumen XAML baru, kontainer LayoutRoot ini berupa objek bertipe Grid. Namun, kita dapat mengubah tipe kontainer ini sesuai dengan kebutuhan kita. Berikut adalah tipe-tipe kontainer layout yang tersedia pada Silverlight:

a.Grid : tipe kontainer yang mengatur layout sebagai kumpulan baris dan kolom

b.StackPanel : tipe kontainer yang mengatur layout objek-objek anak dalam sebuah urutan yang dapat diarahkan secara horizontal atau vertikal

c.Canvas : tipe kontainer yang memungkinkan kita untuk mengatur posisi objek anak menggunakan kordinat yang relatif terhadap posisi kontainer

d.ScrollViewer : tipe kontainer yang dapat di-scrolle.Border : tipe kontainer yang memungkinkan kita untuk membuat

garis outline dan/atau background untuk objek-objek anaknya

f.ViewBox : tipe kontainer yang dapat menyesuaikan ukuran dan skala objek anak dengan ukuran kontainer

Dari 6 tipe kontainer yang disediakan Silverlight, kontainer yang paling cocok digunakan untuk merepresentasikan sebuah layar game adalah tipe Canvas, karena hanya dengan Canvas kita dapat dengan leluasa menentukan posisi setiap objek-objek anak menggunakan kordinat tertentu.

21

Oleh karena itu, kita akan mengganti tipe kontainer LayoutRoot dari Grid menjadi Canvas. Caranya, klik kanan objek LayoutRoot pada window Objects and Timeline, pilih Change Layout Type 4 Canvas.

3. Pastikan ukuran MainPage.xaml adalah 640x480 dengan mengeceknya pada window Properties, kategori Layout, atribut Width = 640 dan Height = 480.

22

4.Drag bg.jpg dari window Projects ke halaman MainPage.xaml. Aturlah posisi bg.jpg sehingga memenuhi halaman tersebut.

5.Drag ship1.png, ship2.png, obstacle1.png, obstacle2.png, dan obstacle3.png ke halaman MainPage.xaml dan aturlah posisinya menjadi seperti Gambar 7.

Gambar 7 Layout Game

6. Beri nama objek-objek yang baru kita atur posisinya tersebut dengan mengisi atribut Name pada window Properties, sebagai berikut:

a.ship1.png :ship1b.ship2.png : ship2c.obstacle1.png : obstacle1d.obstacle2.png : obstacle2e.obstacle3.png : obstacle3

7. Tambahkan 2 buah TextBlock untuk menuliskan score masing-masing kapal, dengan memilih TextBlock pada window Tools ke halaman MainPage.xaml. Beri nama scoreText1 untuk TextBlock yang diletakkan di samping kapal bawah dan scoreText2 untuk TextBlock yang diletakkan di samping kapal atas.

23

Gambar 8 TextBlock pada Window Tools

8. Aturlah posisi dan ukuran kedua TextBlock kita dan ubahlah warnanya melalui window Properties sehingga layout game kita sekarang menjadi seperti Gambar 9.

Gambar 9 Layout Game dengan 2 TextBlock Score

9.CTRL+S untuk menyimpan file MainPage.xaml10.Tekan F5, dan game kita sudah mempunyai layout persis seperti yang sudah kita rancang! O

6.4. MEMBUAT GAME LOOPSebuah game pasti memiliki sebuah Same loop. Game loop adalah sebuah loop yang terus-menerus berjalan dari awal game mulai dijalankan sampai game selesai dijalankan. Loop ini biasanya terdiri dari pemanggilan fungsi update logika dan algoritma game dan fungsi penggambaran (render) game ke layar.

Pada Silverlight, fungsi penggambaran telah diambil alih oleh runtime Silverlight, sehingga kita tidak perlu ambil pusing terhadap pemanggilan fungsi untuk menggambar setiap objek pada setiap selang waktu game berjalan. Kita hanya cukup menentukan objek mana yang sedang ada di layar dan mana yang sedang tidak ada di layar, dengan menambahkannya pada kontainer (Grid, Canvas, dll) aplikasi Silverlight.

24

Namun fungsi update logika dan algoritma game tetap perlu dipanggil oleh game kita. Oleh karena itu, kita akan membuat Same loop untuk game kita dengan langkah-langkah sebagai berikut:

1.Mulai dari bagian ini, kita akan mulai codinS O Jadi akan lebih nyaman jika jika menggunakan Microsoft Visual Studio 2010. Oleh karena itu, kita tutup Microsoft Expression Blend 4 RC, lalu buka kembali solution project kita dengan menggunakan Microsoft Visual Studio 2010.

2.Buka file MainPage.xaml.cs, lalu tambahkan potongan kode berikut pada kumpulan pernyataan usinS di awal file. Pernyataan usinS digunakan supaya kita dapat menggunakan kelas-kelas yang berada pada lingkup tertentu, misalnya dalam hal ini lingkup System.Windows.Threading.

MainPage.xaml.csusing System.Windows.Threading;

3.Tambahkan variabel-variabel berikut menjadi elemen dari kelas MainPage: - gameTimer : timer yang dijalankan selama game dijalankan - lastTime : waktu Some loop terakhir dieksekusi- now : waktu sekarang- elapsed : selisih waktu sekarang dengan waktu Some loop terakhir dieksekusi, dalam

detik

MainPage.xaml.csprivate static DispatcherTimer gameTimer; private static DateTime lastTime; private static DateTime now; private static float elapsed;

4.Kita akan melakukan inisialisasi nilai atribut-atribut yang sudah kita deklarasi dan menambahkan fungsi penanganan even untuk gameTimer, ketika gameTimer telah berjalan selama selang waktu tertentu. Lalu kita jalankan gameTimer kita.Tambahkan potongan kode berikut pada fungsi konstruktor MainPage(), setelah pemanggilan fungsi InitializeComponent():

MainPage.xaml.cs - MainPage()

25

//game-loop-variables-related lastTime = DateTime.Now;gameTimer = new DispatcherTimer(); gameTimer.Interval = TimeSpan.Zero; gameTimer.Tick += new EventHandler(mainGameLoop); gameTimer.Start();

5.Untuk setiap Some loop, yakni setiap pemanggilan fungsi mainGameLoop, kita mengubah nilai atribut now, elapsed, dan lastTime, untuk mengetahui selang waktu yang telah terlewati dari Some loop terakhir sampai Some loop yang sekarang.Tambahkan fungsi mainGameLoop() dan update() pada kelas MainPage:

26

MainPage.xaml.csprivate void mainGameLoop(object sender, EventArgs e) {

now = DateTime.Now;elapsed = (float)(now - lastTime).TotalSeconds; lastTime = now;

update(elapsed);}

private void update(float elapsed) {}

6. Tekan F7 untuk build project.

6.5 MEMBUAT CONTENT MANAGER

Pada Silverlight, untuk melakukan load aset secara programatik melalui kode C# (bukan melalui XAML), kita memerlukan suatu mekanisme load file aset yang telah dikompres bersama dengan program aplikasi Silverlight, ketika sebuah project Silverlight di-build.

Ada beberapa macam aksi build yang dilakukan pada file aset ketika sebuah project Silverlight di-build, antara lain: Content, Resource, Compile, dan lain-lain. Content Manager yang akan kita buat dapat digunakan untuk me-load semua file aset yang di-build sebagai Resource. Oleh karena itu, kita akan mengubah Build Action semua file aset kita menjadi Resource, dengan cara klik kanan pada tiap file aset, lalu ubah nilai atribut Build Action pada window Properties menjadi Resource.

27

Gambar 10 Mengubah Build Action File Aset

Sekarang kita akan mulai membuat Content Manager kita sendiri, dengan langkah-langkah sebagai berikut:

1.Klik kanan project ShootingGameSL pada Solution Explorer, pilih Add 4 New Item...

Gambar 11 Membuat Kelas ContentManager pada Project ShootingGameSL

2.Tambahkan potongan kode berikut pada kumpulan pernyataan using di awal file:

28

ContentManager.cs

using System.IO;using System.Windows.Resources; using System.Windows.Media.Imaging;

3. Tambahkan fungsi-fungsi berikut pada kelas ContentManager:- GetStream : fungsi untuk mengambil data dari file aset yang telah di-

package bersama dengan project

- GetBitmap : fungsi untuk mengambil data gambar dari file gambar yang telah di package bersama dengan project

- GetFontSource : fungsi untuk mengambil data font (jenis huruf) dari file font yang telah di-package bersama dengan project

ContentManager.cs

public static Stream GetStream(string _relativeUri) {string name = System.Reflection.Assembly.GetCallingAssembly().FullName; name = name.Substring(0, name.IndexOf(','));StreamResourceInfo res = Application.GetResourceStream(new Uri(name +";component/" + _relativeUri, UriKind.RelativeOrAbsolute));if (res == null){res = Application.GetResourceStream(new Uri(_relativeUri,UriKind.RelativeOrAbsolute));}if (res != null){return res.Stream;return null;}public static BitmapImage GetBitmap(string _relativeUri){Stream s = GetStream(_relativeUri);if (s == null) return null;using (s){BitmapImage bmp = new BitmapImage();bmp.SetSource(s);return bmp;}

29

ContentManager.cs

public static FontSource GetFontSource(string _relativeUri){

Stream s = GetStream(_relativeUri);if (s == null){

return null;}else{

FontSource fontSource = new FontSource(s);return fontSource;

}}

4. Tekan F7 untuk build project.

Sekarang ContentManager kita sudah siap digunakan untuk me-load semua file aset yang di-build sebagai Resource.

30

7. OBJEK-OBJEK GAMEPada game ini, ada 2 objek utama yang berperan, yaitu kapal dan peluru. Kapal adalah "pemeran utama" game kita, jadi pemain akan menggerakkan kapal ini di game. Peluru adalah objek yang ditembakkan oleh kapal.

7.1. MEMBUAT KAPALSekarang kita akan membuat kelas representasi sebuah kapal pada game. Kelas ini akan menyimpan informasi -informasi yang dibutuhkan oleh sebuah kapal, termasuk objek yang digambar pada game, yaitu objek yang kita ciptakan ketika kita mengatur posisi kapal di Blend.

1.Tambahkan file kelas Ship.cs pada project kita.2.Pertama-tama, kita akan "menghubungkan" gambar kapal yang ada di layout

game dengan kelas Ship. Tambahkan variabel dan properti berikut menjadi elemen kelas Ship:- ParentPage : halaman tempat kapal berada- shipDrawableObject : objek yang digambar sebagai kapal- X : nilai X kordinat posisi kapal, diambil dari nilai

properti Canvas.Left untuk objek kapal yang kita taruh di halaman XAML

- Y : nilai Y kordinat posisi kapal, diambil dari nilai properti Canvas.Top untuk objek kapal yang kita taruh di halaman XAML

- Direction : arah hadap kapal, 0 berarti kapal menghadap ke atas, 1 berarti kapal menghadap ke bawah

Ship.cs

31

public MainPage ParentPage;private FrameworkElement shipDrawableObject;public double X{

get{

return Canvas.GetLeft(shipDrawableObject);}set{

Canvas.SetLeft(shipDrawableObject, value);}

}

32

Ship.cspublic double Y{

get{

return Canvas.GetTop(shipDrawableObject);}set{

Canvas.SetTop(shipDrawableObject, value);}

}public int Direction;

3.Kita melakukan inisialisasi nilai atribut sesuai dengan parameter fungsi konstruktor Ship (). Tambahkan fungsi konstruktor Ship() untuk kelas Ship:

Ship.cspublic Ship(MainPage page, FrameworkElement drawableObject , int direction){

ParentPage = page;shipDrawableObject = drawableObject;Direction = direction;

}

4.Walaupun gambar kapal sudah muncul di game kita berkat hasil layouting yang kita lakukan pada Blend, informasi mengenai objek kapal pada game masih belum ada pada MainPage.xaml. Oleh karena itu, kita akan kembali ke MainPage.xaml, untuk menambahkan beberapa informasi mengenai kapal-kapal kita. Tambahkan atribut berikut menjadi elemen kelas MainPage: - NUM—SHIPS : atribut konstan yang menyatakan banyaknya kapal dalam game- SHIP—NAME : atribut konstan yang menyatakan nama gambar kapal yang kita

berikan pada halaman XAML- Ships : kumpulan kapal yang ada pada game- i : integer serba guna, biasanya dipakai untuk indeks

MainPage.xaml.cspublic readonly static int NUM_SHIPS = 2;public readonly static string[] SHIP_NAME = new string[]{

"ship1","ship2"

};

33

public Ship[] Ships; private int i;

34

5.Pada fungsi konstruktor MainPage(), tambahkan baris kode berikut untuk inisialisasi atribut atribut yang sudah kita deklarasi:

MainPage.xaml.cs - MainPageo//shipsShips = new Ship[NUM_SHIPS];for (i = 0; i < NUM_SHIPS; i++){

Ships[i] = new Ship(this, (FrameworkElement)FindName(SHIP_NAME[i]), i);}

6.Tekan F5 untuk melihat hasilnya, tetapi kita tidak akan melihat perubahan dibandingkan dengan hasil kompilasi project kita yang terakhir kali. Namun kita tahu bahwa game kita sudah mempunyai informasi mengenai kapal pada game

7.2. MENGGERAKKAN KAPAL DENGAN INPUT DEVICE

Sekarang kita akan mulai membuat aspek interaktif dari game kita, yaitu dengan membuat kapal dapat bergerak ketika pemain menekan suatu tombol pada keyboard.

1.Tambahkan atribut berikut menjadi elemen kelas Ship:- SPEED : atribut konstan yang menyatakan kecepatan gerak kapal- IsMovingLeft : atribut yang menyatakan apakah kapal sedang bergerak ke kiri- IsMovingRight : atribut yang menyatakan apakah kapal sedang bergerak ke kanan

Ship.csreadonly static int SPEED = 100;

public bool IsMovingLeft; public bool IsMovingRight;

2.Kapal kita akan bergerak ke kiri atau ke kanan tergantung oleh atribut IsMovingLeft dan IsMovingRight. Jika IsMovingLeft bernilai true, maka nilai X kapal akan dikurangi sebanyak SPEED dikalikan elapsed. Dan jika IsMovingRight bernilai true, maka nilai X kapal akan ditambah sebanyak SPEED dikalikan elapsed. Dengan demikian kapal akan bergerak sejauh nilai SPEED jika kapal bergerak selama 1 detik.Kita implementasi kelakuan kapal ini dalam fungsi Update():

35

Ship.cspublic void Update(float elapsed){

if (IsMovingLeft){

X -= SPEED * elapsed;}else if (IsMovingRight){

X += SPEED * elapsed;}

}

3.Pada MainPage.xaml.cs, kita panggil fungsi Update() Ship pada fungsi update() MainPage.xaml.cs:

MainPage.xaml.cs - update()for (i = 0; i < NUM_SHIPS; i++) {

Ships[i].Update(elapsed);}

4.Untuk keperluan penanganan input, kita akan menggunakan event pada MainPage yang sudah disediakan oleh Silverlight. Event yang kita gunakan adalah event ketika terjadi even tombol keyboard ditekan (KeyDown) dan ketika even tombol keyboard dilepaskan setelah ditekan (KeyUp).Mari kita tambahkan baris kode berikut pada fungsi konstruktor MainPage():

MainPage.xaml.cs - MainPage()//input handlingKeyDown += new KeyEventHandler(MainPage_KeyDown); KeyUp += new KeyEventHandler(MainPage_KeyUp);

5.Setelah kita menentukan fungsi event handler untuk event KeyDown dan KeyUp, yaitu MainPage_KeyDown() dan MainPage_KeyUp(), kita akan mendefinisikan apa yang dilakukan fungsi-fungsi tersebut.Pada fungsi MainPage_KeyDown(), kita akan melakukan manipulasi terhadap nilai atribut IsMovingLeft dan IsMovingRight, tergantung tombol apa yang sedang dalam keadaan ditekan. Kita akan membuat kapal bawah bergerak ketika kita menekan tombol A (bergerak ke kiri) dan D (bergerak ke kanan), dan kapal atas bergerak ketika kita menekan tombol panah kiri (bergerak ke kiri) dan panah kanan (bergerak ke kanan). Dengan demikian, misalnya jika

36

tombol A ditekan, atribut IsMovingLeft kapal bawah akan bernilai true, dan pada fungsi Ship.Update(), jika IsMovingLeft bernilai true, kapal akan bergerak ke kiri. Tambahkan kedua fungsi tersebut ke kelas MainPage:

MainPage.xaml.csvoid MainPage_KeyDown(object sender, KeyEventArgs e){

//ship 1if (e.Key == Key.A){

Ships[0].IsMovingLeft = true;}else if (e.Key == Key.D){

Ships[0].IsMovingRight = true;}//ship 2if (e.Key == Key.Left){

Ships[1].IsMovingLeft = true;}else if (e.Key == Key.Right){

Ships[1].IsMovingRight = true;}

}

void MainPage_KeyUp(object sender, KeyEventArgs e){

//ship 1if (e.Key == Key.A){

Ships[0].IsMovingLeft = false;}else if (e.Key == Key.D){

Ships[0].IsMovingRight = false;}//ship 2if (e.Key == Key.Left){

Ships[1].IsMovingLeft = false;}else if (e.Key == Key.Right){

Ships[1].IsMovingRight = false;}

}

38

6. Tekan F5 untuk melihat bagaimana kapal-kapal kita sekarang sudah bisa digerakkan dengan menggunakan keyboard!

7.3 MEMBUAT PELURUSekarang kita akan membuat peluru yang dapat ditembakkan oleh kedua kapal kita. Peluru untuk kedua kapal akan menggunakan file gambar yang sama. Karena posisi peluru berubah-ubah tergantung posisi kapal penembaknya dan jumlah peluru tidak dapat ditentukan, kita tidak melakukan layouting peluru pada tahap pembuatan layout game. Dengan demikian cara pembuatan kelas representasi peluru akan sedikit berbeda dari kelas Ship.

1.Tambahkan file Bullet.cs pada project kita.2.Tambahkan variabel dan properti berikut menjadi elemen kelas Bullet:

- BULLET_POS_OFFSET_SHIP_X : atribut konstan yang menentukan jarak antara nilai X kordinat posisi awal peluru dengan nilai X kordinat posisi kapal penembaknya

- BULLET_POS_OFFSET_SHIP_Y : atribut konstan yang menentukan jarak antara nilai Y kordinat posisi awal peluru dengan nilai Y kordinat posisi kapal penembaknya

- SPEED : atribut konstan yang menentukan kecepatan gerak peluru

- ParentShip : kapal penembak peluru- BulletDrawableObject : objek yang digambarkan sebagai peluru pada halaman

XAML- X : nilai X kordinat posisi peluru- Y : nilai Y kordinat posisi peluru- Direction : nilai yang menyatakan arah gerak peluru, 0

berarti peluru bergerak ke atas, 1 berarti peluru bergerak ke bawah

Bullet.cs

readonly static float BULLET_POS_OFFSET_SHIP_X = 35; readonly static float BULLET_POS_OFFSET_SHIP_Y = 80; readonly static float SPEED = 400;

public Ship ParentShip;public FrameworkElement BulletDrawableObject;

39

}

} else {

}

Bullet.cspublic double X{

get{

return Canvas.GetLeft(BulletDrawableObject);}set{

Canvas.SetLeft(BulletDrawableObject, value);}

}public double Y{

get{

return Canvas.GetTop(BulletDrawableObject);}set{

Canvas.SetTop(BulletDrawableObject, value);}

}public int Direction;

3. Kita melakukan inisialisasi nilai atribut pada fungsi konstruktor Bullet() dan mendefinisikan perilaku peluru yang bergerak ke atas atau ke bawah tergantung nilai Direction dengan membuat fungsi Update().Berikut adalah fungsi konstruktor dan fungsi Update() kelas Bullet:

Bullet.cspublic Bullet(Ship ship, System.Windows.Media.Imaging.BitmapImage texture) {

ParentShip = ship;BulletDrawableObject = new Image();

((Image)BulletDrawableObject).Source = texture;Direction = ship.Direction;X = ship.X + BULLET_POS_OFFSET_SHIP_X;Y = ship.Y + BULLET_POS_OFFSET_SHIP_Y;if (Direction == 0) {

Y = ship.Y;

Y = ship.Y + BULLET_POS_OFFSET_SHIP_Y;

40

Bullet.cspublic void Update(float elapsed){

if (Direction == 0){

Y -= SPEED * elapsed;}else{

Y += SPEED * elapsed;}

}

7.4. MEMBUAT KAPAL YANG DAPAT MENEMBAKKAN PELURU

Setelah kita membuat kelas Bullet yang merupakan representasi dari peluru pada game, kita dapat membuat kapal kita menembakkan peluru tersebut dengan cara sebagai berikut:

1.Tambahkan variabel berikut pada kelas MainPage:- BulletTexture : data gambar peluru

MainPage.xaml.cspublic System.Windows.Media.Imaging.BitmapImage BulletTexture;

2.Kita melakukan inisialisasi atribut BulletTexture dengan melakukan load gambar menggunakan Content ManaSer yang sudah kita buat. Tambahkan potongan kode berikut ke dalam fungsi konstruktor MainPage:

MainPage.xaml.cs - MainPage()//bulletBulletTexture = ContentManager.GetBitmap("Content/bullet.png");

3.Tambahkan atribut berikut ke dalam kelas Ship:- UPDATE—INTERVAL : selang waktu minimum antara dua buah

peluru yang ditembakkan secara berurutan

41

- IsShooting : atribut yang menyatakan apakah kapal dalam keadaan menembak

- Bullets : kumpulan peluru yang dikeluarkan oleh kapal- timeSinceLastUpdate : total detik yang telah berlalu sejak Same loop terakhir- i, j : variabel serba guna, biasanya digunakan untuk indeks

42

Ship.cspublic readonly static float UPDATE_INTERVAL = 0.33f; public bool IsShooting;public System.Collections.Generic.List<Bullet> Bullets; private float timeSinceLastUpdate = UPDATE_INTERVAL; private int i, j;

4.Kita melakukan inisialisasi Bullets dengan menambahkan potongan kode berikut ke dalam fungsi konstruktor Ship:

Ship.cs - ShipoBullets = new System.Collections.Generic.List<Bullet>();

5.Kita membutuhkan fungsi untuk menembakkan peluru dari kapal dan fungsi yang menyatakan bahwa kapal tidak sedang dalam keadaan menembak. Kedua fungsi ini melakukan manipulasi variabel IsShooting. Jika kita ingin kapal kita menembakkan peluru, kita memasukkan nilai true pada variabel tersebut.Tambahkan fungsi berikut ke dalam kelas Ship:

Ship.cspublic void Shoot(){

IsShooting = true;}

public void NotShoot(){

IsShooting = false;timeSinceLastUpdate = UPDATE_INTERVAL;

}

6.Setiap Some loop, kita melakukan pengecekkan apakah kapal dalam keadaan menembak. Jika ya, kita mengecek apakah selang waktu minimum untuk sebuah peluru baru ditembakkan lagi telah terpenuhi atau belum (timeSinceLastUpdate >= UPDATE—INTERVAL). Jika sudah, saatnya kita menambah peluru baru ke dalam list Bullets dan menambahkan gambar peluru ke dalam kontainer halaman game kita.Semua ini kita lakukan dalam fungsi Update() pada kelas Ship:

43

Ship.cs - Update()if (IsShooting){

if (timeSinceLastUpdate >= UPDATE_INTERVAL){

Bullet bullet = new Bullet(this, ParentPage.BulletTexture);Bullets.Add(bullet);

ParentPage.LayoutRoot.Children.Add(bullet.BulletDrawableObject);

timeSinceLastUpdate = 0;}else{

timeSinceLastUpdate += elapsed;}

}

//bullets updatefor (i = 0; i < Bullets.Count; i++) {

Bullets[i].Update(elapsed);}

7.Kita harus menjamin bahwa setiap peluru yang sudah berada di luar layar akan dihapus dari list peluru Bullets dan dihapus dari kontainer halaman game, agar performansi game tetap terjaga. Pada Bullet.cs, tambahkan potongan kode berikut ke dalam fungsi Update():

Bullet.cs - Update()if (Y <= 0 ||

Y >= ParentShip.ParentPage.Height){

ParentShip.Bullets.Remove(this);

ParentShip.ParentPage.LayoutRoot.Children.Remove(this.BulletDrawableObject);}

8.Sekarang kita tambahkan kode untuk penanganan input menembak. Kita akan menggunakan tombol W untuk kapal bawah menembak dan tombol panah bawah untuk kapal atas menembak. Pada MainPage.xaml.cs, tambahkan potongan kode berikut ke dalam fungsi MainPage_KeyDown():

44

MainPage.xaml.cs - MainPage_KeyDownoif (e.Key == Key.W){

Ships[0].Shoot();}if (e.Key == Key.Down){

Ships[1].Shoot();}

9.Lalu, setiap tombol W atau tombol panah bawah dilepaskan, kapal kita berhenti menembak dengan memanggil fungsi NotShoot(). Pada MainPage.xaml.cs, tambahkan potongan kode berikut ke dalam fungsi MainPage_KeyUp():

MainPage.xaml.cs - MainPage_KeyUpoif (e.Key == Key.W){

Ships[0].NotShoot();}if (e.Key == Key.Down){

Ships[1].NotShoot();}

10. Tekan F5 untuk mencoba menembakkan peluru dari kapal-kapal kita O

45

8. INTERAKSI ANTAR OBJEKPada bagian ini kita akan membuat setiap objek dalam game dapat berinteraksi satu sama lain.

8.1. INTERAKSI TABRAKAN ANTARA PELURU DAN KAPAI.Deteksi tabrakan (collision detection) adalah suatu teknik yang digunakan untuk menentukan apakah sebuah objek bertabrakan/berhimpitan dengan objek lain.

Pada game kita, deteksi tabrakan diperlukan untuk menentukan apakah peluru dari satu kapal mengenai kapal lainnya, dengan demikian akan menambah score bagi kapal penembak peluru. Kita akan melakukan deteksi tabrakan antara peluru dan kapal dengan cara sebagai berikut:

1.Kita akan menambahkan fungsi deteksi tabrakan sederhana pada kelas Bullet. Fungsi ini bernama IsCollide() yang mengembalikan true jika peluru bertabrakan dengan sebuah objek dengan posisi dan radius tertentu. Fungsi ini menggunakan rumus untuk menentukan apakah sebuah titik ada di dalam lingkaran atau tidak. Jika jarak titik dan pusat lingkaran lebih kecil dari hasil kuadrat radius lingkaran, maka titik tersebut berada di dalam lingkaran. Kita merepresentasikan peluru menjadi sebuah titik, dan kapal menjadi sebuah lingkaran. Sehingga jika titik berada di dalam lingkaran, maka peluru bertabrakan dengan kapal.Pada Bullet.cs, tambahkan fungsi deteksi tabrakan berikut:

Bullet.cspublic bool IsCollide(double x, double y, float radius){

if (Math.Sqrt((X - x) * (X - x) + (Y - y) * (Y - y)) <= radius){

return true;}else{

return false;}

}

2.Kita membutuhkan fungsi IsCollide() yang sudah kita buat untuk menentukan apakah peluru dari kapal yang satu berhasil mengenai kapal yang lainnya. Oleh karena itu, kita akan menambah sebuah atribut pada kelas Ship yang menyatakan radius dari kapal dan sebuah fungsi lagi, juga pada kelas Ship, yaitu

47

fungsi yang bertugas untuk mengecek apakah peluru dari kapal lainnya berhimpitan dengan kapal tersebut.Pada Ship.cs, tambahkan fungsi berikut:

48

Ship.cs

readonly static float RADIUS = 50;

private void CheckCollisionWithBullets(){

for (i = 0; i < ParentPage.Ships.Length; i++){

if (ParentPage.Ships[i] != this){

for (j = 0; j < ParentPage.Ships[i].Bullets.Count; j++){

if (ParentPage.Ships[i].Bullets[j].IsCollide(X, Y, RADIUS)){

ParentPage.LayoutRoot.Children.Remove(ParentPage.Ships[i].Bullets[j].BulletDrawableObject);

ParentPage.Ships[i].Bullets.RemoveAt(j);}

}}

}}

3.Fungsi CheckCollisionWithBullets() harus kita panggil terus-menerus agar kita tahu apakah kapal kita bertabrakan dengan peluru atau tidak. Oleh karena itu, kita harus memanggil fungsi ini setiap Some loop.Tambahkan potongan kode berikut ke dalam fungsi Update():

Ship.cs - Update()CheckCollisionWithBullets();

4.Tekan F5 dan kita akan mendapatkan bahwa peluru yang kita tembakkan akan menghilang ketika mengenai kapal yang lain. Game kita sudah mulai terlihat seperti game sungguhan yal ""

8.2. MEMBUAT OBJEK PENGHALANGUntuk membuat game kita semakin menarik, mari kita membuat objek-objek penghalang yang bergerak-gerak di antara kedua kapal, dengan cara sebagai berikut:

1.Tambahkan file Obstacle.cs ke dalam project kita.2.Tambahkan atribut dan properti untuk kelas Obstacle sebagai berikut:

- LEFT—MARGIN : atribut konstanta yang nilainya menyatakan batas kiri yang dapat dicapai oleh objek penghalang

49

- RIGHT—MARGIN : atribut konstanta yang nilainya menyatakan batas kanan yang dapat dicapai oleh objek penghalang

50

- ParentPage : halaman tempat objek penghalang berada- obstacleDrawableObject : objek yang digambar pada halaman sebagai objek penghalang- X : nilai X kordinat posisi objek penghalang- Y : nilai Y kordinat posisi objek penghalang- Radius : radius objek penghalang- Speed : kecepatan gerak objek penghalang- i, j : variabel serba guna, biasanya dipakai untuk indeks

0bstacle.cs

readonly static float LEFT_MARGIN = 100; readonly static float RIGHT_MARGIN = 100;

public MainPage ParentPage;private FrameworkElement obstacleDrawableObject;public double X{

get{

return Canvas.GetLeft(obstacleDrawableObject);}set{

Canvas.SetLeft(obstacleDrawableObject, value);}

}public double Y{

get{

return Canvas.GetTop(obstacleDrawableObject);}set{

Canvas.SetTop(obstacleDrawableObject, value);}

}public float Radius;public float Speed;private int i, j;

3. Kita melakukan inisialisasi untuk setiap atribut di fungsi konstruktor. Kita tentukan radius objek penghalang adalah setengah dari lebarnya. Sedangkan parentPage, obstacleDrawableObject, dan Speed kita tentukan nilainya berdasarkan parameter fungsi konstruktor.

51

Lalu kita juga akan menggerakkan objek penghalang berdasarkan atribut Speed. Jika objek penghalang sudah mencapai batas kiri atau kanan (LEFT—MARGIN atau RIGHT—

MARGIN), maka ia akan berbalik arah dan bergerak dengan arah kebalikannya.Tambahkan fungsi konstruktor Obstacle() dan fungsi Update() berikut:

Obstacle.cs

public Obstacle(MainPage parentPage, FrameworkElement drawableObject, float speed){

ParentPage = parentPage;obstacleDrawableObject = drawableObject;Radius = (float)(drawableObject.Width / 2);Speed = speed;

}

public void Update(float elapsed){

// Menggerakan obstacleif (Speed < 0){

if (X < LEFT_MARGIN){

Speed = -Speed;}else{

X += Speed * elapsed;}

}else{

if (X > ParentPage.Width - RIGHT_MARGIN){

Speed = -Speed;}else{

X += Speed * elapsed;}

}}

4. Pada kelas MainPage, kita tambahkan atribut berikut:- NUM—OBSTACLES : atribut konstan yang menyatakan jumlah objek penghalang

yang ada di game- OBSTACLE—NAME : atribut konstan yang menyatakan nama gambar objek

penghalang yang kita berikan pada halaman XAML52

OBSTACLE—SPEED : atribut konstan yang menyatakan kecepatan gerak objek penghalang- Obstacles : kumpulan objek penghalang di game

MainPage.xaml.cspublic readonly static int NUM_OBSTACLES = 3;public readonly static string[] OBSTACLE_NAME = new string[]{

"obstacle1","obstacle2","obstacle3"

};public readonly static float[] OBSTACLE_SPEED = new float[]{

200,300,-400

};public Obstacle[] Obstacles;

5.Kita melakukan inisialisasi atribut-atribut pada fungsi konstruktor Obstacle():

MainPage.xaml.cs - Obstacle()

//obstaclesObstacles = new Obstacle[NUM_OBSTACLES];for (i = 0; i < NUM_OBSTACLES; i++){

Obstacles[i] = new Obstacle(this, (FrameworkElement)FindName(OBSTACLE_NAME[i]),OBSTACLE_SPEED[i]);}

6.Pada MainPage.xaml.cs, kita panggil fungsi Update() Obstacle pada fungsi update() MainPage.xaml.cs:

MainPage.xaml.cs - Update()for (i = 0; i < NUM_OBSTACLES; i++) {

Obstacles[i].Update(elapsed);}

7.Tekan F5 untuk melihat objek penghalang game sudah bergerak-gerak dengan kecepatan yang berbeda-beda.

54

Gambar 12 Objek Penghalang Game dapat Bergerak

8.Namun objek penghalang ini masih belum memberikan efek apapun untuk objek-objek lainnya, bagaimana jika kita membuatnya dapat menghalau peluru yang lewat? Sehingga menembak peluru ke kapal lawan akan menjadi lebih menantang! Pada Obstacle.cs, tambahkan kode pendeteksi tabrakan berikut ke dalam fungsi Update():

0bstacle.cs - Update()

// Apakah obstacle bertabrakan dengan peluru?for (i = 0; i < ParentPage.Ships.Length; i++){


if (ParentPage.Ships[i].Bullets[j].IsCollide(X, Y, Radius)){


ParentPage.Ships[i].Bullets.RemoveAt(j);}

}}

9.Tekan F5 untuk melihat bagaimana setiap peluru yang bertabrakan dengan objek penghalang, akan menghilang seperti bertabrakan dengan kapal.

55

9. MENAMPILKAN SCORESecara umum, GUI berfungsi untuk menampilkan informasi penting yang dibutuhkan pemain, misalnya: nyawa pemain, score pemain, waktu tersisa, dan lain sebagainya. Sekarang kita akan membuat Graphical User Interface (GUI) sederhana untuk game kita agar pemain dapat melihat score untuk masing-masing kapal. Setiap kapal berhasil menembakkan peluru sampai mengenai kapal lawan, kapal tersebut akan mendapatkan tambahan score . Sebelumnya kita akan membuat sistem scoring sederhana untuk kapal kita. Berikut langkah-langkahnya:

1.Pada Ship.cs, tambahkan atribut

Score: Ship.cs

public int Score = 0;

2.Setiap sebuah peluru berhasil mengenai kapal, score kapal yang menembak peluru tersebut akan ditambahkan.Tambahkan potongan kode yang diwarnai kuning, sehingga fungsi CheckCollisionWithBullets() akan menjadi seperti di bawah ini:

Ship.cs

57






this.Score++;ParentPage.LayoutRoot.Children.Remove(ParentPage.Ships[

i].Bullets[j].BulletDrawableObject);ParentPage.Ships[i].Bullets.RemoveAt(j);

}}

}}

}

3.Sekarang kita akan menampilkan score melalui TextBlock yang telah kita letakkan di samping masing-masing kapal. Pada MainPage.xaml.cs, tambahkan potongan kode berikut ke dalam fungsi update():

58

MainPage.xaml.cs - update()//score ui updatingscoreText1.Text = Ships[0].Score.ToString(); scoreText2.Text = Ships[1].Score.ToString();

4. Tekan F5 untuk melihat pertambahan score masing-masing kapal ketika berhasil menembakkan peluru sampai ke kapal lawan O

59






this.Score++;ParentPage.LayoutRoot.Children.Remove(ParentPage.Ships[

i].Bullets[j].BulletDrawableObject);ParentPage.Ships[i].Bullets.RemoveAt(j);

SoundManager.Play("explosion");}

}}

}}

10. MENAMBAHKAN SUARA KE GAME

Untuk menambahkan suara ke game kita, kita perlu membuat Sound Manager untuk mengelola data suara yang akan kita play pada game kita, dengan langkah-langkah sebagai berikut:

1.Tambahkan file kelas SoundManager.cs.2.Tambahkan potongan kode berikut pada kumpulan pernyataan using di awal file kelas kita:

SoundManager.cs

using System.IO;using System.Collections.Generic;

3.Tambahkan atr ibut ber ikut pada kelas SoundManager: - parentPage : halaman utama game - st reamDict : kumpulan data suara yang dapat d i ja lankan pada game

SoundManager.cs

static MainPage parentPage;static Dictionary<string, Stream> streamDict;

60

public static void Initialize(MainPage _parentPage) {

parentPage = _parentPage;streamDict = new Dictionary<string, Stream>();

}

public static void AddSoundStream(string key, string soundPath) {

streamDict.Add(key, ContentManager.GetStream(soundPath));}

4.Tambahkan fungsi-fungsi berikut pada kelas SoundManager:- Initialize : fungsi untuk inisialisasi atribut-atribut kelas SoundManager- AddSoundStream : fungsi untuk menambahkan data suara yang dapat

dijalankan pada game

- RemoveSoundStream : fungsi untuk menghapus data suara yang dapat dijalankan pada game

- Play : fungsi untuk menjalankan data suara tertentu

SoundManager.csSoundManager.cs

public static void RemoveSoundStream(string key) {streamDict.Remove(key);

}

public static void Play(string key){

MediaElement sound = new MediaElement(); sound.SetSource(streamDict[key]); parentPage.LayoutRoot.Children.Add(sound); sound.Play();

}

5.Sekarang Sound Manager kita sudah siap untuk digunakan O Pertama-tama, kita harus melakukan inisialisasi terhadap Sound Manager kita, dan menambahkan data suara yang akan dijalankan pada game. Data suara ini didapatkan dari file aset yang sudah kita masukkan ke dalam project dan kita tentukan untuk di-build dengan tipe Resource.

61

Pada MainPage.xaml.cs, tambahkan potongan kode berikut ke dalam fungsi konstruktor MainPage():

MainPage.xaml.cs - MainPageo//sound managerSoundManager.Initialize(this);SoundManager.AddSoundStream("missilelaunch", "Content/missilelaunch.mp3"); SoundManager.AddSoundStream("explosion", "Content/explosion.mp3");

6.Mari kita tambahkan suara ketika kapal menembakkan peluru. Pada Ship.cs, kita ubah sedikit salah satu bagian dari fungsi Update() dengan menambahkan potongan kode yang diberi warna kuning, sehingga bagian dari fungsi Update() tersebut akan menjadi seperti berikut ini:

62

if (IsShooting){

if (timeSinceLastUpdate >= UPDATE_INTERVAL){

Bullet bullet = new Bullet(this, ParentPage.BulletTexture);Bullets.Add(bullet);ParentPage.LayoutRoot.Children.Add(bullet.BulletDrawableObject);

SoundManager.Play("missilelaunch");

timeSinceLastUpdate = 0;}else{

timeSinceLastUpdate += elapsed;}

}

7. Lalu kita tambahkan juga suara ledakan ketika peluru menabrak kapal. Pada Ship.cs, kita akan ubah sedikit fungsi CheckCollisionWithBullets() dengan menambahkan potongan kode yang diberi warna kuning, sehingga fungsi ini akan menjadi seperti berikut ini:

Ship.cs

63

// Apakah obstacle bertabrakan dengan peluru?for (i = 0; i < ParentPage.Ships.Length; i++){


if (ParentPage.Ships[i].Bullets[j].IsCollide(X, Y, Radius)){


ParentPage.Ships[i].Bullets.RemoveAt(j);

SoundManager.Play("explosion");}

}}

8.Suara ledakan juga ditambahkan ketika peluru menabrak objek penghalang. Pada Obstacle.cs, kita ubah sedikit bagian dari fungsi Update() dengan menambahkan potongan kode yang berwarna kuning, sehingga bagian tersebut menjadi sebagai

berikut:

0bstacle.cs - Update()

9.Tekan F5 untuk mendengarkan efek suara dari setiap kapal yang menembakkan peluru dan efek suara ketika peluru menabrak sesuatu.

64