diff --git a/Phaser/Animations.ts b/Phaser/Animations.ts index af83e22b..13e6578d 100644 --- a/Phaser/Animations.ts +++ b/Phaser/Animations.ts @@ -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; + } + + } } diff --git a/Phaser/Game.ts b/Phaser/Game.ts index 06ea5b9d..618e3e1f 100644 --- a/Phaser/Game.ts +++ b/Phaser/Game.ts @@ -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; diff --git a/Phaser/Sprite.ts b/Phaser/Sprite.ts index 8d88ec3c..6dcc9ea4 100644 --- a/Phaser/Sprite.ts +++ b/Phaser/Sprite.ts @@ -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; diff --git a/Phaser/phaser.js b/Phaser/phaser.js index bf7b689f..383702cc 100644 --- a/Phaser/phaser.js +++ b/Phaser/phaser.js @@ -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 () { /// /// 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; })(); /// diff --git a/Phaser/system/animation/AnimationLoader.ts b/Phaser/system/animation/AnimationLoader.ts index 82f17cf5..78fb11de 100644 --- a/Phaser/system/animation/AnimationLoader.ts +++ b/Phaser/system/animation/AnimationLoader.ts @@ -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; diff --git a/Phaser/system/animation/Frame.ts b/Phaser/system/animation/Frame.ts index 76056539..e6e862e6 100644 --- a/Phaser/system/animation/Frame.ts +++ b/Phaser/system/animation/Frame.ts @@ -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; diff --git a/Phaser/system/animation/FrameData.ts b/Phaser/system/animation/FrameData.ts index 58313b80..41ae2218 100644 --- a/Phaser/system/animation/FrameData.ts +++ b/Phaser/system/animation/FrameData.ts @@ -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; diff --git a/Phaser/system/input/Keyboard.ts b/Phaser/system/input/Keyboard.ts index 04d70e9b..f3e48c4c 100644 --- a/Phaser/system/input/Keyboard.ts +++ b/Phaser/system/input/Keyboard.ts @@ -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]) { diff --git a/README.md b/README.md index c5ffa93f..a50800c7 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/Tests/phaser.js b/Tests/phaser.js index bf7b689f..383702cc 100644 --- a/Tests/phaser.js +++ b/Tests/phaser.js @@ -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 () { /// /// 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; })(); /// diff --git a/Tests/sprites/texture atlas 4.js b/Tests/sprites/texture atlas 4.js index 4522c86a..8abaf6e8 100644 --- a/Tests/sprites/texture atlas 4.js +++ b/Tests/sprites/texture atlas 4.js @@ -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'; } })(); diff --git a/Tests/sprites/texture atlas 4.ts b/Tests/sprites/texture atlas 4.ts index 75d173c9..03e34e31 100644 --- a/Tests/sprites/texture atlas 4.ts +++ b/Tests/sprites/texture atlas 4.ts @@ -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'; }