Puja Pramudya

Game Tebak Kartu dengan Windows Multipoint SDK (Part II) Puja Pramudya [email protected] http://limaapril.wordpress.com

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.

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. Tidak perlu bingung dengan aplikasi-aplikasi dimana banyak orang dapat mengontrol banyak mouse untuk melakukan kegiatan operasional dengan komputer. Pada kasus-kasus seperti itu, sistem tidak dapat mengidentifikasi mouse mana yang menyebabkan perubahan, dan secara umum tidak terdapat kebebasan untuk mengontrol beragam alat input tersebut. Multipoint adalah teknologi yang memungkinkan developer membangun aplikasi yang memanfaatkan banyak mouse, termasuk kemampuan untuk mengetahui event dari pengguna yang berbeda secara independen dan melakukan permission yang berbeda-beda untuk setiap mouse.

Kebutuhan Perangkat Lunak Dan Keras Multipoint SDK ditulis untuk pemrograman Visual C# sehingga banyak samples ditulis dengan menggunakan C#. Akan tetapi dengan menggunakan Visual Studio, sangat memungkinkan Komunitas eLearning IlmuKomputer.Com 1 Copyright © 2003-2007 IlmuKomputer.Com

pengembangan aplikasi berbasiskan Multipoint menggunakan Visual C++ atau Visual Basic Perangkat Keras Kebutuhan perangkat keras diperoleh dari resource yang diperlukan untuk lingkungan pengembangan dan go-live. Berikut adalah yang disarankan :  Komputer (sebuah komputer, Pentium 4 telah diuji dengan sukses, komputer yang prosessornya lebih lambat belum pernah dilakukan ujicoba)  Dua hingga empat mouse untuk pengujian  USB port / USB Hub  RAM minimal 128 MB  RAM video minimal 16 MB Video card resolusi minimal 800x 600 ( dan warna 32-bit sangat disarankan) Perangkat Lunak Lingkungan pengembangan sangat disarankan dengan menggunakan Microsoft Expression BlendTM dengan Visual Studi 2005 atau 2008. Kemudian kebutuhan minimal ialah :  Windows Vista® disarankan meski telah diujicobakan dan berjalan dengan baik di Windows® XP SP2.  .NET Framework versi 3.0 (minimal)  Visual Studio 2005 dengan ekstensi WPF telah terinstall. Multipoint SDK akan meng-install template yang sesuai pada Visual Studio akan tetapi SDK ini tidak mendukung pengembangan Windows form biasa.

Instalasi Multipoint SDK Multipoint SDK dapat didownload dari Microsoft Download Center di alamat url http://www.microsoft.com/downloads/details.aspx?FamilyID=A137998B-E8D6-4FFF-B805-27 98D2C6E41D&displaylang=en.

Make it into Multiplayer ! Menambahkan Referensi Yang Dibutuhkan Untuk memulai pemrograman menggunakan Multipoint SDK, tambahkan assembly dibutuhkan. Pada jendela solusi, Pilih References -> Klik Kanan -> Add Reference -> Pilih Tab Browse -> Cari file binary Multipoint SDK

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

2

Secara default SDK terinstall pada path C:\Program Files\Microsoft MultiPoint SDK\Bin Inisiasi Multipoint Sebelum sebuah aplikasi dapat menerima input dari banyak mouse, Multipoint SDK harus diinisialisasi. Untuk melakukan ini , aplikasi harus menginisialisasi Multipoint SDK objek danmengasosiasikannya dengan sebuah jendela aplikasi WPF. Event loaded dari jendela utama aplikasi adalah cara yang disarankan dengan mengikuti langkah-langkah berikut : Deklarasi dan set Window.Loaded event handler. Inisialisasi harus dillakukan hanya ketika Window sudah di load. Panggil fungsi Initialize pada Mutlipoint SDK objek, dan window yang aktif menjadi parameter inputnya. Secara internal, akan dilakukan proses berikut :  Mendaftarkan window yang aktif untuk berkomunikasi dengan SDK, window mana yang harus memonitor Multipoint mouse events. Karena SDK memerlukan window yang bertindak sebagai parent yang bertanggung jawab secara visual.  Mendaftarkan mouse. Proses akan mengenumerasi melalui seluruh alat input yang terdaftar dan membangun koleksi mouse yang tersedia untuk aplikasi.  Multipoint tidak dapat menerima input dari trackpad pada sebuah laptop sehingga untuk pembangunan dan testing aplikasi sangat disarankan menggunakan USB mouse  Menggambar sebuah mouse device untuk setiap mouse, dan meng-assign pointer Multipoint standard untuk masing-masing mouse yang terpasang. Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

