I am using EaselJS and my task is to move a .png from right to left.
Since I bumped into an error I can't fix, I copied a work with the same goal and using createjs.Ticker.addListener to keep everything updated. I opened the other index.html with the included javascript and it worked perfectly. I proceeded to use this code as an example, but used my graphics. It is almost the same code, but it still tells me "TypeError: createjs.Ticker.addListener is not a function" I have no idea why the example works fine, but my code screws up like that.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/easeljs.js"></script>
<script>
var canvas, stage, child;
function draw () {
canvas = document.getElementById("canvas");
stage = new createjs.Stage( canvas );
var bg = new createjs.Bitmap( "bg.png" );
stage.addChild( bg );
var child = new createjs.Bitmap( "target.png" );
child.onTick = function ()
{
this.x --;
}
stage.addChild( child );
child.y = 100;
child.x = 100;
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS( 1 );
createjs.Ticker.addListener( stage , true );
createjs.Ticker.addListener( window , true );
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="650" height="400" style="background: #ccc;"></canvas>
</body>
</html>
EDIT
The error has been found. It wasn't the code, it was the easelJS-library itself that made the complications. I used a different version of the library and it worked. Thank you anyways :).
The function you are after is addEventListener
like this:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
CreateJS Ticker Documentation
Related
I have recently started working with Paper.js . Trying to use javascript directly i can't figure out why code below produces absolutely nothing when its running:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>paper1</title>
<script type="text/javascript" src="js/paper.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
paper.setup(canvas);
var path = new paper.Path();
path.strokeColor = 'black';
var tool = new paper.Tool();
tool.onMouseDown = function(event) {
path.add(event.point);
}
paper.view.draw();
};
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
I would appreciate any idea
UPDATE
It works when i remove window.onload. Why is that happen?
Actually, something does show up. Try to click on the uper left most area of the canvas and the lines will show up. But if you click more on the bottom right, you will see that the lines are not added were you click but are shifted.
There seems to be a problem when using the resize attribute. Remove it and add the dimensions manually and it will work as inteded:
<canvas id="myCanvas" width="500" height="300"></canvas>
I want to communicate between two animated canvas elements.
I’ve made two html5 canvas js animations with Adobe Animate CC. I’ve put both of these elements into one html page. I can successfully call functions from within those animations – the alerts are triggered successfully in the code below.
I want to call functions from one animation to control the other animation. I need help knowing how to correctly call/name/address the animations. So far I get no response with the canvas_ship.gotoAndPlay(12); and canvas_car.gotoAndPlay(7);, and I've spent hours trying different references. I’m not a big coder, but I’m sure this is a simple matter. Any help is appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations Talking to Each Other</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init () {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function tell_Ship_what_frame_to_go_to(){
alert("tell_Ship_what_frame_to_go_to was triggered");
canvas_ship.gotoAndPlay(12); //This line does not work.
}
function tell_Car_what_frame_to_go_to(){
alert("tell_Car_what_frame_to_go_to was triggered");
canvas_car.gotoAndPlay(7); //This line does not work.
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
I've received help and will now share the answer. You are welcome. Just invite me over for dinner sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>
var canvas, stage, tomtom, jerjer;
function init() {
var exportRoot;
//Tommy
canvas = document.getElementById("canvas_tommy");
tomtom = new lib_tommy.tommy();
stage = new createjs.Stage(canvas);
stage.addChild(tomtom);
stage.update();
createjs.Ticker.setFPS(lib_tommy.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Jerry
canvas = document.getElementById("canvas_jerry");
jerjer = new lib_jerry.jerry();
stage = new createjs.Stage(canvas);
stage.addChild(jerjer);
stage.update();
createjs.Ticker.setFPS(lib_jerry.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function button_from_tommy_was_clicked(){
tomtom.gotoAndPlay(5);
}
function button_from_jerry_was_clicked(){
jerjer.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>
I've tried everything I can think of and I'm reaching my wit's end.
"tilesheet.png" should be drawn onto the canvas but nothing I try seems to work.
Occasionally, when I try some new method I found online, it will appear to work fine once, but if I refresh the page it stops again.
Here is the code I'm using:
<head>
<title>Test Code</title>
<script src='scripts/jquery.js'></script>
</head>
<body>
<img id='img' src='images/tilesheet.png' style='position:absolute; visibility:hidden;'/>
<div id="port"></div>
<script>
viewHeight = 10;
viewWidth = 10;
$("#port").append("<canvas id='mapview' width='"+(viewWidth*32)+"' height='"+(viewHeight*32)+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");
var worldMap = new gameMap(viewHeight,viewWidth);
worldMap.redraw();
// These functions define a gameMap "CLASS" //
function gameMap (height,width){
this.tileSheet = $("#img");
this.canvas = $("#mapview");
this.ctx = this.canvas.getContext("2d");//<-- Error is referring to this line
}
//Draw Function
gameMap.prototype.redraw = function(){
this.tileSheet.onload = function(){
this.ctx.drawImage(this.tileSheet,10,10);
}
this.tileSheet.src = "apps/gamejournal/images/tilesheet.png";
for(i = this.viewY; i < this.viewY+this.viewHeight; i++){
for(j = this.viewX; j < this.viewX+this.viewWidth; j++){
}
}
this.mapcss();
};
//CSS
gameMap.prototype.mapcss = function(){
var h = this.viewHeight*this.tileSize;
var w = this.viewHeight*this.tileSize;
$('#port').css({
"height":h,
"width":w,
"position":"relative",
"margin":"0 auto"
});
};
</script>
</body>
Update 10/30/15 - After using Google Chrome's "Inspect Element" feature, I've noticed that an error is being reported:
TypeError: this.canvas.getContext is not a function (test.php:26)
Does anyone know what might be causing this?
Update 11/4/15 - I've created a JSFiddle so you can see what my code is doing.
https://jsfiddle.net/6ss8ygLd/3/
Any help would be greatly appreciated. Thanks!
Okay, after a lot of extra research I seem to have found the solution to my own problem.
The problems proved to be a mix of using jquery in places where it wouldn't work, and putting my "onload" function in the wrong place.
Here is the final code I used:
<head>
<title>Test Code</title>
<script src='scripts/jquery.js'></script>
</head>
<body>
<img id="tiles" src="images/tilesheet.png" style="position:absolute; left:-9999px;"/>
<div id="port"></div>
<script>
viewHeight = 10;
viewWidth = 10;
var mapw = viewWidth*32;
var maph = viewHeight*32;
$("#port").append("<canvas id='mapview' width='"+mapw+"' height='"+maph+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");
// These functions define a gameMap "CLASS" //
function gameMap (height,width){
this.canvas = document.getElementById("mapview");
this.ctx = this.canvas.getContext("2d");
this.tileSheet = document.getElementById("tiles");
}
//Draw Function
gameMap.prototype.redraw = function(){
this.ctx.drawImage(this.tileSheet,0,0);
};
//Call Functions
document.getElementById("tiles").onload = function(){
var worldMap = new gameMap(viewHeight,viewWidth);
worldMap.redraw();
}
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
</head>
<body>
<div id ="beeld">
<canvas id ="stageCanvas" width="1024" height="576">
<script src ="javascript.js"></script>
</canvas>
</div>
</body>
</html>
This is my Html
//Javascript Document
var canvas = document.getElementById('stageCanvas');
var stage = new Stage(canvas);
var Background;
var imgBackground = new Image();
imgBackground.src ="images/bg.png";
Background = new Bitmap(imgBackground);
Background.x = 0
Background.y = 0
stage.addChild(Background);
stage.update();
And that's my js.
The image is 1024 by 576, so it should be fullscreen. The original is 2048 by 576. I was planning to do like the background would slide to left and repeat it self when it gets to the end.
So my question is, why doesnt the image show up on the canvas.
I'm a very new to this, so I'm sorry if I'm asking such an easy question.
PS: If I inspect the HTML, it DOESN'T show any errors and it DOES show that the image is being loaded. It's just not.. drawn.. I guess.
I'm getting frustrated, because I'm stuck here for a couple hours already.
I FOUND A WORKING CODE
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Easel simple game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script>
var canvas;
var stage;
var bg;
var score;
var ghost;
function init() {
canvas = document.getElementById("StageCanvas");
stage = new Stage(canvas);
score = 0;
bg = new Image();
bg.src = "img/bg.png";
bg.onload = setBG;
}
function setBG(event){
var bgrnd = new Bitmap(bg);
stage.addChild(bgrnd);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="StageCanvas" width="1240" height="576"></canvas>
</body>
</html>
By the way this code is the work for someone else, so I don't take any credit.
This seems to work perfectly. But once I remove the
bg = new Image();
bg.src = "img/bg.png";
bg.onload = setBG;
it stops working.
Background = new Bitmap(imgBackground);
In HTML:
Try to move the script-tag of your javascript.js to right before the </body> or at least not into the <canvas>...</canvas>.
And another thing is: You have a space between src and = and id and =, that might cause problems in some browsers.
In JavaScript:
You need to execute the update-method with () otherwise that line will just be a listed reference to the update function.
stage.update();
And a second thing, that I noticed(though not part of the issue): You are using EaselJS 0.4.2, but 0.5.0 is already released, just in case you want to be up-to-date: http://code.createjs.com/easeljs-0.5.0.min.js ;-)
I'm having the same issue with EaselJS at the moment. While it might work for you, you can try and add a ticker which will automatically update the canvas:
createjs.Ticker.addListener(stage);
I was able to get the image to paint on the canvas after adding this, but as soon as I add any transforms to the image (scale, positioning, height, width) they are not applied prior to the image being drawn.
I've been scratching my head over this too.
I'm trying to create a basic strobe light in the browser using the canvas element. I'm expecting setInterval to keep calling the changeBG function to change to a random background color. This function works fine on its own, but not when called by setInterval. I tried pulling up this page in firebug and it told me that colors was undefined. Here's the problematic code.
<html>
<head>
<title>Strobe!</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script type="text/javascript">
function changeBG(colors,ctx,canvas) {
ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
ctx.fillRect(0,0,canvas.width,canvas.height)
}
function eventLoop() {
var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
var canvas = document.getElementById('mainCanvas')
var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
//changeBG(colors,ctx,canvas)
setInterval("changeBG(colors,ctx,canvas)", 1000);
}
</script>
</head>
<body onload="eventLoop()">
<canvas id="mainCanvas" width="800" height="600">
</canvas>
</body>
I'm new to javascript so any insight what so ever would be highly appreciated.
You code would work if you weren't passing a string to setInterval. Because it is in a string, it can't create a closure on the variables you are trying to use.
Try this instead:
setInterval(function() {
changeBG(colors,ctx,canvas);
}, 1000);
Using this method, you are passing an anonymous function to setInterval. It will call this function once per interval, which is 1000 miliseconds in this example.
The function can use the colors, ctx, and canvas variables because they exist in the scope where the function is declared. This creates a closure so that those variables still exist (as far as our anonymous function is concerned) when it is called over and over again.
For now, you can probably just use this code. For further understanding, I suggest researching anonymous functions and closures.
You can pass directly a function, instead of a string to evaluate, as
setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);
Good luck provoking epilepsy to someone
The root problem is variable scope when the interval code is executed, colors and the other variables are not in scope.
Try this:
<html>
<head>
<title>Strobe!</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script type="text/javascript">
function eventLoop() {
var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
var canvas = document.getElementById('mainCanvas')
var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
setInterval(function() {
ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
ctx.fillRect(0,0,canvas.width,canvas.height)
}, 1000);
}
</script>
</head>
<body onload="eventLoop()">
<canvas id="mainCanvas" width="800" height="600">
</canvas>
</body>
try this
UPDATED
setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);