Create Simple Game. ABC5DASAR (SERIES 6)

Pada series kali ini kita akan membahas mengenai Highscore Managaer dan juga kita akan membuat logic code untuk Highscore Page kita, sebelumnya jika kita recap sebelumnya kita telah selesai membuat MainPage dan juga GamePage, dan juga sebelumnya kita telah mendesain tampilan UI untuk Highscore Page kita, namun belum terdapat code logic didalamnya, saat ini diseries kali ini kita akan menambahkan code logic kedalam Highscore Page, let’s check it out!

Kita akan membutuhkan sebuah class baru sebagai handler untuk highscore pada game kita, serta menyimpan data-data highscore, maka kita sebut saja sebagai class HighscoreManager.cs, mari kita buat dengan klik kanan pada solution explorer dan Add New Item, yaitu class file dengan nama HighscoreManager.cs.

Buat class di file HighscoreManager.cs yaitu berisi getter dan juga setter item untuk data score kita, kita akan menggunakan interface IComparable untuk melakukan komparasi pada item:

public class HighscoreItem : IComparable
{
public string Id { get; set; }
public string Name { get; set; }
public int Score { get; set; }
public bool Display { get; set; }
public int CompareTo(object obj)
{
if (obj is HighscoreItem)
{
return Score - ((HighscoreItem)obj).Score;
}
return 0;
}
public override string ToString()
{
return Score.ToString();
}
}

Pada constructor class HighscoreManager kita tambahkan variable-variable yang kita butuhkan:

//Path to the save file
static string SAVE_FILE = "Highscore.dat";
//Highscore
private static int NUM_HIGHSCORES = 10;
private static ObservableCollection<HighscoreItem> localHighscores;
public ICollection<HighscoreItem> Highscores { get { return localHighscores; } }
static HighscoreItem highscore;
public HighscoreItem Highscore { get { return highscore; } }

Kita buat object/instance baru dan juga load data dari file highscore ketika HighscoreManager di initialize pada game.

public async Task Initialize()
{
localHighscores = new ObservableCollection<HighscoreItem>();
Load();
highscore = new HighscoreItem();
highscore.Score = 0;
}

Tambahkan method untuk melakukan save dan juga load data highscore dari file highscore.

public async void Save()
{
//Stores the score to a local file
StorageFolder folder = ApplicationData.Current.LocalFolder;
using (var stream = await folder.OpenStreamForWriteAsync(SAVE_FILE, CreationCollisionOption.ReplaceExisting))
{
XmlSerializer serialzer = new XmlSerializer(typeof(ObservableCollection<HighscoreItem>));
serialzer.Serialize(stream, localHighscores);
}
}


public async void Load()
{
StorageFolder folder = ApplicationData.Current.LocalFolder;
//Checks to see if the file exists
var files = await folder.GetFilesAsync();
if (files.FirstOrDefault(x => x.Name.Equals(SAVE_FILE)) == null)
return;
//Loads the score from a local file
using (var stream = await folder.OpenStreamForReadAsync(SAVE_FILE))
{
XmlSerializer serialzer = new XmlSerializer(typeof(ObservableCollection<HighscoreItem>));
localHighscores = serialzer.Deserialize(stream) as ObservableCollection<HighscoreItem>;
}
}

Tambahkan method untuk check score untuk algoritma insertion ke dalam highscore file, kita buat instance baru dari class HighscoreItem, mengambil parameter score dan user dari input di HighscorePage kita, passing nilai parameter ke properties yang ada pada HighscoreItem.

public async Task CheckScore(int score, string user)
{
HighscoreItem item = new HighscoreItem();
item.Score = score;
item.Name = user;
item.Id = Guid.NewGuid().ToString();
if (localHighscores.Count < NUM_HIGHSCORES)
{
localHighscores.Add(item);
}

//insert algoritma
for (int i = 0; i < localHighscores.Count; i++) { if (score >= localHighscores[i].Score)
{
if (localHighscores.Last().Id.Equals(item.Id))
{
localHighscores.RemoveAt(localHighscores.Count - 1);
}
localHighscores.Insert(i, item);
break;
}
}
while (localHighscores.Count > NUM_HIGHSCORES)
localHighscores.RemoveAt(localHighscores.Count - 1);
Save();
}

ShareUI handling

