Latest Posts

• By Rich

  Tags

  flixel, framework, html5, Phaser

  Posted in

  Phaser

  10 comments

  Announcing Phaser (Flixel HTML5) and our Adobe Max session

  12th Apr 2013

  10

  

  We’ve two exciting bits of news to share today. First we have just released Phaser. Phaser is a light-weight 2D HTML5 game framework based heavily on Flixel. Indeed it started life called Flixel5 but was renamed to avoid any potential confusion 🙂 The current feature list is pretty comprehensive:

  • Asset Loading
    Easy loading for Images, Sprite Sheets, Texture Packer Data, JSON, Text Files and Audio Files.
  • Cameras
    Multiple world cameras that can scale, rotate, flash, shake, alpha and track sprites around the game world.
  • Sprites
    All sprites have physics properties including velocity, acceleration, bounce and drag and collision built-in.
  • Groups
    Group sprites together for collision checks, visibility toggling and easy function iteration.
  • Animation
    Sprites can be animated by a sprite sheet or Texture Atlas (JSON Array format supported). Animation playback controls, looping, fps based timer and custom frames.
  • Collision
    A QuadTree based Sprite to Sprite, Sprite to Group or Group to Group collision system within world space.
  • Particles
    An easy to use Emitter can emit sprites in a burst or at a constant rate, setting physics properties on them as it does so.
  • Input
    Keyboard, Mouse and Touch support (advanced gestures coming soon)
  • Stage
    Easily change properties about your game via the stage, such as background color, position and size.
  • World
    The game world can be any size and collision and motion is tracked across the whole world.
  • Sound (partial support)
    Currently uses WebAudio for playback. More work needs to be done in this area.
  • State Management
    For larger games it’s useful to break your game down into States, i.e. MainMenu, Level1, GameOver. The state manager makes swapping states easy, but the use of a state is completely optional.
  • Cache
    All loaded resources are stored in an easy to access cache, which can be cleared between State changes or persist through-out the whole game.
  • Tilemaps
    Support for CSV and Tiled JSON format tile maps is implemented.
  • Random Number Generator
    A seed based random number generator allows for reproducible in-game effects.
  • Game Scaling
    Games can scale to fit any device and will scroll the URL/status bar away on Android and iOS mobile.

  Read More

• By Rich

  Tags

  github, Signals, TypeScript

  Posted in

  Projects

  3 comments

  TypeScript Signals released – Think outside the Event

  3rd Apr 2013

  3

  Signals are a light-weight, strongly typed messaging tool and we use them extensively in our game framework. And we’ve just released our TypeScript implementation for others to benefit from. It’s a conversion of js-signals by Miller Medeiros, which is of course in turn a conversion of AS3-Signals by Robert Penner.

  You can get TypeScript-Signals from github.

  If you are unfamiliar with Signals, how they work and how they compare to Events then this short summary is well worth a quick read, but to summarise:

  • A Signal is essentially a mini-dispatcher specific to one event, with its own array of listeners.
  • A Signal gives an event a concrete membership in a class.
  • Listeners subscribe to real objects, not to string-based channels.
  • Event string constants are no longer needed.
  • Signals are inspired by C# events and signals/slots in Qt.

  I ported over all of the 18 unit tests to TypeScript as well. So you have plenty of examples: from adding a basic listener up to manual binding and dynamic context switching.

  Here is an example of how we use a Signal within our Position component in our framework. In this case ‘updated’ is our Signal and when the Position component is updated we dispatch it:

  this.updated.dispatch(this._point.x, this._point.y, this._z, this.cssTranslate3d, this.cssLeft, this.cssTop);

  Anything that is listening to the ‘updated’ Signal is notified of the new values being sent. For example our Sprite game object listens for updates:

  this.position.updated.add(this._updatePosition, this);

  And a local private method _updatePosition responds to the new values being sent.

  Read More

