Wednesday 24 April 2013

Put Ads in Windows 8 Apps (HTML5)

 Note: The following tutorial is for HTML5 app development.

So you want to get into, or you're already in Windows 8 App development?
You'll surely want to know how to monetize your apps. And the simplest way to do that is to put ads in your app or game. You can also have in-app purchases, or even make it a paid app. However in-app purchases is a little bit more difficult (although it isn't that bad, I'll write about that in a later article), and to have any notable success with a paid app, you want to make sure it's a damn good app or game.

So, how do we put ads in our Windows 8 Store apps?

First you need an ad provider. You can use any ad provider that meets Microsoft's standards. But at the moment, I'm sticking with Microsoft's pubCenter, because it's actually the only provider I can find right now that you can use. AdSense is apparently out the picture. So, I'll show the ropes with pubCenter. Also note that pubCenter isn't great yet. There's not a whole lot of advertisers with them yet, so quite often you will find your app not even displaying ads. Ads are displayed more in America than anywhere else, which isn't too bad since America will usually be the biggest audience of any app. I can also see pubCenter growing rapidly, so you may as well get yourself prepared.

Get the SDK

First off, get the Microsoft Advertising SDK for Windows 8, click "direct download" at the top right of the page, and install it. Now Visual Studio has what it needs to work with ads.

Set up pubCenter Account

Then you should get started with pubCenter, for in-depth description, have a look at How to Use pubCenter. But it's pretty simple, just log in with your Microsoft ID, you'll see the "sign in with microsoft account" link. Then you'll be able to set up your first ad unit for your app.

When you create your ad unit, you will have a unit ID and an application ID, both of which you will need later for your code.

Placing the HTML code

First go to your default.html or the page you are placing the ad on.
In the <head> part, put this line *after* you include default.js:

Now in the <body> section, use this code:
This example places a 292px by 60px ad at the bottom left of the page. You can change the position values as you like, and the size values should be the values you made your unit.
Important note: The application ID used here is what you need to use for testing purposes, and the unit ID is what you need to use if you are going to have a 292 by 60 ad. For other sizes, look at the Test Mode Values Table and make sure you take the Unit ID of the size you intend to use.

Using your own application ID and unit ID will not show anything when testing, you must wait until you have finished making your game before switching these values with your actual ad IDs.

Next Requirements

There are a couple of things you need to do if you're going to have ads in your app. The first is very simple, just go to your app manifest and make sure you've ticked the "Internet (Client)" box under the "Capabilities" tab.

Privacy Policy
The second thing you need to make sure you have is a Privacy Policy. If you don't have a privacy policy when Internet connection is enabled, your app will be rejected.
The privacy policy is used to state what information is being transferred or used. If you are not using any personal information and you're just providing ads, you simply have to state that.
For example, "This application does not collect any personal information. Internet connection is used to provide advertisements."

You will need to have your privacy policy posted on a web page with a URL you can link in your app's description section when submitting your app.
You also must include your privacy policy in the Settings Charm of your app.

To do this, go to your default.js file, and locate the part that should look like this:

Then make the code look more like this:

You'll notice that in that code I referenced a "privacy.html" page. All you have to do is make another html page in the project, and for example's sake, here's my privacy.html page for my Holy Diver game:

And that should be it! You're now fully equipped to put ads in your app. Now go make a badass game and get it plenty of traffic. Enjoy.

Friday 19 April 2013

GameJam Results In

The results are in from the GameJam that was held at University of the West of Scotland.
The winner is Martin Grant! Check out his website here for info on his game, "Unicorn Space Command", and his other work.

His game is real fun, I had hardly expected to win over this. If you have Windows 8, you should give it a blast, search the store for "Unicorn Space Command", or follow this link.

Thursday 18 April 2013

Shotgun Steve In Development

Another game in the pipeline. While I work on Damn Zombies, I'll be splitting my attention onto this new game Shotgun Steve. And as with my other stuff, this will be available on the Windows 8 App Store.

The basis of this game will be to shoot some kind of bad guy flying from the platforms at the sides, staying alive as long as possible, as it gets harder and harder. Not sure what the bad guys will be like. Maybe some kind of ninja style shiz. Anyhow, I do believe this game will be great fun, it's just a silly, casual, time-killing game.

Screenshot of the game early in development, most of the graphics here are temporary, but it'll be along these lines, in terms of style.

Thursday 11 April 2013

Holy Diver Released

