Posts Tagged ‘Phaser’

By Rich

Tags

github, Phaser, physics

Posted in

Phaser

6 comments
Closing in on the Phaser 1.0 release

25th Jun 2013

6

Although the master branch of Phaser has been quiet for a couple of months we have been extremely busy working on what will be the 1.0 release. If you take a look at the 097 branch README you’ll get an idea of the sheer scale of change that has happened to the framework.

Although the initial release was heavily inspired by Flixel, indeed taking lots of the core classes and directly porting them over, this has been mostly reversed for 1.0. We hit limitations pretty quickly and were constantly stretching the framework in different directions until one day it finally snapped and we realised it needed a fresh approach.

So while the majority of the core classes have changed entirely, we’ve been extremely careful to ensure that actually using Phaser is just as easy as Flixel is (if not more so in some places!). We’ve worked really hard to make sure you can rapidly build games with it. For example the following code will create a new game, load an image, create a sprite and display it on-screen:
```
    var game = new Phaser.Game(this, 'game', 800, 600, init, create);

    function init() {
        game.load.image('bunny', 'assets/sprites/bunny.png');
        game.load.start();
    }

    function create() {
        game.add.sprite(0, 0, 'bunny');
    }
```
Needless to say the sprite is now under your full control. Alpha it, tween it, flip it, animate it, rotate it, move it around with touch/mouse/keyboard, collide it, emit it in the particle system, etc.

We’ve been hard at work creating several large games for clients with Phaser, so we’re able to battle test it and evolve it through actual use. The first of these games was released onto the BBC site last week, and although aimed primarily at small children it still allowed us to deploy a Phaser game to a heavily trafficked audience and gauge response.

So what’s new in 1.0?

Read More
By Rich

Tags

Phaser, update

Posted in

Phaser

2 comments
Phaser 0.9 Released – Motion, Collision, GeomSprites and more

18th Apr 2013

2

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
By iLKke

Tags

concept, logo, Phaser, sketch

Posted in

Art, Phaser

3 comments

Phaser Logo – Phase One

13th Apr 2013

3

With Phaser just announced we started thinking about a logo that would compliment the name. I made some rough sketches that we both liked and Rich thought it would be a good idea to share with you guys so you can see how this piece of artwork will evolve.

Have to say I am curious where it’ll go myself as currently I am not even sure if I want to give it a vector, pixel art, or CG painting treatment. Each method has its own advantages, both in terms of application and esthetics. Vectors are scalable and clean, pixel art is a natural fit given the nature of Phaser, and CG painting would retain some of the organic warmth of the original pencil sketch. Perhaps I will end up doing all three, we’ll see. I better keep my options open for the time being.

Before I grabbed my pencil we had a little talk and came to the conclusion that it would be nice, and also fitting, to have a very fun logo for Phaser. That is, not just a regular typographic logotype (although we need that too). It didn’t take long to come up with a busy space opera scene. You can see the evolution of the spaceman design as I felt that the default bubble helmet guy wasn’t iconic enough. Having recognisable characters is always a good thing, they will make the logo more memorable and can also serve as mascots. Some day they might even get a game of their own, you never know.

Those of you who didn’t fumble their perception roll will also notice a vector test of the logotype in top right. Rich was (justifiably) concerned about how the logo would stand on its own so we made a quick test. You will notice that the letters P, A and R had to be somewhat changed to work well outside of the distorted hand-drawn logo, but luckily I was able to preserve the style with minor modifications.

The next step for me is to think about colour that will bring the scene to life and make it work on any background.
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