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!

Game Description:

Angry birds? Try angry pigeon! You play a French pigeon that has had it with all the crowds and traffic generated by le Tour de France. You set out to disrupt the last two minutes of the bicycle race the only way you know how–by pooping all over the place! Cause massive pileups with the power of pigeon poop!

Play le Turd de France!

Additional Screenshots:

Here you have just acquired the Mega Poop powerup!

Unleashing the fury of the Mega Poop!

Scoring a sweet triple direct hit! Direct hits increase your multiplier and let you score big.

The race is wrapping up! I’m pretty sure you made your point with the bicyclists…

The race has finished! Here you can review all those critical race stats.

Background:

This game was a very silly collaboration I did together with fellow game designer Joshua A.C. Newman of the glyphpress. It was inspired by his friend Judith Shaw who got pooped on by a pigeon while riding her bicycle. Joshua is an avid bicyclist and he contacted me to see if I wanted to help bring that incident to life as a video game.

We thought basing it around le Tour de France would be a funny way to provide a setting with plenty of opportunity for humor.

Of technical interest would be the fact that the peloton of bicycle racers is controlled by a heavily customized version of Boid’s flocking algorithm. Each biker dodges the poop splats on the ground as well as the road edges and the other bikers–all the while trying to reach a target point toward the right of the screen. I also added a 5-state internal bicyclist model that controls their stamina and energy and allows them to try to reach the front of the peleton before tiring out and drifting to the back of the pack.  It took a few days of heavy playtesting to tune the flock algorithm just right to make it fun but it is so great to watch that the intense effort was well worth it!

Give it a play over at AddictingGames!

Game Description:

Good Prince William is to wed the darling Kate this very day. But he is on the other side of town! This simply will not do. Run to meet your bride, ducking old girlfriends and paparazzi on the way. Be sure to grab your princely powerups. Release the Hounds!

Additional Screenshots:

Here William leaps over an ex-girlfriend. He’ll have to dodge that paparazzi too!

William has reached Kate with 22 seconds to spare. The crowds at Westminster Abbey go wild!

Background:

Royal Wedding Run is a viral news game I was contracted by MTV to make for their AddictingGames arcade portal. The news event was the wedding between Prince William and Kate Middleton on April 29th, 2011.  The game is extremely silly and had a lot of humorous voice acting performed by various folks at MTV. I was responsible for the programming of the game and the artist was the talented Eric Falk.

Robot Reaction was one of my Flash games from 2009 that I completely rewrote to work with the Flash CS5 Beta program. I was able to use the iPhone Packager for CS5 to get my first game into the Apple App Store.  It was a great learning experience in old school optimization techniques like bitmap blitting as well as a sobering business look at how hard it can be to make any money in the App Store vs the Flash business space I was familiar with.

Play Robot Reaction!

While I was out at the Flash Gaming Summit and the Game Developers Conference I got to meet up with the fine folks over at the Kongregate office in San Francisco to hatch out plans for an advergame for Cheetos and Frito Lay. It was my first foray into contract advergame work and I had a great time working to create this game.  It was based off of my Orange You Glad game that people at Cheetos had spotted over on Kongregate and wanted me to create a custom version with the Cheetos theme.

Play Mouth Full of Happy!

Feeling a lot of inspiration after my return from the Indie Gaming Summit at the Game Developers Conference I wanted to get more involved in some of the online game competitions that were run monthly over at the Experimental Gameplay Project. Contentric was created in a week for the EGP theme of You Only Have 10 Seconds and I was quite happy with the result. I was even more pleased when Armor Games decided to sponsor it!

Play Contentric!

Next on my hit list was the desire to finally participate in one of the competitions over at the TIGSource forums. There was a new month long competition being run with the theme of A Game By It’s Cover that had a fascinating concept to me. We were to pick a fake game cartridge whose art inspired us to think up an actual game based on the fake art. For The Twin was what I managed to come up with by using this case art.  Besides creating a lot of creepy cute art and backgrounds for the game I also composed seven faux chiptune loops in Reason for the game that came out quite well. The game ended up being sponsored by Spil Games and was played over one million times in the first month alone–a new milestone for me!

