mirror of
https://github.com/photonstorm/phaser
synced 2024-09-20 14:31:55 +00:00
Loader can now parse both JSON Hash and JSON Array formated texture atlas files.
This commit is contained in:
parent
5b036557c0
commit
4c1dacfa02
10 changed files with 205 additions and 50 deletions
44
examples/assets/sprites/pixi_monsters.json
Normal file
44
examples/assets/sprites/pixi_monsters.json
Normal 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$"
|
||||
}
|
||||
}
|
BIN
examples/assets/sprites/pixi_monsters.png
Normal file
BIN
examples/assets/sprites/pixi_monsters.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 142 KiB |
55
examples/stage 2.php
Normal file
55
examples/stage 2.php
Normal 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>
|
|
@ -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.
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue