Mark Gillard

SCME2108: Multimedia Production


For the 'major project' component of Multimedia Production I decided to work on only one project - Mobbipets. This meant my time was not divided, allowing me to really focus on my primary skillset (programming), and it gave me a lot of freedom to experiment with a number different methods of developing post-flash cross-platform browser games.

In all I delivered three different major assets. The workflow for each was the same:

  1. Carefully consider the design goals (portability, platform, etc.)
  2. Carefully consider the structure of the code to fit in with step 1
  3. Write prototype code
  4. Create placeholder artwork
  5. Iteratively cycle Steps 3 and 4; sometimes changes to artwork were needed as needs became clearer, or changes to code may have been required to better accommodate artwork limitations (limits of CSS, etc.)
  6. Polish

I have summarized the three major assets in the paragraphs below.


A simple hangman game built entirely using server-side PHP and SQL implementations to abstract functionality away from the user's device. Heavy use was made of PHP sessions, so that the game could be easily adapted to remember its own state per-user, allowing them to log out of the Mobbipets platform on one device, log back in on another device, and resume their game.

Layout was done entirely using CSS, allowing multiple media-type style-sheets to be put in place to help smooth device/screen transitions.

Use of the database platform MySQL was employed to serve as the dictionary storage engine for the game. This allows use of a very large dictionary, without storing it on files downloaded to the client’s device (not ideal for bandwidth and cheating reasons), and without routinely parsing large files on the server (very processor intensive with any significant number of clients).



Another simple server-side game, building upon techniques learned while developing Hangman to really take advantage of CSS layering. The primary goal was to develop an interactive, tactile browser game using only native browser technologies (so, no Flash plugins, etc), while using as little HTML as possible (shallow element depth), to really minimize the amount of client file downloads.

Again, PHP sessions were employed to allow for future state-saving. Use of MySQL was not required for this asset.



A 2D JavaScript game engine encapsulating HTML5’s <canvas> element for creating Flash-style games without plugins.

I ran out of 'project time' before I could finish implementing the game-logic since I'd spent a lot of time writing the engine framework first. This means that the 'game' part of the demo isn't complete (i.e. you can't play a full game of battleships). In terms of asset deliverance, though, the game being incomplete isn't an issue. The game engine itself is far more useful - HTML5 canvases are seeing increased usage as Flash gets phased out, so having something like this as a development base will give the Mobbipets project a head-start.

I do intend to finish the game engine for the Mobbipets project (and for myself), as with some sustained development I do feel I’ve created a very modular, portable game engine for HTML5-capable browsers, and would very much like to develop it further (especially considering I’m doing Interaction Design next semester!).

UPDATE:The game is finished, and the engine went on to become a fully-fledged game engine I'm calling jStage. Link below.

BattleshipsjStage Engine

Supporting materials

Timesheet, Evidence1.14 MBHangman1.17 MBTic-Tac-Toe384 KBBattleships1.89 MB