Play For The Twin!

The last game I published in 2010 was initially created for the 18th Ludum Dare 48hr game competition theme of Enemies as Weapons and polished up for the Experimental Gameplay Project theme of Zero Buttons. I went with a retro look and classic arcade gameplay for this challenging avoider collector mouse skills game. I then spent the month of October working on a final version of the game for the Ludum Dare October Challenge to sell a game in a month. Newgrounds ended up sponsoring AVOIDAL and I got to create a bunch of medal achievements that were pretty fun to try and win.

Play AVOIDAL!

I also found it insightful to take a look at all the games I worked on yet did not manage to publish for one reason or another. Many of these games are still on my todo list for 2011 and will see the light of day eventually.  Digging through my directories I discovered that I had worked on a total of 12 games this year while only publishing 5. I’m not sure if that is good or bad but it is worth keeping on eye on since I do believe in trying to finish games in order to get the most experience and value from them.

I had attempted to learn an early version of Flash Punk and I found it to be a really great Flash game framework. My efforts stalled out though with this untitled retro dodge game and I still have to learn the newest version.

I made a game in two hours for one of the crazy Glorious Trainwrecks Klik of the Month Klub #35 events called Wizards vs Ghosts which I find amusing.  Creating a game in only two hours is truly mind breaking!

I”m still actively working on a final expanded version of my 2009 Ludum Dare game called Angry Caverns and a 2009 Ludum Dare game called Fleedom. I’m still developing a pixel art arcade game called Bomb Diver as well as collaborating with another game designer/artist on a ridiculous game about pooping pigeons and bicycles.

A few of the random things I am happy about from 2010 include finally getting to go to my first Game Developers Conference as well as attending the Flash Gaming Summit the Sunday before GDC. It was a truly inspiring week spent in San Francisco and I met so many awesome game developers and Flash publishers. I am really looking forward to returning again this year.

Another great milestone was getting a New Hampshire LLC for Hybrid Mind Studios so it is all official and everything.

On the competition side of things I managed to host my first Mini Ludum Dare event around the theme of Constraints which I felt had a great turnout of submitted games and was fairly well received by the community. My game Alien Flight Academy – Graduation Day was the result of that competition. A bizarre experiment in alternate keyboard controls.

As I mentioned previously I finally had a Flash game break the one million views mark. It was a simple milestone I had looked forward to finally achieving.  2010 marks my second full year releasing Flash games and it is so amazing to look back at my first Flash game TurnStyle which was released in Feb of 2009 and only ever got about 150k plays total and compare that to my more recent games that reach millions. That fact just continues to floor me. I never dreamed that I might be able to reach such a large audience with my games, art, and music! The Flash game space offers game designers an amazing distribution opportunity that I find very inspiring, humbling, and flattering all at the same time. I look forward to trying to reach more and more people as I improve my craft.

Determined to get more involved in the local game development community around Boston I started attending monthly Boston Indies meetups and the local Boston Game Loop conference. I even started up a weekly game development co-work meetup down in Cambridge, MA at Sprout for three months to help myself meet other area game developers. It’s been great getting to know so many fine people in my neck of the woods.

Along the same lines as getting involved more locally–near the end of 2010 I had the good opportunity to take part in my first team game jam too! I was at a Boston Game Jam event called Lunar Jam and I helped out primarily as the artist doing many black and white illustrations for a choose your own adventure type visual novel game called Perchance to Dream that is still in development.

I’ve managed to work with great portals like Armor Games, Big Fish Games, Newgrounds, Kongregate, King, Spil, Addicting Games and many others. Each new relationship I establish helps me to feel more comfortable that I’ll be able to continue doing independent game development full time–my childhood dream!

