Skip to content

Commit 4c1dacf

Browse files
photonstormphotonstorm
committed
Loader can now parse both JSON Hash and JSON Array formated texture atlas files.
1 parent 5b03655 commit 4c1dacf

10 files changed

Lines changed: 205 additions & 50 deletions

File tree

‎examples/assets/sprites/pixi_monsters.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{"frames": {
2+
3+
"eggHead.png":
4+
{
5+
"frame": {"x":2,"y":169,"w":142,"h":157},
6+
"rotated": false,
7+
"trimmed": false,
8+
"spriteSourceSize": {"x":0,"y":0,"w":142,"h":157},
9+
"sourceSize": {"w":142,"h":157}
10+
},
11+
"flowerTop.png":
12+
{
13+
"frame": {"x":2,"y":328,"w":119,"h":181},
14+
"rotated": false,
15+
"trimmed": false,
16+
"spriteSourceSize": {"x":0,"y":0,"w":119,"h":181},
17+
"sourceSize": {"w":119,"h":181}
18+
},
19+
"helmlok.png":
20+
{
21+
"frame": {"x":123,"y":328,"w":123,"h":177},
22+
"rotated": false,
23+
"trimmed": false,
24+
"spriteSourceSize": {"x":0,"y":0,"w":123,"h":177},
25+
"sourceSize": {"w":123,"h":177}
26+
},
27+
"skully.png":
28+
{
29+
"frame": {"x":2,"y":2,"w":155,"h":165},
30+
"rotated": false,
31+
"trimmed": false,
32+
"spriteSourceSize": {"x":0,"y":0,"w":155,"h":165},
33+
"sourceSize": {"w":155,"h":165}
34+
}},
35+
"meta": {
36+
"app": "http://www.texturepacker.com",
37+
"version": "1.0",
38+
"image": "SpriteSheet.png",
39+
"format": "RGBA8888",
40+
"size": {"w":256,"h":512},
41+
"scale": "1",
42+
"smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$"
43+
}
44+
}

‎examples/assets/sprites/pixi_monsters.png‎

142 KB
Loading

‎examples/stage 2.php‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>phaser.js - a new beginning</title>
5+
<?php
6+
require('js.php');
7+
?>
8+
</head>
9+
<body>
10+
11+
<script type="text/javascript">
12+
13+
(function () {
14+
15+
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }, false, true);
16+
17+
var bunny;
18+
19+
function preload() {
20+
game.load.atlasJSONHash('monsters', 'assets/sprites/pixi_monsters.png', 'assets/sprites/pixi_monsters.json');
21+
}
22+
23+
function create() {
24+
25+
var base = new PIXI.BaseTexture(game.cache.getImage('monsters'));
26+
var texture = new PIXI.Texture(base);
27+
bunny = new PIXI.Sprite(texture);
28+
29+
bunny.anchor.x = 0.5;
30+
bunny.anchor.y = 0.5;
31+
32+
bunny.position.x = game.world.centerX;
33+
bunny.position.y = game.world.centerY;
34+
35+
game.world.add(bunny);
36+
37+
}
38+
39+
function update() {
40+
41+
if (game.paused == false)
42+
{
43+
// bunny.rotation += 0.01;
44+
// bunny.scale.x += 0.01;
45+
// bunny.scale.y += 0.01;
46+
}
47+
48+
}
49+
50+
})();
51+
52+
</script>
53+
54+
</body>
55+
</html>

‎src/animation/Parser.js‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Phaser.Animation.Parser = {
6565
},
6666

6767
/**
68-
* Parse frame data from json.
68+
* Parse frame data from json texture atlas in Array format.
6969
* @param json {object} Json data you want to parse.
7070
* @return {FrameData} Generated FrameData object.
7171
*/
@@ -109,6 +109,51 @@ Phaser.Animation.Parser = {
109109

110110
},
111111

