Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Using Google Events to Track "Fun Rating"

Inspired by the Flash Love Letter Part 2 by Daniel Cook, I've included a fun rating in my latest game Word War I. The Word War I game has five stages and the rating is shown to the user once between one of these stages. The stage to show the rating is chosen randomly before the game starts and is only shown the first time you play. The player is given a dialog that asks them to rate the game 1 to 5, with 1 being hate it and 5 being loving it. I chose to store the rating by the stage that the user is on and the difficulty that they are playing. So in Google Analytics, I can see how many Fun Ratings I have and see what the rating is at each stage of the game. GA also shows the combined average of all the scores.

Example Data


This chart is showing 1034 votes over a one week period and the average fun rating is 3.12, which means according to the Flash Love Letter that I probably shouldn't charge anyone for this gaming experience :) Interesting that the players who were shown the rating later in the game tended to give it higher ratings, probably would be true for most games. One really cool thing about this being Google Analytics is you can use the Dimension drop down to further break down the average rating to see how your game is doing by a continent, browser, ect... . Europeans are giving the game a much lower score, 2.95, than Africans, 3.5, and people in Woodstock only think it is worth a 1 but people in Baltimore love it 5.

How To Use Event Tracking

Follow my previous post on including the swc files and add the import statements and create the tracker object. Then at the location in the game where you want to track an event add the following code:
//trackEvent(category:String,
  action:String,
  label:String = null,
  value:Number):Boolean

tracker.trackEvent("Word War I",
  "Fun Rating",
  currentLevel.type + gameStage.stageURL,
  rating);
The trackEvent function takes four parameters. The first parameter is the event category, for the category I used the Game name so in the GA control panel I will see all the events for "Word War I" listed in the same area. The second parameter is the action, I called my action "Fun Rating." The third parameter is the label, the label I used is the location the user is in the game and the difficulty they are playing. The label is useful for tracking where the user was when they submitted this Fun Rating. The last parameter is the actual rating the user submitted.

Tracking Events vs Page Views

The benefit of events is that you can assign a value to the event. The values are automatically averaged for you. Events should be used for things like average playtime or to see how many people use a certain item. Make sure you don't send too many events from your game, there is a limit on the number of events and page views you can send in one session. On Word War I also created an Event for trackacking how many games a user plays. The number of times played is stored in a SharedObject and incremented each time they click a difficulty level to start a game. I am trying to see how many players only play once versus play multiple times.

The benefit of the pageView is you can setup goals and see how far users are progressing and where they are dropping off. I've found the Funnel Visualization to be the most useful feature for seeing where I should make changes.

A Note on Goal Funnels

I setup goals for this game to see how far the average user was making it in the game, but I sent out the pageView "gameOver" whether they finished all the levels or were killed on the first level. The funnel visualization graph started showing that everyone who finished the first level then went on to finish the game, which I know isn't true because the Hard level is almost impossible to finish. So make sure you send out a different pageView url for "gameOverKilled" versus "gameOverFinishedGame."



Play Word War I and other Typing Games at http://www.onlytypinggames.com

2 comments Labels: , , | edit post

Flash Game Development Tutorial 2: Loading assets

The first problem I ran across when trying to publish the Fisher Girl game onto portals was that I had used more than one file when building the game. I was dynamically loading in external assets like xml, png, and mp3. Most game portal sites only want one file, so all of those assets need to be embedded in one .swf file. Once you have a single swf your game can go viral because now when a portal sees your game and they can download it and host it easily.

In this tutorial I am going to be embedding assets from the Lost Garden Fishing Girl game, so you will need to download the .swf file from Fishing Girl:Game Prototyping Challenge. Of course you could use any swf that has linkage ids set.

Opening a Shared Library in FlashDevelop

Start a new AS3 project in FlashDevelop. Create a new folder inside the src folder called assets and copy the FishingGirl.swf into that folder. In FlashDevelop you should now see your assets folder and the swf file. Expand the swf file by clicking on it. You should see a small grayed out folder called Symbols, expand the Symbols folder. The items inside the Symbols folder that have a small image next to them are the symbols in the Flash file that have a linkage id set.

Embedding Assets

Open your Main.as file and put your editing cursor at the top of the class and then double click on the fishSmall1 symbol. This will auto fill in the Embed code for you. Directly under the Embed code type in a class name, so that your code should end up looking something like this:

...
public class Main extends Sprite
{
        [Embed(source = 'assets/FishingGirl.swf', symbol = 'fishSmall1')]
        private var FishSmall1:Class;
        public function Main():void
...

To learn more about the Embed syntax: http://www.bit-101.com/blog/?p=853

Now when you compile your .swf the asset FarGround1 is actually embedded in your swf and can by referenced by the class name "FarGround1." To get a DisplayObject you can now call 
var fish:DisplayObject = new FishSmall1();

However, It's too much work to always be referencing these assets as Classes, I'd rather be able to say something like SpriteManger.getSprite("fishSmall1") and get back a DisplayObject that I can put right onto the stage no matter how the fishSmall1 was embedded. My SpriteManager does just that. It is a singleton so it can be accessed anywhere and you can add a Class and give that class an id String. Then whenever you want a copy of that image you can just call getSprite with that String. Example:
//add the class to the SpriteManager
SpriteManager.getInstance().addClass("fishSmall1", FishSmall1);

//create a display object that can be shown on the stage
var fish:DisplayObject = SpriteManager.getSprite("fishSmall1");

//add to the stage
stage.addChild(fish);

So now you can embed an asset from a shared library swf and display it on the stage. Feel free to use the SpriteManager class in your project and if you find a better way to manage sprite assets in a code only Flash project let me know.

2 comments Labels: | edit post

Flash Game Development Tutorial 1: Setting up FlashDevelop

I developed the Fisher Girl game as part of a prototyping challenge. The Lost Garden blog regularly holds game prototyping challenges and gives away a game design and graphics. So starting with the Fishing Girl design and graphics I created the Fisher Girl game (play it: http://www.nonoba.com/darkzak/fisher-girl).

I don't have a recent version of the Flash editor, so this game was developed entirely using FlashDevelop (http://flashdevelop.org) and the open source Flex (http://www.adobe.com/products/flex/) framework. Since this game was build completely using open source/royalty free tools, graphics, and music I am going to give back to the community by posting tutorials on how I built the game.

To follow these tutorials you will need:
Setup

Install FlashDevelop and unzip the flex sdk to somewhere simple you will remember (I installed to C:\tools\flex). Then open up FlashDevelop and in the main menu click Tools > Program Settings. In the left hand list choose AS3Context, then in the right hand list find the Flex SDK Location and enter the location you unzipped the Flex sdk to (On mine I entered C:\tools\flex).

Test Setup

You should be all setup to compile in AS3! Let's test it out.

In the main menu click Project > New Project..., choose AS3 Project, set the Name to be HelloWorld, select a location for the project, and select the Create a directory for project checkbox. After you click OK, you should see a new project created in the right hand box under Projects. Open up the src folder in the Projects area and open the Main.as file. FlashDevelop does a lot of the initialization code for you. Find the "//entry point" comment, this is where you first have access to the flash stage. Directly under the entry point comment paste the following code:
var output:TextField = new TextField();
output.text = "Hello World";
this.addChild(output);
You will need to add the following import statement: "import flash.text.TextField;"

To test your code hit CTRL+Enter or Project > Test Movie. You should see "Hello World" printed at the top of the movie!

In the next tutorial I'll show how to embed game assets from a swf or from png files into your game.

2 comments Labels: , | edit post