• By Rich

  Tags

  ActionScript3, conversion, TypeScript

  Posted in

  ActionScript3

  4 comments

  AS3 to TypeScript Conversion Script

  2nd Apr 2013

  4

  

  I write a lot of HTML5 games and my preferred language of choice is TypeScript. I love the compile-time errors, code-insight and debugging tools it provides. A large part of my work is porting over ActionScript3 code from Flash games. I found that I was going through the same motions over and over again; simple things like changing “Boolean” to “bool”, or rename the class function to “constructor”.

  It got to the point where I figured it would save time to write a script to help with the process. So I did, and I’ve released it for anyone else who may benefit from it. The script runs on a local web server and can convert either a single file or a whole directory full of them. It will intelligently deep-scan a folder structure, converting just the ActionScript files that it finds along the way. I’ve successfully run it across the whole of the flixel codebase with no issues, so I’m hopeful it’ll work for you.

  It uses a set of 20 conversion tasks, but the list is easy to modify and extend. Indeed if you create new ones (or optimise some of my sucky regexps!) to the benefit other devs then please share them so I can update the script.

  Be under no illusion about the amount of work you’ll still have to do once the conversion has run. Properties, vars, native Flash objects and lots of other things will still need fixing and changing by hand. But at least a huge volume of the tedious grunt work will be out of the way. And if it saves you as much time as it has  me then that’s just a bonus in my books.

  Grab the AS3 to TypeScript Converter from github.

• By Rich

  Tags

  action, kids, mobile, NFL

  Posted in

  Clients

  0 comments

  Our 3rd NFL game – Guardian Training: Over Throw is now out

  17th Mar 2013

  0

  

  We really enjoy working on the NFL Rush Zone games for CA based agency Brandissimo! So we were very pleased when they asked us to create a third game for them based on the new Rush Zone Season of the Guardians.

  

  Guardian Training: Over Throw was built in HTML5 for desktop and mobile browser. You start in the VR zone where you learn to jump and throw before being unleashed across 4 changing stages. Smash down the blitz bot targets as you go, collecting the power-ups, avoiding the obstacles and seeing if you can smash the other players scores on the site.

  

  In order to maintain performance on mobile browser we used a relatively low resolution (480×320) and up-scaled it for tablet. Working directly with the designers at Brandissimo! we were able to ensure the graphics still looked good scaled up. It also meant performance on lower-end devices was kept responsive, which is vital when you’ve a stack of blitz bots to knock down with your last chain bonus throw. They were able to mock-up the animations and effects in Flash and we translated those into HTML5.

  Play Guardian Training: Over Throw on the NFL Rush Zone site.

   

• By Rich

  Tags

  kids, learning, math

  Posted in

  Clients

  0 comments

  Helping Multiplication.com support their growing mobile traffic

  7th Mar 2013

  0

  

  multiplication.com is a site dedicated to helping kids learn multiplication. Like many other sites they use Flash games to do this in a fun and engaging way. But as with many other sites they identified a growing volume of traffic from mobile devices, most notably iPads, so looked for a way to offer their games to those visitors as well.

  They contacted us to help convert existing Flash games over to HTML5. They had tried a few times already but the results had been less than satisfactory; the games either not working fast enough or not working across devices. So we took their game Fantastic Fish Shop and ported it over to HTML5, retaining all of the original features of the game such as the transitions, animations, wide variety of character faces and shop upgrades.

  Site owner Alan Walker had this to say about the experience: “I wanted to drop you a note and let you know how wonderful it was to work with Photon Storm. I am thrilled with the game you converted from flash. I was a bit worried about having work done by a company half way around the world. (I have experienced some major issues in the past.) After my first conversation, I knew you were the people I wanted to work with. Thanks for finishing the job on time and on budget. But most of all, thanks for the amazing work!”

  We look forward to helping Alan and his team in the future as they build up their selection of games for mobile visitors. If you’ve got existing games you’d like converted to HTML5 then please get in touch for a free quote.