ShareUI digunakan ketika user ingin menshare suatu data ke dalam aplikasi yang ada pada windows 8.1, jika kalian mempunyai aplikasi seperti twitter, facebook dan social media lainnya, maka ketika ShareUI muncul, akan ada opsi untuk mengshare data yang kita mau ke social media tersebut.

Implementasi codenya adalah kita tambahkan 2 method berikut ini:

private void GetShareContent(DataRequest request, int score, string user)
{
DataPackage requestData = request.Data;
requestData.Properties.Title = "Woohoo " + user + " baru saja main dan dapat poin " + score + " points di game ABC 5 DASAR!";
requestData.Properties.Description = "Share your highscore!";
requestData.SetText(user + " just scored " + score + " points! Download and try yourself!");
requestData.SetUri(new Uri("http://apps.microsoft.com/windows/app/abc-5-dasar/8db506a7-1878-4ce3-9973-cf191de2b23d"));
}


public void ShareScore(int score, string user)
{
DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
dataTransferManager.DataRequested += (DataTransferManager sender, DataRequestedEventArgs args) =>
{
GetShareContent(args.Request, score, user);
};
DataTransferManager.ShowShareUI();
}

Method GetShareContent digunakan untuk mendeskripsikan data-data yang akan kita share, sedangkan ShareScore adalah method untuk mempassing data share content kita dan menampilkannya ShareUI pada windows 8.1

Kita baru saja membuat class HighscoreManager yang mengatur data-data highscore kita, selanjutnya kita code untuk logic di HighscorePage kita.

 

Code Logic pada HighscorePage.xaml.cs

tambahkan variable berikut ke dalam class HighscorePage:

int score;
bool submitted;

pada navigationHelper_loadState, masukan syntax berikut ini:

PopulateHighscores();
if (e.NavigationParameter != null)
{
score = (int)e.NavigationParameter;
TextBlockScore.Text = "You scored " + score + " points!";
}
else
{
SubmitScoreItem.Visibility = Visibility.Collapsed;
}

Buat class PopulateHighscores untuk mendapatkan semua data highscores, dan menampilkannya ke dalam GridView

void PopulateHighscores()
{
HighscoreManager highscoreManager = new HighscoreManager();
List highscores = highscoreManager.Highscores.ToList();
Dictionary<string, List<HighscoreItem>> groupedHighscores = new Dictionary<string, List<HighscoreItem>>(); while (highscores.Count > 0)
{
List<HighscoreItem> group = new List<HighscoreItem>();
for (int i = 0; i < 5; i++) { if (highscores.Count > 0)
{
group.Add(highscores[0]);
highscores.RemoveAt(0);
}
}
groupedHighscores.Add(Guid.NewGuid().ToString(), group);
}
HighscoresGridView.ItemsSource = groupedHighscores;
}

 

Button Handling

Selanjutnya kita perlu membuat event handler untuk button-button yang ada di Highscore Page yaitu button untuk Submit score, share score, dan juga back button.

Untuk event handler submit button berisi sebagai berikut:

private async void Submit_Click(object sender, RoutedEventArgs e)
{
if (submitted)
return;
submitted = true;
SubmitProgressRing.IsActive = true; //set progress ring menjadi terlihat dan active
SubmitProgressRing.Visibility = Windows.UI.Xaml.Visibility.Visible;
HighscoreManager manager = new HighscoreManager(); //Membuat objek baru dari class HighscoreManager
await manager.CheckScore(score, TextBoxName.Text); //Memanggil method untuk memasukan data ke highscore table
PopulateHighscores();
SubmitProgressRing.IsActive = false;
SubmitProgressRing.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}

Button untuk share akan berisi event handler berikut:

private async void Share_Click(object sender, RoutedEventArgs e)
{
HighscoreManager manager = new HighscoreManager();
manager.ShareScore(score, TextBoxName.Text); //memanggil method sharescore pada HighscoreManager, dan akan mempass parameter score dan juga nama yg diinput dari user
}

Selanjutnya untuk back button, kita akan menavigasikan ke main page/page awal kembali.

private void backButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(MainPage));
}

Yap, selesai sudah untuk series kali ini, kita telah menambahkan code logic untuk highscoremanager kita, selanjutnya kita akan menambahkan sebuah User Control pada Windows Apps kita, apa itu User Control? baca series berikutnya, terima kasih dan semoga bermanfaat.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s