easeljs

Android 4+ html5 canvas not redrawing

六眼飞鱼酱① 提交于 2019-11-30 05:18:34
问题 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

Animate CC HTML5 easelJS stage.X stage.Y mouse position not consistent between chrome and and firefox

自古美人都是妖i 提交于 2019-11-29 18:12:42
I have an application where I need an information card to follow the position of the mouse. I have used the following code: stage.addEventListener("tick", fl_CustomMouseCursor.bind(this)); function fl_CustomMouseCursor() { this.NameTag.x = stage.mouseX; this.NameTag.y = stage.mouseY; } It works perfectly in Firefox but in Chrome and Safari the further away the mouse gets from 0,0 on the canvas the larger the distance between NameTag and the mouse (by a factor of 2). I look forward to any comments. Lanny I see the issue in Chrome as well as Firefox - I don't believe it is a browser issue. The

Using touch events with Createjs / Easeljs

此生再无相见时 提交于 2019-11-29 03:38:13
问题 I'm trying to use touch events with Createjs / Easeljs objects. For example, I'm trying to attach a touchstart and touchmove event using addEventListener. Touchstart and mousedown seems to work: I'm using a browser and a touch device to test it and it seems to work in both cases. However, mousemove and touchmove doesn't seem to work. I though it was because I removed the stopPropagation and preventDefault methods, but I saw that Lanny McNie wrote that there is no need to do it in CreateJS 1.

EaselJS: Can somebody explain the inheritance pattern used in demos?

不问归期 提交于 2019-11-28 13:43:18
I'm creating a game using EaselJS, and I'm wondering if somebody can explain how the inheritance pattern used in the demo files works. Specifically, I'm looking at the following file: https://github.com/CreateJS/EaselJS/blob/master/examples/assets/Ship.js On line 7, the Ship's prototype is set to an instance of a createjs.container() ... var p = Ship.prototype = new createjs.Container(); And then on line 28, a reference to the original constructor is stored: p.Container_initialize = p.initialize; //unique to avoid overiding base class Finally, the Ship object is initialized on line 30 p

Is it possible to draw a transparent canvas over WebGL content?

笑着哭i 提交于 2019-11-28 13:14:03
问题 I am used to Flash where I can combine the old 2D API over Stage3D (OpenGL). Now I would like to use EaselJS which is very similar to the Flash 2D API for my UI, but I would like it to be drawn over 3D content . Now, AFAIK EaselJS is Canvas-based . Is it be possible to combine Canvas over WebGL in some way? Or would it require serious hacks? 回答1: A WebGL canvas is just a canvas which is like any other HTML element. You can stack as many as you like (up to browser set limits or memory) Here's

Animate CC HTML5 easelJS stage.X stage.Y mouse position not consistent between chrome and and firefox

会有一股神秘感。 提交于 2019-11-28 12:42:33
问题 I have an application where I need an information card to follow the position of the mouse. I have used the following code: stage.addEventListener("tick", fl_CustomMouseCursor.bind(this)); function fl_CustomMouseCursor() { this.NameTag.x = stage.mouseX; this.NameTag.y = stage.mouseY; } It works perfectly in Firefox but in Chrome and Safari the further away the mouse gets from 0,0 on the canvas the larger the distance between NameTag and the mouse (by a factor of 2). I look forward to any

easeljs not showing bitmap

对着背影说爱祢 提交于 2019-11-27 15:07:53
This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't. function Start() { var stage = new createjs.Stage("DogeCanvas"); var dog = new createjs.Bitmap("doge.jpg"); var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; dog.x=100; dog.y=100; stage.addChild(circle, dog); stage.update(); } And this is the html file <!DOCTYPE html> <html> <head> <title>test</title> <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script> <script src="Doge.js"></script> </head

easeljs not showing bitmap

心已入冬 提交于 2019-11-26 17:03:10
问题 This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't. function Start() { var stage = new createjs.Stage("DogeCanvas"); var dog = new createjs.Bitmap("doge.jpg"); var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; dog.x=100; dog.y=100; stage.addChild(circle, dog); stage.update(); } And this is the html file <!DOCTYPE html> <html> <head> <title>test</title>

Simplest way to detect keypresses in javascript

狂风中的少年 提交于 2019-11-26 01:59:31
问题 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