From 559d75eba18b26a5fa079088b2efd42509cff811 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Fri, 30 Aug 2013 01:50:17 +0100 Subject: [PATCH] When Phaser loads images they are now added to the PIXI.BaseTextureCache. Also when it loads atlas data (regardless of the 3 formats) they are converted into PIXI TextureCache entries using UUIDs to avoid name clashes and to support index based atlases. --- examples/stage 2.php | 30 ++++++++++-- src/animation/Frame.js | 8 ++- src/animation/Parser.js | 106 ++++++++++++++++++++++++++++++---------- src/core/Game.js | 2 +- src/loader/Cache.js | 12 +++-- 5 files changed, 123 insertions(+), 35 deletions(-) diff --git a/examples/stage 2.php b/examples/stage 2.php index c1e8f46c..cb96d7c7 100644 --- a/examples/stage 2.php +++ b/examples/stage 2.php @@ -22,9 +22,33 @@ function create() { - var base = new PIXI.BaseTexture(game.cache.getImage('monsters')); - var texture = new PIXI.Texture(base); - bunny = new PIXI.Sprite(texture); + //var texture = PIXI.TextureCache['skully.png']; + + // PIXI.BaseTextureCache['monsters'] = new PIXI.BaseTexture(game.cache.getImage('monsters')); + + // every image loaded should go into the BaseTextureCache, unique by URL (or maybe key) + // var base = new PIXI.BaseTexture(game.cache.getImage('monsters')); + + // Every FRAME needs a PIXI.Texture, related to the base (the source image) and the frame data + // var texture = new PIXI.Texture(base, { x: 0, y: 0, width: 100, height: 100 }); + // var texture2 = new PIXI.Texture(base, { x: 0, y: 0, width: 100, height: 300 }); + + // PIXI.Sprite.fromFrame(key) pulls the texture from the TextureCache and returns a new Sprite made from it... + // var texture = PIXI.TextureCache[frameId]; + + + // console.log(PIXI.TextureCache); + + // console.log(game.cache.getFrameData('monsters')); + + var frameData = game.cache.getFrameData('monsters'); + + // bunny = new PIXI.Sprite(texture2); + + // bunny = PIXI.Sprite.fromFrame(frameData.getFrame(0).uuid); + bunny = PIXI.Sprite.fromFrame(frameData.getFrameByName('skully.png').uuid); + + // bunny = PIXI.Sprite.fromImage('monsters'); bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; diff --git a/src/animation/Frame.js b/src/animation/Frame.js index 6d992731..7bbed4e1 100644 --- a/src/animation/Frame.js +++ b/src/animation/Frame.js @@ -8,18 +8,24 @@ * @copyright 2013 Photon Storm Ltd. * @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License */ -Phaser.Animation.Frame = function (x, y, width, height, name) { +Phaser.Animation.Frame = function (x, y, width, height, name, uuid) { this.x = x; this.y = y; this.width = width; this.height = height; this.name = name; + this.uuid = uuid; }; Phaser.Animation.Frame.prototype = { + /** + * A link to the PIXI.TextureCache entry + */ + uuid: '', + /** * X position within the image to cut from. * @type {number} diff --git a/src/animation/Parser.js b/src/animation/Parser.js index 9c0645fd..c644e67f 100644 --- a/src/animation/Parser.js +++ b/src/animation/Parser.js @@ -69,7 +69,7 @@ Phaser.Animation.Parser = { * @param json {object} Json data you want to parse. * @return {FrameData} Generated FrameData object. */ - JSONData: function (game, json) { + JSONData: function (game, json, cacheKey) { // Malformed? if (!json['frames']) { @@ -84,25 +84,41 @@ Phaser.Animation.Parser = { var frames = json['frames']; var newFrame; - for (var i = 0; i < frames.length; i++) { + for (var i = 0; i < frames.length; i++) + { + var uuid = game.rnd.uuid(); newFrame = data.addFrame(new Phaser.Animation.Frame( frames[i].frame.x, frames[i].frame.y, frames[i].frame.w, frames[i].frame.h, - frames[i].filename + frames[i].filename, + uuid )); - 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 - ); + PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], { + x: frames[key].frame.x, + y: frames[key].frame.y, + width: frames[key].frame.w, + height: frames[key].frame.h + }); + + if (frames[i].trimmed) + { + 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 + ); + + PIXI.TextureCache[uuid].realSize = frames[key].spriteSourceSize; + PIXI.TextureCache[uuid].trim.x = 0; + } } return data; @@ -114,7 +130,7 @@ Phaser.Animation.Parser = { * @param json {object} Json data you want to parse. * @return {FrameData} Generated FrameData object. */ - JSONDataHash: function (game, json) { + JSONDataHash: function (game, json, cacheKey) { // Malformed? if (!json['frames']) { @@ -129,25 +145,41 @@ Phaser.Animation.Parser = { var frames = json['frames']; var newFrame; - for (var key in frames) { + for (var key in frames) + { + var uuid = game.rnd.uuid(); newFrame = data.addFrame(new Phaser.Animation.Frame( frames[key].frame.x, frames[key].frame.y, frames[key].frame.w, frames[key].frame.h, - key + key, + uuid )); - 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 - ); + PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], { + x: frames[key].frame.x, + y: frames[key].frame.y, + width: frames[key].frame.w, + height: frames[key].frame.h + }); + + if (frames[key].trimmed) + { + 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 + ); + + PIXI.TextureCache[uuid].realSize = frames[key].spriteSourceSize; + PIXI.TextureCache[uuid].trim.x = 0; + } } return data; @@ -159,7 +191,7 @@ Phaser.Animation.Parser = { * @param xml {object} XML data you want to parse. * @return {FrameData} Generated FrameData object. */ - XMLData: function (game, xml, format) { + XMLData: function (game, xml, cacheKey) { // Malformed? if (!xml.getElementsByTagName('TextureAtlas')) { @@ -171,7 +203,9 @@ Phaser.Animation.Parser = { var frames = xml.getElementsByTagName('SubTexture'); var newFrame; - for (var i = 0; i < frames.length; i++) { + for (var i = 0; i < frames.length; i++) + { + var uuid = game.rnd.uuid(); var frame = frames[i].attributes; @@ -180,9 +214,17 @@ Phaser.Animation.Parser = { frame.y.nodeValue, frame.width.nodeValue, frame.height.nodeValue, - frame.name.nodeValue + frame.name.nodeValue, + uuid )); + PIXI.TextureCache[uuid] = new PIXI.Texture(PIXI.BaseTextureCache[cacheKey], { + x: frame.x.nodeValue, + y: frame.y.nodeValue, + width: frame.width.nodeValue, + height: frame.height.nodeValue + }); + // Trimmed? if (frame.frameX.nodeValue != '-0' || frame.frameY.nodeValue != '-0') { newFrame.setTrim( @@ -194,6 +236,16 @@ Phaser.Animation.Parser = { frame.frameWidth.nodeValue, frame.frameHeight.nodeValue ); + + PIXI.TextureCache[uuid].realSize = { + x: Math.abs(frame.frameX.nodeValue), + y: Math.abs(frame.frameY.nodeValue), + w: frame.frameWidth.nodeValue, + h: frame.frameHeight.nodeValue + }; + + PIXI.TextureCache[uuid].trim.x = 0; + } } diff --git a/src/core/Game.js b/src/core/Game.js index 1e689bfa..18ac68b8 100644 --- a/src/core/Game.js +++ b/src/core/Game.js @@ -258,6 +258,7 @@ Phaser.Game.prototype = { this.device = new Phaser.Device(); this.math = Phaser.Math; + this.rnd = new Phaser.RandomDataGenerator([(Date.now() * Math.random()).toString()]); this.setUpRenderer(); @@ -270,7 +271,6 @@ Phaser.Game.prototype = { this.tweens = new Phaser.TweenManager(this); // this.input = new Phaser.InputManager(this); // this.sound = new Phaser.SoundManager(this); - this.rnd = new Phaser.RandomDataGenerator([(Date.now() * Math.random()).toString()]); // this.physics = new Phaser.Physics.PhysicsManager(this); this.plugins = new Phaser.PluginManager(this, this); this.net = new Phaser.Net(this); diff --git a/src/loader/Cache.js b/src/loader/Cache.js index 7209d08f..02dcaba2 100644 --- a/src/loader/Cache.js +++ b/src/loader/Cache.js @@ -71,6 +71,8 @@ Phaser.Cache.prototype = { this._images[key] = { url: url, data: data, spriteSheet: true, frameWidth: frameWidth, frameHeight: frameHeight }; this._images[key].frameData = Phaser.Animation.Parser.spriteSheet(this.game, key, frameWidth, frameHeight, frameMax); + PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data); + }, /** @@ -84,17 +86,19 @@ Phaser.Cache.prototype = { this._images[key] = { url: url, data: data, spriteSheet: true }; + PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data); + if (format == Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY) { - this._images[key].frameData = Phaser.Animation.Parser.JSONData(this.game, atlasData); + this._images[key].frameData = Phaser.Animation.Parser.JSONData(this.game, atlasData, key); } else if (format == Phaser.Loader.TEXTURE_ATLAS_JSON_HASH) { - this._images[key].frameData = Phaser.Animation.Parser.JSONDataHash(this.game, atlasData); + this._images[key].frameData = Phaser.Animation.Parser.JSONDataHash(this.game, atlasData, key); } else if (format == Phaser.Loader.TEXTURE_ATLAS_XML_STARLING) { - this._images[key].frameData = Phaser.Animation.Parser.XMLData(this.game, atlasData, format); + this._images[key].frameData = Phaser.Animation.Parser.XMLData(this.game, atlasData, key); } }, @@ -109,6 +113,8 @@ Phaser.Cache.prototype = { this._images[key] = { url: url, data: data, spriteSheet: false }; + PIXI.BaseTextureCache[key] = new PIXI.BaseTexture(data); + }, /**