From 56b3f0fb073d19351227031f7c938395961310b1 Mon Sep 17 00:00:00 2001 From: Kevin Simper Date: Wed, 15 Jan 2014 12:38:16 +0100 Subject: [PATCH] Move sprite function to sprite.js --- src/extensions.js | 138 +-------------------------------------------- src/sprite.js | 139 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+), 137 deletions(-) diff --git a/src/extensions.js b/src/extensions.js index 372b8de7..aabeece1 100644 --- a/src/extensions.js +++ b/src/extensions.js @@ -134,144 +134,8 @@ var Crafty = require('./core.js'), support.devicemotion = (typeof window.DeviceMotionEvent !== "undefined"); })(); -Crafty.extend({ - - /**@ - * #Crafty.sprite - * @category Graphics - * @sign public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY[, Boolean paddingAroundBorder]]]) - * @param tile - Tile size of the sprite map, defaults to 1 - * @param tileh - Height of the tile; if provided, tile is interpreted as the width - * @param url - URL of the sprite image - * @param map - Object where the key is what becomes a new component and the value points to a position on the sprite map - * @param paddingX - Horizontal space in between tiles. Defaults to 0. - * @param paddingY - Vertical space in between tiles. Defaults to paddingX. - * @param paddingAroundBorder - If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false. - * Generates components based on positions in a sprite image to be applied to entities. - * - * Accepts a tile size, URL and map for the name of the sprite and its position. - * - * The position must be an array containing the position of the sprite where index `0` - * is the `x` position, `1` is the `y` position and optionally `2` is the width and `3` - * is the height. If the sprite map has padding, pass the values for the `x` padding - * or `y` padding. If they are the same, just add one value. - * - * If the sprite image has no consistent tile size, `1` or no argument need be - * passed for tile size. - * - * Entities that add the generated components are also given the `2D` component, and - * a component called `Sprite`. - * - * @example - * ~~~ - * Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]}); - * var flower_entity = Crafty.e("2D, DOM, flower"); - * ~~~ - * The first line creates a component called `flower` associated with the sub-image of - * spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels. - * The second line creates an entity with that image. (Note: The `2D` is not really - * necessary here, because adding the `flower` component automatically also adds the - * `2D` component.) - * ~~~ - * Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]}); - * ~~~ - * In this case, the `flower` component is pixels 0 <= x < 50, 0 <= y < 50, and the - * `grass` component is pixels 0 <= x < 150, 50 <= y < 100. (The `3` means grass has a - * width of 3 tiles, i.e. 150 pixels.) - * ~~~ - * Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10); - * ~~~ - * In this case, each tile is 50x100, and there is a spacing of 10 pixels between - * consecutive tiles. So `flower` is pixels 0 <= x < 50, 0 <= y < 100, and `grass` is - * pixels 0 <= x < 50, 110 <= y < 210. - * - * @see Sprite - */ - sprite: function (tile, tileh, url, map, paddingX, paddingY, paddingAroundBorder) { - var spriteName, temp, x, y, w, h, img; - - //if no tile value, default to 1. - //(if the first passed argument is a string, it must be the url.) - if (typeof tile === "string") { - paddingY = paddingX; - paddingX = map; - map = tileh; - url = tile; - tile = 1; - tileh = 1; - } - - if (typeof tileh == "string") { - paddingY = paddingX; - paddingX = map; - map = url; - url = tileh; - tileh = tile; - } - - //if no paddingY, use paddingX - if (!paddingY && paddingX) paddingY = paddingX; - paddingX = parseInt(paddingX || 0, 10); //just incase - paddingY = parseInt(paddingY || 0, 10); - - var markSpritesReady = function() { - this.ready = true; - this.trigger("Invalidate"); - }; - - img = Crafty.asset(url); - if (!img) { - img = new Image(); - img.src = url; - Crafty.asset(url, img); - img.onload = function () { - //all components with this img are now ready - for (var spriteName in map) { - Crafty(spriteName).each(markSpritesReady); - } - }; - } - - var sharedSpriteInit = function() { - this.requires("2D, Sprite"); - this.__trim = [0, 0, 0, 0]; - this.__image = url; - this.__coord = [this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]]; - this.__tile = tile; - this.__tileh = tileh; - this.__padding = [paddingX, paddingY]; - this.__padBorder = paddingAroundBorder; - this.sprite(this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]); - - this.img = img; - //draw now - if (this.img.complete && this.img.width > 0) { - this.ready = true; - this.trigger("Invalidate"); - } - - //set the width and height to the sprite size - this.w = this.__coord[2]; - this.h = this.__coord[3]; - }; - - for (spriteName in map) { - if (!map.hasOwnProperty(spriteName)) continue; - - temp = map[spriteName]; - - //generates sprite components for each tile in the map - Crafty.c(spriteName, { - ready: false, - __coord: [temp[0], temp[1], temp[2] || 1, temp[3] || 1], - - init: sharedSpriteInit - }); - } - - return this; - }, +Crafty.extend({ _events: {}, /**@ diff --git a/src/sprite.js b/src/sprite.js index af86bf72..dba19be8 100644 --- a/src/sprite.js +++ b/src/sprite.js @@ -1,6 +1,145 @@ var Crafty = require('./core.js'), document = window.document; +Crafty.extend({ + + /**@ + * #Crafty.sprite + * @category Graphics + * @sign public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY[, Boolean paddingAroundBorder]]]) + * @param tile - Tile size of the sprite map, defaults to 1 + * @param tileh - Height of the tile; if provided, tile is interpreted as the width + * @param url - URL of the sprite image + * @param map - Object where the key is what becomes a new component and the value points to a position on the sprite map + * @param paddingX - Horizontal space in between tiles. Defaults to 0. + * @param paddingY - Vertical space in between tiles. Defaults to paddingX. + * @param paddingAroundBorder - If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false. + * Generates components based on positions in a sprite image to be applied to entities. + * + * Accepts a tile size, URL and map for the name of the sprite and its position. + * + * The position must be an array containing the position of the sprite where index `0` + * is the `x` position, `1` is the `y` position and optionally `2` is the width and `3` + * is the height. If the sprite map has padding, pass the values for the `x` padding + * or `y` padding. If they are the same, just add one value. + * + * If the sprite image has no consistent tile size, `1` or no argument need be + * passed for tile size. + * + * Entities that add the generated components are also given the `2D` component, and + * a component called `Sprite`. + * + * @example + * ~~~ + * Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]}); + * var flower_entity = Crafty.e("2D, DOM, flower"); + * ~~~ + * The first line creates a component called `flower` associated with the sub-image of + * spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels. + * The second line creates an entity with that image. (Note: The `2D` is not really + * necessary here, because adding the `flower` component automatically also adds the + * `2D` component.) + * ~~~ + * Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]}); + * ~~~ + * In this case, the `flower` component is pixels 0 <= x < 50, 0 <= y < 50, and the + * `grass` component is pixels 0 <= x < 150, 50 <= y < 100. (The `3` means grass has a + * width of 3 tiles, i.e. 150 pixels.) + * ~~~ + * Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10); + * ~~~ + * In this case, each tile is 50x100, and there is a spacing of 10 pixels between + * consecutive tiles. So `flower` is pixels 0 <= x < 50, 0 <= y < 100, and `grass` is + * pixels 0 <= x < 50, 110 <= y < 210. + * + * @see Sprite + */ + sprite: function (tile, tileh, url, map, paddingX, paddingY, paddingAroundBorder) { + var spriteName, temp, x, y, w, h, img; + + //if no tile value, default to 1. + //(if the first passed argument is a string, it must be the url.) + if (typeof tile === "string") { + paddingY = paddingX; + paddingX = map; + map = tileh; + url = tile; + tile = 1; + tileh = 1; + } + + if (typeof tileh == "string") { + paddingY = paddingX; + paddingX = map; + map = url; + url = tileh; + tileh = tile; + } + + //if no paddingY, use paddingX + if (!paddingY && paddingX) paddingY = paddingX; + paddingX = parseInt(paddingX || 0, 10); //just incase + paddingY = parseInt(paddingY || 0, 10); + + var markSpritesReady = function() { + this.ready = true; + this.trigger("Invalidate"); + }; + + img = Crafty.asset(url); + if (!img) { + img = new Image(); + img.src = url; + Crafty.asset(url, img); + img.onload = function () { + //all components with this img are now ready + for (var spriteName in map) { + Crafty(spriteName).each(markSpritesReady); + } + }; + } + + var sharedSpriteInit = function() { + this.requires("2D, Sprite"); + this.__trim = [0, 0, 0, 0]; + this.__image = url; + this.__coord = [this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]]; + this.__tile = tile; + this.__tileh = tileh; + this.__padding = [paddingX, paddingY]; + this.__padBorder = paddingAroundBorder; + this.sprite(this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]); + + this.img = img; + //draw now + if (this.img.complete && this.img.width > 0) { + this.ready = true; + this.trigger("Invalidate"); + } + + //set the width and height to the sprite size + this.w = this.__coord[2]; + this.h = this.__coord[3]; + }; + + for (spriteName in map) { + if (!map.hasOwnProperty(spriteName)) continue; + + temp = map[spriteName]; + + //generates sprite components for each tile in the map + Crafty.c(spriteName, { + ready: false, + __coord: [temp[0], temp[1], temp[2] || 1, temp[3] || 1], + + init: sharedSpriteInit + }); + } + + return this; + } +}); + /**@ * #Sprite * @category Graphics