i'm only began to learn Javascript, so i have some troubles with animation in EaselJs. I'm trying to move object on mouse click (that's ok as i've expected), but when i'm try to add animation of movement in proper way, my animation doesn't acts, just stops at one frame when object moves. Here's the code of main.js and example of problem: http://rustem.ucoz.com/onMouseRun/index.html
var canvas;
var stage;
var imgCharRun = new Image();
var imgCharIdle = new Image();
var bmpAnimation;
var canvasx;
var isClicked = false;
function init() {
canvas = document.getElementById('canvas');
canvasx = canvas.offsetLeft;
imgCharRun.src = "monsterRun.png";
imgCharIdle.src = "monsterIdle.png";
startGame();
}
function startGame(){
stage = new createjs.Stage(canvas);
stage.enableMouseOver(10);
var spriteSheet = new createjs.SpriteSheet({
images: [imgCharRun, imgCharIdle],
frames: {width: 64, height: 64, regX: 32, regY: 32},
animations: {
walk: [0, 9, "walk"],
idle: [10, 20, "idle"]
}
});
bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
bmpAnimation.gotoAndPlay ("idle");
bmpAnimation.scaleX = 1;
bmpAnimation.x = canvas.width/2;
bmpAnimation.y = canvas.height-100;
bmpAnimation.currentFrame = 9;
stage.addChild(bmpAnimation);
createjs.Ticker.addListener(window);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(30);
}
document.onmousedown = function(e) {
isClicked = true;
window.mousex = e.clientX-canvasx;
}
function isMouseClicked() {
if (isClicked){
moveToMouse();
}
}
function moveToMouse() {
if(bmpAnimation.x<mousex) {
bmpAnimation.x+=5;
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = -1;
}
if(bmpAnimation.x>mousex) {
bmpAnimation.x-=5;
bmpAnimation.gotoAndPlay("walk");
bmpAnimation.scaleX = 1;
}
}
function tick() {
stage.update();
isMouseClicked();
}
Please, help me with this problem:
You are calling gotoAndPlay("walk") every frame while the mouse is down, so it constantly sets the animation to the first frame of the walk animation. You need a flag to indicate if the animation is running already, and ensure you only call it one time.
Problem is solved, thanks. Here is what i wanted: http://rockfor.us/onMouseRun/index.html
Related
Hi I'm trying to make a basic lightning system using bitmap multiply in PhaserJS. How ever I'm having trouble with the fact that the bitmap does not darken my sprites. How would I achieve this?
I create the bitmap like so in the games create function.
// Shadow
this.bitmap = this.game.add.bitmapData(
this.game.width+100,
this.game.height+100
);
this.lightBitmap = this.game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
I then fill it and paint it every frame in the update function.
this.bitmap.fill(20, 20, 20, 1);
this.lightBitmap.x = this.camera.x-50;
this.lightBitmap.y = this.camera.y-50;
this.bitmap.dirty = true;
Here is an image that shows what happens. I painted the shadow on half screen only to illustrate that it does not darken the sprites. The dirt tiles and the purple player are the sprites I want it to affect.
How can I make it darken the sprites as well?
That's probably because of the order you are adding your images. You should add the shadow as the last one if you want to affect to all your elements. Or you can always use bringToTop method.
Take a look at this example:
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game');
var mainState = {
preload:function(){
var dataURI = 'data:image/png;base64,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'
var data = new Image();
data.src = dataURI;
game.cache.addImage('car', dataURI, data);
var dataURI2 = 'data:image/png;base64,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';
var data2 = new Image();
data2.src = dataURI2;
game.cache.addImage('wood', dataURI2, data2);
},
create:function(){
game.stage.backgroundColor = "#4488AA";
this.bitmap = game.add.bitmapData(
200,
200
);
this.lightBitmap = game.add.image(0, 0, this.bitmap);
this.lightBitmap.blendMode = Phaser.blendModes.MULTIPLY;
game.physics.startSystem(Phaser.Physics.ARCADE);
this.car =this.game.add.sprite(game.world.centerX,game.world.centerY,'car');
this.car.anchor.setTo(0.5,0.5);
game.physics.arcade.enable(this.car);
game.physics.arcade.enable(this.car);
platforms = game.add.group();
platforms.enableBody = true;
var ground = platforms.create(100,100, 'wood');
var ground2 = platforms.create(400,400, 'wood');
ground.body.immovable = true;
ground2.body.immovable = true;
},
update:function(){
this.car.body.velocity.x =0;
this.car.body.velocity.y = 0;
if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){
this.car.body.velocity.x = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
this.car.body.velocity.x = 100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.UP)){
this.car.body.velocity.y = -100;
}
if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)){
this.car.body.velocity.y = 100;
}
this.bitmap.fill(50, 50, 50, 1);
this.lightBitmap.x = this.car.body.x-50;
this.lightBitmap.y = this.car.body.y-50;
this.bitmap.dirty = true;
game.world.bringToTop(this.lightBitmap);
},
};
game.state.add('main', mainState);
game.state.start('main');
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>
<div id="game"></div>
Im new to using canvas but wonder if i could get some help or advice on where to start with this. i currently have a circle drawn on canvas and have tried multiple ways i thought might work but cant get my head round it. When searching online i can only really find help where the shapes are drawn in canvas itself.
Here is what i have so far: JSFiddle
JavaScript:
var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();
img.onload = function(){
canvOne.drawImage(img, 10, 10);
};
img.src = "img/circle.jpg";
function oneStart(){
for(var i = 0; i < 300; i++){
img.style.left = i + 'px';
setTimeout(oneStart, 1000);
}
};
can anyone give me a hand with this please?
jsFiddle : http://jsfiddle.net/8eLL7L5L/3/
javascript
//canvas one
var one = document.getElementById("canvOne");
var canvOne = one.getContext("2d");
var img = new Image();
var animate = false;
var circlePosX = 10;
var circlePosY = 10;
img.onload = function () {
canvOne.drawImage(img, circlePosX, circlePosY);
};
img.src = "http://www.alexvolley.co.uk/other/circle.jpg";
var start = function()
{
animate = true;
}
var stop = function()
{
animate = false;
}
setInterval(function () {
// Only update circle position if animate is true
if (animate) {
circlePosX += 1;
canvOne.fillStyle = "#FFF";
canvOne.fillRect(0, 0, one.width, one.height);
canvOne.drawImage(img, circlePosX, circlePosY);
}
}, 3);
All I have done is created 3 variables and added a few little functions, the circle's XPos and YPos are now stored so we can access them, I have also created a bool variable animate which is used to check if we should animate the circle.
The start function simply sets animate to true
The stop function simple sets animate to false
the setInterval just keeps running the same code over and over every 3 miliseconds, all this does is clears the canvas and then redraws the circle. If we don't clear the canvas you would see multiple circles appear when animate is true.
I hope this helped
i have been having trouble with reading a mouse position on a canvas. The code is working (semi) correctly as it reads the position when clicking he canvas in IE but only on one frame, in chrome it is just displaying the value as 0.
Here is the full code:
<script>
var blip = new Audio("blip.mp3");
blip.load();
var levelUp = new Audio("levelUp.mp3");
levelUp.load();
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
context.font = '18pt Calibri';
context.fillStyle = 'white';
//load and draw background image
var bgReady = false;
var background = new Image();
background.src = 'images/background.jpg';
background.onload = function(){
bgReady = true;
}
var startMessage = 'Click the canvas to start';
//load plane image
var planeReady = false;
var planeImage = new Image();
planeImage.src = 'images/plane.png';
planeImage.onload = function() {
planeReady = true;
}
//load missile image
var missileReady = false;
var missileImage = new Image();
missileImage.src = 'images/missile-flipped.gif';
missileImage.onload = function() {
missileReady = true;
}
//initialise lives and score
var score = 0;
var lives = 3;
var missilesLaunched = 0;
var missileSpeed = 5;
var level = 1;
var missileX = 960;
var missileY = Math.random() * 500;
if (missileY > 480) {
missileY = 480;
}
function getMousePos(canvas, event) {
return {
x: input.x - rect.left,
y: input.y - rect.top
};
}
function update_images(event) {
var pos = getMousePos(canvas.getBoundingClientRect(), mouseInput);
planeImage.y = pos.y;
missileX = missileX - missileSpeed;
if (missileX < - 70) {
missilesLaunched++;
missileX = 960;
missileY = Math.random() * 500;
if (missileY > 480) {
missileY = 480;
}
blip.play();
score = missilesLaunched;
if (score % 5 == 0) {
missileSpeed = missileSpeed + 2;
level++;
levelUp.play();
}
}
}
function reload_images() {
if (bgReady = true) {
context.drawImage(background, 0, 0);
}
if (planeReady = true) {
context.drawImage(planeImage, 10, planeImage.y);
}
if (missileReady = true) {
context.drawImage(missileImage, missileX, missileY);
}
context.fillText('Lives: ' + lives, 200, 30);
context.fillText('Score: ' + score, 650, 30);
context.fillText('Level: ' + missileSpeed, 420, 30);
context.fillText('Position: ' + missileImage.y, 420, 70);
}
function main(event) {
var mouseInput = { x: 0, y: 0 };
document.addEventListener("mousemove", function (event) {
mouseInput.x = event.clientX;
mouseInput.y = event.clientY;
});
update_images(event);
reload_images();
if (lives > 0) {
window.requestAnimationFrame(main);
}
else {
}
}
function start() {
context.drawImage(background, 0, 0);
context.fillText('Click the canvas to start', 350, 250);
function startMain(event) {
game.removeEventListener("click", startMain);
main(event);
}
canvas.addEventListener("mousedown", startMain);
}
start();
</script>
Joe, you should actually be capturing the mouse position every time you click...
...but you're actually also starting a new game (without stopping the old one), every time you click, too.
First problem: starting game engine several times to draw on the same instance of the canvas
Solution:
In your start function, you need to remove the mousedown event listener, after you've triggered it.
function start () {
// ... other setup
function startMain (event) {
canvas.removeEventListener("click", startMain);
main(event);
}
canvas.addEventListener("click", startMain);
}
Now it will only listen for the first click, before starting, and will only start once.
Second Problem: mouse doesn't update as expected
Solution: two issues here...
...first, you are passing event into main on first call...
...after that, you're passing main into requestAnimationFrame.
requestAnimationFrame won't call it with an event, it will call it with the number of microseconds (or ms or some other unit as a fractional precision of ms) since the page was loaded.
So the first time you got main({ type: "mousedown", ... });.
The next time you get main(4378.002358007);
So lets refactor the startMain we had above, so that main never ever collects an event, just a time.
function startMain ( ) {
canvas.removeEventListener("click", startMain);
requestAnimationFrame(main);
}
The next problem is that even if you were getting just events, you're only ever capturing a click event (which as we mentioned earlier, fires a new copy of the game logic).
Your solution is to separate the code which catches mouse events from the code which reads mouse position.
var mouseInput = { x: 0, y: 0 };
document.addEventListener("mousemove", function (event) {
mouseInput.x = event.clientX;
mouseInput.y = event.clientY;
});
function getMousePos (rect, input) {
return {
x : input.x - rect.left,
y : input.y - rect.top
};
}
// currently in updateImages (should not be there, but... a different story)
var pos = getMousePos(canvas.getBoundingClientRect(), mouseInput);
You've got other problems, too...
You're calling getMousePos and passing in game at the moment. I don't see where game is defined in your JS, so either you're making game somewhere else (begging for bugs), or it's undefined, and your app blows up right there.
You should really be building this with your console / dev-tools open, in a hands-on fashion, and cleaning bugs in each section, as you go.
I am trying to figure out how to switch images on a canvas without a small time of blankness in between.
To make my point here is an extreme example of this. In this program, when your spacebar is held down it redraws the image circle.png every milisecond. Because this is so fast the image dissappears.
I did try to preload my image but it didn't help.
Here is my full code:
// Access Canvas
var canvas = document.getElementById("gameBoard");
var ctx = canvas.getContext("2d");
// preload image
var circleReady = false;
var circleImage = new Image();
circleImage.onload = function () {
circleReady = true;
};
circleImage.src = "images/Circle.png";
// Game objects
var circle = {
};
// circle location
circle.x = canvas.width / 2;
circle.y = canvas.height / 2;
// Keyboard events
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Update Objects
var update = function () {
if (32 in keysDown) { // Player space pressed
circleImage.src = "images/Circle.png"; //re-draws image
}
};
// Draws Everything
var render = function () {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,600,609);
if (circleReady) {
ctx.drawImage(circleImage, circle.x, circle.y);
}
};
// The main loop
var main = function () {
update();
render();
};
// Starts Function
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
You are reloading the image in the update function which is causing your delay:
circleImage.src = "images/Circle.png"; //re-draws image
All you have to do is drawImage without reloading the image:
ctx.drawImage(circleImage, circle.x, circle.y);
Here is an example of an image loader that loads all your images before execution begins:
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house4.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house5.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house6.jpg");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// all your images are fully loaded so begin your app
}
You can have two canvases, one for each image. When you want to switch. Remove or hide the one in the front, leaving (instantly) the one in the back.
Per your comment, here is an example of 26 letters of the alphabet. We only keep two canvases at a time. Each time the user clicks whe add a new only, and make the hidden one visible, with no delay.
function createCanvas(letter) {
var canvas = document.createElement('canvas');
canvas.id = letter;
canvas.style.display = 'none';
document.getElementById('container').appendChild(canvas);
var image = new Image();
image.src = 'http://icons.iconarchive.com/icons/iconicon/alpha-magnets/128/Letter-'+letter+'-icon.png';
image.onload = function() {
canvas.getContext('2d').drawImage(this, 0, 0);
};
return canvas;
}
createCanvas('a').style.display = '';
createCanvas('b');
var prevCharCode = 'a'.charCodeAt(0);
var charCode = 'b'.charCodeAt(0);
document.addEventListener('click', function() {
document.getElementById(String.fromCharCode(charCode)).style.display = '';
document.getElementById('container').removeChild(
document.getElementById(String.fromCharCode(prevCharCode))
);
prevCharCode = charCode;
if(++charCode > 'z'.charCodeAt(0)) {
charCode = 'a'.charCodeAt(0);
}
createCanvas(String.fromCharCode(charCode));
});
I'm tring to draw an expanding and contracting ring that pulses using javascript and html 5. The problem is (using the below code) when the path is repainted the current path remains visible and just gets fatter. Anybody know why this could be?
function drawOuterInfoCircle(){
var number = 25;
var increase = true;
function draw(){
if(increase==true){
number++
//alert('increase');
if(number==30){
increase=false
}
}
if(increase==false){
number--;
//alert('decrease');
if(number==25){
increase=true
}
}
var drawingCanvas = document.getElementById('canvas_circle');
var drawingContext1 = drawingCanvas.getContext('2d');
drawingContext1.strokeStyle = "#990000";
drawingContext1.lineWidth = 12;
drawingContext1.beginPath();
drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
drawingContext1.closePath();
drawingContext1.stroke();
}
setInterval(draw,100);
}
I've tried clearing the canvas with the following (from post 3088229) tna
drawingContext1.fillStyle = 'rgba(0,0,0,0)';
drawingContext1.fill();
the fiddle
You are filling with opacity 0, try rgba(0,0,0,1)
before each ring drawing erase the older canvas and redraw on it,
function draw(){
var drawingCanvas = document.getElementById('canvas_circle');
var drawingContext1 = drawingCanvas.getContext('2d');
drawingContext1.clearRect(0,0,drawingCanvas_width,drawingCanvas_height);
if(increase==true){
number++
//alert('increase');
if(number==30){
increase=false
}
}
if(increase==false){
number--;
//alert('decrease');
if(number==25){
increase=true
}
}
//var drawingCanvas = document.getElementById('canvas_circle');
//var drawingContext1 = drawingCanvas.getContext('2d');
drawingContext1.strokeStyle = "#990000";
drawingContext1.lineWidth = 12;
drawingContext1.beginPath();
drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
drawingContext1.closePath();
drawingContext1.stroke();
}