Permalink
Browse files

Support loading sprites using a URL

  • Loading branch information...
1 parent 4bc466e commit 731ed3bc13f75afa160d8ac3c65ef4f0621e1b81 @ryanwilliams committed Jun 4, 2012
View
@@ -13,11 +13,16 @@ var util = require('util'),
* @opt {Texture2D|HTMLImageElement} [data] Image data to read from
*/
function Texture2D (opts) {
- var file = opts.file,
- data = opts.data,
- texture = opts.texture
+ var file = opts.file
+ , url = opts.url
+ , data = opts.data
+ , texture = opts.texture
- if (file) {
+ if (url) {
+ this.name = url
+ data = new Image()
+ data.src = url
+ } else if (file) {
this.name = file
data = resource(file)
} else if (texture) {
@@ -28,8 +33,11 @@ function Texture2D (opts) {
this.size = {width: 0, height: 0}
if (data instanceof RemoteResource) {
- events.addListenerOnce(data, 'load', this.dataDidLoad.bind(this))
+ events.addListenerOnce(data, 'load', this.dataDidLoad.bind(this, data))
this.imgElement = data.load()
+ } else if (url) {
+ this.imgElement = data
+ this.imgElement.onload = this.dataDidLoad.bind(this, data)
} else {
this.imgElement = data
this.dataDidLoad(data)
View
@@ -1,6 +1,7 @@
'use strict'
var util = require('util'),
+ events = require('events'),
Texture2D = require('./Texture2D').Texture2D
@@ -17,21 +18,26 @@ var util = require('util'),
*
* @memberOf cocos
*
- * @opt {String} file The file path of the image to use as a texture
+ * @opt {String} [url] Remote URL of the image to use as a texture
+ * @opt {String} [file] Local file path of the image to use as a texture
* @opt {Texture2D|HTMLImageElement} [data] Image data to read from
* @opt {CanvasElement} [canvas] A canvas to use as a texture
*/
function TextureAtlas (opts) {
- var file = opts.file,
- data = opts.data,
- texture = opts.texture,
- canvas = opts.canvas
+ var file = opts.file
+ , url = opts.url
+ , data = opts.data
+ , texture = opts.texture
+ , canvas = opts.canvas
if (canvas) {
// If we've been given a canvas element then we'll use that for our image
this.imgElement = canvas
} else {
- texture = new Texture2D({texture: texture, file: file, data: data})
+ texture = new Texture2D({ url: url, texture: texture, file: file, data: data })
+ events.addListenerOnce(texture, 'load', function () {
+ events.trigger(this, 'load')
+ }.bind(this))
this.texture = texture
this.imgElement = texture.imgElement
}
@@ -97,6 +103,7 @@ TextureAtlas.inherit(Object, /** @lends cocos.TextureAtlas# */ {
ctx.scale(scaleX, scaleY)
+
var img = this.imgElement
ctx.drawImage(img,
sx, sy, // Draw slice from x,y
View
@@ -1,7 +1,7 @@
'use strict'
var util = require('util')
- , evt = require('events')
+ , events = require('events')
, geo = require('geometry')
, ccp = geo.ccp
@@ -26,6 +26,7 @@ function Sprite (opts) {
opts = opts || {}
var file = opts.file
+ , url = opts.url
, textureAtlas = opts.textureAtlas
, texture = opts.texture
, frame = opts.frame
@@ -47,11 +48,11 @@ function Sprite (opts) {
rect = frame.rect
}
- evt.addListener(this, 'dirtytransform', this._updateQuad.bind(this))
- evt.addPropertyListener(this, 'textureAtlas', 'change', this._updateTextureQuad.bind(this))
+ events.addListener(this, 'dirtytransform', this._updateQuad.bind(this))
+ events.addPropertyListener(this, 'textureAtlas', 'change', this._updateTextureQuad.bind(this))
- if (file || texture) {
- textureAtlas = new TextureAtlas({file: file, texture: texture})
+ if (url || file || texture) {
+ textureAtlas = new TextureAtlas({ url: url, file: file, texture: texture })
} else if (spritesheet) {
textureAtlas = spritesheet.textureAtlas
this.useSpriteSheet = true
@@ -60,7 +61,16 @@ function Sprite (opts) {
}
if (!rect && textureAtlas) {
- rect = new geo.Rect(0, 0, textureAtlas.texture.size.width, textureAtlas.texture.size.height)
+ if (!url) {
+ rect = new geo.Rect(0, 0, textureAtlas.texture.size.width, textureAtlas.texture.size.height)
+ } else {
+ // Loading remote image, wait for it to finish before setting rect
+ events.addListener(textureAtlas, 'load', function () {
+ if (!this.rect) {
+ this.rect = new geo.Rect(0, 0, textureAtlas.texture.size.width, textureAtlas.texture.size.height)
+ }
+ }.bind(this))
+ }
}
if (rect) {
@@ -95,7 +105,18 @@ Sprite.inherit(Node, /** @lends cocos.nodes.Sprite# */{
* @type geometry.Rect
*/
, get rect () { return this._rect }
- , set rect (x) { this._rect = x; evt.trigger(this, 'dirtytransform', {target: this, property: 'rect'}) }
+ , set rect (x) {
+ this._rect = x;
+ if (!this.quad) {
+ this.quad = { drawRect: {origin: ccp(0, 0), size: this._rect.size}
+ , textureRect: this._rect
+ }
+ }
+ if (!this.contentSize || (this.contentSize.width == 0 && this.contentSize.height == 0)) {
+ this.contentSize = this._rect.size
+ }
+ events.trigger(this, 'dirtytransform', {target: this, property: 'rect'})
+ }
, _rect: null
/**
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,66 @@
+'use strict'
+
+//{{{ Imports
+var util = require('util')
+ , cocos = require('cocos2d')
+ , geo = require('geometry')
+ , nodes = cocos.nodes
+ , actions = cocos.actions
+
+var TestCase = require('../TestCase')
+ , Director = cocos.Director
+ , Sprite = nodes.Sprite
+//}}} Imports
+
+/**
+ * @class
+ *
+ * Example Sprite loading from remote URL
+ */
+function SpriteURL () {
+ if (Director.sharedDirector.isTouchScreen) {
+ this.subtitle = 'Tap screen'
+ }
+
+ SpriteURL.superclass.constructor.call(this)
+
+ if (Director.sharedDirector.isTouchScreen) {
+ this.isTouchEnabled = true
+ } else {
+ this.isMouseEnabled = true
+ }
+
+ var s = Director.sharedDirector.winSize
+ this.addNewSprite(new geo.Point(s.width / 2, s.height / 2))
+}
+
+SpriteURL.inherit(TestCase, /** @lends SpriteURL# */ {
+ title: 'Sprite URL'
+
+ , addNewSprite: function (point) {
+ var sprite = new Sprite({ url: '/public/grossini.png' })
+
+ sprite.position = point
+
+ this.addChild({ child: sprite, z: 0 })
+
+ }
+
+ , mouseUp: function (event) {
+ var location = Director.sharedDirector.convertEventToCanvas(event)
+ this.addNewSprite(location)
+
+ return true
+ }
+
+ , touchesEnded: function (event) {
+ var location = event.touches[0].locationInCanvas
+ this.addNewSprite(location)
+
+ return true
+ }
+})
+
+module.exports = SpriteURL
+
+// vim:et:st=4:fdm=marker:fdl=0:fdc=1
@@ -11,6 +11,7 @@ var testList = [ 'Sprite1'
, 'SpriteBatchNode1'
, 'SpriteAnchorPoint'
, 'SpriteZOrder'
+ , 'SpriteURL'
, 'SpriteAnimationFlip'
, 'SpriteColorOpacity'
, 'SpriteAnimationCache'

0 comments on commit 731ed3b

Please sign in to comment.