Author Archive

  • My Adobe Max slides: HTML5 Game Development for the Mobile Web

    While the rest of the world debates the merits of Creative Cloud subscriptions, I gave my presentation on HTML5 game development for mobile browsers. I tried really hard to not “sugar coat” it, because it’s actually really quite difficult process born from a lot of trial and error. But once I had settled into it I had a great time, and am really pleased with the feedback I’ve had so far.

    For those who attended (and extra special thanks to those who had standing room only at the back!) I have uploaded my slides as promised. They are in PDF format but if you need them in another just leave a comment on this post.

    http://sandbox.photonstorm.com/HTML5_Gaming_on_the_Mobile_Web.pdf

  • Phaser 0.9.5 Released – Camera FX, lots of Tilemap updates and more!

    And here’s Phaser 0.9.5 🙂 A lot has changed in this update. The most fundamental updates include:

    New FXManager

    In previous versions, as in Flixel, camera effects like shake, flash and fade were all bundled into the main Camera class. This has now changed. A new project, Special FX was created and all of the effects moved there. A Camera now has an fx property to which you can register any number of effects that you want. The effects are also compiled to their own js file (phaser-fx.js), so if you don’t need to use any of them in your game you can save some extra bytes. The Camera class is now a lot smaller and faster as a result too. It also allowed us to add in new effects, so feel free to play with the Camera Scanlines and Camera Mirror effects 🙂

    In a future version we’ll adopt use of the FXManager for other game objects, not just cameras.

    phaser_mapdraw

    Lots of Tilemap Updates

    Tilemaps have really been given an adrenalin boost in this update. For example collision with them is now much more flexible. You get a list of all colliding tiles returned (not just a boolean), you can control if a tile should cause separation if an object collides with it or not and finally set your own collision callbacks.

    As well as this we added a lot of map data manipulation commands. For example replaceTile will scan the map (or a region of it that you define), replacing all instances of a specific tile for another. There is also swapTile, fillTiles, putTile, randomiseTiles and new methods to get tile data. You could now easily create an in-game tile editor should you wish. The above screen shot is from one of the new tests showing putTile in action.

    Boot and Pause Screens

    Phaser has always had a built-in boot and pause screen. Before they were bundled into the Stage class, but have since moved into their own area (system/screens) making them much easier for you to customise as you see fit, and also keeping Stage cleaner as a result.

    TypeScript declarations

    The project is now generating TypeScript declaration files. This was important to get the new SpecialFX library working and we’ve updated all of the test suite to use them. Basically it means you can now start a fresh TypeScript project and just copy in the lib.d rather than all the source for the whole framework. Of course if you’re coding using JavaScript this means nothing to you 🙂

    As well as the above there are lots of bug fixes, thanks to the support of devs reporting issues on github. Please do keep them coming.

    I’ll be away for most of next week in LA at Adobe Max, so 0.9.6 will be at least 3 weeks away, but it will focus heavily on expanding the Input handling.

    Check out Phaser on this site, or direct on github.

  • Our list of HTML5 Game Sponsors

    coins

    It’s no secret that for nearly 2 years we’ve run a private business forum for HTML5 game developers. On it we listed all the portals and sponsors we dealt with and our experiences in doing so. So far we’ve got 32 portals added, all of them known to have bought games in the past.

    Since launching the HTML5GameDev forums though it no longer made sense to keep that information under lock and key. I didn’t want to support two forums and two communities either. So I have merged all the sponsor details from the private forum into the public one, for all devs to benefit from.

    Because the posts contain email addresses they are not visible unless you are an active forum member. By active that means you have an  account on the forum and have been taking part in discussions. Therefore you must have a positive post count to be allowed access to the sponsor board. But once in you’re welcome to take advantage of this significant resource and hopefully contribute towards it too.

    http://www.html5gamedevs.com

  • Phaser 0.9 Released – Motion, Collision, GeomSprites and more

    phaser_fruit_particles

    The latest version of Phaser was pushed to github today. This marks the v0.9 release and consisted of a large re-factoring of the code base, as well as lots of enhancements and new features:

    • Everything now lives within the Phaser module, so it no longer creates anything in the global name space. It makes coding a tiny bit more verbose but is the right way to handle it. It should also allow for code-insight in editors like WebStorm to function correctly.
    • NEW: GeomSprites. This is a game object that can be added to the world, but that uses any of the geometry primitives for its data. So you can populate a GeomSprite with a Circle, Rectangle, Point or Line and then have it rendered in your game world. This is extremely useful for fast prototyping.
    • NEW: Collision class. This class handles all forms of object collision and intersection for both game objects and geometry. You’ll find methods for things such as checking for line intersection, circle overlaps, game object collision and more.
    • NEW: Geometry Intersection results. This compact little object is returned by intersection methods and contains the resulting data about the intersection, rather than just a true/false.
    • NEW: Motion class. This contains rafts of handy methods dealing with the movement and motion of game objects, such as ‘moveTowardsObject’ or ‘velocityFromAngle’ can be found in here.
    • NEW: Tween Manager. You can now create tweens without using a 3rd party library. All the usual tween eases are supported (Bounce, Back, Circular, Quintic, etc) and it’s hooked into the core game clock. This means that if your game pauses when it resumes all active tweens will adjust themselves accordingly and carry on as normal.
    • UPDATED: Input.Keyboard used to call event.preventDefault() on keydown, but that of course blocks all keyboard events from the browser – so simple things like pressing F5 to refresh the page stopped working. We removed that in the previous commit but it meant that using the arrow keys in a game would also scroll the browser window if large enough. Newly added to Input.Keyboard are addKeyCapture(), removeKeyCapture() and clearCaptures(). These allow you to consume key events but only for specific keys.

    There are a couple of features left on the “to do” list before we will consider a Phaser 1.0 release and that includes tile map collision, documentation and enhancing the sound support. Once those are in we’ll release 1.0 and then turn to the community for suggestions on where to head next.

    Right now we’ve very happy with what we’ve built. It’s compact (just 39KB minified and gzipped) yet extremely powerful, while still hopefully easy to use. That is of course a large part of where we need to go next: tutorials and a getting started guide. But first let’s take Phaser to a 1.0 release.

    Support and general discussion can be found on the Phaser forum.

    Latest updates can be found on github: https://github.com/photonstorm/phaser

  • 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