Puja Pramudya

(1)

Komunitas eLearning IlmuKomputer.Com

G G a a m m e e T T e e b b a a k k K K a a r r t t u u d d e e n n g g a a n n W W i i n n d d o o w w s s M M u u l l t t i i p p o o i i n n t t S S D D K K ( ( P P a a r r t t I I I I I I ) )

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:

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)

//check and update score 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) {

//check and update score // 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