EaselJS
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
Is there any way to display an infinite canvas with EaselJS? I have read the ways to do it with Javascript or JQuery, but is there any way to manage it with EaselJS?
Thanks!
Source: (StackOverflow)
I want to have a random color where "Crimson" is defined
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
Source: (StackOverflow)
var tf = new Text(letter, font, color);
var tfContainer = new Container();
tfContainer.addChild(tf);
How can I find out what are the dimensions of the 'tfContainer'?
I know I can use tf.getMeasuredWidth() and tf.getMeasuredLineHeight() but I'd rather use more general approach. Besides that doesn't return accurate measurements.
Source: (StackOverflow)
There are Shape.graphic methods to draw circles and rectangles easily, but no obvious method to draw polygons such as hexagons and polygons? How do you draw them using EaselJS?
Source: (StackOverflow)
I am using EaselJS as an API for HTML5 canvas.
I noticed that the following code:
line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);
...produces following line:
I set the thickness to 1 - but the line is still fuzzy. If you zoom in with the snapshot, you can see it actually occupies 3 pixels. I believe I read somewhere canvas draws a point between two pixels, so that both pixels will be colored in fact. And you need to shift where you draw the point by half the pixel width so it falls on the entire pixel.
I need sharp image for my applications, please advise.
Source: (StackOverflow)
I am currently developing an android application using phonegap. I have an html5 canvas that I am drawing and animating objects on. It works great on android 2.3, but on android 4+ it is not redrawing the canvas. I tried using both kinetic.js and easel.js/tween.js for my animations and the problem with not clearing the canvas occurred for both of these libraries. I experienced some success showing and hiding a div over the canvas but it does not work all the time. I can only assume that this is an android 4+ specific bug or some type of feature to enhance the html5 canvas performance.
Does anyone know if there is some setting I can change or method I can call in android 4 or javascript which would allow me to force the redraw of my html5 canvas during animations?
It should also be noted that the animations seem to work with easel.js/tween.js in the 4.1 google api emulator (the canvas clears and redraws), but not on phones running 4.1.1.
I've done some further research into what is happening. Essentially it appears that the shape at the very beginning of an animation is leaving an artifact, which clearRect does not clear. I have a big circle that i am shrinking to a small circle. The animation still happens but the big circle is not affected by calling clearRect on the canvas.
Source: (StackOverflow)
1.) I found a canvas API called EaselJS, it does an amazing job of creating a display list for each elements you draw. They essentially become individually recognizable objects on the canvas (on one single canvas)
2.) Then I saw on http://simonsarris.com/ about this tutorial that can do drag and drop, it makes use of a hidden canvas concept for selection.
3.) And the third approach, a working approach, http://www.lucidchart.com/ , which is exactly what I'm trying to achieve, basically have every single shape on a different canvas, and use to position them. There's a huge amount of canvas.
The question is, what is the easiest way to achieve interactive network diagram as seen on http://www.lucidchart.com/
A side question is, is it better to get text input through positioning on canvas or using multiple canvas (one for rendering text) as in LucidChart
Source: (StackOverflow)
I have an idea for a game in javascript (I'm going to make it with EaselJS) and I'll have to detect keypresses. After looking around on the internet I've seen a lot of suggestions (use window.onkeypress, use jQuery, etc.) but for almost every option there's a counterargument. What do you guys suggest? Using jQuery for this sounds easy enough but I have virtually no experience with that library (and I'm not particulary a veteran at javascript either) so I'd rather avoid it. If jQuery is the best option, can someone give a good example (with explanation would be awesome) of how to do this?
I guess this gets asked a lot but I couldn't find any clear answers. Thanks in advance!
Source: (StackOverflow)
I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.
So, when I load the page, some content get visually duplicated. The DIVs are not really duplicated, it's just visual.
- This bug only appears on Safari (Windows + OSX).
- If I click and slide to select the page, the bug disapears.
- If I switch page (with jQuery Mobile slide transition), it also disapears.
Here is a screenshot: https://dl.dropboxusercontent.com/u/37896707/both.jpg
My code is massive so I cannot really post it fully here. I've just spend 2 hours playing around with my code to try fix this. I really have no clue.
If you have an idea and need more informations, please let me know.
Source: (StackOverflow)
I have EaselJS Shapes on the canvas and then I start drawing Graphics each tick. At the moment the graphics are being drawn over the Shapes. Is there a way to define the z-index so that the Shapes are drawn over the Graphics each frame?
Any help would be much appreciated.
Source: (StackOverflow)
I am working on an HTML5 game using easlejs + phonegap and am running into an issue where the screen flashes everytime you click/touch/mousedown on the canvas.
Below is the very simple code I created to test the issue and see if it was related to easlejs. As you can see from the code it's nothing to do with easlejs and is just an html5/phonegap issue.
You can see I also tried the no select CSS styles to no luck.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#canvas
{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
</style>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function(e)
{
var ctx = canvas.getContext("2d");
var x = Math.random() * 320;
var y = Math.random() * 480;
var w = Math.random() * 100;
var h = Math.random() * 100;
ctx.fillStyle = "#FF0000";
ctx.fillRect(x,y,w,h);
}, false);
</script>
</body>
</html>
Source: (StackOverflow)
I am currently developing a game, it uses a large tiled map, that can be dragged around, and moves quickly with your character.
I have created a simple version of the problem
JSFiddle Example
Each tile is a Shape and is cached.
All shapes go inside a container, the container is moved based on camera position.
I am noticing weird drops in fps at certain zoom levels.
The zoom simply adjusts the size of the shapes.
If you adjust the zoom you will see what i mean.
Chrome
zoom 1 = good fps
zoom 3 = bad fps
zoom 5 = good fps
What would be the reason for this frame rate problem?
Note i have i posted this on the createjs community forum as well.
Community Question
Here is the code in the jsfiddle example
HTML
<canvas id="mainCanvas" width="500" height="500"></canvas>
<span id="fps-container"><span id="fps">Loading</span> FPS</span>
JS
/*
This is a very simple version of a larger app/game i am creating
uses a large map that is drawn in sectors (createjs shapes)
I have not figured out the best way to cache, because if i cache all at once, its a lot of overhead.
My main issue is the zoom levels, the zoom simply adjusts the sectorsize.
The problem with this is that there seems to be a wierd performance problem at certain zoom levels.
To test this out, adjust the camera zoom property. I do not recommend anything more that 6.
*/
//Generic Settings
var Settings = {
block_size: 50,
rows: 50,
cols: 50
}
//Create Camera
var Camera = {
/*
HERE IS THE ZOOM PROBLEM
Chrome
zoom : 1 = good fps
zoom : 2 - 4 = bad fps
zoom : 5 - 6 = good fps again ... wtf
Safari
Zoom: 7 = Good fps
*/
x: 0,
y: 0,
zoom:1
}
//Create Short Alias
var Stage = createjs.Stage;
var Ticker = createjs.Ticker;
var Container = createjs.Container;
var Graphics = createjs.Graphics;
var Shape = createjs.Shape;
//Full Screen Canvas
var canvas = document.getElementById("mainCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Create Stage
var mainStage = new Stage(canvas);
mainStage.snameToPixelsEnabled = true;
mainStage.autoClear = true;
//Start Ticker
Ticker.addListener(this);
Ticker.useRAF = true;
Ticker.setFPS(30);
//Create Container;
var mainContainer = new Container();
mainContainer.snapToPixel = true;
//Add Container to Stage
mainStage.addChild(mainContainer);
//Create Lots of Shapes
var size = Settings.block_size * Camera.zoom;
//For the purpose of demonstration, I am only creating a square
//My actual app has much more complex drawings
var graphics = new Graphics();
graphics.setStrokeStyle(1 * Camera.zoom, "round");
graphics.beginFill(Graphics.getRGB(230,230,230,0.5));
graphics.beginStroke(null);
graphics.rect(-10, -10, size+10, size+10);
var cols = Settings.cols;
var rows = Settings.rows;
for (var x = 0; x < cols; x++) {
for (var y = 0; y < rows; y++) {
var shape = new Shape(graphics);
shape.x = x * size;
shape.y = y * size;
//Cache the shape, (the offset is to prevent the cache from chopping off complex shapes)
var cache_offset = 10 * Camera.zoom;
shape.cache(-cache_offset,-cache_offset, size + cache_offset, size + cache_offset);
//Add shape to container
mainContainer.addChild(shape);
}
}
//Make map draggable
var lastX,lastY;
mainStage.onMouseDown = function(evt){
lastX = evt.stageX;
lastY = evt.stageY;
}
mainStage.onMouseMove = function(evt){
if(lastX && lastY){
var stageX = evt.stageX;
var stageY = evt.stageY;
var diffX = lastX - stageX;
var diffY = lastY - stageY;
lastX = stageX;
lastY = stageY;
Camera.x += diffX / Camera.zoom;
Camera.y += diffY / Camera.zoom;
}
}
mainStage.onMouseUp = function(evt){
lastX = null;
lastY = null;
}
//Update the container position based on camera position and zoom
updatePosition = function(){
mainContainer.x = -Camera.x * Camera.zoom;
mainContainer.y = -Camera.y * Camera.zoom;
}
tick = function(){
updatePosition();
mainStage.update();
var fps = document.getElementById('fps');
fps.innerHTML = Ticker.getMeasuredFPS();
}
Source: (StackOverflow)
I want to start developing HTML5/JS games. And I see these 2 frameworks LimeJS and CreateJS & EaselJS. Which one is better? Does anyone have experience with these 2 frameworks? And what about the documentation?
Source: (StackOverflow)
Trying to get Easeljs js library in Aptana 3 (as web project). Dragged the files in the project (files are indexed). It doesn't recognize the library as code assist.
Is the only way for external js library to make a sdocml (if so is there a generator ?) or is there a other way to get code assist ?
Source: (StackOverflow)
I'm having issues during a minigame development using EaselJS with my collision detection system and I need someone's help. The issue occurs when the hero (a circle bitmap) collides an object and there's other object behind the first one, the hero collides with both objects, even if the second collision is blocked. Here's an image explanation:
The cause of the problem is really simple, even if the problem itself isn't:
This collision detection system is based on the future position of the circle (and not on its actual position), then if the next position of the circle intersect a rectangle, it will bounce. The problem is that, if the future position intersects two rectangles, the circle will bounce in both rectangles — even if the actual circle movement is blocked by another rectangle and it can't reach the second one.
Update: Note that this problem only occurs when the up arrow is being hold due to the rect creation order.
Here's the relevant javascript code:
rects.forEach(function (rect) { // Affect all rects
// Collision detection:
// (This MUST BE after every change in xvel/yvel)
// Next circle position calculation:
var nextposx = circle.x + event.delta / 1000 * xvel * 20,
nextposy = circle.y + event.delta / 1000 * yvel * 20;
// Collision between objects (Rect and Circle):
if (nextposy + height(circle) > rect.y &&
nextposx + width(circle) > rect.x &&
nextposx < rect.x + rect.width &&
nextposy < rect.y + rect.height) {
if (circle.y + height(circle) < rect.y) {
cls("top");
}
if (circle.x + width(circle) < rect.x) {
cls("left");
}
if (circle.x > rect.x + rect.width) {
cls("right");
}
if (circle.y > rect.y + rect.height) {
cls("bottom");
}
}
// Stage collision:
if (nextposy < 0) { // Collided with TOP of stage. Trust me.
cls("bottom"); // Inverted collision side is proposital!
}
if (nextposx < 0) {
cls("right");
}
if (nextposx + width(circle) > stage.canvas.width) {
cls("left");
}
if (nextposy + height(circle) > stage.canvas.height) {
cls("top");
}
});
JSFiddle
Source: (StackOverflow)