Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 07:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added in frameName support for animations and easy setting of sprites born from a texture atlas (all for you Jesse!)

Browse source
This commit is contained in:
Richard Davey 2013-04-15 15:42:13 +01:00
parent ebf83609ae
commit f4bf6c607f
12 changed files with 187 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
Phaser/Animations.ts
View file

@ -124,5 +124,22 @@ class Animations {
}
}
public get frameName(): string {
return this.currentFrame.name;
}
public set frameName(value: string) {
this.currentFrame = this._frameData.getFrameByName(value);
if (this.currentFrame !== null)
{
this._parent.bounds.width = this.currentFrame.width;
this._parent.bounds.height = this.currentFrame.height;
this._frameIndex = this.currentFrame.index;
}
}
}

4
Phaser/Game.ts
View file

@ -17,7 +17,7 @@
/**
* Phaser
*
* v0.7 - April 14th 2013
* v0.7a - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -50,7 +50,7 @@ class Game {
}
public static VERSION: string = 'Phaser version 0.7';
public static VERSION: string = 'Phaser version 0.7a';
private _raf: RequestAnimationFrame;
private _maxAccumulation: number = 32;

10
Phaser/Sprite.ts
View file

@ -104,6 +104,14 @@ class Sprite extends GameObject {
return this.animations.frame;
}
public set frameName(value?: string) {
this.animations.frameName = value;
}
public get frameName(): string {
return this.animations.frameName;
}
public render(camera:Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
// Render checks
@ -135,7 +143,7 @@ class Sprite extends GameObject {
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if (this.animations.currentFrame)
if (this.animations.currentFrame !== null)
{
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;

69
Phaser/phaser.js
View file

@ -2697,6 +2697,16 @@ var Sprite = (function (_super) {
enumerable: true,
configurable: true
});
Object.defineProperty(Sprite.prototype, "frameName", {
get: function () {
return this.animations.frameName;
},
set: function (value) {
this.animations.frameName = value;
},
enumerable: true,
configurable: true
});
Sprite.prototype.render = function (camera, cameraOffsetX, cameraOffsetY) {
// Render checks
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) {
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if(this.animations.currentFrame) {
if(this.animations.currentFrame !== null) {
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
if(this.animations.currentFrame.trimmed) {
@ -5624,7 +5634,7 @@ var Keyboard = (function () {
}, false);
};
Keyboard.prototype.onKeyDown = function (event) {
event.preventDefault();
//event.preventDefault();
if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = {
isDown: true,
@ -5637,7 +5647,7 @@ var Keyboard = (function () {
}
};
Keyboard.prototype.onKeyUp = function (event) {
event.preventDefault();
//event.preventDefault();
if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = {
isDown: false,
@ -7922,7 +7932,7 @@ var Device = (function () {
/**
* Phaser
*
* v0.7 - April 14th 2013
* v0.7a - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -7968,7 +7978,7 @@ var Game = (function () {
}, false);
}
}
Game.VERSION = 'Phaser version 0.7';
Game.VERSION = 'Phaser version 0.7a';
Game.prototype.boot = function (parent, width, height) {
var _this = this;
if(!document.body) {
@ -8193,6 +8203,7 @@ var Game = (function () {
var FrameData = (function () {
function FrameData() {
this._frames = [];
this._frameNames = [];
}
Object.defineProperty(FrameData.prototype, "total", {
get: function () {
@ -8202,12 +8213,22 @@ var FrameData = (function () {
configurable: true
});
FrameData.prototype.addFrame = function (frame) {
frame.index = this._frames.length;
this._frames.push(frame);
if(frame.name !== '') {
this._frameNames[frame.name] = frame.index;
}
return frame;
};
FrameData.prototype.getFrame = function (frame) {
if(this._frames[frame]) {
return this._frames[frame];
FrameData.prototype.getFrame = function (index) {
if(this._frames[index]) {
return this._frames[index];
}
return null;
};
FrameData.prototype.getFrameByName = function (name) {
if(this._frameNames[name] >= 0) {
return this._frames[this._frameNames[name]];
}
return null;
};
@ -8244,7 +8265,9 @@ var FrameData = (function () {
/// <reference path="AnimationLoader.ts" />
/// <reference path="FrameData.ts" />
var Frame = (function () {
function Frame(x, y, width, height) {
function Frame(x, y, width, height, name) {
// Useful for Texture Atlas files (is set to the filename value)
this.name = '';
// Rotated? (not yet implemented)
this.rotated = false;
// Either cw or ccw, rotation is always 90 degrees
@ -8253,6 +8276,7 @@ var Frame = (function () {
this.y = y;
this.width = width;
this.height = height;
this.name = name;
this.rotated = false;
this.trimmed = false;
}
@ -8399,15 +8423,8 @@ var AnimationLoader = (function () {
var data = new FrameData();
var x = 0;
var y = 0;
//console.log('\n\nSpriteSheet Data');
//console.log('Image Size:', width, 'x', height);
//console.log('Frame Size:', frameWidth, 'x', frameHeight);
//console.log('Start X/Y:', x, 'x', y);
//console.log('Frames (Total: ' + total + ')');
//console.log('-------------');
for(var i = 0; i < total; i++) {
data.addFrame(new Frame(x, y, frameWidth, frameHeight));
//console.log('Frame', i, '=', x, y);
data.addFrame(new Frame(x, y, frameWidth, frameHeight, ''));
x += frameWidth;
if(x === width) {
x = 0;
@ -8423,9 +8440,8 @@ var AnimationLoader = (function () {
var frames = json;
var newFrame;
for(var i = 0; i < frames.length; i++) {
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h));
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, frames[i].filename));
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);
newFrame.filename = frames[i].filename;
}
return data;
};
@ -8635,6 +8651,21 @@ var Animations = (function () {
enumerable: true,
configurable: true
});
Object.defineProperty(Animations.prototype, "frameName", {
get: function () {
return this.currentFrame.name;
},
set: function (value) {
this.currentFrame = this._frameData.getFrameByName(value);
if(this.currentFrame !== null) {
this._parent.bounds.width = this.currentFrame.width;
this._parent.bounds.height = this.currentFrame.height;
this._frameIndex = this.currentFrame.index;
}
},
enumerable: true,
configurable: true
});
return Animations;
})();
/// <reference path="Game.ts" />

14
Phaser/system/animation/AnimationLoader.ts
View file

@ -41,18 +41,9 @@ class AnimationLoader {
var x = 0;
var y = 0;
//console.log('\n\nSpriteSheet Data');
//console.log('Image Size:', width, 'x', height);
//console.log('Frame Size:', frameWidth, 'x', frameHeight);
//console.log('Start X/Y:', x, 'x', y);
//console.log('Frames (Total: ' + total + ')');
//console.log('-------------');
for (var i = 0; i < total; i++)
{
data.addFrame(new Frame(x, y, frameWidth, frameHeight));
//console.log('Frame', i, '=', x, y);
data.addFrame(new Frame(x, y, frameWidth, frameHeight, ''));
x += frameWidth;
@ -80,9 +71,8 @@ class AnimationLoader {
for (var i = 0; i < frames.length; i++)
{
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h));
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, frames[i].filename));
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);
newFrame.filename = frames[i].filename;
}
return data;

10
Phaser/system/animation/Frame.ts
View file

@ -6,12 +6,13 @@
class Frame {
constructor(x: number, y: number, width: number, height: number) {
constructor(x: number, y: number, width: number, height: number, name: string) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.name = name;
this.rotated = false;
this.trimmed = false;
@ -24,8 +25,11 @@ class Frame {
public width: number;
public height: number;
// Useful for Texture Atlas files
public filename: string;
// Useful for Sprite Sheets
public index: number;
// Useful for Texture Atlas files (is set to the filename value)
public name: string = '';
// Rotated? (not yet implemented)
public rotated: bool = false;

26
Phaser/system/animation/FrameData.ts
View file

@ -9,10 +9,12 @@ class FrameData {
constructor() {
this._frames = [];
this._frameNames = [];
}
private _frames: Frame[];
private _frameNames;
public get total(): number {
return this._frames.length;
@ -20,17 +22,35 @@ class FrameData {
public addFrame(frame: Frame):Frame {
frame.index = this._frames.length;
this._frames.push(frame);
if (frame.name !== '')
{
this._frameNames[frame.name] = frame.index;
}
return frame;
}
public getFrame(frame: number):Frame {
public getFrame(index: number):Frame {
if (this._frames[frame])
if (this._frames[index])
{
return this._frames[frame];
return this._frames[index];
}
return null;
}
public getFrameByName(name: string):Frame {
if (this._frameNames[name] >= 0)
{
return this._frames[this._frameNames[name]];
}
return null;

4
Phaser/system/input/Keyboard.ts
View file

@ -23,7 +23,7 @@ class Keyboard {
public onKeyDown(event: KeyboardEvent) {
event.preventDefault();
//event.preventDefault();
if (!this._keys[event.keyCode])
{
@ -39,7 +39,7 @@ class Keyboard {
public onKeyUp(event: KeyboardEvent) {
event.preventDefault();
//event.preventDefault();
if (!this._keys[event.keyCode])
{

9
README.md
View file

@ -1,9 +1,9 @@
Phaser
======
Version 0.7
Version 0.8
14th April 2013
15th April 2013
By Richard Davey, [Photon Storm](http://www.photonstorm.com)
@ -18,6 +18,11 @@ For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.h
Change Log
----------
V0.8
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.
Updated texture atlas 4 demo to show this.
V0.7
Renamed FullScreen to StageScaleMode as it's much more fitting. Tested across Android and iOS with the various scale modes.

69
Tests/phaser.js
View file

@ -2697,6 +2697,16 @@ var Sprite = (function (_super) {
enumerable: true,
configurable: true
});
Object.defineProperty(Sprite.prototype, "frameName", {
get: function () {
return this.animations.frameName;
},
set: function (value) {
this.animations.frameName = value;
},
enumerable: true,
configurable: true
});
Sprite.prototype.render = function (camera, cameraOffsetX, cameraOffsetY) {
// Render checks
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) {
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.height * this.scale.y;
if(this.animations.currentFrame) {
if(this.animations.currentFrame !== null) {
this._sx = this.animations.currentFrame.x;
this._sy = this.animations.currentFrame.y;
if(this.animations.currentFrame.trimmed) {
@ -5624,7 +5634,7 @@ var Keyboard = (function () {
}, false);
};
Keyboard.prototype.onKeyDown = function (event) {
event.preventDefault();
//event.preventDefault();
if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = {
isDown: true,
@ -5637,7 +5647,7 @@ var Keyboard = (function () {
}
};
Keyboard.prototype.onKeyUp = function (event) {
event.preventDefault();
//event.preventDefault();
if(!this._keys[event.keyCode]) {
this._keys[event.keyCode] = {
isDown: false,
@ -7922,7 +7932,7 @@ var Device = (function () {
/**
* Phaser
*
* v0.7 - April 14th 2013
* v0.7a - April 15th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -7968,7 +7978,7 @@ var Game = (function () {
}, false);
}
}
Game.VERSION = 'Phaser version 0.7';
Game.VERSION = 'Phaser version 0.7a';
Game.prototype.boot = function (parent, width, height) {
var _this = this;
if(!document.body) {
@ -8193,6 +8203,7 @@ var Game = (function () {
var FrameData = (function () {
function FrameData() {
this._frames = [];
this._frameNames = [];
}
Object.defineProperty(FrameData.prototype, "total", {
get: function () {
@ -8202,12 +8213,22 @@ var FrameData = (function () {
configurable: true
});
FrameData.prototype.addFrame = function (frame) {
frame.index = this._frames.length;
this._frames.push(frame);
if(frame.name !== '') {
this._frameNames[frame.name] = frame.index;
}
return frame;
};
FrameData.prototype.getFrame = function (frame) {
if(this._frames[frame]) {
return this._frames[frame];
FrameData.prototype.getFrame = function (index) {
if(this._frames[index]) {
return this._frames[index];
}
return null;
};
FrameData.prototype.getFrameByName = function (name) {
if(this._frameNames[name] >= 0) {
return this._frames[this._frameNames[name]];
}
return null;
};
@ -8244,7 +8265,9 @@ var FrameData = (function () {
/// <reference path="AnimationLoader.ts" />
/// <reference path="FrameData.ts" />
var Frame = (function () {
function Frame(x, y, width, height) {
function Frame(x, y, width, height, name) {
// Useful for Texture Atlas files (is set to the filename value)
this.name = '';
// Rotated? (not yet implemented)
this.rotated = false;
// Either cw or ccw, rotation is always 90 degrees
@ -8253,6 +8276,7 @@ var Frame = (function () {
this.y = y;
this.width = width;
this.height = height;
this.name = name;
this.rotated = false;
this.trimmed = false;
}
@ -8399,15 +8423,8 @@ var AnimationLoader = (function () {
var data = new FrameData();
var x = 0;
var y = 0;
//console.log('\n\nSpriteSheet Data');
//console.log('Image Size:', width, 'x', height);
//console.log('Frame Size:', frameWidth, 'x', frameHeight);
//console.log('Start X/Y:', x, 'x', y);
//console.log('Frames (Total: ' + total + ')');
//console.log('-------------');
for(var i = 0; i < total; i++) {
data.addFrame(new Frame(x, y, frameWidth, frameHeight));
//console.log('Frame', i, '=', x, y);
data.addFrame(new Frame(x, y, frameWidth, frameHeight, ''));
x += frameWidth;
if(x === width) {
x = 0;
@ -8423,9 +8440,8 @@ var AnimationLoader = (function () {
var frames = json;
var newFrame;
for(var i = 0; i < frames.length; i++) {
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h));
newFrame = data.addFrame(new Frame(frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, frames[i].filename));
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);
newFrame.filename = frames[i].filename;
}
return data;
};
@ -8635,6 +8651,21 @@ var Animations = (function () {
enumerable: true,
configurable: true
});
Object.defineProperty(Animations.prototype, "frameName", {
get: function () {
return this.currentFrame.name;
},
set: function (value) {
this.currentFrame = this._frameData.getFrameByName(value);
if(this.currentFrame !== null) {
this._parent.bounds.width = this.currentFrame.width;
this._parent.bounds.height = this.currentFrame.height;
this._frameIndex = this.currentFrame.index;
}
},
enumerable: true,
configurable: true
});
return Animations;
})();
/// <reference path="Game.ts" />

13
Tests/sprites/texture atlas 4.js
View file

@ -17,14 +17,17 @@
function create() {
myGame.camera.backgroundColor = 'rgb(40, 40, 40)';
chick = myGame.createSprite(64, 64, 'atlas');
chick.animations.frame = 0;
// You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself)
chick.frameName = 'budbrain_chick.png';
// Or by setting the frame index
//chick.frame = 0;
cop = myGame.createSprite(600, 64, 'atlas');
cop.animations.frame = 2;
cop.frameName = 'ladycop.png';
robot = myGame.createSprite(50, 300, 'atlas');
robot.animations.frame = 3;
robot.frameName = 'robot.png';
car = myGame.createSprite(100, 400, 'atlas');
car.animations.frame = 4;
car.frameName = 'supercars_parsec.png';
mech = myGame.createSprite(250, 100, 'atlas');
mech.animations.frame = 5;
mech.frameName = 'titan_mech.png';
}
})();

15
Tests/sprites/texture atlas 4.ts
View file

@ -27,19 +27,24 @@
myGame.camera.backgroundColor = 'rgb(40, 40, 40)';
chick = myGame.createSprite(64, 64, 'atlas');
chick.animations.frame = 0;
// You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself)
chick.frameName = 'budbrain_chick.png';
// Or by setting the frame index
//chick.frame = 0;
cop = myGame.createSprite(600, 64, 'atlas');
cop.animations.frame = 2;
cop.frameName = 'ladycop.png';
robot = myGame.createSprite(50, 300, 'atlas');
robot.animations.frame = 3;
robot.frameName = 'robot.png';
car = myGame.createSprite(100, 400, 'atlas');
car.animations.frame = 4;
car.frameName = 'supercars_parsec.png';
mech = myGame.createSprite(250, 100, 'atlas');
mech.animations.frame = 5;
mech.frameName = 'titan_mech.png';
}