Loader can now parse both JSON Hash and JSON Array formated texture atlas files.

This commit is contained in:
Richard Davey 2013-08-29 22:53:55 +01:00
parent 5b036557c0
commit 4c1dacfa02
10 changed files with 205 additions and 50 deletions

View file

@ -0,0 +1,44 @@
{"frames": {
"eggHead.png":
{
"frame": {"x":2,"y":169,"w":142,"h":157},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":142,"h":157},
"sourceSize": {"w":142,"h":157}
},
"flowerTop.png":
{
"frame": {"x":2,"y":328,"w":119,"h":181},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":119,"h":181},
"sourceSize": {"w":119,"h":181}
},
"helmlok.png":
{
"frame": {"x":123,"y":328,"w":123,"h":177},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":123,"h":177},
"sourceSize": {"w":123,"h":177}
},
"skully.png":
{
"frame": {"x":2,"y":2,"w":155,"h":165},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":155,"h":165},
"sourceSize": {"w":155,"h":165}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "SpriteSheet.png",
"format": "RGBA8888",
"size": {"w":256,"h":512},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

55
examples/stage 2.php Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html>
<head>
<title>phaser.js - a new beginning</title>
<?php
require('js.php');
?>
</head>
<body>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }, false, true);
var bunny;
function preload() {
game.load.atlasJSONHash('monsters', 'assets/sprites/pixi_monsters.png', 'assets/sprites/pixi_monsters.json');
}
function create() {
var base = new PIXI.BaseTexture(game.cache.getImage('monsters'));
var texture = new PIXI.Texture(base);
bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = game.world.centerX;
bunny.position.y = game.world.centerY;
game.world.add(bunny);
}
function update() {
if (game.paused == false)
{
// bunny.rotation += 0.01;
// bunny.scale.x += 0.01;
// bunny.scale.y += 0.01;
}
}
})();
</script>
</body>
</html>

View file