3



Menyembunyikan pointer sistem. Pada aplikasi Multipoint, pointer sistem tidak digunakan sehingga lebih baik disimpan untuk menghindari kebingungan.

Tambahkan : using Microsoft.MultiPoint.SDK; Kode untuk inisialisasi adalah sebagai berikut : void Window1_Loaded(object sender, RoutedEventArgs e) { InitCard(); MultiPointSDK.Instance.Initialize(this); Utility.InitSoal(); CurrentSoal = Utility.RandomSoal(); UpdateSoal(); //kocok kartu Utility.AssignCard(ListOfCard); }

Tekan F5

untuk melihat hasilnya.

Dapat kita lihat terdapat 2 pointer berwarna hitam pada bagian pojok kanan atas aplikasi. Hal ini menunjukkan inisiasi telah berhasil kita lakukan. Sekarang kita akan melanjutkan pekerjaan kita. Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

4

Menon-aktifkan Aplikasi Ketika multipoint mouse sudah aktif, kita tidak dapat melakukan hal-hal yang biasa kita lakukan menggunakan kursor karena kontrol WPF pada umumnya secara default tidak “multipoint-aware”. Karena itu untuk menon-aktifkan aplikasi kita akan menggunakan key_down event handler. public Window1() { InitializeComponent(); ListOfCard = new List(); this.Loaded += new RoutedEventHandler(Window1_Loaded); this.KeyDown += System.Windows.Input.KeyEventHandler(Window1_KeyDown);

new

} void Window1_KeyDown(object System.Windows.Input.KeyEventArgs e) { if (e.Key == Key.Escape) { App.Current.Shutdown(); } }

sender,

Membuat Kelas Player Untuk memodelkan para pemain yang bermain pada game tebak kartu ini, mari kita buat sebuah kelas yang merepresentasikan pemain dengan hal-hal yang perlu disimpan seperti nama, mouse device yang berasosiasi dengan pemain, nilai dan jawaban pemain. Pada jendela solusi, pilih Project -> Klik Kanan -> Add Class -> Beri nama Player.cs


5

using System.Text; using Microsoft.MultiPoint.CommonTypes; namespace MultipointCardGuess { class Player { public DeviceInfo MultipointMouse; public string Name; public int Score; public string Guessed; public Player() { } public Player(DeviceInfo mm) { MultipointMouse = mm; } } }

Object multipoint mouse bertipe DeviceInfo. Jangan lupa untuk menambahkan referensi using Microsoft.MultiPoint.CommonTypes . Tambahkan beberapa method untuk melakukan reset nilai score, reset jawaban pemain dan fungsi yang dirasakan perlu. Ini akan berguna pada saat permainan berjalan nantinya. /// <summary> /// Mengembalikan nilai pemain menjadi 0 /// public void ResetScore() { Score = 0; }

/// <summary> /// Mereset tebakan jawaban pemain /// public void ResetGuessed() { Guessed = String.Empty; } public void AddScore(int Point) { Score += Point; Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

6

} public void AddGuessed(string Guessed) { this.Guessed = Guessed; }

Menambahkan Kelas PlayerManager Kelas Player sudah kita implementasi. Namun sekarang kita perlu sesuatu untuk mengatur segala hal yang berhubungan dengan Player, meng-assign setiap multipoint mouse ke pemain tertentu, menyembunyikan pointer dan lain-lain. Karena itu kita memerlukan sebuah kelas baru, dan kelas ini akan kita beri nama PlayerManager. Pada jendela solusi, pilih project, Klik Kanan -> Add Class -> Beri nama PlayerManager.cs

Untuk implementasi kelas ini, kita akan menggunakan singleton pattern. Sederhananya, dalam dunia software engineering, singleton adalah sebuah kelas yang hanya memungkinkan kelas tersebut diinstansiasi sekali selama aplikasi berjalan. Biasanya, kelas singleton tidak memerlukan parameter untuk diinstansiasi. Dalam kelas PlayerManager dua field utama yang akan kita simpan adalah instansiasi dari MultipointSDK dan daftar pemain yang sedang bermain. Komunitas eLearning IlmuKomputer.Com 7 Copyright © 2003-2007 IlmuKomputer.Com

