Web Programming Section where Web programming languages are shared


Creating a Simple Windows 8 Game with JavaScript Part 1

Gauloran - ait Kullanıcı Resmi (Avatar)
Kadim Üye
Üyelik tarihi:
Teşekkür (Etti):
Teşekkür (Aldı):
(0) %
27-12-2020 20:46
What Are We Building?

Here’s what the game looked like in the original XNA version:

We won’t go through adding all of these features, but we’ll get close!
Adding the Assets

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!

  • 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 (
  • 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.
Your project should look like this:

Now that we have some assets, let’s put them to use.
The Splash Screen & Logos

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:

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.
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:

We can also adjust the app’s tile, which by default looks like this:

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.

Now we have square and wide format custom tiles:

Looks good! Now if only we had a game to play ...
--------------------- more than you know
- Teşekkür etti.


« Önceki Konu | Sonraki Konu »