Kali ini setelah mengenal dasar dari Visual Studio, selanjutnya kita akan mencoba membuat sebuah game sederhana, yaitu sebuah kuis game dengan platform Windows 8. Game ini saya namakan game ABC 5 Dasar, konsepnya sederhana dan seperti konsep game ABC 5 Dasar yaitu kita akan menjawab pertanyaan kuis sesuai dengan abjad atau alphabet awal yang diberikan.
Posting ini akan dibuat menjadi series dan berlanjut dari awal hingga akhirnya publish dan bisa di download oleh semua orang, langkah awal, di tutorial kali ini akan melakukan tahap design dari Main Page, atau tampilan awal untuk game kita. Nantinya kita akan membutuhkan 3 page, diantaranya yaitu Main Page, Game Page, dan juga Highscore Page.
Ok, kita buat project baru windows store apps dengan Visual C#, pilih blank app dengan nama ABC5DasarGame
Sekarang kita telah membuat aplikasi windows phone yang masih blank, atau belum ada isi dari designnya.
selanjutnya kita beri background aplikasi kita, caranya dengan syntax:
<Grid Background="#FFABD1FF">
Atau kalian bisa gunakan properties di kanan layar untuk memilih background, di tab Brush. Kalian bisa ganti dengan warna lain sesuka kalian. Selanjutnya kita tambahkan StackPanel untuk nama aplikasi kita. Untuk design saya:
<StackPanel Margin="0,100,0,0">
<TextBlock Text="ABC" Foreground="White" FontWeight="Thin" FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<TextBlock Margin="0, -20, 0, 0" Text="5" Foreground="White" FontWeight="Thin" FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<TextBlock Margin="0, -20, 0, 0" Text="Dasar" Foreground="White" FontWeight="Thin" FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</StackPanel>
Atau bisa Drag n Drop dari toolbox, dan sesuaikan dengan yang kalian inginkan.
Selanjutnya kita buat stackpanel untuk button-buttonnya.
<StackPanel Name="ButtonStackPanel" Margin="0,200,0,0" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
Selanjutnya untuk button-nya, kita akan buat button secara circular, atau berbentuk bulat dengan menulis code seperti berikut:
<Button Name="Play" BorderBrush="Transparent" Padding="0,0,0,0" BorderThickness="0" Background="Transparent" Width="150" Height="150" Opacity="0.8" Click="PlayButton_Click">
<Button.Content>
<Grid Width="130" Height="130">
<Border BorderThickness="3" BorderBrush="White" Width="120" Height="120" CornerRadius="60">
<TextBlock FontFamily="Segoe UI Symbol" Text="" FontSize="70" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</Button.Content>
</Button>
<Button Name="Highscore" BorderBrush="Transparent" Padding="0,0,0,0" BorderThickness="0" Background="Transparent" Width="150" Height="150" Opacity="0.8" Click="HighscoresButton_Click">
<Button.Content>
<Grid Width="130" Height="130">
<Border BorderThickness="3" BorderBrush="White" Width="120" Height="120" CornerRadius="60">
<TextBlock FontFamily="Segoe UI Symbol" Text="🏆" FontSize="70" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</Button.Content>
</Button>
Kita masukan kedalam StackPanel untuk ButtonStackPanel yang telah kita buat (didalam tags StackPanel kedua). Dan selesai, kita telah mendesain, untuk main page, atau page awal untuk game kita, Selanjutnya kita tambahkan event-handler untuk Button kita, yang nantinya mengarah ke pada GamePage, dan juga HighscorePage.
Caranya cukup mudah, masuk ke MainPage.xaml.cs buat method baru untuk event handler click, sesuai dengan nama properties Click di control XAML kita,pada kasus ini PlayButton_Click dan HighscoreButton_Click.
private void PlayButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(GamePage));
}
private void HighscoresButton_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(HighscoresPage));
}
Sesuaikan typeof dengan nama page yang nantinya kita tambahkan. Dan itulah untuk series kali ini yaitu tahap mendesign main page awal untuk game atau aplikasi, kalian bisa berimajinasi dan berkreasi dengan merubah-merubah designnya sesuka kalian. Selanjutnya kita akan mendesign Game Page kita diseries berikutnya. Terima Kasih
hasyemiraws 