Skip to content

Fixed bug and added cache for SpriteSheetBuilder #942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+60 −54
Open

Fixed bug and added cache for SpriteSheetBuilder #942

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f0f4d4
fix unexisted funtion
Mar 15, 2018
c458287
added to-image caching for SpriteSheetBuilder
Mar 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions src/easeljs/display/DisplayObject.js
View file
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
* Visit http://createjs.com/ for documentation, updates and examples.
*
* Copyright (c) 2010 gskinner.com, inc.
*
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
@@ -12,10 +12,10 @@
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
@@ -374,7 +374,7 @@ this.createjs = this.createjs||{};
* the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested
* using only its own `alpha` value regardless of the alpha value on the target display object, or the target's
* ancestors (parents).
*
*
* If set on a {{#crossLink "Container"}}{{/crossLink}}, children of the Container will not receive mouse events.
* This is similar to setting {{#crossLink "mouseChildren"}}{{/crossLink}} to false.
*
@@ -537,7 +537,7 @@ this.createjs = this.createjs||{};

// events:
/**
* Dispatched when the user presses their left mouse button over the display object. See the
* Dispatched when the user presses their left mouse button over the display object. See the
* {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.
* @event mousedown
* @since 0.6.0
@@ -558,15 +558,15 @@ this.createjs = this.createjs||{};
*/

/**
* Dispatched when the user's mouse enters this display object. This event must be enabled using
* Dispatched when the user's mouse enters this display object. This event must be enabled using
* {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollover:event"}}{{/crossLink}}.
* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.
* @event mouseover
* @since 0.6.0
*/

/**
* Dispatched when the user's mouse leaves this display object. This event must be enabled using
* Dispatched when the user's mouse leaves this display object. This event must be enabled using
* {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}. See also {{#crossLink "DisplayObject/rollout:event"}}{{/crossLink}}.
* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.
* @event mouseout
@@ -577,7 +577,7 @@ this.createjs = this.createjs||{};
* This event is similar to {{#crossLink "DisplayObject/mouseover:event"}}{{/crossLink}}, with the following
* differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an
* aggregate of their content.
*
*
* For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over
* shapeA and then directly on to shapeB. With a listener for {{#crossLink "mouseover:event"}}{{/crossLink}} on
* myContainer, two events would be received, each targeting a child element:<OL>
@@ -586,7 +586,7 @@ this.createjs = this.createjs||{};
* </OL>
* However, with a listener for "rollover" instead, only a single event is received when the mouse first enters
* the aggregate myContainer content (target=myContainer).
*
*
* This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}.
* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.
* @event rollover
@@ -597,7 +597,7 @@ this.createjs = this.createjs||{};
* This event is similar to {{#crossLink "DisplayObject/mouseout:event"}}{{/crossLink}}, with the following
* differences: it does not bubble, and it considers {{#crossLink "Container"}}{{/crossLink}} instances as an
* aggregate of their content.
*
*
* For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over
* shapeA, then directly on to shapeB, then off both. With a listener for {{#crossLink "mouseout:event"}}{{/crossLink}}
* on myContainer, two events would be received, each targeting a child element:<OL>
@@ -606,7 +606,7 @@ this.createjs = this.createjs||{};
* </OL>
* However, with a listener for "rollout" instead, only a single event is received when the mouse leaves
* the aggregate myContainer content (target=myContainer).
*
*
* This event must be enabled using {{#crossLink "Stage/enableMouseOver"}}{{/crossLink}}.
* See the {{#crossLink "MouseEvent"}}{{/crossLink}} class for a listing of event properties.
* @event rollout
@@ -765,18 +765,18 @@ this.createjs = this.createjs||{};
**/
p.updateContext = function(ctx) {
var o=this, mask=o.mask, mtx= o._props.matrix;

if (mask && mask.graphics && !mask.graphics.isEmpty()) {
mask.getMatrix(mtx);
ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);

mask.graphics.drawAsPath(ctx);
ctx.clip();

mtx.invert();
ctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);
}

this.getMatrix(mtx);
var tx = mtx.tx, ty = mtx.ty;
if (DisplayObject._snapToPixelEnabled && o.snapToPixel) {
@@ -807,7 +807,7 @@ this.createjs = this.createjs||{};
* Note that filters need to be defined <em>before</em> the cache is applied or you will have to call updateCache after
* application. Check out the {{#crossLink "Filter"}}{{/crossLink}} class for more information. Some filters
* (ex. BlurFilter) may not work as expected in conjunction with the scale param.
*
*
* Usually, the resulting cacheCanvas will have the dimensions width * scale, height * scale, however some filters (ex. BlurFilter)
* will add padding to the canvas dimensions.
*
@@ -879,7 +879,7 @@ this.createjs = this.createjs||{};
* @return {String} The image data url for the cache.
**/
p.getCacheDataURL = function() {
return this.bitmapCache?this.bitmapCache.getDataURL():null;
return this.bitmapCache?this.bitmapCache.getCacheDataURL():null;
};

/**
@@ -899,7 +899,7 @@ this.createjs = this.createjs||{};
* @method localToGlobal
* @param {Number} x The x position in the source display object to transform.
* @param {Number} y The y position in the source display object to transform.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @return {Point} A Point instance with x and y properties correlating to the transformed coordinates
* on the stage.
**/
@@ -924,7 +924,7 @@ this.createjs = this.createjs||{};
* @method globalToLocal
* @param {Number} x The x position on the stage to transform.
* @param {Number} y The y position on the stage to transform.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @return {Point} A Point instance with x and y properties correlating to the transformed position in the
* display object's coordinate space.
**/
@@ -945,7 +945,7 @@ this.createjs = this.createjs||{};
* @param {Number} x The x position in the source display object to transform.
* @param {Number} y The y position on the source display object to transform.
* @param {DisplayObject} target The target display object to which the coordinates will be transformed.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned.
* @return {Point} Returns a Point instance with x and y properties correlating to the transformed position
* in the target's coordinate space.
**/
@@ -1028,10 +1028,10 @@ this.createjs = this.createjs||{};
**/
p.getConcatenatedDisplayProps = function(props) {
props = props ? props.identity() : new createjs.DisplayProps();
var o = this, mtx = o.getMatrix(props.matrix);
var o = this, mtx = o.getMatrix(props.matrix);
do {
props.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);

// we do this to avoid problems with the matrix being used for both operations when o._props.matrix is passed in as the props param.
// this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool.
if (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }
@@ -1089,11 +1089,11 @@ this.createjs = this.createjs||{};
/**
* Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation).
* Objects that have been cached will return the bounds of the cache.
*
* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use
*
* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use
* {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container
* bounds.
*
*
* <table>
* <tr><td><b>All</b></td><td>
* All display objects support setting bounds manually using setBounds(). Likewise, display objects that
@@ -1122,22 +1122,22 @@ this.createjs = this.createjs||{};
* to (x=0,y=0).
* </td></tr>
* </table>
*
*
* Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and
* are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the
* bounds explicitly:
*
*
* var bounds = obj.getBounds();
* obj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);
* // getBounds will now use the set values, instead of recalculating
*
*
* To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its
* values if you need to retain it.
*
*
* var myBounds = obj.getBounds().clone();
* // OR:
* myRect.copy(obj.getBounds());
*
*
* @method getBounds
* @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this
* object.
@@ -1154,14 +1154,14 @@ this.createjs = this.createjs||{};
/**
* Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied).
* Objects that have been cached will return the transformed bounds of the cache.
*
* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use
*
* Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use
* {{#crossLink "DisplayObject/setBounds"}}{{/crossLink}} so that they are included when calculating Container
* bounds.
*
*
* To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its
* values if you need to retain it.
*
*
* Container instances calculate aggregate bounds for all children that return bounds via getBounds.
* @method getTransformedBounds
* @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.
@@ -1174,7 +1174,7 @@ this.createjs = this.createjs||{};
* Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape &
* Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always
* override calculated bounds.
*
*
* The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance
* with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).
* @method setBounds
@@ -1327,14 +1327,14 @@ this.createjs = this.createjs||{};
if (!bounds) { return bounds; }
var x = bounds.x, y = bounds.y, width = bounds.width, height = bounds.height, mtx = this._props.matrix;
mtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);

if (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this.
if (matrix) { mtx.prependMatrix(matrix); }

var x_a = width*mtx.a, x_b = width*mtx.b;
var y_c = height*mtx.c, y_d = height*mtx.d;
var tx = mtx.tx, ty = mtx.ty;

var minX = tx, maxX = tx, minY = ty, maxY = ty;

if ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }
38 changes: 22 additions & 16 deletions src/easeljs/utils/SpriteSheetBuilder.js
View file
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ this.createjs = this.createjs||{};
**/
function SpriteSheetBuilder(framerate) {
this.EventDispatcher_constructor();

// public properties:
/**
* The maximum width for the images (not individual frames) in the generated SpriteSheet. It is recommended to
@@ -68,7 +68,7 @@ this.createjs = this.createjs||{};
* @default 2048
*/
this.maxWidth = 2048;

/**
* The maximum height for the images (not individual frames) in the generated SpriteSheet. It is recommended to
* use a power of 2 for this value (ex. 1024, 2048, 4096). If the frames cannot all fit within the max
@@ -78,14 +78,14 @@ this.createjs = this.createjs||{};
* @default 2048
**/
this.maxHeight = 2048;

/**
* The SpriteSheet that was generated. This will be null before a build is completed successfully.
* @property spriteSheet
* @type SpriteSheet
**/
this.spriteSheet = null;

/**
* The scale to apply when drawing all frames to the SpriteSheet. This is multiplied against any scale specified
* in the addFrame call. This can be used, for example, to generate a SpriteSheet at run time that is tailored
@@ -95,15 +95,15 @@ this.createjs = this.createjs||{};
* @default 1
**/
this.scale = 1;

/**
* The padding to use between frames. This is helpful to preserve antialiasing on drawn vector content.
* @property padding
* @type Number
* @default 1
**/
this.padding = 1;

/**
* A number from 0.01 to 0.99 that indicates what percentage of time the builder can use. This can be
* thought of as the number of seconds per second the builder will use. For example, with a timeSlice value of 0.3,
@@ -114,7 +114,7 @@ this.createjs = this.createjs||{};
* @default 0.3
**/
this.timeSlice = 0.3;

/**
* A value between 0 and 1 that indicates the progress of a build, or -1 if a build has not
* been initiated.
@@ -134,51 +134,51 @@ this.createjs = this.createjs||{};
* @default 0
*/
this.framerate = framerate || 0;


// private properties:
/**
* @property _frames
* @protected
* @type Array
**/
this._frames = [];

/**
* @property _animations
* @protected
* @type Array
**/
this._animations = {};

/**
* @property _data
* @protected
* @type Array
**/
this._data = null;

/**
* @property _nextFrameIndex
* @protected
* @type Number
**/
this._nextFrameIndex = 0;

/**
* @property _index
* @protected
* @type Number
**/
this._index = 0;

/**
* @property _timerID
* @protected
* @type Number
**/
this._timerID = null;

/**
* @property _scale
* @protected
@@ -412,7 +412,7 @@ this.createjs = this.createjs||{};
}
}
};

/**
* @method _setupMovieClipFrame
* @protected
@@ -532,6 +532,12 @@ this.createjs = this.createjs||{};
ctx.scale(sc,sc);
frame.source.draw(ctx); // display object will draw itself.
ctx.restore();

//now replace canvas with simple image. Frames from it draws much faster
var img = new Image();
img.src = canvas.toDataURL();
this._data.images[frame.img] = img;

return (++this._index) < this._frames.length;
};