Skip to content

Commit f4bf6c6

Browse files
photonstormphotonstorm
committed
Added in frameName support for animations and easy setting of sprites born from a texture atlas (all for you Jesse!)
1 parent ebf8360 commit f4bf6c6

12 files changed

Lines changed: 187 additions & 73 deletions

File tree

‎Phaser/Animations.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,5 +124,22 @@ class Animations {
124124
}
125125

126126
}
127+
128+
public get frameName(): string {
129+
return this.currentFrame.name;
130+
}
131+
132+
public set frameName(value: string) {
133+
134+
this.currentFrame = this._frameData.getFrameByName(value);
135+
136+
if (this.currentFrame !== null)
137+
{
138+
this._parent.bounds.width = this.currentFrame.width;
139+
this._parent.bounds.height = this.currentFrame.height;
140+
this._frameIndex = this.currentFrame.index;
141+
}
142+
143+
}
127144

128145
}

‎Phaser/Game.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/**
1818
* Phaser
1919
*
20-
* v0.7 - April 14th 2013
20+
* v0.7a - April 15th 2013
2121
*
2222
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
2323
*
@@ -50,7 +50,7 @@ class Game {
5050

5151
}
5252

53-
public static VERSION: string = 'Phaser version 0.7';
53+
public static VERSION: string = 'Phaser version 0.7a';
5454

5555
private _raf: RequestAnimationFrame;
5656
private _maxAccumulation: number = 32;

‎Phaser/Sprite.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,14 @@ class Sprite extends GameObject {
104104
return this.animations.frame;
105105
}
106106

107+
public set frameName(value?: string) {
108+
this.animations.frameName = value;
109+
}
110+
111+
public get frameName(): string {
112+
return this.animations.frameName;
113+
}
114+
107115
public render(camera:Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
108116

109117
// Render checks
@@ -135,7 +143,7 @@ class Sprite extends GameObject {
135143
this._dw = this.bounds.width * this.scale.x;
136144
this._dh = this.bounds.height * this.scale.y;
137145

138-
if (this.animations.currentFrame)
146+
if (this.animations.currentFrame !== null)
139147
{
140148
this._sx = this.animations.currentFrame.x;
141149
this._sy = this.animations.currentFrame.y;

‎Phaser/phaser.js‎

Lines changed: 50 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2697,6 +2697,16 @@ var Sprite = (function (_super) {
26972697
enumerable: true,
26982698
configurable: true
26992699
});
2700+
Object.defineProperty(Sprite.prototype, "frameName", {
2701+
get: function () {
2702+
return this.animations.frameName;
2703+
},
2704+
set: function (value) {
2705+
this.animations.frameName = value;
2706+
},
2707+
enumerable: true,
2708+
configurable: true
2709+
});
27002710
Sprite.prototype.render = function (camera, cameraOffsetX, cameraOffsetY) {
27012711
// Render checks
27022712
if(this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.inCamera(camera.worldView) == false) {
@@ -2721,7 +2731,7 @@ var Sprite = (function (_super) {
27212731
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
27222732
this._dw = this.bounds.width * this.scale.x;
27232733
this._dh = this.bounds.height * this.scale.y;
2724-
if(this.animations.currentFrame) {
2734+
if(this.animations.currentFrame !== null) {
27252735
this._sx = this.animations.currentFrame.x;
27262736
this._sy = this.animations.currentFrame.y;
27272737
if(this.animations.currentFrame.trimmed) {
@@ -5624,7 +5634,7 @@ var Keyboard = (function () {
56245634
}, false);
56255635
};
56265636
Keyboard.prototype.onKeyDown = function (event) {
5627-
event.preventDefault();
5637+
//event.preventDefault();
56285638
if(!this._keys[event.keyCode]) {
56295639
this._keys[event.keyCode] = {
56305640
isDown: true,
@@ -5637,7 +5647,7 @@ var Keyboard = (function () {
56375647
}
56385648
};
56395649
Keyboard.prototype.onKeyUp = function (event) {
5640-
event.preventDefault();
5650+
//event.preventDefault();
56415651
if(!this._keys[event.keyCode]) {
56425652
this._keys[event.keyCode] = {
56435653
isDown: false,
@@ -7922,7 +7932,7 @@ var Device = (function () {
79227932
/**
79237933
* Phaser
79247934
*
7925-
* v0.7 - April 14th 2013
7935+
* v0.7a - April 15th 2013
79267936
*
79277937
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
79287938
*
@@ -7968,7 +7978,7 @@ var Game = (function () {
79687978
}, false);
79697979
}
79707980
}
7971-
Game.VERSION = 'Phaser version 0.7';
7981+
Game.VERSION = 'Phaser version 0.7a';
79727982
Game.prototype.boot = function (parent, width, height) {
79737983
var _this = this;
79747984
if(!document.body) {
@@ -8193,6 +8203,7 @@ var Game = (function () {
81938203
var FrameData = (function () {
81948204
function FrameData() {
81958205
this._frames = [];
8206+
this._frameNames = [];
81968207
}
81978208
Object.defineProperty(FrameData.prototype, "total", {
81988209
get: function () {
@@ -8202,12 +8213,22 @@ var FrameData = (function () {
82028213
configurable: true
82038214
});
82048215
FrameData.prototype.addFrame = function (frame) {
8216+
frame.index = this._frames.length;
82058217
this._frames.push(frame);
8218+
if(frame.name !== '') {
8219+
this._frameNames[frame.name] = frame.index;
8220+
}
82068221
return frame;
82078222
};
8208-
FrameData.prototype.getFrame = function (frame) {
8209-
if(this._frames[frame]) {
8210-
return this._frames[frame];
8223+
FrameData.prototype.getFrame = function (index) {
8224+
if(this._frames[index]) {
8225+
return this._frames[index];
8226+
}
8227+
return null;
8228+
};
8229+
FrameData.prototype.getFrameByName = function (name) {
8230+
if(this._frameNames[name] >= 0) {
8231+
return this._frames[this._frameNames[name]];
82118232
}
82128233
return null;
82138234
};
@@ -8244,7 +8265,9 @@ var FrameData = (function () {
82448265
/// <reference path="AnimationLoader.ts" />
82458266
/// <reference path="FrameData.ts" />
82468267
var Frame = (function () {
8247-
function Frame(x, y, width, height) {
8268+
function Frame(x, y, width, height, name) {
8269+
// Useful for Texture Atlas files (is set to the filename value)
8270+
this.name = '';
82488271
// Rotated? (not yet implemented)
82498272
this.rotated = false;
82508273
// Either cw or ccw, rotation is always 90 degrees
@@ -8253,6 +8276,7 @@ var Frame = (function () {
82538276
this.y = y;
82548277
this.width = width;
82558278
this.height = height;
8279+
this.name = name;
82568280
this.rotated = false;
82578281
this.trimmed = false;
82588282
}
@@ -8399,15 +8423,8 @@ var AnimationLoader = (function () {
83998423
var data = new FrameData();
84008424
var x = 0;
84018425
var y = 0;
8402-
//console.log('\n\nSpriteSheet Data');
8403-
//console.log('Image Size:', width, 'x', height);
8404-
//console.log('Frame Size:', frameWidth, 'x', frameHeight);
8405-
//console.log('Start X/Y:', x, 'x', y);
8406-
//console.log('Frames (Total: ' + total + ')');
8407-
//console.log('-------------');
84088426
for(var i = 0; i < total; i++) {
8409-
data.addFrame(new Frame(x, y, frameWidth, frameHeight));
8410-
//console.log('Frame', i, '=', x, y);
8427+
data.addFrame(new Frame(x, y, frameWidth, frameHeight, ''));
84118428
x += frameWidth;
84128429
if(x === width) {
84138430
x = 0;
@@ -8423,9 +8440,8 @@ var AnimationLoader = (function () {
84238440
var frames = json;
84248441
var newFrame;
84258442
for(var i = 0; i < frames.length; i++) {
8426-
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h));
8443+
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, frames[i].filename));
84278444
newFrame.setTrim(frames[i].trimmed, frames[i].sourceSize.w, frames[i].sourceSize.h, frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].spriteSourceSize.w, frames[i].spriteSourceSize.h);
8428-
newFrame.filename = frames[i].filename;
84298445
}
84308446
return data;
84318447
};
@@ -8635,6 +8651,21 @@ var Animations = (function () {
86358651
enumerable: true,
86368652
configurable: true
86378653
});
8654+
Object.defineProperty(Animations.prototype, "frameName", {
8655+
get: function () {
8656+
return this.currentFrame.name;
8657+
},
8658+
set: function (value) {
8659+
this.currentFrame = this._frameData.getFrameByName(value);
8660+
if(this.currentFrame !== null) {
8661+
this._parent.bounds.width = this.currentFrame.width;
8662+
this._parent.bounds.height = this.currentFrame.height;
8663+
this._frameIndex = this.currentFrame.index;
8664+
}
8665+
},
8666+
enumerable: true,
8667+
configurable: true
8668+
});
86388669
return Animations;
86398670
})();
86408671
/// <reference path="Game.ts" />

‎Phaser/system/animation/AnimationLoader.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,9 @@ class AnimationLoader {
4141
var x = 0;
4242
var y = 0;
4343

44-
//console.log('\n\nSpriteSheet Data');
45-
//console.log('Image Size:', width, 'x', height);
46-
//console.log('Frame Size:', frameWidth, 'x', frameHeight);
47-
//console.log('Start X/Y:', x, 'x', y);
48-
//console.log('Frames (Total: ' + total + ')');
49-
//console.log('-------------');
50-
5144
for (var i = 0; i < total; i++)
5245
{
53-
data.addFrame(new Frame(x, y, frameWidth, frameHeight));
54-
55-
//console.log('Frame', i, '=', x, y);
46+
data.addFrame(new Frame(x, y, frameWidth, frameHeight, ''));
5647

5748
x += frameWidth;
5849

@@ -80,9 +71,8 @@ class AnimationLoader {
8071

8172
for (var i = 0; i < frames.length; i++)
8273
{
83-
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h));
74+
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, frames[i].filename));
8475
newFrame.setTrim(frames[i].trimmed, frames[i].sourceSize.w, frames[i].sourceSize.h, frames[i].spriteSourceSize.x, frames[i].spriteSourceSize.y, frames[i].spriteSourceSize.w, frames[i].spriteSourceSize.h);
85-
newFrame.filename = frames[i].filename;
8676
}
8777

8878
return data;

‎Phaser/system/animation/Frame.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66

77
class Frame {
88

9-
constructor(x: number, y: number, width: number, height: number) {
9+
constructor(x: number, y: number, width: number, height: number, name: string) {
1010

1111
this.x = x;
1212
this.y = y;
1313
this.width = width;
1414
this.height = height;
15+
this.name = name;
1516

1617
this.rotated = false;
1718
this.trimmed = false;
@@ -24,8 +25,11 @@ class Frame {
2425
public width: number;
2526
public height: number;
2627

27-
// Useful for Texture Atlas files
28-
public filename: string;
28+
// Useful for Sprite Sheets
29+
public index: number;
30+
31+
// Useful for Texture Atlas files (is set to the filename value)
32+
public name: string = '';
2933

3034
// Rotated? (not yet implemented)
3135
public rotated: bool = false;

‎Phaser/system/animation/FrameData.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,48 @@ class FrameData {
99
constructor() {
1010

1111
this._frames = [];
12+
this._frameNames = [];
1213

1314
}
1415

1516
private _frames: Frame[];
17+
private _frameNames;
1618

1719
public get total(): number {
1820
return this._frames.length;
1921
}
2022

2123
public addFrame(frame: Frame):Frame {
2224

25+
frame.index = this._frames.length;
26+
2327
this._frames.push(frame);
2428

29+
if (frame.name !== '')
30+
{
31+
this._frameNames[frame.name] = frame.index;
32+
}
33+
2534
return frame;
2635

2736
}
2837

29-
public getFrame(frame: number):Frame {
38+
public getFrame(index: number):Frame {
39+
40+
if (this._frames[index])
41+
{
42+
return this._frames[index];
43+
}
44+
45+
return null;
46+
47+
}
48+
49+
public getFrameByName(name: string):Frame {
3050

31-
if (this._frames[frame])
51+
if (this._frameNames[name] >= 0)
3252
{
33-
return this._frames[frame];
53+
return this._frames[this._frameNames[name]];
3454
}
3555

3656
return null;

‎Phaser/system/input/Keyboard.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Keyboard {
2323

2424
public onKeyDown(event: KeyboardEvent) {
2525

26-
event.preventDefault();
26+
//event.preventDefault();
2727

2828
if (!this._keys[event.keyCode])
2929
{
@@ -39,7 +39,7 @@ class Keyboard {
3939

4040
public onKeyUp(event: KeyboardEvent) {
4141

42-
event.preventDefault();
42+
//event.preventDefault();
4343

4444
if (!this._keys[event.keyCode])
4545
{

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
Phaser
22
======
33

4-
Version 0.7
4+
Version 0.8
55

6-
14th April 2013
6+
15th April 2013
77

88
By Richard Davey, [Photon Storm](http://www.photonstorm.com)
99

@@ -18,6 +18,11 @@ For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.h
1818
Change Log
1919
----------
2020

21+
V0.8
22+
23+
Added ability to set Sprite frame by name (sprite.frameName), useful when you've loaded a Texture Atlas with filename values set rather than using frame indexes.
24+
Updated texture atlas 4 demo to show this.
25+
2126
V0.7
2227

2328
Renamed FullScreen to StageScaleMode as it's much more fitting. Tested across Android and iOS with the various scale modes.

0 commit comments

Comments
 (0)