112+
/**
113+
* Parse frame data from json texture atlas in Hash format.
114+
* @param json {object} Json data you want to parse.
115+
* @return {FrameData} Generated FrameData object.
116+
*/
117+
JSONDataHash: function (game, json) {
118+
119+
// Malformed?
120+
if (!json['frames']) {
121+
console.log(json);
122+
throw new Error("Phaser.AnimationLoader.parseJSONDataHash: Invalid Texture Atlas JSON given, missing 'frames' object");
123+
}
124+
125+
// Let's create some frames then
126+
var data = new Phaser.Animation.FrameData();
127+
128+
// By this stage frames is a fully parsed array
129+
var frames = json['frames'];
130+
var newFrame;
131+
132+
for (var key in frames) {
133+
134+
newFrame = data.addFrame(new Phaser.Animation.Frame(
135+
frames[key].frame.x,
136+
frames[key].frame.y,
137+
frames[key].frame.w,
138+
frames[key].frame.h,
139+
key
140+
));
141+
142+
newFrame.setTrim(
143+
frames[key].trimmed,
144+
frames[key].sourceSize.w,
145+
frames[key].sourceSize.h,
146+
frames[key].spriteSourceSize.x,
147+
frames[key].spriteSourceSize.y,
148+
frames[key].spriteSourceSize.w,
149+
frames[key].spriteSourceSize.h
150+
);
151+
}
152+
153+
return data;
154+
155+
},
156+
112157
/**
113158
* Parse frame data from an XML file.
114159
* @param xml {object} XML data you want to parse.

‎src/core/Game.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ Phaser.Game.prototype = {
278278
this.load.onLoadComplete.add(this.loadComplete, this);
279279

280280
this.state.boot();
281-
this.stage.boot();
281+
// this.stage.boot();
282282
// this.input.boot();
283283

284284
if (this.renderType == Phaser.CANVAS)
@@ -331,8 +331,6 @@ Phaser.Game.prototype = {
331331
*/
332332
loadComplete: function () {
333333

334-
console.log('loadComplete', this);
335-
336334
this._loadComplete = true;
337335

338336
this.state.loadComplete();

‎src/core/Stage.js‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,33 @@ Phaser.Stage = function (game) {
1313

1414
this.game = game;
1515

16-
};
17-
18-
Phaser.Stage.prototype = {
16+
// Get the offset values (for input and other things)
17+
this.offset = new Phaser.Point;
18+
Phaser.Canvas.getOffset(this.game.renderer.view, this.offset);
19+
this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
1920

20-
_onChange: null,
21+
var _this = this;
2122

22-
bounds: null,
23-
offset: null,
24-
25-
boot: function () {
23+
this._onChange = function (event) {
24+
return _this.visibilityChange(event);
25+
}
2626

27-
// Get the offset values (for input and other things)
28-
this.offset = new Phaser.Point;
29-
Phaser.Canvas.getOffset(this.game.renderer.view, this.offset);
30-
this.bounds = new Phaser.Rectangle(this.offset.x, this.offset.y, this.game.width, this.game.height);
27+
document.addEventListener('visibilitychange', this._onChange, false);
28+
document.addEventListener('webkitvisibilitychange', this._onChange, false);
29+
document.addEventListener('pagehide', this._onChange, false);
30+
document.addEventListener('pageshow', this._onChange, false);
3131

32-
var _this = this;
32+
window.onblur = this._onChange;
33+
window.onfocus = this._onChange;
3334

34-
this._onChange = function (event) {
35-
return _this.visibilityChange(event);
36-
}
35+
};
3736

38-
document.addEventListener('visibilitychange', this._onChange, false);
39-
document.addEventListener('webkitvisibilitychange', this._onChange, false);
40-
document.addEventListener('pagehide', this._onChange, false);
41-
document.addEventListener('pageshow', this._onChange, false);
37+
Phaser.Stage.prototype = {
4238

43-
window.onblur = this._onChange;
44-
window.onfocus = this._onChange;
39+
_onChange: null,
4540

46-
},
41+
bounds: null,
42+
offset: null,
4743

4844
/**
4945
* This method is called when the document visibility is changed.

‎src/core/StateManager.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ Phaser.StateManager.prototype = {
102102

103103
if (this._pendingState !== null)
104104
{
105-
console.log('_pendingState found');
106-
console.log(typeof this._pendingState);
105+
// console.log('_pendingState found');
106+
// console.log(typeof this._pendingState);
107107

108108
if (typeof this._pendingState === 'string')
109109
{
@@ -129,26 +129,26 @@ Phaser.StateManager.prototype = {
129129

130130
if (typeof autoStart === "undefined") { autoStart = false; }
131131

132-
console.log('Phaser.StateManager.addState', key);
133-
console.log(typeof state);
134-
console.log('autoStart?', autoStart);
132+
// console.log('Phaser.StateManager.addState', key);
133+
// console.log(typeof state);
134+
// console.log('autoStart?', autoStart);
135135

136136
var newState;
137137

138138
if (state instanceof Phaser.State)
139139
{
140-
console.log('Phaser.StateManager.addState: Phaser.State given');
140+
// console.log('Phaser.StateManager.addState: Phaser.State given');
141141
newState = state;
142142
newState.link(this.game);
143143
}
144144
else if (typeof state === 'object')
145145
{
146-
console.log('Phaser.StateManager.addState: Object given');
146+
// console.log('Phaser.StateManager.addState: Object given');
147147
newState = state;
148148
}
149149
else if (typeof state === 'function')
150150
{
151-
console.log('Phaser.StateManager.addState: Function given');
151+
// console.log('Phaser.StateManager.addState: Function given');
152152
newState = new state(this.game);
153153
}
154154

@@ -158,12 +158,12 @@ Phaser.StateManager.prototype = {
158158
{
159159
if (this.game.isBooted)
160160
{
161-
console.log('Game is booted, so we can start the state now');
161+
// console.log('Game is booted, so we can start the state now');
162162
this.start(key);
163163
}
164164
else
165165
{
166-
console.log('Game is NOT booted, so set the current state as pending');
166+
// console.log('Game is NOT booted, so set the current state as pending');
167167
this._pendingState = key;
168168
}
169169
}
@@ -203,7 +203,7 @@ Phaser.StateManager.prototype = {
203203
*/
204204
start: function (key, clearWorld, clearCache) {
205205

206-
console.log('Phaser.StateManager.start', key);
206+
// console.log('Phaser.StateManager.start', key);
207207
// console.log(this);
208208
// console.log(this.callbackContext);
209209

@@ -212,7 +212,7 @@ Phaser.StateManager.prototype = {
212212

213213
if (this.game.isBooted == false)
214214
{
215-
console.log('Game is NOT booted, so set the requested state as pending');
215+
// console.log('Game is NOT booted, so set the requested state as pending');
216216
this._pendingState = key;
217217
return;
218218
}
@@ -243,14 +243,14 @@ Phaser.StateManager.prototype = {
243243

244244
if (this.onPreloadCallback)
245245
{
246-
console.log('Preload Callback found');
246+
// console.log('Preload Callback found');
247247
this.game.load.reset();
248248
this.onPreloadCallback.call(this.callbackContext);
249249

250250
// Is the loader empty?
251251
if (this.game.load.queueSize == 0)
252252
{
253-
console.log('Loader queue empty');
253+
// console.log('Loader queue empty');
254254
this.game.loadComplete();
255255

256256
if (this.onCreateCallback)
@@ -260,18 +260,18 @@ Phaser.StateManager.prototype = {
260260
}
261261
else
262262
{
263-
console.log('Loader started');
263+
// console.log('Loader started');
264264
// Start the loader going as we have something in the queue
265265
this.game.load.start();
266266
}
267267
}
268268
else
269269
{
270-
console.log('Preload callback not found');
270+
// console.log('Preload callback not found');
271271
// No init? Then there was nothing to load either
272272
if (this.onCreateCallback)
273273
{
274-
console.log('Create callback found');
274+
// console.log('Create callback found');
275275
this.onCreateCallback.call(this.callbackContext);
276276
}
277277

@@ -343,10 +343,10 @@ Phaser.StateManager.prototype = {
343343

344344
loadComplete: function () {
345345

346-
console.log('Phaser.StateManager.loadComplete');
346+
// console.log('Phaser.StateManager.loadComplete');
347347

348348
if (this.onCreateCallback) {
349-
console.log('Create callback found');
349+
// console.log('Create callback found');
350350
this.onCreateCallback.call(this.callbackContext);
351351
}
352352

0 commit comments

Comments
 (0)