Looking at what I have planned for 2011 is pretty exciting to me. There are many games I’ve been working on that are nearing completion that I can’t wait to publish to see what the players think. I also want to collaborate more with other game designers, artists, musicians, and programmers. I plan to keep attending conferences like the Flash Gaming Summit and the Game Developers Conference as well as other regional and local events. I hope to keep learning new technologies, skills, and game design techniques. I look forward to building my relationships with other game developers. I have so many game ideas that the lists are growing out of control. I hope I can manage to stay focused and driven enough to get even a tenth of these new ideas out. I can’t wait to see what 2011 holds for myself as well as the other game developers out there.

Bring on the games!

Before I can really talk about what games mean to me I think it is important to provide a brief amount of background on where I am coming from on this personal subject.

I began developing a love for both drawing and programming as a young child and have spent countless enjoyable and priceless hours on those activities over the years. I caught the art bug bad in the late 70s after encountering Speed Racer on TV and the first Star Wars movie.

I filled page after page in my father’s art journals with little car race and space battle scenes. I remember him taking a lot of time showing me how to draw and even how to do flip book animations on the corners of the journal pages.

Even before we had a home computer my parents started sending me to Radio Shack computer camps at age six for programming in LOGO where I would get very familiar with that friendly drawing turtle and pen up and pen down. Then when I was about eight years old my parents got our first home computer. It was a TRS-80 but we only had it for one night–the salesman from Radio Shack called back to say they had received something better and wanted to know if my father wanted to upgrade.

That is how I ended up with a Tandy 1000 and a great book on BASIC by David A. Lien.  I will never forget noticing the author’s middle initial and last name could form the word Alien and would always wonder if that was a joke or not. I would use that book on BASIC along with numerous Mother-chaperoned trips to the Public Library to spend all my free time filling floppy disks with hundreds of BASIC computer games.

This dual exposure at a young age to both art and computers ended up having a very lasting effect on me. I have equally split my time between science and art related pursuits. I remember piling on the art and math classes in high school and always being frustrated at how both subject tracks wanted to exclude access from the other. Teachers always wanted you to pick your path. They couldn’t seem to comprehend why you would want to do both. This made no sense to me. I’ve always seen art in science and science in art.

I have attended four different colleges trying to get degrees first in Illustration and Painting, then Film, then Psychology, and lastly Computer Engineering. I always did well in college but would eventually get too impatient with what I felt was a slow pace and drop out to pursue various self-employment opportunities either by myself or with other like minded people I’d meet in college. I still have no degree but it hasn’t really slowed me down any. I have been self-employed full time for over ten years now even though the types of businesses may have varied.

I feel this background I’ve shared critically relates to what video games have come to mean to me. I believe the frustration I found when I was younger in having to pick between either “being an artist” or “being a scientist” drove me mad. I didn’t understand why someone couldn’t be interested in both. I eventually decided to stop trying to pick and realized that I just love learning about anything that interests me.

It wasn’t until the past two or three years that it finally dawned on me that the only career and passion of mine that has existed since I was a child and that could encompass everything I was interested in was video games.

I believe you can make a video game about anything at all and it can utilize aspects from every art form yet created by humanity. This realization absolutely blows my mind with excitment.

I love creating the art, the sound effects, the music, the game mechanics, solving the math problems, engineering the software, writing story or dialogue if applicable–the list is endless as to what a game can contain. This inspires me beyond anything I have yet found in my life so far to create and I’m quite thrilled as to the possibilities that await people in general for both what games will continue to teach us and where they yet have to go as a medium.

All this debate I’ve witnessed over the past few years as to whether video games can be art or not makes no sense to me at all.

I am a person that truly believes a life well lived can be art.

Life is art.

Games can be art.

This is what games mean to me.

Just wanted to post a fun image I assembled from seven different games I’m working on releasing still. The top of the image which contains the aliens in the mushroom landscape is from For The Twin–a game that I’ve finished for the “A Game By It’s Cover” Competition over at TIGSource and which will be released in September or sooner now that it has found a primary sponsorship from Spil Games.

The rest of the images are from unreleased games that I’m still working on. They are roughly listed in the order I expect to complete them though that could change a little bit of course.

They are all between 50-80% finished though and I am not going to work on any new game projects until I clear out my backlog!  This of course doesn’t mean I won’t be participating in August’s Ludum Dare 48 hour game competition–I wouldn’t miss that for anything especially since I couldn’t attend the one in April.

I also will continue to complete my contract game projects like the one I recently finished up for Kongregate and Cheetos called Mouth Full of Happy.

A big reason for wanting to knock these game projects out is that this year I’ve only officially released two games so far compared to the six I released in 2009.  It’s not that I haven’t been working on as many games it is just that I have not finished as many. I believe in the importance of finishing your games and I fully intend to.

I also believe in the gameplay and the sponsorship potential of all the games above so I need to finish them off and get them over to Flash Game License for bidding before the year ends. That is the plan anyway–wish me luck!

The main concept is that the player’s actions effect the movement of the blocks to be avoided. This in essence makes the player their own worst enemy. I was experimenting around with nested spring feedback systems and this concept of player as AI when I stumbled upon a fun and playable prototype that went on to become this game.

I spent about 7 days developing the version I submitted to the Experimental Gameplay Project website and then I worked for a bit longer polishing it up to get it ready to seek sponsorship.  I’m happy to report that Armor Games picked up the primary sponsorship on it and Contentric officially launched yesterday!

It was great to work with Dan from Armor Games and I definitely recommend them to any other flash developers out there who are looking for a good sponsor.

I’m really quite happy with how this game came together.  I was able to get a ton of playtesting feedback early on which really helped me perfect the gameplay to where I wanted it.  I also got to write the music for the game which people seem to be enjoying as well so that is always a treat.

Here is a gameplay trailer I put together with some rough edits that show me getting a little over 13,000 points.

As usual I welcome any feedback positive or negative and would love to hear from you.

I’ve spent some time over the last week helping my good friend and fellow game designer Jeremy P Bushnell compile a list of historically important video games.

Jeremy has been teaching a Writing course at Boston University on the topic of “Playing Games: How Video Games Work and What They Mean.”

In his discussions with the students about the concept of historical analysis: analyzing video games based on how they “fit” into the context of a developing timeline of games, he had a chance to create an initial list of about 40 games.

This list was then passed around between our friends and associates as well as being shared with his two classes of about forty students total.  Jeremy encouraged his students to confront and challenge the games on this list as well as suggest ones they felt should be included.  They even got to write persuasive papers as an assignment to get a game included on the list.  If the argument was convincing enough they even received some extra credit for making the list.

Jeremy and I discussed some of the more convincing papers and kicked our thoughts back and forth on what made these games historically significant. It was a lot of fun and very interesting to get to consider where videos games have come from (with Spacewar in 1961) up through to the present day.  It was a challenge to pick games not for being good or popular necessarily but for their historical significance.

The finished list (reposted with permission) now stands at 64 chronological games (a nice power of 2) and includes justifications for why each game was included:

64 Important Games From Video Game History version 2.0

