Playtomic is a great way to understand how playertesters are playing your games during the development phases of your game and then to further study how your game is being played and spread around the world once you release it.  Beyond the real time analytics tools it also offers global leaderboards, heatmaps, custom game data, and level sharing APIs.

I can’t recommend Playtomic enough as it has really had a large and beneficial impact on the way I approach my game development, playtesting, and publishing. I’m not the only one enjoying Playtomic either–over 2,000 developers are currently using the service to track over 3,000 individual games, and logging an amazing billion combined real time events per day!

TUTORIAL

This tutorial will focus on the basics of getting your account setup with Playtomic and getting the basics of the analytics working in your game SWF.  I’ll be using the latest Playtomic API version 3.15 for ActionScript 3.0 (though Playtomic does support ActionScript 2.0 as well.) I’ll also be using the Flash IDE to create the game project but the code I’ll be demonstrating will work basically the same if you’re not using Flash. I’ll provide the source for the demo above saved as a Flash CS4 project in case you haven’t upgraded to the latest version yet.

 REGISTER FOR YOUR ACCOUNT AND CREATE YOUR FIRST GAME

Register:

First step is to simply register your account on Playtomic. This is pretty basic and you don’t even have to wait for an email for your account to activate.

Create First Game:

The next step is to create your first game in the system. I’m just using a ‘Test Game’ for the purposes of this tutorial.  The important part is to hit the two radio buttons. Select ‘Casual/mobile game’ for ‘Game Type’ and ‘Web’ under the ‘Flash’  platform area. Then just click the ‘Create Game’ button and the system will bring you to the game overview screen for API setup.

First Game API Overview:

You should now be looking at the API information for the game you just created. The most important information here is the game credentials area that lists your SWFID and GUID.  You should keep these numbers private since they are the way the API will communicate from your game to the Playtomic system.

The other important areas are the documentation and downloads areas. I’ve marked everything on the screenshot to the left that you can click to enlarge. You can get to this screen by clicking on ‘API Setup’ in the vertical nav menu at the left when you are logged in on the Playtomic website.

Download the Tutorial:

Normally you’ll click on the download link for the latest Playtomic API zip file on the Playtomic website. You’ll then extract the contents of the zip and find the folder called ‘Playtomic’ inside the folder called ‘gameapi-as3′.  You’ll want to copy the ‘Playtomic’ folder into the root folder of your game project so that the folder is at the same directory level as your FLA file.

This time though I’ve already included the latest Playtomic API within the tutorial download. At the time this tutorial was written that was version 3.15 for ActionScript 3.0.

You can download the tutorial here. I saved the FLA as a Flash CS4 FLA for people using older versions of Flash still.

Extract the tutorial zip and then open up both TestGame.fla and TestGame.as in the Flash IDE.

I’m only going to point out the most important parts from the source. The tutorial TestGame.as source file itself is heavily commented and should be fairly self-explanatory. This tutorial also assumes you know the basics of ActionScript 3.0.

In order for everything to work you are going to need to have already setup your new game on the Playtomic website from the instructions further above. If not go ahead and do that now because you’ll need your unique SWFID and GUID to plug into the TestGame.as config area.

// Playtomic API constants
// NOTE: CHANGE THESE TO MATCH YOURS OR IT WON'T WORK!
//
// SWFID from Playtomic API Setup screen
private static const PLAYTOMIC_SWFID:String = "xxxxxxxxxxxxxxxxx";

// GUID from Playtomic API Setup screen
private static const PLAYTOMIC_GUID:int = xxxx;

Before you can use the API you'll need to import the Playtomic classes. You'll see I do that near the top of the source file with the other standard Flash imports.

// import the Playtomic API
import Playtomic.*;

You need to init the Playtomic API as soon as possible in your game code and definitely before you call any of the Playtomic services. I usually do this with an init function of some type called during my FLA Document class constructor phase.

// Init the Playtomic API as soon as possible and
//   before you call any other Playtomic services!
private function init():void {
  // Initialize the API by logging the view
  //   this registers a 'view' on the server
  Log.View(PLAYTOMIC_GUID, PLAYTOMIC_SWFID, root.loaderInfo.loaderURL);
}

While we have now logged a 'view' above we want to track how many times the game will actually be played during that view session. In other words there should be more 'plays' of your game than 'views'. If not, the view to play ratio is a great indication that your game could use some improvement!

I typically track the 'play' event when my gameplay assets are being instantiated.

// Play the game
private function playGame():void {
  // Registers a 'play' event on the server. There can be multiple 'play' events per 'view'
  Log.Play();
  // do one time setup for game
  setupGame();
}

