See You At DevCon5, New York, Next Week!

I will be speaking about the HTML5 Canvas at 3 sessions of DevCon5 in New York next Monday, July 23rd. If anyone is near NYU, DevCon5 is a great way to learn all sorts of cool stuff about HTML5.  Unfortunately, Jeff can't make it this time, which means I'm twin-less (My wife is coming along though, which will be awesome, as we have never been to New York together).  If anyone that comes to this site is going, please make yourself known.  I'd love to meet you.

-Steve Fulton

Filed under: DevCon5 No Comments

Pong Returns : Postmortem For The Atari Pong Indie Developer Challenge

Atari announced the finalists for their Pong Developer Challenge on June 26th, and we were not included on this.   Thus, our time as part of the Atari Pong Indie Developer Challenge comes to a close.   In this post-mortem we look back at what we think we did wrong, what we think we did right, and how we move on...


When Atari announced the Pong Developer Challenge a few months ago, I was initially excited.  Atari contacted us to promote the contest, and we gladly did so, as always.    However, when I read the news I had a feeling that I wanted to take part myself.    I talked it over with the other guys at Producto, and they were mildly interested.

However, the next day, when Gamasutra ran a negative story about the terms of the contest ("Why Atari's Pong Indie Developer Challenge is bad for developers" by Brian Robbins), visions of the Flash game portal days of yore came flooding back.   Flash game contests were, may times,  notoriously lopsided in favor of the portal putting on the contest.  Most of the time they gave the portals a lot of free content, and the developers lost the tight to their own work.

However, I saw this Atari contest as something different.  Atari would own all the submissions but they would essentially be Pong, so they owned the rights anyway.    It seemed that no matter what I came up with, there was no way I could use it myself, so why not submit it to Atari and see what happened?

The Name

The name of the submission came to me almost as soon as I heard about the contest.  "Pong Returns" had an obvious double meaning.  "Pong" was coming back as game, and in the game itself your job is to "return" balls coming from the right side of the screen.

Design Doc submission

When the dead line for the contest was approaching on April 15th, I only had a very slight idea about what our Pong game would be,  I wanted to create a game that paid homage to all the Atari coin-op that came between Pong and Asteroids in the 1970's.  I wanted the game to  for a single player, and I wanted it to look as retro as possible, but with a retro-evolved bent.  My modern gaming touch points were bit.trip.beat and Furu Furu Park.  I spent the entire weekend before Aprial 15th pouring all of my Pong aspirations into a 26 page design document.    Here is how I described the game in the introduction.

Tag Line: A mashed-up, fast paced, hypnotic journey through the history of Atari’s earliest coin-Ops

Introduction:  As life-long Atari fans, one thing that frustrates us is how little credit Atari gets for pioneering video games in the 1970’s.   Atari is recognized for Pong, Breakout and Asteroids as if those were the only video games made in the decade.    In reality, Atari pioneered maze games, space games, racing games, shooting games, and everything in between.    However, since most of the games were created with discrete logic chip designs without a microprocessor, they cannot be “emulated” on modern systems.  This means that few people have played the games, and thus, they don’t really understand the impact that Atari’s coin-ops had on the video game industry.

The aim of Pong Returns is to “right” this “wrong” by morphing the game of Pong into a journey through the history of Atari’s “lost” coin-op games from the 70’s.    The game starts on a familiar Pong playfield, but as the levels progress, elements are added from classic Atari coin-op games to increase the challenge and vary the game play.   At its’ heart, Pong Returns is still Pong, but by mashing-up the gameplay of Pong with elements from Atari’s coin-op history we aim to create an addictive, engrossing, and transcendental experience that plays homage to and respects Atari’s amazing history.

Inspiration: Pong Returns is inspired by the many versions of Pong that Atari released in the 70’s, and by the wealth of other coin-op games Atari created in the same time period.    At the same time, the game is inspired by such modern classics as Bit.Trip.Beat (for the single player Pong style action) and games like Furu Furu Park that mash-up elements of classic games with modern game play.

Description:  In Pong Returns the player's job is to "hit back" or "return" 11 balls per level through the from the left side to the opposite side of the screen.  On some levels, the area to get the ball “through” on the right side of the screen is limited.  Each successive level introduces new elements or obstacles that must be overcome to continue in the game.  The new elements and obstacles introduced are pulled from the history of Atari Games from the 1970’s, culminating in a battle with the seminal rocks and UFOs from Atari’s Asteroids.

Number of Players:  Pong Returns is a single player game played against computer opponents. 

Opponents: The computer “opponents” move in rhythmic patterns, and while they simulate A.I. they are not necessarily A.I. players.   Instead, players will be rewarded and encouraged to recognize the patterns of play so they can advance to higher levels.   On some levels it will be necessary to simulate A.I. to ramp the difficulty level, and this will occur on an as needed basis,

Visuals: The visuals of the game will be decidedly retro and 8-bit.  Characters designs and animations are inspired by Atari’s coin-op output from the 1970’s and stay as close to that aesthetic as possible.  However, to add variety, visuals tricks that Atari pioneered like color cycled images and audio visualizations like the ones created for Atari Video Music (see example here: http://www.youtube.com/watch?v=-NWwtZCpC2M)  will be incorporated into the backgrounds.  Also, art work from the Atari coin-op that inspires each level will be superimposed in the background of the display.

So far so good.  I described exactly the type of game I would want to play.  If Atari did not like the idea, they could stop right there and not bother with the rest.  What followed was 20 or so pages that described, in detail all of the Atari Coin-Ops that would be mashed-up with Pong for the levels in the game.  Some of them were classic Pong games by Atari, others were Atari coin ops hardly any one remembers (Shark Jaws, Jet fighter) and still others were well known classics (Asteroids).



The Pong mash-up would include class Pong game play invaded by the art and characters from Atari coin-ops through the 70's  It would be like a journey culminating with a battle against Asteroids.

You can see the entire design document here:  Pong Returns Design Document First Draft


I turned in our design document, and and figured we had no chance of getting any further.   This was my dream idea.   The opportunity to recreate and play with Atari coin-op images and game-play from the classic age was a goal unreachable, wasn't it?   I laughed it off.  It was fun to come-up with an outlandish idea.    In fact, for some of the mash-ups I had devised (i.e.  the ones for Tank and Stunt Cycle) it was not clear how I could even to pull them off:


Still, I wanted Atari to like the idea.

Mistake #1: Scope : 

Designing something that would take too much time to create.  While the mash-up idea might have been a good one, the contest deadline was short (just 4 weeks to make demo, 3 weeks to fnish the whole game).  With 20 coin-ups to mash-up, scope was just too large

The Demo

On the morning of May 1, I was very surprised to see the name "Producto Studios" listed as one of the semi-finalists in the contest.   The next round required us to create a demo and a "video".  We had about 4 weeks to complete both, and I had no idea hope I was going to get both done.  We were working on a couple in-house projects, and I was writing the content for a class on HTML5 that was due the same day as the contest entries.

Still, how hard would it be to create a demo for Pong Returns?  It was a one-player games of Pong with multiple levels.  Easy right? Well, some times things that appear easy get all tangled up when you think about them too much.

Mistake #2: Focusing On Nuances And Not Optimization

I desperately wanted to replicate the audio visualization from the Atari Video Music appliance from the 70's into the game.  Atari Video Music hooked-up to a stereo and used the wave-form of the music to display hypnotic images on the screen.

I knew that Flash had a very easy way to access the wave-form data of songs, so I made the decision to build the demo in Flash and export it to iOS.   I tested a simple version of this with some shapes moving to music on an iPad, and it appeared to work pretty well.    This was an encouraging start for the project, but it colored everything else.

The next step was to build a particle effects engine.   I wanted everything to explode in glorious particles.    I had this vision of the video music visualizations moving to the beat of some chip-tune style techno music, with particle exploding all over the place.  I still liked the idea, and in my head I wanted it to look cool, and be part of a cool game.  However, focusing on those nuances instead of game play was a huge mistake.

At the same time, while you can make some good iOS apps with Flash, the code needs to be heavily optimized for performance.   I simply did not have the time to fully optimize the game, and demo suffered because of it.  Because of this, most of the visualization and particle effects needed to be removed in the demo for performance.

Mistake #3 : I Made Pong

By the time I started to work on the actual game play, there was only about 7 days left until the contest entry was due.  Again, I was writing class materials at the same time (and in fact, flew to San Francisco to teach class the same day the contest entry was due).   I should have budgeting my time more wisely, but since this was just supposed to be a "demo", I worked feverishly to incorporate as many of the early Atari com-op games as I could with my remaining time, and did not really consider what the "final" game would be.    The idea was to hint at the game play that would be in the final game, and figure out the rest once the demo was complete. It turned out,  I was able to get Pong, Pong Doubles (two paddles), Super Pong (3 paddles) and Coupe De Monde (soccer with a goal) done with a reasonable level of accuracy, but ran out of time for much else.

When I played the game, it was okay, but it was still just Pong.    Four successive version of Pong, but still just Pong.   With my few remaining days, I  started to panic because, well,  that I had essentially made Pong.   I went back to the drawing board an worked out a concept that each "game" (Pong, Pong Doubles, etc.) would encompass four levels in the games.  The 1st level would use a computer player that moved in a repeatable pattern.  The 2nd level would be like the original game, with computer A.I., the 3rd level would be a "frenzy" where balls shot out at a regular intervals, and the 4th level would be "battle", where the walls closed-up, and the played had to destroy enemies on the screen.   At the last minute, I threw in a quick set of levels based on "Asteroids" (but used the AI ad movement from the Pong levels) just to show what that might look like in the game.   In the end, the demo had 20 levels with the promise of about 60 more once the final game was complete.

Here is a video of the actual game play.  I've restored the audio visualizations to the game screen, but other than that, it's identical to the submitted demo.

Final Thoughts

If I had the chance to start over, I don't think I would make a different game.  I would focus less on the nuances,  and more on optimization, but in the end, I was working towards making a game that I wanted to play...and one I still want to play.   I wish had had the opportunity to explore how Pong could have been mashed-up with more old Atari coin-op games, because to me it still seems like a fun idea .  Unfortunately, even though I still want to play Pong Returns  in it's final, finished form, but I will never get the chance.    I learned a lot through the process, some things that I'm already using to make new games right now.

-Steve Fulton


Flash CS6 + Our Book On Flash + iOS = Surprisingly Good Performance. I Feel Vindicated

A couple years ago, Jeff and I published The Essential Guide To Flash Games through Friends Of Ed.   At nearly the EXACT moment the book went into print, the whole Apple/Flash/iPad flap blew-up the Flash world.     What we thought would be the culmination of 10 years of work in Flash games became a sort of albatross.   The book used techniques that we have developed for many years, as well as new ideas designed to get good performance from iOS.  However,  at the last minute, we had to strike all references to mobile out of the book.  Then to add insult to injury, bugs in CS4 and new ones introduced in CS5, rendered some of the examples in the book useless.   We were shattered by the experience, and decided to move on to the HTML5 Canvas.

Well, imagine our surprise when, on a whim,  we ran some tests with Flash CS6 this week and found that the techniques we developed for The Essential Guide To Flash Games now produce some really solid code with great performance on iOS.     Unfortunately, we are not in the position to write any tutorials right now about it, but we might post a video demo next week to show just how many objects and particles we can get up using a fully blitted engine when exported from CS6 to iOS.

Anyway, don't count out Flash just yet.  There still might be some life left in our old friend.




In His Latest Column, Bob Cringley Finally Tackles The Current State Of I.T.

Bob Cringley has finally done it.  He has finally written a column that tries to tackle the current sad state of corporate IT.  You have to read until the end, but in a single paragraph he crystalizes the issue:

"Against this we have a cadre of IT workers who have been slowly boiled like frogs put into a cold pot. By the time they realize what’s happened these people are cooked. They are not just resentful but in many cases resentful and useless, having been so damaged by their work experience. They just want things to go back the way there were but this will never happen."

You can read the rest here.


Sim City Social : Social Game Perfection, Cynical Game Design

Yesterday I sat down to try Sim City Social.    I, honestly, wanted to see how EA had translated one of my favorite old school games to the Facebook platform.   I was not playing as a "joke" or just because I wanted rant about it, I honestly was hoping to eek a bit of enjoyment out of my otherwise  (with the exception of my family) pretty dreadful current life situation.

However, when I started playing the game (I'm not linking to it, go find it yourself), the horror of the past year came into focus.  I've worked on several social games in that time, and designed a couple games too, but I've taken a step-back for the past few months to work on other things.  This was the first time I've looked at a game like this in long time, and I think I could finally see it for what it was: a big ball of cynicism.

Right on the title screen it said something like "Build A City : With Your Friends."  My first thought was: "I don't want to build anything with my friends.  I do not want to subject them to this. Why can't I just do it alone?"    I was initially taken into a tutorial where I built some roads and then some houses.  These would have been rather mundane things to do, and should have been easy for me to figure out on my own, but in reality, I "needed" the tutorial.  The interface was so crowded and cluttered with multiple menus and listings that I had no idea how to start the game.

After I finished my "building" (which was just clicking where they told me to click), some coins and other icons appeared over the buildings, and I ran my mouse over them to pick them up.    Whoohoo!  The tinkling of my prizes gave me a burst of excitement for exactly a microsecond, and then I remembered that I did nothing to get the reward except click where they told me.   It was at this point when I took a serious look at the interface.

There at the top I saw all the familiar trappings of a social game: multiple currencies (Simoleans and Diamonds), a level indicator, a list of my "neighbors"  (random people from my Facebook friends) at the bottom  of the screen, most of whom I do not want to contact in any way to bother them with this game, an energy bar the game will beg me to replenish, a population indicator,  a "fame" indicator, and a "build" interface.    As soon as I finished my first house, I was asked to invite neighbors, then I was given free reign to start building all on my own.  Yea! However, I had no desire what-so-ever to continue.

As asocial game, there is nothing wrong with Sim City Social.  In fact, it  might be the "perfect" social game.   The subject matter for Sim City Social has a proven, universal appeal.  The interface is honed down to a science, with the proper button and displays aligned to pin-point information architecture accuracy.    The rewards come at regular intervals, and are splendidly displayed.   The graphics are cute, and delightful, and appealing.   The game has the same  focus tested, Skinner-boxed, market-proven nuanced sheen that has been proven to make for successful social games in the past couple years, only here, turned up a couple notches for maximum effect.

It also  made me want to throw my computer across the room.

Why? Because it's cynical.  It's Cynical about the source material, and cynical about who is going to play the game.

Sim City Social (and most other games of it's ilk)  takes the stand that anyone who plays wants to play a game for free and does not want to pay anything for it.    They have added all these social gaming trappings to capture social gamers in their natural habitat, and get them to open their wallets.   I can see the motivation behind  it too.   If the public likes free-to-play games theses days, give them what they want, and find a way to entice them to spend money.  That's a fine way to try to make a living from people who expect everything for free.   I understand the mechanisms and motivations for this type of game, and why it exists.  This is especially true for games  based on a subject that have not been traditionally a basis for video games (say, a game about  farming,) because the subject is not all that interesting to being with, but can be made interesting (in theory) if you can bug all your friends while playing it.

However, Sim City was ALWAYS interesting.  Sim City was, and is,  a damned fine, fun, ground-breaking game.     I find it incredibly cynical to think that Sim City the original game, could not be successful on Facebook as Sim City itself, without all the regular social features piled on top.   I mean you could make it social in many ways, but why add all the tired, regular stuff (i.e. duel currencies, fame, levels, energy, pick-ups, quests that require neighbors, etc.) that makes it appear like every other game, and turns me off right away?  Why couldn't "Social" be inter-city competitions  that have your neighbor's cities affect your city in real-world ways (i.e. your high school sports teams play each other, or one city dumps  sewage in the fresh water of another).    I don't know, maybe that kind of thing is there in Sim City Social, but it's clouded by all these traditional social "features" that I will never wade through to see what is underneath.

Maybe it's just me who is cynical.

Maybe I'm tired of the same old thing.

Maybe I'm ready to see what comes next.


Filed under: diatribe No Comments

HTML5 Canvas On The 4th Of July : Atari 2600 Inspired Fireworks Demo And (Short) Tutorial

HTML5 Atari 2600 Inspired Fireworks Demo

HTML5 Atari 2600 Inspired Fireworks Demo

For the 4th of July,  here is an Atari 2600 inspired fireworks demo in HTML5.   Click the mouse  button to explode a firework shell.   This demo was originally designed to test our particle FX engine for the HTML Canvas with an object pool.

While I don't have enough time this morning to go through all the code, here is a quick run-down on what is going on.

In JavaScript we create an instance of  our custom ParticleExplosionManager class : (requires the canvas context as it's parameter).

var particleManager = new ParticleExplosionManager(context);

Then we listen listen for a "mousedown" event,

theCanvas.addEventListener("mouseup",onMouseUp, false);

HTML5 Canvas : Animating Gradients To Create A Retro Atari Style Color Cycle

We just finished our semi-final run into the Atari Pong Developer Contest last week, but I'm still feeling a little "retro".   This weekend I decided to see if I could replicate an old-style Atari color-cycle in HTML5 using the Canvas API alone: no bitmaps or anything other helpers.

The results are below.

(note, if you can't see this try it in Google Chrome)

At first I did not know how I was going to achive this, but the answer came fairly quickly.    I decided to use the Canvas API  createLinearGradient() function.   createLinerGradient() works like this.  You set-up a gradient "line" the represents the direction of the color gradient.  Then you create "color stops" that represent the colors to the gradient.    I'll show this in the code  code later.

To get started, I first, I set-up an animation loop:

function drawScreen() {
function gameLoop() {
   window.setTimeout(gameLoop, 20);

Next, I created a simple array of objects that represented the colors of the gradient and the color stops.  Colors stops are percentage of the gradient. I started with red, then added yellow, blue, green, purple, and red again.  I had to add red twice so that the color flowed back the beginning.  Notice that the percentages for both reds are only 1/2 of the others (.125 as instead of  .25)

var colorStops = new Array(
 {color:"#FF0000", stopPercent:0},
 {color:"#FFFF00", stopPercent:.125},
 {color:"#00FF00", stopPercent:.375},
 {color:"#0000FF", stopPercent:.625},
 {color:"#FF00FF", stopPercent:.875},
 {color:"#FF0000", stopPercent:1});

Next, inside the drawScreen()  function I created the gradient.

First, I set-up up a gradient on the current path.  The  arguments to the function represent the "line" that the gradient will follow.  Since I wanted the gradient to be in a straight vertical line, I centered it in the middle of the canvas, and drew it directly down to the bottom.

var gradient = context.createLinearGradient( 

Next, I loop through the colorStops array calling gradient.addColorStop() for each color in the array.    A "gradient color stop"() has two arguments: the color and the percentage.  I already set these up in the array, so now they are just applied in a loop.
After each gradient color stop() is added, I increment the percentage of each color by .015.  This effectively moves the color "up" .  If the gradient color stop percentage value goes above 1, I set it back to 0, which moves it back to the bottom of the gradient.

for (var i=0; i < colorStops.length; i++) {     
   var tempColorStop = colorStops[i];     
   var tempColor = tempColorStop.color;     
   var tempStopPercent = tempColorStop.stopPercent;     
   tempStopPercent += .015;     
   if (tempStopPercent > 1) {
       tempStopPercent = 0;
   tempColorStop.stopPercent = tempStopPercent;;
   colorStops[i] = tempColorStop;

In reality, the gradient is not being "animated", I'm just changing the location of each color by changing the gradient color Stop percentage.  However, the effect is the same.  It looks like the colors are cycling.

Finally, I display the text using the gradient as the color for fillStyle.

  context.fillStyle = gradient;
  context.fillText ( message, xPosition ,yPosition);

That's it.  I'm sure all kinds of other, way more awesome, effects can be created with animated gradients, but this is just a start.

You can get the code here.


This site is protected by Comment SPAM Wiper.