EaselJS cache Text object
caching,rendering,easeljs,createjs
Caching is relative to the object, so if you move the object on the x/y, you don't have to update the cache. Additionally, when you adjust the alignment, the bounds will have an x and y property, which will be the offset of the top left from the registration point....
how do I time animations with createjs / easeljs?
javascript,eventlistener,easeljs,createjs
You could use TweenJS for this. Other than animation, it makes a swell timer, mainly due to the chaining you can do with it. var tween = createjs.Tween.get(this).wait(1); for (var i=0; i<10; i++) { tween.wait(2000).call(createObjectFunction, [i, otherArg], this); } tween.call(doneFunction, null, this); // Call something when done This will run...
Create a Sprite from raw RGBa data
html5,html5-canvas,easeljs,createjs,sprite-sheet
You just need to construct a SpriteSheet using your Image instances. See the docs for details: http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html SpriteSheet supports multiple source images, so each frame could be a separate image. Alternatively, if you want to combine a bunch of frames into a single, more efficient source image and produce a...
How to draw a dotted circle in easel js [closed]
javascript,canvas,html5-canvas,easeljs
Circle creation in dotted style var graphics = new createjs.Graphics(); CIRCLE_PAGE = new createjs.Container(); var shape = new createjs.Shape(graphics); var total_circles = 4; var diameter = 200; var angle = i * 2 * Math.PI/total_circles; var x = cx + Math.cos(angle) * diameter/2; var y = cy + Math.sin(angle) *...
Access class properties from CreateJS event listener function?
easeljs,createjs,event-listeners
You should add a scope in the function call e.g. like this: createjs.Tween.get(this.mc).to({scaleY:0, y:50},300).call(onTweenCompleted, [], this); ...
How to change line coordinates in Easel.js without clearing?
This is how EaselJS works. You have to redraw the Shape to change it. This has a minimal impact on performance because the shape has to be drawn again any time the Stage updates. The best way to do this is to have a redraw routine which clears and draws...
Spritesheet: additional parameter
json,easeljs,preloader,sprite-sheet
Got it to work as it was suggested by Lanny: Loaded it as a JSON file by preloader (not as a Spritesheet). That solved my problem as I was able to access my additional parameters. You just have to preload all linked images to the manifest as in that case...
TweenJS Absolute Position (to() method) Not Working
It's because you're setting the center point of the circle to 165 via the first parameter of your drawCircle call. Check the docs here: http://www.createjs.com/docs/easeljs/classes/Graphics.html#method_drawCircle You should do something like circle.graphics.drawCircle(0, 0, 25); circle.x = 165; circle.y = 250; ...
createjs struggling with hitTest()
I used the following work around to get the desired result. made sure everything is added to stage. got rid of containers. Use if(bomb.hitTest(dot.ball.x - bomb.x,dot.ball.y - bomb.y)) and got rid of localToLocal() function provided by createjs to find local coordinates of an object with respect to another object. Hope...
Uncaught TyperError, new to using prototypes
You're falling into quite a common error in setting up inheritance chains in JavaScript. Any time you see Foo.prototype = new Base(); ...that's likely to be (though not guaranteed to be) wrong, at least when using normal constructor functions (there are other patterns). Here's how you probably want to set...
Inherit two classes - Javascript
javascript,inheritance,multiple-inheritance,easeljs,createjs
Javascript, and by extension CreateJS, does not support multiple inheritance. You could: rethink your inheritance structure (ex. have Button extend All which extends Container) mix-in members from All into your Button class or instances: Button.prototype.doSomething = All.prototype.doSomething or myButton.doSomething = All.prototype.doSomething. inject members into a super class such as DisplayObject...
EaselJS - Stage mouseover
javascript,html5,canvas,easeljs,2d-games
I think you should use stagemousemove event instead of mouseover
Adding to a stage in EaselJS. One works, one doesn't. Why?
item will be index or property and not the value in the array. Access the value this way stageList[item] and the loop should look like this for (item in stageList){ stage.addChild(stageList[item]); } Read more about for...in loop...
Angular and CreateJS not finding the stage element
javascript,angularjs,easeljs,createjs
So turns out the problem is that the DOM is not completely loaded when an AngularJS controller is run The trick to running it once the DOM has finished loading is app.controller('taskController',function($scope,$location,$routeParams,dataFactory){ $timeout(function(){ visualInspectionHandler(); }); function visualInspectionHandler(){ var stage = new createjs.Stage("demoCanvas"); console.log(stage.getBounds()); } } ...
dynamically create five rectangle in different position of the canvas using easeljs
Math.Random() does generate a number between 0 and 1. So most of your numbers will be 200 for x and 20 for y because of the floor call. Sometimes it will be 201 for x and 21 for y, but maybe that's hard to see on the screen. I think...
CreateJS - d.mousedown.f error on hitAreas
hitArea has to be a DisplayObject - but you're trying to assign a Rectangle as a hitArea, which isn't a DisplayObject. If you use a Shape (or so) the code should work as expected: var shape = new createjs.Shape(); shape.graphics.beginFill("#000000").drawRect(0, 0, 100, 100); button.hitArea = shape; ...
Easeljs: When loading image on to easeljs bitmap class, does it use original image?
There is no down-sampling of the actual image, but the pixels that are laid down on the Canvas would be effectively down-sampled. To actually down-sample the source image, you could scale an EaselJS Bitmap, then retrieve the canvas as an image using stage.toDataUrl(). This returns an image that could be...
Combining EaselJS and TweenJS for Fade Over Time
javascript,html,animation,easeljs,tween
You need to ensure you update the stage during a tween, or whenever a property changes. Here is a quick fiddle using your code. I added a tick listener to the stage, which will redraw the stage constantly. http://jsfiddle.net/lannymcnie/FVw7E createjs.Ticker.addEventListener("tick", stage); Note that you may want to control when the...
Draw a dashed curved with createjs
javascript,canvas,easeljs,createjs
LineDash support would be a great addition to EaselJS. I recommend you post a feature request in GitHub (http://github.com/CreateJS/EaselJS/issues). I might request it myself, since it is a logical addition (I didn't even know it existed, hence my earlier sample you referenced). Here is a quick implementation. I created a...
EaselJS SpriteSheet isn't responding to gotoAndPlay
javascript,html5,canvas,easeljs,sprite-sheet
If you are calling gotoAndStop or gotoAndPlay in a tick (or similar) then it will constantly reset to the first frame. You have to ensure you only call these functions one time when the animation changes. A good way to set this up is to store the current animation, store...
Delaying preloadjs for fixed time for testing
javascript,easeljs,createjs,preloadjs
The best solution would be to use a network throttling tool to simulate low bandwidth. For example, you can do this in Chrome 38 devtools. If you really wanted to do it in code, it would be trivial to simply delay the start of the load. Something like: var queue...
CreateJS increase shadow offsetX with Tween.js
javascript,easeljs,createjs,tween.js
Just add an event listener. The event listener will be called whenever the tween's position changes. http://createjs.com/docs/tweenjs/classes/Tween.html
Generate Macular Grid in Javascript
javascript,automatic-ref-counting,circle,easeljs
Output for MacularGrid B: jsfiddle.net/jyoshna/tcgefwen/2 ...
EaselJS: Access the stage from a MouseEvent
If you function is scoped right, you can access the stage using a stored reference in the same scope. It is really important to scope listeners properly, for example using the on() method, which accepts a scope param: btn.on("click", this.handleEvent, this); If that isn't possible, you can always use the...
CreateJs Canvas's shape losses its co-ordinates on Windows Phone
html5,canvas,windows-phone,easeljs,createjs
I do alot of Research over this topic, and at the end i came to this point that this the BUG in IE11 . Hope Microsoft helps to solve this.
Showing uncaught type error in CreateJS. Not showing any output..my code is given below
As Lanny stated in the comments, this error occurs when you pass an invalid image (empty, not fully loaded, corrupt, 404, etc) into beginBitmapFill. Confirm that your image is loading properly. I just pushed an update to EaselJS NEXT that bypasses this RTE, and ignores invalid bitmap fills....
Createjs create timer clock for game
javascript,html5,cordova,easeljs,createjs
Just track time in JS, and output it to a BitmapText element. var startTime = (new Date()).getTime(); // in your update loop: currentTime = (new Date()).getTime(); var time = Math.floor((currentTime-startTime)/1000); myBitmapText.text = time + "s"; ...
Adding Children to Container() EaselJS
javascript,containers,easeljs,uncaught-typeerror
You are attempting to call addChild on your container array, instead of on a Container instance. I'm fairly certain this is what you intended: container[i].addChild(img[i]); This is why naming is important. Consider using containers or containerList instead of container as your array name to clarify that it is a collection....
Size limitation when drawing to CanvasRenderingContext2D
It appears that Context2D uses lower precision numbers for transforms. I haven't confirmed the precision yet, but my guess is that it is using floats instead of doubles. As such, with higher values, the transform method (and other similar C2D methods) that EaselJS relies on loses precision, similar to what...
removeChild() not working using easeljs
Good news for you I have found the solution for you Try this this.stage.removeChild(event.target.parent) This is because event.target is shape and its parent is tile and basically you want to remove the tile so this is working For your future reference I have found it from this documentation http://www.createjs.com/docs/easeljs/classes/Stage.html...
Touch events not working EaselJS
javascript,jquery,ios,html5,easeljs
I've found the problem in my code. It wasn't working due to the event.which == 1 condition inside the "stagemousedown" event handler. This occurs because, at least on iOS, the event.which is equal to 0. Here's my final stagemousedown event handler: stage.on("stagemousedown", function (e) { if (event.which < 2) {...
CreateJS - Measuring FPS in RAF (requestAnimationFrame) mode
You should be able to integrate using the instructions on the stats.js GitHub page Essentially: c.Ticker.on("tick", tick, this); function tick(evt) { stats.begin(); // do stuff, like stage.update(); stats.end(); } Alternatively, you could look at Ticker.getMeasuredFPS and Ticker.getMeasuredTickTime....
bitmaplist[i] is undefined
Try this object: bitmaplist[i].on('click',function vanish(event){ alert(this.name); }); Or using target property of Event object: bitmaplist[i].on('click',function vanish(event){ alert(event.target.name); }); Read more here EventDispatcher...
EaselJS - How is mouse movement accessed?
Your code sample uses evt.stageX instead of event.stageX. All MouseEvents will have a stageX and stageY, which is the position the mouse was in when it fired the event. I think your code came from this tutorial which uses evt exlusively. Additionally, MouseEvents have a rawX and rawY on pressMove...
Create a Sprite from image array
Take a look at the SpriteSheetBuilder: http://createjs.com/Docs/EaselJS/classes/SpriteSheetBuilder.html There are also some examples here: https://github.com/CreateJS/EaselJS/tree/master/examples Keep in mind that you have to include SpriteSheetBuilder separately as it is not part of the "core"-library (https://github.com/CreateJS/EaselJS/issues/593). Edit: Example of how to use the normal SpriteSheet with image-instances... Just pass them to the data-object...
What is the registration point in EaselJS?
javascript,html5,canvas,2d,easeljs
The example you use is a Shape, which has a separate coordinate system that you draw points on. The regX / regY properties are on DisplayObject, so they apply to all objects on the stage. The same could be said for a Container, where you can draw your elements at...
TweenJS tweening the frames of a Sprite
javascript,html5,sprite,easeljs,tween
The currentFrame property is read-only, though it appears that this isn't being surfaced by the EaselJS docs (it looks like YUIDocs may have broken the @readonly tag). It will likely remain read-only for two reasons: We avoid using getter/setters for complex behaviours, which _goto is. It would have ambiguous outcomes...
Easeljs snap to grid
javascript,canvas,drag-and-drop,easeljs,createjs
This is pretty straightforward: Loop over each point, and get the distance to the mouse If the item is closer than the others, set the object to its position Otherwise snap to the mouse instead Here is a quick sample with the latest EaselJS: http://jsfiddle.net/lannymcnie/qk1gs3xt/ The distance check looks like...
make a simple transition in easelsjs
I don't know if you want to change the stage opacity or the shape opacity, but if you want your entire canvas to have less opacity, you can simply use JavaScript + CSS transitions to do it. No need for EaselJS in this case. But if you want to create...
dragging effect using easeljs
You have set the x and y of your rectangle to be 300 and 200 respectively, so if you set those to 0, then the rectangle will start in the right place and follow the mouse as expected. shape.graphics.beginFill('red').drawRect(0,0,40,40); ...
Create EaselJS sprite animation with SpriteStage (WebGL)
javascript,animation,webgl,sprite,easeljs
Here is an update fiddle. http://jsfiddle.net/6sygocvb/1/ Note that all elements added to a SpriteContainer must have the same SpriteSheet. The 2 bits I added are: 1) Change to SpriteStage. I also moved the canvas element to the HTML block of the fiddle: var stage = new createjs.SpriteStage("canvas"); 2) Create a...
How to get real FPS with createjs
android,mobile,easeljs,createjs
getMeasuredFPS() is well tested, and should be accurate. That said, there's always a chance your mobile browser is doing something tricky (running the code every tick, but not rendering). There's also a chance your code may not be updating properly. Either way, it's worth looking at a couple of alternatives....
EaselJS not getting linked
javascript,html5,html5-canvas,easeljs
All classes in EaselJS are contained in "createjs" namespace, thus, to use Stage or Text classes, just like you are trying to do, you must call createjs first: stage = new createjs.Stage(canvas); text = new createjs.Text("WHAAAAAAAAA","36px Arial","#666"); Result: http://jsfiddle.net/BAv8h/...
easeljs click event not firing when using from typescript
If you need to access this inside the event change to: circle.addEventListener("click", (evt: createjs.MouseEvent) => this.handleMouseEvent(evt)); if you don't need this in the event you can also change to: circle.addEventListener("click", this.handleMouseEvent); The reason is that you are registering a lambda expression to handle the event, and the only thing that...
How to get a random color in my CreateJS shape?
javascript,random,easeljs,createjs
beginFill accepts any color, also hex, so you just have to generate a random hex color var stage = new createjs.Stage("demoCanvas"); var circle = new createjs.Shape(); var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16); circle.graphics.beginFill(color).drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circle); stage.update(); ...
Combining Three.js and Easel.js
I don't know what the current state of play is with three.js, but I've semi-successfully combined them using 3 overlayed divs in the past: bottom canvas, webgl/three.js, top canvas. Then just draw and update all 3 canvases appropriately. A bit messy but it sort-of works!
EaselJS keyboard input issue
javascript,variables,scope,easeljs
Why it's not working The problem is that the code is not executing in the order you think it is. As Felix Kling pointed out in your other question, the code inside your handleKeyDown function does not execute immediately; it executes when a key is pressed. Here is the actual...
Can a easeljs hitarea be set using image data?
Yes, this should work. The hitArea property supports the use of any display object. Without seeing more code, it's difficult to guess what you're doing wrong, so here is an example of it working correctly with Sprite instances (which is likely a more efficient approach than extracting frames into Bitmap...