Another very easy and powerful thing to do with Playtomic is to track custom counter metrics. I have included an example in the tutorial. Whenever the player clicks on the 'Credits' button on the main menu we track a 'ViewedCredits' event. You can use these events to track all sorts of handy data. I usually track common things like every time the credits are viewed, the instructions are viewed, the sound or music is toggled on or off, how many times the game is restarted or paused. Basically any handy data point you'd like to gather to start understand how players interact with your game or the menus surrounding your game.

// Listens for mouse click on credits button
private function creditsButtonClickListener(event:MouseEvent):void {
  // Track a custom metric on the server so we know a
  // player viewed the credits screen
  Log.CustomMetric("ViewedCredits"); // metric, names must be alphanumeric

There are many other types of metrics you can track too. I like putting in tracking for average score so that even if players aren't submitting a score I can see how players are doing with the game. You can do this with a level average metric call. When your game doesn't have individual levels you can just feed in the string 'Game' (or whatever you want) that represents the entire game and not a specific level.

In the tutorial I track a level average metric when the player hits the 'Quit' button.

// Quit game button click listener
private function quitGameButtonClickListener(event:MouseEvent):void {
  // Track the current score as a level average metric event
  //   You can track averages for specific levels or the entire game.
  //   Here the string 'Game' represents the entire game not a
  //   particular level string.
  Log.LevelAverageMetric("Score", "Game", score);

That's about it! The Playtomic website documentation is pretty decent and the community forums on the site are starting to mature a bit so that you can often get help from a question posted up there before too long. Once you integrate Playtomic into your own game you'll start thinking up all kinds of great uses for it. I've used the global leaderboards and level sharing APIs and will start experimenting with the heatmaps soon. I will use this base tutorial code to write up a few followup tutorials on Playtomic soon.

Let me know if I can improve this tutorial and if you have any questions at all!

[DOWNLOAD FLASH CS4 VERSION OF TUTORIAL]

I want to provide the best experience I can to my players within a reasonable amount of effort while at the same time I also want to make sure my game is going to provide as little friction as possible to potential sponsorship or licensing.

To that end I have 5 tips I wanted to share for dealing with audio in your Flash games that I’ve found helpful:

Tip #1 – Normalize your music and sound effects

This is a very simple tip but it is too often overlooked. Normalizing is basically just making sure that the loudest volume levels of all your sound effects and music are at a consistent and good target peak.

Normalizing your audio assets before you import them into your Flash library is a good way to improve your workflow. You know that all your audio is within a consistent peak range and you can balance further with your software volume settings.

You can use a free program like Audacity to provide normalization. I’ve found the default setting of normalizing to -3dB works well.  If you are using Windows 7 you’ll want to get the beta for Audacity.

Tip #2 – Individual controls for sound effects and music

Why provide two controls? A nice thing about having independent controls for sound effects and music is that it can give the player more freedom over the experience of your game. It can allow them to keep your sound effects playing but still jam out to their own music. Another reason is sometimes the player doesn’t mind the sound effects but maybe the music is starting to get repetitive the 100th time they’ve played your chain reaction game. I look for any little tips to keep players happy and in the game and I’ve had many positive player comments from implementing this feature.

Tip #3 – Provide common key bindings for audio control toggles

Setup a keyboard listener in Flash to respond to some common keys. I like to bind the ‘S’ key to toggle the sound effects and the ‘M’ key to toggle the music.  This is a real simple touch that allows your players to quickly mute your game when they can’t find the onscreen audio controls. Remember to provide text somewhere to let your players know these settings controls!

Tip #4 – Use volume sliders for sound effects and music

The good thing about providing volume sliders over a simple mute/un-mute toggle is that your players can mix the volume to suit their individual speakers or headphones. It can be incredibly hard to master and mix your game volumes correctly so that it will sound decent and in balance across the many audio systems it will be played through. Volume sliders give the power to the players to tweak one up or down to get that balance that is pleasing to their ears.

Tip #5 – Save sound and music settings in a shared object

This last tip I have implemented most recently based on some player feedback I got. I really like this tip because it never occurred to me until I received a story from a player. The player got busted by their boss for playing one of my games in the office because they were surprised when they loaded it up again and the audio of both the preloader intro movies and the main menu music was still enabled.  They had just assumed that since they had muted the game audio the last time they had played that it would have remembered!

Well I had never really thought of this feature before but it was quite easy to implement and has been really awesome. You can use a Shared Object in Flash to track any changes to the audio controls.  You might be using one already to record local highscore data and you can just record your audio settings to this object.  Then when your game loads you can check the Shared Object to see what the audio settings were (if any) the last time they played. If there isn’t any data then you can just enable it as as default. This allows you to mute the preloader intro movies and menu music when they return if they had disabled it in a previous gameplay session!

Got any other good audio related tips? Share them below in the comments!

This is a little demo I made this morning as a way to get a viewport concept working for the latest game I am developing.  I’ve done a few viewport type projects in other languages but had not implemented one in Flash AS3 yet.

This demo creates 300 random balls and sets them in motion inside the world.  The world’s dimensions are four times larger than the viewport above.

You can click in the window above and use the arrow keys to move the viewport around the world.  The source files for this tutorial are available at the end of the article.

BACKGROUND

I needed to be able to have world coordinates for my latest game along with a viewport which follows the player.  All the objects in the world must move according to various physics and be able to be mapped into the current viewport for display purposes.  After hacking around for a while unsuccessfully last night on the game code I realized this morning that it would just be better to start fresh on a little proof of concept demo until I had it all working.

I thought I’d share some of the concepts in case it could help someone else as well as get any code or design feedback from anyone who may have implemented these in a different or more efficient way.  I can already think of a ton of improvements my rudimentary solution could use but I’ll add them as necessary.

BASIC DOCUMENT CLASS VARS AND CONSTANTS:

// Viewport related constants:
private static const VIEWPORT_WIDTH:Number = 350;
private static const VIEWPORT_HEIGHT:Number = 300;
private static const VIEW_STEP:int = 25;

// World related constants:
public static const WORLD_WIDTH:Number = 1400;
public static const WORLD_HEIGHT:Number = 1200;

// Current viewport coords:
private var viewportX:Number;
private var viewportY:Number;

INITIAL SETUP OF VIEWPORT AND CREATING CIRCLES WITHIN WORLD:

This snippet is occurring inside an init() function that is called from the document class constructor. This is all one time setup.

// set view port coords to middle of world:
viewportX = WORLD_WIDTH / 2;
viewportY = WORLD_HEIGHT / 2;

// create a bunch of random circles scattered across the world:
circles = new Array();
for (var i:int = 0; i < NUM_CIRCLES; i++) {
var circle:Circle = new Circle();

// grab random x that falls within world space:
var wX:Number = GameUtils.randRange(0 + (circle.width / 2), WORLD_WIDTH - (circle.width / 2));

// grab random y that falls within world space:
var wY:Number = GameUtils.randRange(0 + (circle.height / 2), WORLD_HEIGHT - (circle.height / 2));

// set the coordinates for our circle:
circle.placeInWorld(wX, wY);

// add our circle to the display list:
addChild(circle);

// push our circle onto our array of circles:
circles.push(circle);

SNIPPET OF HANDLING KEYBOARD INPUT TO MOVE THE VIEWPORT:

This snippet is occurring inside a keyDown listener function which listens for the user hitting the arrow keys.  Each time the keys are hit it moves the viewport in the appropriate direction while performing range checking with the world borders.

if (e.keyCode == 38) {            // UP
 viewportY -= VIEW_STEP;
 if (viewportY < 0) { viewportY = 0; }
}

MAIN PROGRAM LOOP:

This is a simple enterFrame listener that loops through all the active circles and calls their update method. After the update method we alter the coordinates of the parent display object (in this case the instance of our viewport) inversely with the viewport coordinates. This allows Flash to automatically handle updating all the positions of the circles which are children of our viewport instance. Thanks to draknek for this elegant suggestion!

private function enterFrameListener(e:Event):void {
	for (var i:int = 0; i < circles.length; i++) {
		circles[i].update();
	}

	// pan the viewport
	x = -viewportX;
	y = -viewportY;
}

CIRCLE CLASS VARS:

Here are the variables that define my circle class.  This class is pretty basic and nothing too special has to happen here with regards to the viewport. The class will have to perform range checking with the borders of the world.

// Velocity:
private var velX:Number;
private var velY:Number;

CIRCLE UPDATE METHOD:

Here is a snippet from the update method that gives the basic idea of how to adjust the coords while range checking against the larger world borders.

// Adjust the x coord by current x velocity:
x += velX;

// Perform boundary checking with world borders and adjust
// position and velocity direction accordingly:
if (x < (width / 2)) {
	x = (width / 2);
	velX = -velX;
} else if (x > ViewPort.WORLD_WIDTH - (width / 2)) {
	x = ViewPort.WORLD_WIDTH - (width / 2);
	velX = -velX;
}

So that is my concept of one way to do a basic viewport in AS3.  I am happy to get any feedback on this code and the way I solved this problem.  I know there are many ways to implement these things but this is what I am going to run with for now as it seems to be working pretty good!

EDIT: Thank you to Draknek (see comments below) for an elegant refinement to my code that allowed me to no longer have to track world coordinates on the child objects. Now I can just let Flash handle updating all the positions for me by moving the parent display object instead of manually doing that.

Download the v0.2 source files and fla for this tutorial