Holy Diver is now released to the Windows 8 App Store. If you've got Windows 8, follow this link: Holy Diver - Windows 8 App Store, or search the app store for "Holy Diver".

The game involves an angel diving from the sky, dodging spiky "devil clouds", then when you reach the ground, you swoop through a tunnel trying not to hit the walls.
On a touch screen device such as a tablet, the default controls are to basically move your finger to where you want the angel to horizontally move to. On a PC, the default controls are keyboard controls (A/D or Left/Right), however you can press M to switch to mouse movements and back.

This game was very quickly developed, as it is a submission to a competition I took part in at the University of the West of Scotland.
The competition was spanned over 3 days, and a decent chunk of the time was used learning new things. And honestly, I love making games for the Windows Store.
To all casual games developers, I really do suggest getting Windows 8 (even if you'd rather dual boot it) so you can take part in this up-and-coming market.

So, as I said, this was a quick development, so it's not an overly impressive game. Although it can be rather addictive. I didn't expect myself to get that effect from the game, but I did. And since I enjoy it myself so much, I intend on building on the game after the competition has been judged. The game will be much more featureful and professional feeling.

Tuesday 9 April 2013

Damn Zombies - Early Sneek Peak

While Holy Diver is in the process of being published to the Windows 8 App Store, I decided to start work on a new game.

Damn Zombies will be a simple top-down zombie shooter, with basic controls, a range of weapons and defense upgrades. This game will be on the Windows 8 App Store, so available to Windows 8 PC users, as well as Windows 8 tablet users. I also intend on releasing the game on the Windows Phone Store too.

Keep an eye out for updates, the game won't take long to finish. You can follow me on twitter @SlashGame, or Like the new Facebook page SlashGameNet

Here's a screenshot of gameplay, very early in development. As you'll see, there's still not even a gun in the player's hands yet.

Friday 5 April 2013

SlashGame's First Official Game on Windows 8 Store!

For the past 3 days I've been at a GameJam (game development competition) at the University of the West of Scotland. Our task was to make a game to put on the Windows 8 App Store; something I had never done before.

The process of developing for the Windows Store was great, I could have chosen from a lot of languages to write the game in, and I could have picked from a range of third party frameworks. A lot of the other competitors used Construct 2, and I saw some pretty decent looking games coming from them.
I on the other hand, stuck with Visual Studio 2012, and I chose to write the game in JavaScript, so it is indeed a HTML5 game.

Since I gave SlashGame such a high focus in HTML5 games, I thought I may as well make the game an official release for SlashGame.

Holy Diver
My original idea for the name was actually "Angel Dive", as the game involves an angel diving from the heavens then straight into the ground and through a tunnel.
However, I was driving along to the university today, and in popped the Dio song "Holy Diver" to my head. Obviously that fit just perfectly, so indeed the game is now named Holy Diver.

There is much still to add to the game. Rest assured that the game will be fully featured soon after the competitors have been judged.

The game will be free on the Windows App store, and I may at some point post a "How I made it" article or video.

As for the GameJam, there was good competition, so I eagerly await to hear the winner, and I shall post the results, whether it's me or not.

Sunday 20 January 2013

How to Make a HTML5 Game (HTML5 Game Development Guide)

In this blog, I've got helpful tips spread out everywhere, so in this post I will organize a list of links to the posts I think would be most helpful.

I'll keep this list updated when I think of more stuff to put in it. And I'm open to suggestions, if you have any, you can contact me via @SlashGame on twitter (By the way, I'm more likely to see a mention than a Private Message).

21/01/2013: Updates to these pages have begun.
22/01/2013: Information improved in Game Loop and Simple Game Phsyics articles.

The first thing is, you should understand what the canvas is.
HTML5 Canvas Explained.

Then, you're going to want to know how to render an image or text to the canvas.
Display Image on Canvas
Canvas Background Image
Draw Text to the Canvas

Then, for the actual game, you need to be able to set up what's known as a "Game Loop" in order to show moving characters and such based on user input.
Game Loop
Keyboard Input (helpful function you can use)
Mouse Input

Now, all you need to know is the fancy stuff that you may want to use to make the game feel right.
Simple Game Physics
Rotating Image on Canvas
HTML5 Audio

If you like to learn things visually, then I've got a video on how to make a simple game.
Video Introduction to HTML5 Game Development

And I have a list of helpful snippets of code.
Snippet List

If you want to make money from your games, I suggest you take a look at this:
How to Make Money From Your Games