Phaser World Issue 13

Published on 15th January 2016

lazer2

Phaser 3 is now called Lazer.

Follow development in the repo and Mailing List.

Here are some of the changes made this week:

New Game Configuration Handler

Today I got the Game Configuration Loader working. Instead of using a butt-load of constructor arguments (or a giant config object) like in Phaser:

var game = Game(800, 600, 'canvas', '', { preload: preload, create: create, update: update });

You can now use the new Config handler:

let config = Config(
    Parent('game'),
    GameTitle('BobVaders')
);

let game = new Game(config);

The Config handler allows different ways of specifying the settings. It can be one-by-one:

let config = Config();

config.add(Dimensions(800, 600));
config.add(Transparent(true));
config.add(Parent('lazer-example'));

Or it can be via spread arguments:

let config = Config(
    Dimensions(800, 600),
    Transparent(true),
    Parent('lazer-example'),
);

Or you can mix them both. The Game itself can tell the Config handler which settings it requires, and what the default values should be. But if you have provided them it will use your settings instead.

So far I've created settings for:

  • Game Dimensions
  • FrameRate
  • Game Title and URL
  • Parent DOM Element
  • Transparent
  • Pixel Art Scale Mode
  • Disable WebGL (for debugging)
  • Disable Audio (for debugging)
  • Disable WebAudio (for debugging)

I've also created game/nano/Game.js which is the start of porting over the functionality from Phaser Nano to Lazer.

Finally I created state/State.js which is the new base template State object. Tomorrow I'll tackle the State Manager, and get all kinds of fun State things happening (like parallel states, State render priority, etc)

getLoadedFilesbyType

Loader.getLoadedFilesByType is a new method that allows you to get all of the loaded files of a specific type. All of the Loader file types have had new consts added to make them more secure. You can now for example do getLoadedFilesByType(ImageFile.TYPE) to get just the loaded images. There is an optional group argument as well.

The Cache has been recoded to be a pure object, rather than a class.

The Nano Game has been updated to include a default State, a working main loop and has the loader hooked up.

Added an Image parser to the Texture Frame Parsers. This will create a Frame object for a single image (needed by the Cache). Made the ImageFile loader set the image key as its name property. This property exists natively on the Image objects and is unset, so we may as well use it.

Textures, Blend Modes and the new Banner

Created utils/Banner.js to handle the console.log output for Lazer. You can pass in your own game title, in which case it outputs game powered by Lazer. Or you can just not call it at all, and it won't output anything. Made two tests to accompany.

Updated Version.js to export properly without requiring a Lazer global.

Created dom/Boot.js to handle DOM content loading. The function returns a Promise allowing you to react to the eventual dom event.

Added in default textures: blank 32x32 PNG and missing image one from Phaser. You can now easily add your own, or just not include them at all.

Created the Texture2D and TextureWebGL functions, that generate Lazer Texture objects from the given Frame data. Also added UpdateUVs function.

Added in all of the Canvas and WebGL Blend Modes and left it open so it's easy for you to add your own (or tweak single blend modes yourself, without effecting the rest of Lazer)

lazer2

Phaser 3 is now called Lazer.

Follow development in the repo and Mailing List.

Here are some of the changes made this week:

New Game Configuration Handler

Today I got the Game Configuration Loader working. Instead of using a butt-load of constructor arguments (or a giant config object) like in Phaser:

var game = Game(800, 600, 'canvas', '', { preload: preload, create: create, update: update });

You can now use the new Config handler:

let config = Config(
    Parent('game'),
    GameTitle('BobVaders')
);

let game = new Game(config);

The Config handler allows different ways of specifying the settings. It can be one-by-one:

let config = Config();

config.add(Dimensions(800, 600));
config.add(Transparent(true));
config.add(Parent('lazer-example'));

Or it can be via spread arguments:

let config = Config(
    Dimensions(800, 600),
    Transparent(true),
    Parent('lazer-example'),
);

Or you can mix them both. The Game itself can tell the Config handler which settings it requires, and what the default values should be. But if you have provided them it will use your settings instead.

So far I've created settings for:

  • Game Dimensions
  • FrameRate
  • Game Title and URL
  • Parent DOM Element
  • Transparent
  • Pixel Art Scale Mode
  • Disable WebGL (for debugging)
  • Disable Audio (for debugging)
  • Disable WebAudio (for debugging)

I've also created game/nano/Game.js which is the start of porting over the functionality from Phaser Nano to Lazer.

Finally I created state/State.js which is the new base template State object. Tomorrow I'll tackle the State Manager, and get all kinds of fun State things happening (like parallel states, State render priority, etc)

getLoadedFilesbyType

Loader.getLoadedFilesByType is a new method that allows you to get all of the loaded files of a specific type. All of the Loader file types have had new consts added to make them more secure. You can now for example do getLoadedFilesByType(ImageFile.TYPE) to get just the loaded images. There is an optional group argument as well.

The Cache has been recoded to be a pure object, rather than a class.

The Nano Game has been updated to include a default State, a working main loop and has the loader hooked up.

Added an Image parser to the Texture Frame Parsers. This will create a Frame object for a single image (needed by the Cache). Made the ImageFile loader set the image key as its name property. This property exists natively on the Image objects and is unset, so we may as well use it.

Textures, Blend Modes and the new Banner

Created utils/Banner.js to handle the console.log output for Lazer. You can pass in your own game title, in which case it outputs game powered by Lazer. Or you can just not call it at all, and it won't output anything. Made two tests to accompany.

Updated Version.js to export properly without requiring a Lazer global.

Created dom/Boot.js to handle DOM content loading. The function returns a Promise allowing you to react to the eventual dom event.

Added in default textures: blank 32x32 PNG and missing image one from Phaser. You can now easily add your own, or just not include them at all.

Created the Texture2D and TextureWebGL functions, that generate Lazer Texture objects from the given Frame data. Also added UpdateUVs function.

Added in all of the Canvas and WebGL Blend Modes and left it open so it's easy for you to add your own (or tweak single blend modes yourself, without effecting the rest of Lazer)