Creating a Simple Windows 8 Game with JavaScript Part 1

Gauloran

Gauloran

Global Moderatör
7 Tem 2013
8,187
633
What Are We Building?
[FONT=&quot]Here’s what the game looked like in the original XNA version:[/FONT]
 [FONT=&quot]
image002.png
[/FONT]
 [FONT=&quot]We won’t go through adding all of these features, but we’ll get close! [/FONT]
 Adding the Assets
[FONT=&quot]Unless you’re creating the next great text-based adventure, you’ll probably need some images and sounds. In our case, we’re using ones already created in the "Catapult Wars Lab" 2D sample game. This tutorial was developed for XNA, but we want JavaScript, so let’s grab the graphics and sounds and get coding![/FONT]
 [FONT=&quot]
image003.png
[/FONT]
  • Launch Visual Studio 2012 and create a project named "CatapultWars", using the "Blank App" template from the JavaScript –> "Windows Metro style" templates.
  • Download and extract the "Catapult Wars Lab" sample (CatapultWars_4_0.zip)
  • From a Windows Explorer view of the folder, select and drag all four folders from the /Assets/Media/Textures folder and in Visual Studio, place them under the images folder. (This will copy and add them to the project.)
  • Create a new folder called "sounds" in the root of the project.
  • Copy the files from /Assets/Media/Sounds to the new "sounds" folder.
[FONT=&quot]Your project should look like this:[/FONT]
 [FONT=&quot]
image004.png
[/FONT]
 [FONT=&quot]Now that we have some assets, let’s put them to use.[/FONT]
 The Splash Screen & Logos
[FONT=&quot]Notice that when you run the game, you first see an "X" in a square? That’s the splash screen, by default showing the /images/splashscreen.png image, but we can do better. To adjust the splash screen, double-click the package.appxmanifest:[/FONT]
 [FONT=&quot]
image005.png
[/FONT]
 [FONT=&quot]The file /images/Backgrounds/gameplay_screen.png is what we want to use, but the image must be 620x300 pixels. So, open the image in your favorite editor, resize and save as "title_screen_620x300.png". Add that new file into the project.[/FONT]
 [FONT=&quot]Now we can set the "Splash screen" field to images\Backgrounds\title_screen_620x300.png. While we’re here, pick whatever background color you’d like to complement the image (e.g. "darkGray"). Now when run, the game greets us with a new splash screen:[/FONT]
 [FONT=&quot]
image006.png
[/FONT]
 [FONT=&quot]We can also adjust the app’s tile, which by default looks like this:[/FONT]
 [FONT=&quot]
image007.png
[/FONT]
 [FONT=&quot]Also in the app manifest, we see a number of places for logos. We can add 150x150, 310x150, and 30x30 logos for use in various places.[/FONT]
 [FONT=&quot]
image008.png
[/FONT]
 [FONT=&quot]Now we have square and wide format custom tiles:[/FONT]
 [FONT=&quot]
image009.png
image010.png
[/FONT]
 [FONT=&quot]Looks good! Now if only we had a game to play ...[/FONT]​
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.