Now that many of you have had chance to play around with our Pong game , we decided to ask Branny and Jono, the creators of the game, to tell us how it came about.
First of all, what do you do at Code?
Jono: I am a Flash and AS3 Developer.
What made you think of doing a Flash vs. HTML5 game, and why did you choose Pong?
Branny: I’ll let Jono explain why we decided to do a game with the two technologies, but I guess I can answer why we chose Pong… it was kind of an accident, to be honest. Once we’d decided we were going to embark on a mission to put the two technologies together, it was a case of sitting down and talking about what we could do. We wanted to keep it simple and initially see how effectively it would work. We started by getting the two technologies talking to each other on a simple horizontal line. The thought process that took us from a horizontal line to the game Pong was pretty natural, as you can imagine!
Jono: After attending a very inspiring ‘What the Flux’ presentation by Seb Lee-Delisle at this year’s Flash on the Beach, I felt like there was a definite feeling of animosity towards the two technologies pretty much everywhere. I wanted to convey some of the concerns that were being voiced, as many seemed to feel that Flash should be getting along with HTML5 and the two ‘different’ technologies should be playing to their individual strengths. I thought it might be a good idea to literally play them off each other — simple as that, really. Street Fighter was my first thought, but thankfully Branny reigned me back in!
What was the brief?
Branny: There wasn’t an official brief, really. As this was an R&D project, we kind of came up with a loose brief — create a simple game using Flash and HTML5 as the platform.
Once you had your (loose) brief, how did you go about the project?
Branny: Well, firstly we sat down and talked about how we were going to tackle it, and how we would work together. We decided to initially work individually to set up our environments. I was going to build the HTML5 side of the game, so naturally I would set up the web page for the game to sit in. I firstly created it locally, but would have to set up a central location for testing. Initially, I just created a share on my local machine for Jono to drop his Flash file in.
Jono: Using a combination of Flash Builder Plug-in for Eclipse and Flash CS5, I began to create the core classes — pong, ball, paddle and environment classes, etc., fairly simple stuff and some basic game logic. Then we went about hooking up the Flash and HTML. Flash’s ExternalInteraface classes seemed like the best way to proceed, so I began to set up function calls that would be triggered when my ball reached a certain point on the x axis.
Did everything run smoothly?
Jono: ‘Smooth’ was really the keyword in this project, as there were a few obstacles in getting the game to render as smoothly as possible. One of the most obvious problems was which application was going to wear the trousers (having keyboard focus and saving score data), and manage the other platform.
Branny: I think smooth enough! There were obviously some issues that we came across that we hadn’t foreseen, but for the most part it was pretty trouble-free.
What issues came up that you didn’t expect to be a problem?
Branny: Focus was something I knew would be a problem with Flash, but it never crossed my mind that Canvas would have the same issue.
What do you mean by ‘focus’?
Did you find many performance issues?
Branny: The other major issue was keeping the ball on an even keel as it crossed over from one technology to the other. To keep things simple, (and you have to remember this was an experiment) we didn’t use true collision detection; we just went for ball position, x and y. This caused issues due to the speed of the ball. If you’ve ever done anything like this you’ll appreciate that this isn’t the most accurate way of detecting two things hitting. Basically, you check if the co-ordinate is less (or greater) or equal to a desired position, then do something if that argument returns true or false. Depending on how fast the ball was travelling it would reach a further (or less) position depending on when the setInterval would next check.
How did you get around the difference in position?
Branny: We were constantly checking the balls x and y position and passed those co-ordinates from one side to the other, so it didn’t matter how far the ball had gone. When the trigger was fired, the x and y position on the ball was taken and passed over to the other side.
What was the most challenging part of the game?
Branny: Keeping Jono’s crazy particle physics off the paddles ;). No seriously, I think we came across a lot of issues that were fixed relatively quickly, but the issue of the ball crossover was probably the most time consuming.
Jono: Yes, the ball crossover was a little time consuming. Converting the balls x distance and y distance with acceleration from milliseconds into frames per second should have been a fairly simple calculation, yet when implemented into the game it became tricky to make the transition look seamless, especially at speed.
Anything else to add?
So now you have created a little stir in the digital community, what’s next?
Jono: It is a very exciting time to be a Flash developer — regardless of whichever round we’re up to in the HTML5 vs. Flash bout — with the release of Flash player 10.2 beta, Molehill, Air 2.5, iPhone packager. It is our job as Flash Developers to create rich and exciting media for the web, using Flash for what it was designed for — to push the limits of the browser. So R&D, basically.
Branny: I think R&D is a valuable commodity in this business, so we will continue to experiment on ideas and new technologies. Watch this space.
Cheers guys — we hope to hear from you again soon with your next R&D project.
If anyone has any further questions on this topic, then please feel free to leave feedback and we will try and get the guys to answer your questions.