GGaammee TTeebbaakk KKaarrttuu ddeennggaann … · event pada kelas Kartu. public Card() { ... berjalan dengan soal yang baru dan susunan kartu yang baru. Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Copyright © 2003-2007 IlmuKomputer.Com

1

GGaammee TTeebbaakk KKaarrttuu ddeennggaann WWiinnddoowwss

MMuullttiippooiinntt SSDDKK ((PPaarrtt IIIIII))

Puja Pramudya [email protected]

http://limaapril.wordpress.com

Microsoft ® Multipoint TM

SDK merupakan sebuah framework yang menyediakan lingkungan

pengembangan dimana para developer dapat mengembangkan aplikasi yang memungkinkan

hingga 250 mouse secara simultan bekerja dalam satu komputer. Multipoint SDK terutama

digunakan untuk membangun aplikasi edukasi untuk sekolah-sekolah yang memiliki

keterbatasan dalam hal infrastruktur teknologi sehingga makin banyak siswa-siswa yang dapat

bersentuhan dengan komputer. Pilot program ini sudah diujicobakan di India oleh Microsoft

Research menunjukkan manfaat dari teknologi ini untuk beberapa subjek, teknologi

pembelajaran kolaboratif seperti Mutlipoint meningkatkan proses pembelajaran jika

dibandingkan dengan skenario satu siswa satu komputer.

Multipoint hanya dapat dibangun diatas WPF (Windows Presentation Foundation). Pada WPF,

untuk membuat kontrol yang sesuai dengan kebutuhan kita dapat memanfaatkan UserControl

sehingga tidak terjadi redundansi. Agar dapat mengenali aplikasi Multipoint, UserControl yang

dibuat haruslah mengimplementasikan suatu Interface IMultipoint sehingga dapat digunakan

pada aplikasi yang berbasis Multipoint.

Mengubah Kartu Menjadi “Multipoint Aware” Mungkin ada yang mulai menyadari, ketika aplikasi kita sudah mengimplementasikan

Multipoint, kartu-kartu tebakan menjadi tidak dapat diklik lagi. Hal ini dikarenakan kartu –

Lisensi Dokumen: Copyright © 2003-2007 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.



2

kartu tebakan masih bersifat “non-multipoint aware”. Agar dapat menerima multipoint mouse

event, kita harus melakukan modifikasi pada kelas Kartu kita.

Sekarang tambahkan using Microsoft.MultiPoint.MousePlugIn . Kita akan membuat

Kartu menjadi “multipoint-aware” dengan cara memodifikasi kelas tersebut dengan

mengimplementasikan interface IMultiMouseEvents.

Tambahkan sebuah fungsi, MultipointCardClick untuk meng-handle multipoint click

event pada kelas Kartu.

public Card()

{

InitializeComponent();

this.MouseDown += new MouseButtonEventHandler(Card_MouseDown);

this.Loaded += new RoutedEventHandler(Card_Loaded);

MultiPointMouseEvents.AddMultiPointMouseDownHandler(this,

MultipointCardClick);

}

void MultipointCardClick(object sender, RoutedEventArgs e)

{

var multipointargs = (e as MultiPointMouseEventArgs);

MessageBox.Show("This Click by Multipoint Mouse");

//search player

//assign answer

}



3

Baris kode pada konstruktor akan mendaftarkan event handler untuk Mouse Down , dan aksi

yang akan dipanggil jika event itu terjadi adalah MultipointCardClick.

Tekan F5 untuk melihat hasilnya.

Memeriksa Jawaban

Kita pindah terlebih dahulu ke kelas PlayerManager, untuk menambahkan fungsi

SearchPlayer. Fungsi ini berguna untuk mencari player mana yang memicu event

multipoint mouse click.

Pada kelas PlayerManager.cs tambahkan method SearchPlayer



4

public Player SearchPlayer(DeviceInfo mm)

{

foreach (var x in PlayerList)

{

if (x.MultipointMouse.ID == mm.ID)

{

return x;

}

}

return null;

}

Method ini akan mengenumerasi seluruh mouse device yang terpasang. Perlu diketahui, ketika

inisialisasi Multipoint SDK, setiap mouse yang terpasang juga diberikan ID yang unik. Nah, ID

unik ini yang akan menjadi kunci keberhasilan kita saat mencari pemain mana yang menjawab.

Kita akan membandingkan nilai ID yang men-trigger event dengan daftar ID yang ada pada

PlayerList. Setelah menjawab, cursor juga akan dihilangkan dari layar agar perhatian para

pemain terkonsentrasi pada kursor yang belum menjawab.


{


Player p =

PlayerManager.Instance.SearchPlayer(multipointargs.DeviceInfo);

p.AddGuessed(this.imageName);

((MultiPointMouseDevice)p.MultipointMouse.DeviceVisual).DisableMouse =

true;

((MultiPointMouseDevice)p.MultipointMouse.DeviceVisual).Visible = false;

MessageBox.Show("This Click by " + multipointargs.DeviceInfo.ID

+ " and the answer is " + p.Guessed);

}

Untuk melihat hasilnya, tekan kembali F5



5

Menampilkan Nilai Pemain Pada bagian pertama/kedua tutorial ini kita sudah membuat UserControl ScorePanel untuk

keperluan menampilkan nilai pemain. Sekarang adalah saatnya kita menggunakan kontrol

tersebut.

Sebaiknya, pada awal permainan, kita menginisialisasi ScorePanel sejumlah pemain yang

bermain.

void InitScorePanel()

{

foreach (Player p in PlayerManager.Instance.PlayerList)

{

ScorePanel sp = new ScorePanel();

sp.Id.Fill = new

SolidColorBrush((p.MultipointMouse.DeviceVisual as

MultiPointMouseDevice).CursorColor);

sp.Name.Text = p.Name;

sp.Nilai.Text = p.Score.ToString();

Score.Children.Add(sp);

}

}



6

Untuk mengujinya, panggil fungsi ini di dalam event Windwol_Loaded.

void Window1_Loaded(object sender, RoutedEventArgs e)

{

InitCard();

MultiPointSDK.Instance.Initialize(this);

PlayerManager.Instance.InisialisasiPlayer();

InitScorePanel();

Utility.InitSoal();

CurrentSoal = Utility.RandomSoal();

UpdateSoal();

//kocok kartu

Utility.AssignCard(ListOfCard);

}

Tekan F5 untuk melihat hasilnya.



7

Untuk melakukan update nilai para pemain, kita perlu mengetahui pemain x berada di

ScorePanel yang mana. Untuk itu kita tambahkan method Search dengan kembalian

ScorePanel yang didalamnya terdapat data Player yang sesuai. Setelah itu, fungsi Search kita

gunakan pada method UpdatePlayerScore, untuk melakukan perubahan nilai pada Player

dan ScorePanel sekaligus. Pada method ini juga dilakukan pemeriksaan jawaban dengan

membandingkan tebakan pemain dengan soal yang sedang aktif. Player yang menjawab dengan

benar akan mendapatkan nilai.

ScorePanel SearchScorePanel(Player p)

{

foreach (ScorePanel sp in Score.Children)

{

if (sp.Name.Text == p.Name)

{

return sp;

}

}

return null;

}

void UpdatePlayerScore()

{

foreach (Player p in PlayerManager.Instance.PlayerList)

{

//true answer

if (p.Guessed == CurrentSoal)

{

p.Score += 100;

}

//show again

(p.MultipointMouse.DeviceVisual as

MultiPointMouseDevice).DisableMouse = false;

(p.MultipointMouse.DeviceVisual as

MultiPointMouseDevice).Visible = true;

//update score

ScorePanel sp = SearchScorePanel(p);

sp.Nilai.Text = p.Score.ToString();

//reset

p.ResetGuessed();



8

}

}

Timing Memeriksa Jawaban Bagaimana sebaiknya menentukan saat yang tepat untuk memeriksa jawaban para pemain ?

Sebenarnya banyak cara yang bisa kita definisikan. Misalnya jawaban akan diperiksa ketika

seluruh pemain sudah memilih kartu. Akan tetapi untuk keperluan game ini, saya

menggunakan DispatcherTimer sebagai Timer yang akan menghitung setiap 10 detik,

memeriksa jawaban para pemain dan memulai lagi ronde berikutnya dengan mengeluarkan soal

yang baru.

DispatcherTimer MyCounter = new DispatcherTimer();

int CounterNumber = 0;

Jangan lupa menuliskan deklarasi using System.Windows.Threading agar kelas

DispatcherTimer dapat dikenali.

Selanjutnya kita perlu mendefinisikan interval dari timer, apa yang akan dilakukannya setiap

interval atau ketika CounterNumber sudah mencapai batas yang kita definisikan.

void InitMyCounter()

{

MyCounter.IsEnabled = true;

MyCounter.Interval = TimeSpan.FromSeconds(1);

MyCounter.Tick += new EventHandler(MyCounter_Tick);

}

void MyCounter_Tick(object sender, EventArgs e)

{

if (CounterNumber == 5)

{

//check and update score

UpdatePlayerScore();

CounterNumber = 0;

//soal baru

NewRound();

}



9

else

{

CounterNumber++;

}

}

Membuka Kartu Tebakan Setelah counter sampai pada batas waktu tertentu, kita akan membuka kartu tebakan untuk

memberitahu kepada para pemain gambar apa yang telah mereka pilih. Untuk melakukan ini

kita harus menyimpan properti IsClicked pada kelas Card agar dapat dibedakan kartu yang

sudah dipilih dan yang tidak.

public bool IsClick;


{


Player p =

PlayerManager.Instance.SearchPlayer(multipointargs.DeviceInfo);

p.AddGuessed(this.imageName);

IsClick = true;

}

Perhatikan bahwa pada event click , kita menambahkan satu baris kode untuk menandakan

bahwa kartu telah dipilih.

Kita tinjau kembali file Window1.xaml.cs . Untuk mengatur waktu kartu tebakan dibuka, kita

akan menambahkan satu lagi DispatcherTimer.

DispatcherTimer FlipTimer = new DispatcherTimer();

int FlipCounter = 0;

void FlipTimerOn()

{

//open card

FlipImage(true);



10


UpdatePlayerScore();

FlipTimer.Interval = TimeSpan.FromSeconds(1);

FlipTimer.IsEnabled = true;

FlipTimer.Tick += new EventHandler(FlipTimer_Tick);

}

void FlipTimer_Tick(object sender, EventArgs e)

{

if (FlipCounter == 5)

{

//del flipcounter

FlipCounter = 0;

FlipTimer.Stop();

//new round

NewRound();

MyCounter.Start();

FlipImage(false);

}

else

{

FlipCounter++;

}

}

Untuk membuka kartu, kita menambahkan method FlipImage . Masukan dari method ini

adalah sebuah nilai boolean. Jika, true, maka kartu-kartu yang telah dipilih akan terbuka. Jika

tidak, seluruh kartu akan ditutup kembali dan permainan dilanjutkan.

void FlipImage(bool IsOpen)

{

if (IsOpen)

{

foreach (Card x in PanelBawah.Children)

{

if (x.IsClick == true)

{

x.Gambar.Source =

Utility.ConvertBitmapToBitmapImage(Utility.GetImage(x.ImageName));

}



11

}

}

else

{

foreach (Card x in PanelBawah.Children)

{

x.Gambar.Source =

Utility.ConvertBitmapToBitmapImage(Utility.GetImage("cover"));

x.IsClick = false;

}

}

}

Modifikasi kode pada MyTimer yang mengatur jalannya permainan .

void MyCounter_Tick(object sender, EventArgs e)

{

if (CounterNumber == 10)

{


// UpdatePlayerScore();

MyCounter.Stop();

CounterNumber = 0;

//soal baru

// NewRound();

FlipTimerOn();

}

else

{

CounterNumber++;

}

Counter.Text = CounterNumber.ToString();

}

Dengan kode seperti ini, setelah lewat 10 detik, kartu yang telah dipilih akan membuka dan nilai

para pemain akan di-update. Kemudian setelah 5 detik kartu dibalik kembali dan permainan

berjalan dengan soal yang baru dan susunan kartu yang baru.



12

Build solusi project, kemudian tekan F5 dan pasang beberapa mouse untuk menguji coba

permainan.

Biografi Penulis Puja Pramudya. Menyelesaikan S1 di Program Studi Teknik Informatika,

Institut Teknologi Bandung tahun 2010. Memiliki ketertarikan di bidang

image processing, e-learning, smart client development dan information

system. Aktif berorganisasi di himpunan mahasiswa dan komunitas INDC,

Microsoft User Group Indonesia (MUGI) Bandung serta Microsoft

Innovation Center ITB. Mendapatkan penghargaan sebagai Juara I Game

Development Contest pada Pagelaran Mahasiswa TIK (gemasTIK) 2009

yang diselenggarakan oleh Dirjen Pendidikan Tinggi (DIKTI) dan Juara I

Software Design pada Microsoft Imagine Cup 2010 yang diselenggarakan

Microsoft Indonesia dan mewakili Indonesia berlaga di Worldwide Final Imagine Cup 2010 di

Warsawa, Polandia. Saat ini mendalami bahasa pemrograman Java dan C# serta teknologi

Windows Presentation Foundation, Silverlight , ASP.NET dan Windows Phone. Aktif menulis

pada blog yang berfokus di teknologi Microsoft di http://geeks.netindonesia.net/blogs/poedja_p/

dan situs blog http://limaapril.wordpress.com .

Kontak :

Y! : poedja_p

Facebook : http://www.facebook.com/poedja

Twitter : @poedja_p

http://geeks.netindonesia.net/blogs/poedja_p/

http://limaapril.wordpress.com/

GGaammee TTeebbaakk KKaarrttuu ddeennggaann … · event pada kelas Kartu. public Card() { ... berjalan dengan soal yang baru dan susunan kartu yang baru. Komunitas eLearning IlmuKomputer.Com

Documents