StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing EaselJS sprite sheet in existing code
text
Body
copied!<p>I want to modify existing code which uses an image to animate, and use a sprite sheet instead. I'm using the EaselJS library for this.</p> <p>The piece of code that creates the objects for animation:</p> <pre><code>function initStageObjects(){ car = new Car('img/car.png',canvas.width()/2,canvas.height()/2); } </code></pre> <p>And this is the complete code:</p> <pre><code>$(window).load(function(){ $(document).ready(function(){ // Canvas Variables var canvas = $('#canvas'); var context = canvas.get(0).getContext('2d'); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); // Keyboard Variables var leftKey = 37; var upKey = 38; var rightKey = 39; var downKey = 40; // Keyboard event listeners $(window).keydown(function(e){ var keyCode = e.keyCode; if(keyCode == leftKey){ car.left = true; } else if(keyCode == upKey){ car.forward = true; } else if(keyCode == rightKey){ car.right = true; } else if (keyCode == downKey){ car.backward = true; } }); $(window).keyup(function(e){ var keyCode = e.keyCode; if(keyCode == leftKey){ car.left = false; } else if(keyCode == upKey){ car.forward = false; } else if(keyCode == rightKey){ car.right = false; } else if (keyCode == downKey){ car.backward = false; } }); // Start & Stop button controlls var playAnimation = true; var startButton = $('#startAnimation'); var stopButton = $('#stopAnimation'); startButton.hide(); startButton.click(function(){ $(this).hide(); stopButton.show(); playAnimation = true; updateStage(); }); stopButton.click(function(){ $(this).hide(); startButton.show(); playAnimation = false; }); // Resize canvas to full screen function resizeCanvas(){ canvas.attr('width', $(window).get(0).innerWidth); canvas.attr('height', $(window).get(0).innerHeight); canvasWidth = canvas.width(); canvasHeight = canvas.height(); } resizeCanvas(); $(window).resize(resizeCanvas); function initialise(){ initStageObjects(); drawStageObjects(); updateStage(); } // Car object and properties function Car(src, x, y){ this.image = new Image(); this.image.src = src; this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.angle = 90; this.topSpeed = 5; this.acceleration = 0.1; this.reverse = 0.1; this.brakes = 0.3; this.friction = 0.05; this.handeling = 15; this.grip = 15; this.minGrip = 5; this.speed = 0; this.drift = 0; this.left = false; this.up = false; this.right = false; this.down = false; } // Create any objects needed for animation function initStageObjects(){ car = new Car('img/car.png',canvas.width()/2,canvas.height()/2); } function drawStageObjects(){ context.save(); context.translate(car.x,car.y); context.rotate((car.angle + car.drift) * Math.PI/180); context.drawImage(car.image, -25 , (-47 + (Math.abs(car.drift / 3)))); // context.fillRect(-5, -5, 10, 10); context.restore(); } function clearCanvas(){ context.clearRect(0, 0, canvasWidth, canvasHeight); context.beginPath(); } function updateStageObjects(){ // Faster the car is going, the worse it handels if(car.handeling > car.minGrip){ car.handeling = car.grip - car.speed; } else{ car.handeling = car.minGrip + 1; } // Car acceleration to top speed if(car.forward){ if(car.speed < car.topSpeed){ car.speed = car.speed + car.acceleration; } } else if(car.backward){ if(car.speed < 1){ car.speed = car.speed - car.reverse; } else if(car.speed > 1){ car.speed = car.speed - car.brakes; } } // Car drifting logic if(car.forward && car.left){ if(car.drift > -35){ car.drift = car.drift - 3; } } else if(car.forward && car.right){ if(car.drift < 35){ car.drift = car.drift + 3; } } else if(car.forward && !car.left && car.drift > -40 && car.drift < -3){ car.drift = car.drift + 3; } else if(car.forward && !car.right && car.drift < 40 && car.drift > 3){ car.drift = car.drift - 3; } if(car.drift > 3){ if(!car.forward && !car.left){ car.drift = car.drift - 4; } } else if(car.drift > -40 && car.drift < -3){ if(!car.forward && !car.right){ car.drift = car.drift + 4; } } // General car handeling when turning if(car.left){ car.angle = car.angle - (car.handeling * car.speed/car.topSpeed); } else if(car.right){ car.angle = car.angle + (car.handeling * car.speed/car.topSpeed); } // Use this div to display any info I need to see visually $('#stats').html("Score: 0"); // Constant application of friction / air resistance if(car.speed > 0){ car.speed = car.speed - car.friction; } else if(car.speed < 0) { car.speed = car.speed + car.friction; } // Update car velocity (speed + direction) car.vy = -Math.cos(car.angle * Math.PI / 180) * car.speed; car.vx = Math.sin(car.angle * Math.PI / 180) * car.speed; // Plot the new velocity into x and y cords car.y = car.y + car.vy; car.x = car.x + car.vx; } // Main animation loop function updateStage(){ clearCanvas(); updateStageObjects(); drawStageObjects(); if(playAnimation){ setTimeout(updateStage, 25); } } // Initialise the animation loop initialise(); }); });//]]> // JavaScript Document </code></pre> <p>How could i replace the image being used by the sprite i created?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload