p0ng – A Journey Into HTML5

Friday, February 10th, 2012

As you may have read, m’colleague Matt recently created a small game as an experiment in developing for HTML5. This was during a training day in which the Team Cooper  development team all had a chance to spend some time experimenting and see what they could come up with. Matt has already discussed many of the finer details of working with the technology, but here are my thoughts…

The first challenge was deciding what kind of game to develop. We’re generally quite busy at Team Cooper HQ, so it seemed wise to focus on a fairly simple game design, and what could be simpler than Pong?

The game I have created is called p0ng and is a spiritual successor to the original Pong. It keeps the format of two paddles locked in an eternal struggle to bounce a ball backwards and forwards, but those of you familiar with Pong will notice some subtle (and not so subtle) differences.

Unlike Matt, I mainly used images to show graphics in my game, with the only dynamically drawn content being the score display. Using images in HTML5 was initially an interesting challenge as everything must be loaded in at runtime as opposed to Flash, where images can be compiled directly into the game’s SWF file. Other than that, the actual process of writing JavaScript code wasn’t too dissimilar to working with ActionScript 3 (this is no great surprise, considering both languages are forms of ECMAScript). This meant I could dive right into coding the game’s logic, although I had to do without many of the convenient libraries I often have at my disposal when working with Flash.

Usually when creating a Flash application I will write code using Powerflasher’s FDT, a powerful tool with many specific functions designed to make the process of writing ActionScript easier. I know Adobe Dreamweaver isn’t very popular with web developers these days, but I decided to give it a shot anyway to see what it could offer an aspiring HTML5 game developer. Dreamweaver did offer some useful error detection similar to what FDT offers, but lacks some of the most handy functions that we use in FDT every day.

To be fair to Dreamweaver, much of this is actually down to how JavaScript works compared to ActionScript 3, with the former being weakly typed and the latter being strictly typed. The advantage of a strictly typed language is that your coding tool can always tell what types of variables you’re working with and provide you with a whole host of information and shortcuts that make focusing on writing code much easier. With JavaScript, there is nothing like this which makes the code much more ambiguous with regards to its exact functionality. This makes it much more difficult for software to try and guess exactly what it is that you’re trying to accomplish with your code.

That said, p0ng didn’t take a great deal of time to produce and was a very good introduction to the world of HTML5 development. Obviously there are plenty of other things I’d like to put into the game if I had the time, but I don’t think any game developer worth his salt will ever claim any of his games are ever truly ‘finished’ ;)

I’m sure you’re itching to have a go at the game, though, so here you go (Make sure you click the game to enable keyboard interactions):

RealSmart

Tuesday, June 29th, 2010

Smart Assess develop e-learning tools. They look to Team Cooper for specialist development help with their RealSmart product, a suite of learning tools for mind mapping, blogging and website building. The tools are quite complex from a developer’s point of view, and include the option of collaborative working for multiple users.

Tell you what, have a look at RealSmart for yourself.

The Strangers Photos

Monday, June 29th, 2009

To promote the UK DVD release of the film ‘The Strangers’, Addicted2TV asked Team Cooper to carry out the development on a dedicated site. In turn, they were working for a London agency called Ralph, who were working for their client, Universal. We’re telling you that because we think it shows that Team Cooper can play nice with lots of people.

Anyway, the site let you upload an image of yourself or a friend, adjust its size and rotation, put a bloody terrifying mask on it (resembling a character from the film), and put yourself into a scene from the film. As if that wasn’t enough, the image could then be saved and emailed on. There was an FLV player on there too, letting visitors see trailers and exclusive footage from the film.

See? Get yourself a good Flash developer like Team Cooper, and this is the kind of cool stuff you could be doing.

My Flash On The Beach Experience

Thursday, October 2nd, 2008

We just returned from Flash on the Beach in Brighton and had a great time. There were some fantastic sessions that were really inspiring both in the messages given to the community and in the actual skill displayed. Here’s a quick rundown of the sessions I attended and what I thought of each one.

Flash Now and in the Future
The conference started out with Richard Galvan and Serge Jesper giving an overview of Flash, AIR, CS4 and that sort of stuff. Looks like CS4 is going to be a huge upgrade over CS3 with some much needed features being added to Flash; being able to filter the library will be very useful and being able to stretch and squash timeline animations (e.g. a 100 frame animation can be extended to be 200 frames while keeping the same keyframe ratio to preserve the animation) is pretty awesome after working in 3DS Max (which has had that feature for ages).

The best way to predict the future is to invent it
After the keynote there was a choice of sessions to go to and I decided to check out Carlos Ulloa’s talk, mostly because I’m interested in Papervision3D and anything related to 3D. The session was interesting and highlighted some important performance issues when developing in 3D for Flash (although I knew a lot of it already, coming from a 3D background).
There were also some good ideas for developing 3D worlds, although I was a bit disappointed in how simple the end result (a reconstruction of Monaco) looked (though to be fair, the car model was pretty detailed). Hardware is only getting more powerful, however, so we’ll have to wait and see what Papervision3D is capable of in a year or two! GPU capabilities in the Flash Player should also help a lot here.

Brilliant Ideas that I’ve Blatantly Stolen
Branden Hall’s talk had some good ideas and concepts in it, both in the ideas presented and actual techniques shown. Overriding x/y to turn them into tweens is a good idea and something I’ll likely use. The whole concept of stealing ideas and using and improving them is a good one and kind of follows the idea behind open source. Why reinvent the wheel?

Exploitable acts of playfulness
This talk opened up with a few technical issues and a reboot (this was actually the only speaker I saw using Vista; not very encouraging!) but once that was sorted Andries Odendaal showed off some of his work, which was very impressive.
The most technically impressive thing was an infinite image mosaic, where an image was displayed that was made up of smaller images, with those images made up of smaller images, with those made up of smaller images, and so on. The calculations were being done in real-time as he zoomed in, with newly appearing images dissolving into their component images.

Creating particle effects with Flint
Not much to say about Richard Lord’s Flint session except that Flint looks really cool. I was impressed to see that it can do flocking operations and the snow effect looked very realistic. The fire looked a bit weird to me but fire is just one of those things that no one will ever really get right (especially with the processing limitations of Flash).

Beyond the Knowledge: The Art of Play
Some really impressive stuff was shown in Erik Natzke’s session. He basically wrote a bunch of applications to paint onto a canvas with various effects taking place, like inverse-kinematics ribbons following the mouse around and painting a trail behind them onto the canvas. Some of the stuff he created looks really nice and as a developer I can appreciate the complexity of the process behind it.

Modulating a Lot
This was definitely the funniest session of the conference. James Paterson gave a rundown of his life and the work he has done across the years, some of it hilarious, all of it weird. Most of it involved animations of Gilliam-esque objects appearing and disappearing and doing actions, but there were other things thrown in there like a bunch of adverts for a Canadian sandwich chain (Mr. Sub) and collaboration with a dance artist.

Grab the Low-Hanging Fruit (or 5 Rules for Hedonistic Creatives)
Grab the low-hanging fruit, create, share, profit, play make up the five rules in Aral Balkan’s talk and the general message was to go and create what you want and share it with the world, but make sure you can pay the bills as being skint doesn’t help much when trying to keep a creative environment. Grabbing the low-hanging fruit refers to doing whatever provides the most reward for the least effort, because if you don’t, someone else will and will be all the better for it.
Another important message given in this talk is that frameworks and standards can be very bad in that they can create a situation where you are so concerned with coding in the correct way and following all the various standards that you don’t focus enough on the creative aspect of coding and your creative works may suffer as a result from procrastination stopping you from actually taking advantage of the ideas floating around in your head.

Emergence
The blurb on the FOTB website says that “Emergence refers to the way that complex systems and patterns arise out of relatively simple interactions” and Jeremy Thorp gives some demonstrations of this in his session, covering a number of topics.
One thing I especially liked was the demonstration of the variance application, which helps you create logos using a complex system of generating a number of random ideas based on a number of parameters and then picking which of them you like and then hybridizing them to generate new logos. This essentially creates an artificial evolutionary process of selecting logos that is really fun to play with.

Things Every ActionScript Developer Should Know
This talk by Grant Skinner gave a brief overview of various standards that should be followed when coding in ActionScript, including variable naming and package structures. Also covered are frameworks and design patterns that can be used when developing projects.

Flash Jam Session
Because of a few scheduling conflicts, GMUNK’s session was changed to a later time, creating a gap that was filled by six speakers spending ten minutes each showing off something they have done. Present was Andre Michelle, Mario Klingemann, Joa Ebert, Ralph Hauwert, Keith Peters and Carlos Ulloa.
The highlight of the session was Joa Ebert’s ten minute live coding session where he wrote a particle emitter whose particles were influenced by what looked like fluid dynamics to move around (At least that’s what it looked like to me; I won’t pretend to understand what was actually happening [as I couldn’t even read the code on the screen!]).

Abstract Narrative
Hoss Gifford gave a very funny talk about abstract narrative and the need for simplicity in applications, as no one will ever read the manual included (or even follow any kind of tutorial). The session was introduced as being two talks in one and Hoss joked that he would get changed into different clothes on stage to help the transition into the second talk. He wasn’t joking.

GMUNKICKDOWN 08.9
GMUNK’s work was really visually impressive and the guy has a lot of talent and ability with what he does. I have no experience with video editing or the kind of graphics used in GMUNK’s work so I can’t fully appreciate the sort of stuff being shown off, but it looked really cool.

The Best 8 to 12 Hours of my Life
I was blown away by Robert Hodgin’s work in audio-visualisations using processing. Some of the stuff was incredible and the mix of impressive graphics and particle effects interacting and visually reacting to the audio sounds looked beautiful.

Finding Away3d
I didn’t really know anything about Away3D before this session and I know a little more now after Rob Bateman’s talk. Some of the effects shown off looked really cool, especially the underwater effect done with texturing.

Papervision3D Simplified
Seb Lee-Delisle gave a very British talk about how to get started with Papervision3D, sprinkled with a lot of humour throughout, including a Father Ted clip, an homage to Joa Ebert’s ten minute live coding in the form of a 20 second live coding in getting Papervision3D set up (to the sound of the countdown jingle) and a lot of cows. Very useful in showing the basics of what Papervision can do and how easy it is to get into the basics.

Steal this code: Decompiling SWFs for fun and profit
I really enjoyed this session by Doug McCune that gave an overview of how to decompile a SWF file and how easy it actually is (very). It highlighted the dangers of leaving things in your code that could potentially be found and ruin things for you later, with an example given of Doug finding a way to instantly log into an application as an admin that worked on the live server for that application. He also explained how users can also potentially manipulate the incoming data being sent to a SWF from the server (or vice versa), which can be used to bypass certain restrictions (like avoid paying for premium game levels). This could also be used to submit fake scores to a game’s high score system.
Methods to potentially protect against decompiling were also covered, but it seems like there is no bulletproof way to protect a SWF and anyone determined enough can eventually break down the protection and get to the code and logic behind the code inside.

“Intentionally left blank”
Rob Chiu did the official FOTB trailer and showed it off in this session along with his other works. Like GMUNK, I couldn’t really appreciate the full value of what I saw as I have no experience with any of the tools involved. All I can say is that they looked very cool.

Here be Pixels
Completely blown away by how awesome Mario Klingemann’s work was. He started off by showing how he could hold up small pieces of patterned paper to his webcam and use them to execute certain actions. He then went into detail about how Flash is used to interpret the original webcam image into the data contained within the pattern. This sort of stuff is fairly new ground in general so to see it in action in Flash is astounding.
Also demonstrated was Mario’s Peacock software (Part of the Aviary suite) which can be used for advanced image processing and, again, works in Flash in a browser environment. Amazing work.

Beyond Flash
A very philosophical talk by Jonathan Harris talking about the various works he has done to quantify human emotions with applications to gather statistics on how people use language. Also covered were experiments in Whale hunting and investigating the happiness of a small Asian country (I forget which one).
At the end of the talk came a somewhat controversial statement that many Flash developers waste their time on projects that have no long-lasting worth. The wording he used was that if Flash is a language, lots of people can speak it but not many people have anything important to say. The first thing that came to my mind when I heard this was the great number of tweening applications available for ActionScript, all of which are ostensibly identical and only differ when used in particularly stressful applications where bleeding edge performance is an issue.

Overall I really enjoyed the experience at FOTB. A lot of what I saw has inspired me and I definitely want to start trying some of the stuff I saw there (and there’s a pretty big list of what I want to try!)

Williams F1 Team

Sunday, August 31st, 2008

“Could you help us develop the Williams F1 Team’s new Flash based website?” they asked. Well you’re not going to say ‘no’ to that are you? This was another multi-agency project, where the client (Williams F1) hired an agency who then sought out a professional Flash developer (that’s Team Cooper, but you probably worked that out).

We’d show you a link, but it’s a bit old now, (it’s from the 2007 season), so it’s not online anymore. But we’re so proud of working on it, we had to mention it, (shuffles shoes, ashamedly).

I'm the new guy

Thursday, May 29th, 2008

I joined Team Cooper just under a week ago as a multimedia developer for ActionScript 3.0, PHP, MySQL and other fun stuff. I’m actually pretty new to those things so don’t expect to see any amazing AS3 stuff right away, but i’m learning!

I’ve just finished up a degree doing Computing (Visualisation) at Sheffield Hallam University where I did all sorts of stuff (databases, programming, design, even film editing and special effects!) but all throughout that I found that the thing I liked doing most was Flash, specifically Flash games. In fact, in my final year I even set up a website and so far I have a couple of games posted there along with a few bits and pieces of coding i’ve done.

Up until now i’ve mostly been working in AS2, self-taught from online tutorials, so as you can imagine my coding style was a bit sloppy. Moving to AS3 and learning the proper way of doing things has been an interesting experience (I can’t believe how easy it is to do some things that I was doing an incredibly difficult way before) and i’ve been enjoying it a lot so far.

Also, I’ve been tasked by Tim to create a cool game for the site so look out for that sometime in the future!

Xoolometer

Thursday, August 31st, 2006

Team Cooper developed the Xoolometer for our client Xoolon, to enter sporting scores into an online sports community. With two modes – mental and physical – the Xoolometer can record ratings, distances and times, all read and written dynamically from Xoolon’s MySQL database.

Xoolon didn’t want to use standard HTML forms. Being an elearning tool, they wanted to make it more fun and colourful. And as that’s what Flash does best, and we’re Flash developers, we were happy to oblige. So here’s Xoolometer.