1. 1961     Spacewar, first digital game / first shooter / first two-player game
2. 1971     Oregon Trail, landmark educational game (designed in 1971, produced in 1974, re-released in 1985, 1992, 2001, 2008, and 2009)
3. 1972     Pong, first commercially-successful arcade game / first sports simulation, also first digital game released for the home market (1975)
4. 1974     Gran Trak 10, first racing game
5. 1976     [Colossal Cave] Adventure, first adventure game
6. 1976     Breakout, landmark arcade game
7. 1977     Night Racer, first first-person racing game
8. 1978     Space Invaders, first commercially-successful shoot-em-up (160,000 copies sold)
9. 1978     Atari Football, landmark sports simulation game
10. 1979     Asteroids, landmark shoot-em-up
11. 1979     Adventure, first action-adventure game
12. 1980     Zork, landmark text adventure game
13. 1980     Space Panic, first platformer
14. 1980     Pac-Man, landmark arcade game (350,000 units sold)
15. 1980     Rogue, early graphical adventure game
16. 1981     Donkey Kong, landmark platformer (60,000 units sold), also the first game to tell a complete (embedded) narrative
17. 1982     Pole Position, landmark racing game
18. 1983     Intellivision World Series Baseball, first 3-D sports simulation, also the first sports simulation to use multiple camera angles to emphasize action
19. 1983     Ultima III, landmark PC role-playing game
20. 1983     Lode Runner, landmark platformer, plus an early game permitting the creation of user-generated levels
21. 1983     Pinball Construction Set, an early game permitting the creation of user-generated content
22. 1984     Tetris, landmark abstract puzzle game
23. 1985     Gauntlet, landmark multi-player game
24. 1985     Super Mario Bros., landmark 2-D side-scrolling platformer (forty million copies sold)
25. 1986     Air Warrior, first multi-player online game with graphics
26. 1987     Earl Weaver Baseball, landmark sports simulation
27. 1987-8    Street Fighter / Street Fighter II, landmark one-on-one competitive fighting games
28. 1987     The Legend of Zelda, landmark adventure game, also the first home cartridge to permit saving, also a good early example of a game which permitted non-linear play
29. 1989     SimCity, landmark developer simulation
30. 1990     Microsoft Solitaire, landmark casual game
31. 1990     Minesweeper, landmark casual / puzzle game
32. 1990     John Madden Football, landmark sports simulation
33. 1991     Civilization, landmark turn-based strategy game
34. 1991     Neverwinter Nights, first multi-player online role-playing game to display graphics
35. 1991     Final Fantasy IV, landmark console role-playing game
36. 1991     Myst, landmark adventure game (six million copies sold)
37. 1992     Wolfenstein 3-D, first commercially-successful first-person shooter
38. 1992     Mortal Kombat, landmark fighting game
39. 1992     The Incredible Machine, early physics game
40. 1992     Dune II, first real-time strategy game
41. 1993     Doom, landmark first-person shooter, also a good early example of an open-source game
42. 1995     Command and Conquer, landmark real-time strategy game
43. 1996     Quake, landmark first-person shooter, also a good early example of a game utilizing an online multiplayer mode
44. 1996     Super Mario 64, landmark 3-D platformer (eleven million copies sold)
45. 1996     Resident Evil, first survival horror game
46. 1996-8     Pokemon Red / Pokemon Blue, landmark RPG (eight million copies sold), also a good early example of a game with innovative multiplayer mechanics
47. 1997     Lego Island, first open-world game
48. 1997     Ultima Online, landmark multi-player online role-playing game (250,000 subscribers)
49. 1998     Dance Dance Revolution, landmark rhythm game / exercise game
50. 1998     Half-Life, landmark first-person shooter (eight million copies sold), also a landmark example of an open-source game
51. 1998     Tom Clancy’s Rainbow Six, first commercially-successful tactical shooter
52. 1998     Metal Gear Solid, first commercially-successful stealth game
53. 1998     Starcraft, landmark real-time strategy game
54. 1999     Tony Hawk’s Pro Skater, landmark extreme sports simulation
55. 1999-2000    Counter-Strike, landmark mod, also a game making central use of online multiplayer technology
56. 2001     Bejeweled, landmark puzzle / casual game
57. 2001     Gran Turismo 3, landmark racing game
58. 2001     Grand Theft Auto III, landmark open-world game
59. 2002     The Sims, landmark life-simulation game (sixteen million copies sold), plus a game making central use of user-generated content
60. 2003     Diner Dash, landmark time-management game
61. 2004     Halo 2, landmark in online console gaming (four million subscribers)
62. 2004     World of Warcraft, landmark multi-player online role-playing game (over eleven million subscribers)
63. 2005     Guitar Hero, landmark rhythm game
64. 2006     Wii Sports, landmark sports simulation (forty-five million copies sold)

Your comments and arguments are welcome!

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