Latest Posts

  • Announcing Phaser (Flixel HTML5) and our Adobe Max session

    phaser_cams

    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

  • TypeScript Signals released – Think outside the Event

    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

  • AS3 to TypeScript Conversion Script

    AS3 to TypeScript

    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.

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

    overthrow-titlescreen

    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.

    over-throw-mobile-640

    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.

    obstacles

    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.

     

  • Helping Multiplication.com support their growing mobile traffic

    fishshop

    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.

    fishOrangeThey 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.

More posts to tickle your grey matter ...