/// Multipoint object /// public readonly MultiPointSDK.Instance;

MultiPointSDK

MultiPointObject

=

/// <summary> /// singleton implementation /// private static PlayerManager instance = new PlayerManager(); /// <summary> /// daftar seluruh pemain /// public List PlayerList { get; set; } /// <summary> /// Default constructor /// private PlayerManager() { PlayerList = new List(); } /// <summary> /// get Instance of PM /// public static PlayerManager Instance { get { return instance; } }

Inisialisasi Player Kita akan melanjutkan fase inisialisasi aplikasi kita yang kita tinggalkan sejenak tadi. Ketika Multipoint SDK sudah diaktivasi untuk window game tebak kartu ini, kita harus meng-assign multipoint mouse yang terdaftar kepada para pemain. Hal ini dapat kita lakukan dengan mengenumerasi multipoint mouse object pada MultipointSDK.Instance.MouseDeviceList. Fungsi InisialisasiPlayer ini kita tambahkan pada kelas PlayerManager.


8

public void InisialisasiPlayer() { int i = 1; if (this.PlayerList.Count == 0) { foreach (DeviceInfo ml in MultiPointObject.MouseDeviceList) { Player p = new Player(ml); p.Name = String.Format("Pemain {0}", i); this.PlayerList.Add(new Player(p)); i++; } } }

Pada fungsi ini, saya juga menambahkan satu baris kode untuk memberi nama default bagi para pemain. Fungsi Seleksi Warna Cursor Mungkin ada yang mulai bertanya bagaimana kita membedakan kursor yang satu dengan yang lainnya, terutama jika sudah cukup banyak orang yang memainkan game ini. Jangan khawatir, Multipoint SDK telah menyediakan properti untuk memudahkan kita membedakan satu multipoint mouse dengan yang lainnya. Ada dua cara yang dapat kita lakukan, yaitu memberi warna kursor yang berbeda, atau memberikan icon image yang berbeda. Pendekatan pertama adalah yang akan kita lakukan dalam game ini. Buka kelas Utility lalu tambahkan kode berikut : public static System.Windows.Media.Color SelectColor(int index) { switch (index) { case 1: return Colors.Red; case 2: return Colors.Brown; case 3: return Colors.Blue; case 4: return Colors.Green; case 5: return Colors.Yellow; case 6: return Colors.Purple; default: return Colors.Black; Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

9

} }

Fungsi SelectColor mengambil input angka untuk mengembalikan warna yang sudah didaftarkan. Cara ini mungkin bukan yang paling baik ,tapi setidaknya simpel dan cukup menjelaskan apa yang ingin dicapai. Kita gunakan fungsi SelectColor ini pada kelas PlayerManager, modifikasi kode InisialisasiPlayer menjadi : public void InisialisasiPlayer() { int i = 1; if (this.PlayerList.Count == 0) { foreach (DeviceInfo ml in MultiPointObject.MouseDeviceList) { Player p = new Player(ml); ((MultiPointMouseDevice)p.MultipointMouse.DeviceVisual).CursorColor = Utility.SelectColor(i,p); p.Name = String.Format("Pemain {0}", i); this.PlayerList.Add(new Player((DeviceInfo)ml)); i++; } } }

Jangan lupa tambahkan referensi using Microsoft.MultiPoint.MousePlugIn agar tipe MultiPointMouseDevice dapat dikenali. Gunakan fungsi InisialisasiPlayer()

pada Window1.xaml.cs .

void Window1_Loaded(object sender, RoutedEventArgs e) { InitCard(); MultiPointSDK.Instance.Initialize(this); PlayerManager.Instance.InisialisasiPlayer(); Utility.InitSoal(); CurrentSoal = Utility.RandomSoal(); UpdateSoal(); Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2007 IlmuKomputer.Com

10

//kocok kartu Utility.AssignCard(ListOfCard); }

Tekan F5

untuk melihat hasilnya.

Voila! Ada dua USB Mouse yang saya pasang dan teridentifikasi dan diberi tanda dengan warna yang berbeda. Sekarang kita sudah dapat membedakan pointer yang ada pada layar.


11

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


12

Puja Pramudya

Recommend Documents