@ -65,7 +65,7 @@ Phaser.Animation.Parser = {
},
/**
* Parse frame data from json.
* Parse frame data from json texture atlas in Array format.
* @param json {object} Json data you want to parse.
* @return {FrameData} Generated FrameData object.
*/
@ -109,6 +109,51 @@ Phaser.Animation.Parser = {
},
/**
* Parse frame data from json texture atlas in Hash format.
* @param json {object} Json data you want to parse.
* @return {FrameData} Generated FrameData object.
*/
JSONDataHash: function (game, json) {
// Malformed?
if (!json['frames']) {
console.log(json);
throw new Error("Phaser.AnimationLoader.parseJSONDataHash: Invalid Texture Atlas JSON given, missing 'frames' object");
}
// Let's create some frames then
var data = new Phaser.Animation.FrameData();
// By this stage frames is a fully parsed array
var frames = json['frames'];
var newFrame;
for (var key in frames) {
newFrame = data.addFrame(new Phaser.Animation.Frame(
frames[key].frame.x,
frames[key].frame.y,
frames[key].frame.w,
frames[key].frame.h,
key
));
newFrame.setTrim(
frames[key].trimmed,
frames[key].sourceSize.w,
frames[key].sourceSize.h,
frames[key].spriteSourceSize.x,
frames[key].spriteSourceSize.y,
frames[key].spriteSourceSize.w,
frames[key].spriteSourceSize.h
);
}
return data;
},
/**
* Parse frame data from an XML file.
* @param xml {object} XML data you want to parse.

View file

@ -278,7 +278,7 @@ Phaser.Game.prototype = {
this.load.onLoadComplete.add(this.loadComplete, this);
this.state.boot();
this.stage.boot();
// this.stage.boot();
// this.input.boot();
if (this.renderType == Phaser.CANVAS)
@ -331,8 +331,6 @@ Phaser.Game.prototype = {
*/
loadComplete: function () {
console.log('loadComplete', this);
this._loadComplete = true;
this.state.loadComplete();

View file

@ -13,6 +13,25 @@ Phaser.Stage = function (game) {
this.game = game;
// Get the offset values (for input and other things)
this.offset = new Phaser.Point;
Phaser.Canvas.getOffset(this.game.renderer.view, this.offset);
this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
var _this = this;
this._onChange = function (event) {
return _this.visibilityChange(event);
}
document.addEventListener('visibilitychange', this._onChange, false);
document.addEventListener('webkitvisibilitychange', this._onChange, false);
document.addEventListener('pagehide', this._onChange, false);
document.addEventListener('pageshow', this._onChange, false);
window.onblur = this._onChange;
window.onfocus = this._onChange;
};
Phaser.Stage.prototype = {
@ -21,29 +40,6 @@ Phaser.Stage.prototype = {
bounds: null,
offset: null,
boot: function () {
// Get the offset values (for input and other things)
this.offset = new Phaser.Point;
Phaser.Canvas.getOffset(this.game.renderer.view, this.offset);
this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
var _this = this;
this._onChange = function (event) {
return _this.visibilityChange(event);
}
document.addEventListener('visibilitychange', this._onChange, false);
document.addEventListener('webkitvisibilitychange', this._onChange, false);
document.addEventListener('pagehide', this._onChange, false);
document.addEventListener('pageshow', this._onChange, false);
window.onblur = this._onChange;
window.onfocus = this._onChange;
},
/**
* This method is called when the document visibility is changed.

View file

@ -102,8 +102,8 @@ Phaser.StateManager.prototype = {
if (this._pendingState !== null)
{
console.log('_pendingState found');
console.log(typeof this._pendingState);
// console.log('_pendingState found');
// console.log(typeof this._pendingState);
if (typeof this._pendingState === 'string')
{
@ -129,26 +129,26 @@ Phaser.StateManager.prototype = {
if (typeof autoStart === "undefined") { autoStart = false; }
console.log('Phaser.StateManager.addState', key);
console.log(typeof state);
console.log('autoStart?', autoStart);
// console.log('Phaser.StateManager.addState', key);
// console.log(typeof state);
// console.log('autoStart?', autoStart);
var newState;
if (state instanceof Phaser.State)
{
console.log('Phaser.StateManager.addState: Phaser.State given');
// console.log('Phaser.StateManager.addState: Phaser.State given');
newState = state;
newState.link(this.game);
}
else if (typeof state === 'object')
{
console.log('Phaser.StateManager.addState: Object given');
// console.log('Phaser.StateManager.addState: Object given');
newState = state;
}
else if (typeof state === 'function')
{
console.log('Phaser.StateManager.addState: Function given');
// console.log('Phaser.StateManager.addState: Function given');
newState = new state(this.game);
}
@ -158,12 +158,12 @@ Phaser.StateManager.prototype = {
{
if (this.game.isBooted)
{
console.log('Game is booted, so we can start the state now');
// console.log('Game is booted, so we can start the state now');
this.start(key);
}
else
{
console.log('Game is NOT booted, so set the current state as pending');
// console.log('Game is NOT booted, so set the current state as pending');
this._pendingState = key;
}
}
@ -203,7 +203,7 @@ Phaser.StateManager.prototype = {
*/
start: function (key, clearWorld, clearCache) {
console.log('Phaser.StateManager.start', key);
// console.log('Phaser.StateManager.start', key);
// console.log(this);
// console.log(this.callbackContext);
@ -212,7 +212,7 @@ Phaser.StateManager.prototype = {
if (this.game.isBooted == false)
{
console.log('Game is NOT booted, so set the requested state as pending');
// console.log('Game is NOT booted, so set the requested state as pending');
this._pendingState = key;
return;
}
@ -243,14 +243,14 @@ Phaser.StateManager.prototype = {
if (this.onPreloadCallback)
{
console.log('Preload Callback found');
// console.log('Preload Callback found');
this.game.load.reset();
this.onPreloadCallback.call(this.callbackContext);
// Is the loader empty?
if (this.game.load.queueSize == 0)
{
console.log('Loader queue empty');
// console.log('Loader queue empty');
this.game.loadComplete();
if (this.onCreateCallback)
@ -260,18 +260,18 @@ Phaser.StateManager.prototype = {
}
else
{
console.log('Loader started');
// console.log('Loader started');
// Start the loader going as we have something in the queue
this.game.load.start();
}
}
else
{
console.log('Preload callback not found');
// console.log('Preload callback not found');
// No init? Then there was nothing to load either
if (this.onCreateCallback)
{
console.log('Create callback found');
// console.log('Create callback found');
this.onCreateCallback.call(this.callbackContext);
}
@ -343,10 +343,10 @@ Phaser.StateManager.prototype = {
loadComplete: function () {
console.log('Phaser.StateManager.loadComplete');
// console.log('Phaser.StateManager.loadComplete');
if (this.onCreateCallback) {
console.log('Create callback found');
// console.log('Create callback found');
this.onCreateCallback.call(this.callbackContext);
}

View file

@ -1,13 +1,14 @@
Phaser.World = function (game) {
this.game = game;
this.bounds = new Phaser.Rectangle(0, 0, game.width, game.height);
this._stage = new PIXI.Stage(0x000000);
this._container = new PIXI.DisplayObjectContainer();
this._stage.addChild(this._container);
this.bounds = new Phaser.Rectangle(0, 0, game.width, game.height);
};
@ -18,8 +19,20 @@ Phaser.World.prototype = {
bounds: null,
add: function (sprite) {
this._container.addChild(sprite);
add: function (gameobject) {
this._container.addChild(gameobject);
},
addAt: function (gameobject, index) {
this._container.addChildAt(gameobject, index);
},
getAt: function (index) {
return this._container.getChildAt(index);
},
remove: function (gameobject) {
this._container.removeChild(gameobject);
},
/**

View file

@ -88,6 +88,10 @@ Phaser.Cache.prototype = {
{
this._images[key].frameData = Phaser.Animation.Parser.JSONData(this.game, atlasData);
}
else if (format == Phaser.Loader.TEXTURE_ATLAS_JSON_HASH)
{
this._images[key].frameData = Phaser.Animation.Parser.JSONDataHash(this.game, atlasData);
}
else if (format == Phaser.Loader.TEXTURE_ATLAS_XML_STARLING)
{
this._images[key].frameData = Phaser.Animation.Parser.XMLData(this.game, atlasData, format);

View file

@ -217,7 +217,7 @@ Phaser.Loader.prototype = {
},
atlasJSON: function (key, textureURL, atlasURL, atlasData) {
atlasJSONArray: function (key, textureURL, atlasURL, atlasData) {
if (typeof atlasURL === "undefined") { atlasURL = null; }
if (typeof atlasData === "undefined") { atlasData = null; }
this.atlas(key, textureURL, atlasURL, atlasData, Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);