Sprites not loading on canvas - javascript
I'm trying to create a game with sprite animation, but I can't seem to load both the animated sprite and the canvas at the same time. When the canvas loads, there is no error in the console but I can't see the sprite on the canvas. When I change the code around a bit (e.g. call "Sprites()" in the render function), the animated sprite shows up but the rest of the canvas is blank.
Here are the areas of code that I believe the errors are in:
app.js
/*
Sonic class creates the player's character, Sonic the Hedgehog
Parameters -
x and y are the player's initial coordinates
sprites passes in a sprite object to add animation
speed is the pace of the game based on level
*/
var Sonic = function(x, y) {
// set initial sprite/image
this.sprite = Sprites;
this.x = x;
this.y = y;
// set initial score to 0
this.score = 0;
// set initial life count to 3
this.lives = 3;
// initialize sonic as alive
this.alive === false;
};
/*
Update sonic's sprite to give the appearance of movement
Parameter - dt, the time delta between loops
*/
Sonic.prototype.update = function(dt) {
// Sprites();
};
/*
Draw the player character on the screen in canvas' context
*/
Sonic.prototype.render = function() {
// ctx.drawImage(Resources.get(this.sprite), 30, 250);
};
// create new instance of sonic
var sonic = new Sonic(30, 250);
sprites.js
var Sprites = (function(global) {
var sonicSprite,
soniceSpriteImg;
// update and render sprite at same speed as browser redraws
function gameLoop() {
window.requestAnimationFrame(gameLoop);
ctx.clearRect(0, 0, 760, 608);
sonicSprite.update();
sonicSprite.render();
}
function sprite(options) {
var obj = {},
// current frame
frameIndex = 0,
// number of updates since current frame was displayed
tickCount = 0,
// number of updates until next frame should be displayed
ticksPerFrame = options.ticksPerFrame || 0;
// number of frames in sprite sheet
numberOfFrames = options.numberOfFrames || 1;
obj.context = options.context;
obj.width = options.width;
obj.height = options.height;
obj.image = options.image;
obj.update = function() {
tickCount += 1;
// reset tickCount once it is surpasses ticks per frame
if (tickCount > ticksPerFrame) {
tickCount = 0;
// increase frameIndex if it is less than number of frames
if (frameIndex < numberOfFrames - 1) {
// go to next frame
frameIndex += 1;
} else {
// reset frameIndex to loop if out of frames
frameIndex = 0;
}
}
};
obj.render = function() {
// clear the canvas
// obj.context.clearRect(0, 0, obj.width, obj.height);
// draw animation
obj.context.drawImage(
obj.image,
frameIndex * obj.width / numberOfFrames,
0,
obj.width / numberOfFrames,
obj.height,
0,
0,
obj.width / numberOfFrames,
obj.height);
};
// obj.render();
return obj;
}
sonicSpriteImg = new Image();
sonicSprite = sprite({
context: ctx,
width: 408.8,
height: 117,
image: sonicSpriteImg,
numberOfFrames: 4,
ticksPerFrame: 3
});
// start game loop as soon as sprite sheet is loaded
sonicSpriteImg.addEventListener("load", gameLoop);
sonicSpriteImg.src = "images/sonicrunningsheet.png";
}());
The full source code for this project is here (please excuse the messy parts, this is still in progress) https://github.com/alexxisroxxanne/sonicvszombies
The live page for it is here: http://alexxisroxxanne.github.io/sonicvszombies/
Any help would be greatly appreciated! Thanks!
In the Sonic constructor you assign this.sprite to the result of the Sprites IIFE.
var Sonic = function(x, y) {
// set initial sprite/image
this.sprite = Sprites;
...
The Sprites IIFE doesn't return anything, so Sprites is always undefined.
I guess you want to return the sonicSpriteImg there.
...
sonicSpriteImg = new Image();
sonicSprite = sprite({
context: ctx,
width: 408.8,
height: 117,
image: sonicSpriteImg,
numberOfFrames: 4,
ticksPerFrame: 3
});
// start game loop as soon as sprite sheet is loaded
sonicSpriteImg.addEventListener("load", gameLoop);
sonicSpriteImg.src = "images/sonicrunningsheet.png";
return sonicSpriteImg;
}());
In the Sonic render function you get the sprite from the resources. The resources only returns undefined there. The reason is because this.sprite isn't an img url like on the other objects (Zombie, Nyancat etc.), but an img object. So you don't have to get it from resources.
Sonic.prototype.render = function() {
// ctx.drawImage(Resources.get(this.sprite), 30, 250);
ctx.drawImage(this.sprite, 30, 250);
};
My issue was fixed when I moved the variables sonicSprite and sonicSpriteImg outside of the Sprites function and into the global context, and then, in app.js, calling sonicSprite.update(); in Sonic.prototype.update() and calling sonicSprite.render(); in Sonic.prototype.render()
Related
TypeError: Cannot Read Property of Undefined Even Though I Defined It
I'm a beginner to JavaScript. I've looked through a few questions on here regarding "TypeError: ... undefined even though the property is defined" but their examples are either too dense for me to grasp or they realize they've incorrectly assigned something downstream. Here I think my example is quite simple, and I don't think I've incorrectly assigned anything. I've defined position in my class MoveableObjects and when I call player = new MoveableObject(position, other params ...) I don't get any errors. When I change this to player = new Sprite(position, other params ...) where Sprite extends MoveableObjects and then try to call a function inside Sprite it tells me position.x is undefined. I put console.log(player) immediately after the declaration and it does in fact show position as undefined, but I don't understand why it does since I've clearly defined it. Here is the constructor of MoveableObjects class MoveableObject { constructor({ colorRGB, width, height, position, velocity}) { this.width = width; this.height = height; this.position = position; this.velocity = velocity; this.colorRGB = colorRGB; // If the side of the object is touching or beyond the side of the canvas it is flagged as bounded. this.inUpLimit = false; this.inDownLimit = false; this.inLeftLimit = false; this.inRightLimit = false; // Translate the velocity into directional words this.movingLeft = false; this.movingRight = false; this.movingUp = false; this.movingDown = false; } Here is the constructor of Sprite and the draw() function it uses. // Sprite represents moveable objects with an animated image. class Sprite extends MoveableObject { constructor({ imageSrc, numRows = 1, numCols = 1, spacing = 0, margin = 0, animationSpeed = 10, position, velocity}) { super(position, velocity) this.image = new Image() // Image can be a single image or a spritesheet. this.image.src = imageSrc this.numRows = numRows // # animation sequences in the spritesheet this.numCols = numCols // # frames in an animation sequence this.spacing = spacing // # pixels between each frame this.margin = margin // # pixels between image border and sprite border. Vertical and horizontal margins should be equal. this.animation = new Object() this.animation.speed = animationSpeed // # times draw function is called before the next frame in the animation sequence is called. this.animation.counter = 0 // # times the draw function has been called this.animation.enabled = false // Whether or not the animation sequence is currently running this.animation.row = 1; // The row of the current frame being drawn this.animation.col = 1; // The column of the current frame being drawn this.animation.firstRow = 1; // The row of the frame to initialize the animation loop on this.animation.firstCol = 1; // The column of the frame to initialize the animation loop on this.animation.lastRow = 1; // The row of the frame to restart the animation loop on this.animation.lastCol = 1; // The column of the frame to restart the animation loop on this.frame = new Object(); this.frame.width = 0; // Init image.onload this.frame.height = 0; // Init image.onload this.image.onload = () => { // Calculates width and height of animation frame based on numRows, numColumns, spacing, and margin let imageWidth = this.image.width; let spriteSheetWidth = imageWidth - (2 * this.margin); let widthNoSpacing = spriteSheetWidth - this.spacing * (this.numCols - 1); let frameWidth = widthNoSpacing / this.numCols; let imageHeight = this.image.height; let spriteSheetHeight = imageHeight - (2 * this.margin); let heightNoSpacing = spriteSheetHeight - this.spacing * (this.numRows - 1); let frameHeight = heightNoSpacing / numRows; this.frame.width = frameWidth; this.frame.height = frameHeight; } } draw() { // Draw the frame at the current row and column. context.drawImage( this.image, // the entire image being loaded this.animation.col * this.frame.width, // sx, x coordinate to begin crop this.animation.row * this.frame.height, // sy, y coordinate to begin crop this.frame.width, // swidth, width of cropped image this.frame.height, // sheight, height of cropped image this.position.x, // x coordinate where to place image on canvas this.position.y, // y coordinate where to place image on canvas this.frame.width, // the width to stretch/shrink it to this.frame.height // the height to stretch/shrink it to ) Here I create a new MoveableObject with position defined and then console.log() it. It shows position to be what I set it to. I copy/paste that declaration and change "new MoveableObject" to "new Sprite" (with a new variable name of course) and print that, and it shows position is undefined: // Initializers for main() const gravity = 0.8; const player = new Sprite({ imageSrc: './lib/img/template.png', numRows: 21, numCols: 4, spacing: 0, margin: 0, position: { x: 0, y: 0 }, velocity: { x: 0, y: 0 } }) console.log(player) const enemy = new MoveableObject({ colorRGB: 'blue', width: 50, height: 150, position: { x: 150, y: 50 }, velocity: { x: 0, y: 0 } }) console.log(enemy) const moveableObjects = [player, enemy]; // The main function of the script updates the game state every frame. function main() { // When the game starts the canvas, then player, then enemy are rendered. context.fillStyle = 'black'; context.fillRect(0, 0, canvas.width, canvas.height); player.draw(); enemy.draw(); The error is raised on player.draw() and reads "Uncaught TypeError: Cannot read properties of undefined (reading 'x')" Does anyone understand why this is the case? It seems to me like the error is maybe produced by not properly extending my class or using super() incorrectly to pass attributes, but I haven't found an example that proves that.
How to collide a player with walls?
I'm trying to create a top down shooter game and I am using Tiled to create my map. I've made my map and exported it as a .json file. I was finally able to make the map appear in my game, but I am having a hard time making the collision work. I've been going through tutorials for hours and seem to have tried everything under the sun with no luck. I have an object layer in Tiled with the walls marked with the insert rectangle tool. I have every wall tile also marked with insert rectangle in the edit tileset menu. But I still cant get it to work. Walls are Tile Layer 1, ground is Tile Layer 2, object layer is called collision and the tile set name is tiles 48x48. Here's all my relevant code: var game = new Phaser.Game(1440, 960, Phaser.man, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var sprite //sounds var music //movement var controls var cursors //shooting var fireRate = 200; var nextFire = 0; var Bullets //map var map var walls var ground //var collision function preload() { game.load.audio('groove', ['sewer groove.mp3']); game.load.audio('gunshot', 'pistol.mp3'); game.load.image('player', 'player lite.png'); game.load.image('bullet', 'bullet.png'); game.load.tilemap('map', 'sewermap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles 48x48','tiles 48x48.png') } function create() { map = game.add.tilemap('map'); map.addTilesetImage('tiles 48x48'); //var tileset = map.addTilesetImage('map','tiles 48x48'); //map.physics.arcade.enable(sprite, Phaser.Physics.ARCADE); ground = map.createLayer('Tile Layer 2'); walls = map.createLayer('Tile Layer 1'); //collision = map.createLayer('Object Layer 1') map.setCollisionBetween(0, 65, true, 'Tile Layer 1'); //sprite.body.collideWorldbounds = true; //layer.resizeWorld(); music = game.add.audio('groove',1,true); music.play(); game.physics.startSystem(Phaser.Physics.ARCADE); //game.physics.startSystem(Phaser.Physics.P2JS) game.stage.backgroundColor = '#313131'; bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(50, 'bullet'); bullets.setAll('checkWorldBounds', true); bullets.setAll('outOfBoundsKill', true); sprite = game.add.sprite(620, 920, 'player'); sprite.anchor.set(0.5, 0.5); //game.physics.p2.enable(sprite) game.physics.arcade.enable(sprite, Phaser.Physics.ARCADE); sprite.body.allowRotation = true; cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collider(sprite, walls); //console.log(sprite.rotation); sprite.rotation = game.physics.arcade.angleToPointer(sprite); if (game.input.activePointer.isDown) { fire(); } //sprite.body.setZeroVelocity(); if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { sprite.x -= 4; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { sprite.x += 4; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { sprite.y -= 4; } else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { sprite.y += 4; } } function fire() { if (game.time.now > nextFire && bullets.countDead() > 0) { nextFire = game.time.now + fireRate; var bullet = bullets.getFirstDead(); bullet.reset(sprite.x - 8, sprite.y - 8); game.physics.arcade.moveToPointer(bullet, 300); } } function render() { game.debug.text('Active Bullets: ' + bullets.countLiving() + ' / ' + bullets.total, 32, 32); game.debug.spriteInfo(sprite, 32, 450); //game.debug.spriteBounds(sprite); //game.debug.spriteBounds(bullets); //game.debug.body(sprite); }
Alright, I've had the chance to take a look at this, the issue should solely lie in how you're moving the main player: sprite.x -= 4; Collisions only fire if the body has a velocity, the following table by samme should sum it up You can apply acceleration, for the sake of example, to move the character towards the direction you're pointing at: if (game.input.keyboard.isDown(Phaser.Keyboard.UP) || game.input.keyboard.isDown(Phaser.Keyboard.W)) { game.physics.arcade.accelerationFromRotation(sprite.rotation, 200, sprite.body.acceleration); } In the image I'm also applying a certain drag and reducing acceleration when nothing is pressed but that's your call: sprite.body.drag.x = 200; sprite.body.drag.y = 200; If you wanted to strafe an idea could be at dealing with multiple presses and applying a different accelerationFromRotation accordingly (with a variety of degrees converted with Phaser.Math.degToRad) For debug's sake, if needed, you might want to use some of the following: [...] walls = map.createLayer("Tile Layer 1"); walls.debug = true; [...] function collisionHandler(obj1, obj2) { console.log("Colliding!", obj1, obj2) } game.physics.arcade.collide(sprite, walls, collisionHandler, null, this); game.debug.body(sprite);
How can I update variables for many different images in a Javascript canvas?
I am new to Javascript in a canvas, and javascript in general. Basically, what I am trying to do is: have many different randomly spawning fire balls (images), that all start at a fixed y value and a random x value. They should then fall at a speed of a variable. I got the random x position, and the fixed y value, but I don't know how I can have a separate falling variable for each new image that tracks it's speed, such as applying this to each individual fire ball: fireBallSpeed = 10; fireBallTop = 0; if (randomSpawn == 1){ fireBallTop += fireBallSpeed; fireBall.style.top = fireBallTop + 'px'; ctx.drawImage(fireBall, randomX, fireBallTop, 50, 50); }
You should save each fireball into an array and loop over the array updating each one's position. let fireballs = [] const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') function gameLoop() { // Clear the canvas ctx.clearRect(0, 0, 800, 300) // Loop over each fireball and update their positon fireballs.forEach(fireball => { ctx.fillRect(fireball.x, fireball.y, 10, 10) // Set the new position for the next frame using the speed fireball.y += fireball.speed }) // Request another frame requestAnimationFrame(gameLoop) } function gameInit() { // Create 5 fireballs for (let i = 0; i < 5; i++) { fireballs.push({ x: Math.random() * 280, y: 5, speed: Math.random() * 2 }) } } // Init the game gameInit() // Start the game loop // This function should only be used for the drawing portion // and setInterval should be used for the logic // For simplicity I am going to use this for both requestAnimationFrame(gameLoop) <canvas width="800" height="300"></canvas>
How to make javascript canvas draw faster?
I have the following code to display an ECG. I use the canvas to draw the graph background (each grid of 2.5 mm dimension). Later I'm taking the y coordinates from an array array_1 (x coordinates are calculated within the program). The problem with this approach is it will take around 40 seconds to plot the entire graph since there are 1250 values within array array_1. What I could do is I could do the plotting part within a loop in which case, the entire graph is plotted as soon as the page is loaded. But, I need the plotting to happen over the course of 5 seconds. Not more. Not less. How would I alter the code to do this? Please help. <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <canvas id="canvas" width="1350" height="1300" style="background-color: white;"></canvas> <script type='text/javascript'> var canvas = document.getElementById("canvas"); var ctxt = canvas.getContext("2d"); var n1 = 1; var n1_x=49; //Graph x coordinate starting pixel. var n1_y=72;//Graph y coordinate starting pixel. var array_1 = []// array from which y coordinates are taken. Has 1250 elements var ctx = canvas.getContext("2d"); var x=0; var y=0; var Line_position=-1; while(x<=1350)//graph width { ctxt.lineWidth = "0.5"; Line_position=Line_position+1; if(Line_position%5==0) { ctxt.lineWidth = "1.5"; } ctxt.strokeStyle = "black"; ctxt.beginPath(); ctxt.moveTo(x, 0); ctxt.lineTo(x, 1300); ctxt.stroke(); x=x+9.43; } Line_position=-1; while(y<=1300)//graph height { ctxt.lineWidth = "0.5"; Line_position=Line_position+1; if(Line_position%5==0) { ctxt.lineWidth = "1.5"; } ctxt.strokeStyle = "black"; ctxt.beginPath(); ctxt.moveTo(0, y); ctxt.lineTo(1350,y); ctxt.stroke(); y=y+9.43; } drawWave(); function drawWave() { requestAnimationFrame(drawWave); ctx.lineWidth = "1"; ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(n1_x- 1, n1_y+array_1[n1-1]);//move to the pixel position ctx.lineTo(n1_x, n1_y+array_1[n1]);//Draw to the pixel position ctx.stroke(); n1_x=n1_x+0.374;//Incrementing pixel so as to traverse x axis. n1++; } </script> </body> </html> Here is the array: array_1 = [69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,72,72,72,72,72,72,72,73,73,74,74,74,74,74,74,74,73,73,73,73,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,74,74,74,73,73,73,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,71,72,72,72,73,73,73,72,72,72,73,73,73,74,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,73,73,73,72,72,72,71,101,71,70,70,70,69,68,68,67,67,66,66,67,67,69,70,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,74,76,77,76,70,57,40,22,11,11,22,40,57,69,73,73,71,71,71,72,72,73,73,74,74,74,73,72,72,72,72,72,72,72,72,72,72,72,72,71,71,70,70,71,71,71,71,70,70,69,69,69,69,69,69,69,68,68,68,67,67,66,66,65,65,64,63,63,62,62,62,62,62,62,62,62,63,63,64,65,66,67,68,68,69,70,71,72,72,72,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,73,73,73,73,72,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,73,73,74,74,74,74,74,74,73,73,72,73,73,73,74,73,73,72,72,72,73,73,73,72,72,73,73,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,70,70,70,70,70,69,69,68,67,67,67,67,68,69,71,72,72,73,73,73,73,74,74,74,74,74,73,73,73,73,75,77,78,76,67,53,35,18,8,10,23,41,58,69,73,72,71,70,71,72,73,73,73,73,73,73,73,73,72,72,73,73,73,73,72,71,71,70,70,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,68,67,67,67,67,67,66,65,65,65,64,63,62,61,61,61,60,60,60,59,60,60,60,61,62,63,65,66,66,67,68,69,70,71,72,72,72,72,73,73,73,72,72,72,72,72,72,72,73,73,73,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,71,72,72,73,73,73,72,72,72,72,72,72,73,73,73,73,73,73,73,73,73,72,73,73,73,73,73,73,72,73,73,73,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,71,71,70,70,69,69,69,68,67,67,66,65,66,66,68,69,70,71,72,72,73,73,73,73,73,73,74,74,74,74,74,74,76,78,78,74,64,48,29,13,5,10,26,45,62,71,73,72,71,71,72,73,73,73,73,73,74,74,74,73,72,72,72,73,73,73,73,73,73,73,72,72,72,72,71,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,67,66,66,66,66,65,65,64,63,62,62,61,61,60,60,60,60,61,62,62,63,64,65,66,67,68,70,71,72,72,72,72,72,72,73,73,73,73,73,73,73,74,74,75,75,74,74,74,73,73,73,74,73,73,73,73,73,74,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,74,74,74,73,73,73,73,73,73,73,73,73,73,72,72,72,72,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,72,72,71,70,70,70,69,69,68,68,67,67,66,67,67,68,69,70,71,72,73,73,74,74,73,73,73,74,75,75,74,73,73,74,76,78,75,67,52,32,15,5,8,22,41,59,69,73,72,71,70,71,72,72,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,70,70,70,70,70,69,69,69,69,68,68,68,68,67,67,66,65,65,64,64,64,63,62,61,60,60,60,60,60,61,61,62,62,63,64,65,65,66,67,68,69,70,71,71,71,71,71,71,72,72,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,71,71,71,71,71,71,71,72,72,72,72,72,72,72,72,72,71,71,71,72,72,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,71,71,71,70,70,70,70,69,69,68,67,67,68,69,71,72,73,73,73,73,73,73,73,73,74,75,75,75,74,74,74,75,77,77,75,67,52,34,18,10,12,26,45,62,71,74,73,72,72,72,73,74,74,74,75,75,74,74,74,74,74,74,74,74,74,73,73,73,73,74,74,73,73,73,73,73,73,73,72,72,71,71,71,71,71,70,70,70,69,69,69,68,68,68,68,67,66,65,64,63,63,62,62,62,63,63,63,63,64,65,66,67,69,69,70,71,72,72,73,73,74,74,74,74,75,75,76,76,74,72,70,70,69,69 ];
I'd probably go about the task something like this. As mentioned in a comment, we need to draw a number of the data-points per-frame. How many we draw depends on the speed that the browser is able to supply an animation frame. I've hard-coded the value to 4, since that seems to work on my machine, but with not much more work you can probably make the code time itself and adjust this value on the fly so that your animation runs for as close as possible to the target time. I had a quick go, but the results were awful, I'll leave that as an exercise in research or thought for the reader. By keeping track of how many frames we've already drawn for the current 'refresh-cycle', we know how far to index into the array for the first point to be drawn for each frame. I've tried to parameterize the code as much as possible, but it's late and I'm tired, I may have overlooked something somewhere. <!doctype html> <html> <head> <script> function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);} window.addEventListener('load', onDocLoaded, false); function onDocLoaded(evt) { drawBkg(byId('canvas'), 9.43, 5, "0.5", "1.5", "black"); drawCurFrame(); } var dataSamples = [69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,72,72,72,72,72,72,72,73,73,74,74,74,74,74,74,74,73,73,73,73,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,74,74,74,73,73,73,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,71,72,72,72,73,73,73,72,72,72,73,73,73,74,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,73,73,73,72,72,72,71,101,71,70,70,70,69,68,68,67,67,66,66,67,67,69,70,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,74,76,77,76,70,57,40,22,11,11,22,40,57,69,73,73,71,71,71,72,72,73,73,74,74,74,73,72,72,72,72,72,72,72,72,72,72,72,72,71,71,70,70,71,71,71,71,70,70,69,69,69,69,69,69,69,68,68,68,67,67,66,66,65,65,64,63,63,62,62,62,62,62,62,62,62,63,63,64,65,66,67,68,68,69,70,71,72,72,72,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,73,73,73,73,72,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,73,73,74,74,74,74,74,74,73,73,72,73,73,73,74,73,73,72,72,72,73,73,73,72,72,73,73,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,70,70,70,70,70,69,69,68,67,67,67,67,68,69,71,72,72,73,73,73,73,74,74,74,74,74,73,73,73,73,75,77,78,76,67,53,35,18,8,10,23,41,58,69,73,72,71,70,71,72,73,73,73,73,73,73,73,73,72,72,73,73,73,73,72,71,71,70,70,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,68,67,67,67,67,67,66,65,65,65,64,63,62,61,61,61,60,60,60,59,60,60,60,61,62,63,65,66,66,67,68,69,70,71,72,72,72,72,73,73,73,72,72,72,72,72,72,72,73,73,73,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,71,71,72,72,73,73,73,72,72,72,72,72,72,73,73,73,73,73,73,73,73,73,72,73,73,73,73,73,73,72,73,73,73,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,71,71,70,70,69,69,69,68,67,67,66,65,66,66,68,69,70,71,72,72,73,73,73,73,73,73,74,74,74,74,74,74,76,78,78,74,64,48,29,13,5,10,26,45,62,71,73,72,71,71,72,73,73,73,73,73,74,74,74,73,72,72,72,73,73,73,73,73,73,73,72,72,72,72,71,71,71,71,71,71,71,71,71,70,70,69,69,69,69,68,67,66,66,66,66,65,65,64,63,62,62,61,61,60,60,60,60,61,62,62,63,64,65,66,67,68,70,71,72,72,72,72,72,72,73,73,73,73,73,73,73,74,74,75,75,74,74,74,73,73,73,74,73,73,73,73,73,74,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,74,74,74,73,73,73,73,73,73,73,73,73,73,72,72,72,72,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,72,72,71,70,70,70,69,69,68,68,67,67,66,67,67,68,69,70,71,72,73,73,74,74,73,73,73,74,75,75,74,73,73,74,76,78,75,67,52,32,15,5,8,22,41,59,69,73,72,71,70,71,72,72,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,70,70,70,70,70,69,69,69,69,68,68,68,68,67,67,66,65,65,64,64,64,63,62,61,60,60,60,60,60,61,61,62,62,63,64,65,65,66,67,68,69,70,71,71,71,71,71,71,72,72,73,73,73,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,71,71,71,71,71,71,71,72,72,72,72,72,72,72,72,72,71,71,71,72,72,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,72,72,73,73,73,73,73,72,72,72,73,73,74,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,71,71,71,70,70,70,70,69,69,68,67,67,68,69,71,72,73,73,73,73,73,73,73,73,74,75,75,75,74,74,74,75,77,77,75,67,52,34,18,10,12,26,45,62,71,74,73,72,72,72,73,74,74,74,75,75,74,74,74,74,74,74,74,74,74,73,73,73,73,74,74,73,73,73,73,73,73,73,72,72,71,71,71,71,71,70,70,70,69,69,69,68,68,68,68,67,66,65,64,63,63,62,62,62,63,63,63,63,64,65,66,67,69,69,70,71,72,72,73,73,74,74,74,74,75,75,76,76,74,72,70,70,69,69 ]; function drawBkg(canvasElem, squareSize, numSquaresPerBlock, minorLineWidthStr, majorLineWidthStr, lineColStr) { var nLinesDone = 0; var i, curX, curY; var ctx = canvasElem.getContext('2d'); ctx.clearRect(0,0,canvasElem.width,canvasElem.height); // draw the vertical lines curX=0; ctx.strokeStyle = lineColStr; while (curX < canvasElem.width) { if (nLinesDone % numSquaresPerBlock == 0) ctx.lineWidth = majorLineWidthStr; else ctx.lineWidth = minorLineWidthStr; ctx.beginPath(); ctx.moveTo(curX, 0); ctx.lineTo(curX, canvasElem.height); ctx.stroke(); curX += squareSize; nLinesDone++; } // draw the horizontal lines curY=0; nLinesDone = 0; while (curY < canvasElem.height) { if (nLinesDone % numSquaresPerBlock == 0) ctx.lineWidth = majorLineWidthStr; else ctx.lineWidth = minorLineWidthStr; ctx.beginPath(); ctx.moveTo(0, curY); ctx.lineTo(canvasElem.width, curY); ctx.stroke(); curY += squareSize; nLinesDone++; } } // position that will be treated as 0,0 when drawing our points. var originX=49; var originY=72; function drawSamples(nSamplesToDraw, firstSample, lineWidthStr, lineColourStr) { var can = byId('canvas'); var ctx = can.getContext('2d'); ctx.strokeStyle = lineColourStr; ctx.lineWidth = lineWidthStr; console.log(firstSample); ctx.beginPath(); ctx.moveTo( originX+firstSample-1, dataSamples[firstSample-1]+originY ); for (var i=0; i<nSamplesToDraw; i++) { var curSample = dataSamples[i + firstSample]; ctx.lineTo( originX+firstSample+i, curSample+originY ); } ctx.stroke(); } var curFrame=0; var nPointsPerFrame = 4; function drawCurFrame() { if ((dataSamples.length - (nPointsPerFrame * curFrame)) < nPointsPerFrame) // will we over-run the end of the array of datapoints? { curFrame = 0; // if so, reset drawBkg(byId('canvas'), 9.43, 5, "0.5", "1.5", "black"); } drawSamples(nPointsPerFrame, nPointsPerFrame*curFrame, "1", "blue"); curFrame++; requestAnimationFrame( drawCurFrame ); } </script> <style> #canvas { border: solid 1px black; background-color: #FFFFFF; } </style> </head> <body> <div id='txt'></div> <canvas id="canvas" width="1350" height="1300"></canvas> </body> </html>
Update Now that I see you have provided some more info I get what you want. The problem is you need to draw a fixed number of line segments within time t. As you do not know how long each frame could take you can not rely on a fixed frame rate. The alternative it to just use the current time and save the end time. Get the start time and then each frame draw all the should be drawn until the current time. As the line segments being drawn will not be displayed until the next screen refresh the time you get will be approx 16ms behind so will need to adjust for that. What I have done is keep track of the average frame time and used half that time to estimate when the new canvas update will be displayed. Its a bit pedantic but might as well show how to get a required time as close as possible. If you dont care its a few ms out then just remove the average frame time stuff. You will be at most 30ms off on a slow machine. var canvas; // canvas var ctx; function getCanvas () { // to do // get canvas and context } function drawGrid () { // to do // draw the grid } function drawTimedLine(){ if(canvas === undefined){ // if the canvas not available get it getCanvas(); } // clear the canvas is repeating animation ctx.clearRect(0, 0, canvas.width, canvas.height); drawGrid(); var array_1 = ; // your data // All stuff needed for timed animation. // The frame you render will not be displayed untill the next // vertical refresh which is unknown, Assume it is one frame. var startDelay = 1000; // if Needed time in milliseconds to delay start var endTime; // hold the time that the animation has to end var lastDataPoint; // holds the last point drawn to var timeToDraw = 5 * 1000; // how long the animation should last var repeatAfter = 1 *1000; // if you want to repeat the animatoin var frameCount = 0; // count the frames to get average frame time var startTime; //the start time; var numberPoints = array_1.length; // number of points; var startX = 49; // line starts at var yOffset = 72; // line Y offset var endX = 512; // line ends at. var width = endX - startX; // width var xStep = width / numberPoints; // X step per point var pointsPerMS = numberPoints / timeToDraw; // get how many points per ms should be drawn // function to draw function drawWave() { // variable needed var averageframeTime, timeLeft, i, currentTime; currentTime = new Date().valueOf(); // gets the time in millisecond; if (startTime === undefined) { // Is this the first frame startTime = currentTime; // save the start time; endTime = currentTime + timeToDraw; // workout when the end time is; lastDataPoint = 0; // set the data position to the start; averageframeTime = 0; // no frames counted so frame time is zero } else { frameCount += 1; // count the frames // get the average frame time averageframeTime = (currentTime - startTime) / frameCount; } // get the time this frame // will most likely be displayed // then calculate how long // till the end timeLeft = endTime - Math.min(endTime, currentTime + averageframeTime / 2); // now get where we should // be when the frame is presented pointPos = Math.floor(pointsPerMS * (timeToDraw - timeLeft)); // now draw the points from where we last left of // till the new pos; ctx.lineWidth = 4; ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo( // move to first point lastDataPoint * xStep + startX, array_1[lastDataPoint] + yOffset ); // draw each line from the last drawn to the new position for (i = lastDataPoint + 1; i <= pointPos && i < numberPoints; i++) { // Add the line segment ctx.lineTo( i * xStep + startX, array_1[i] + yOffset ); } ctx.stroke(); // execute the render commands lastDataPoint = pointPos; // update the last point if (pointPos < numberPoints) { // are we there yet??? requestAnimationFrame(drawWave); // no so request another frame }else{ // if you want to repeat the animation setTimeout(drawTimedLine , repeatAfter ); } } // start the line animation with delay if needed setTimeout(drawWave,startDelay); } // use this if you want it to start as soon as page is ready. document.addEventListener("DOMContentLoaded",drawTimedLine); // or use if you want it to start when page has images loaded and is ready // document.addEventListener("load",drawTimedLine); I have also added the ability to repeat the animation. If not needed just remove that code My original answer Dont know what the problem is with speed as it runs quite well on my machine. To set up a better start use function startFunction(){ // your code } document.addEventListener("DOMContentLoaded",startFunction); This will wait until the page has loaded and parsed the page. Images and other media may not have loaded but the page is ready to be manipulated. Not sure what you mean with 5 seconds. Assuming you may want the thing to sart in 5 seconds. The following will do that. document.addEventListener("DOMContentLoaded",function() {setTimeout(startFunction,5000);}); I would ask why plot the graph one entry at a time with requestAnimationFrame 1250 is not that many lines to draw. If you add ctx.beginPath() ctx.moveTo(/*first point*/) then loop all points with ctx.moveTo(/*points*/) then ctx.stroke() will run realtime on but the slowest of devices. BTW ctx.lineWidth is a Number not a string. Also you have two context? Use the one context for the canvas. Remove ctxt and just use ctx and finally you don't need to add type='text/javascript' to the script tag as Javascript is the default.
1) It cannot take that long to draw 1000 lines, even 100000 lines won't take more than 10 ms on any decent Browser. Look else where the time is lost. 2) The core issue of your code is that it lacks modularity. Split your code into a few clear functions, group the parameters into a few objects only, name and indent things properly. Below an (incomplete but working) example of how this might look. var cv, ctx; var data = null; var debug = true; // --------------------------------------- // define here all graphic related parameters var gfxParams = { canvasWidth: 600, canvasHeight: 600, gridColor: '#A66', gridSpacing: 10, gridLineWidth: 0.5, gridStrongLinesEvery: 5, lineColor: '#AEB', lastLineColor: '#8A9' // , ... }; // define here all animation related parameters var animationParams = { duration: 5, startTime: -1 } // --------------------------------------- // main // --------------------------------------- window.onload = function() { data = getData(); setupCanvas(data); launchAnimation(); } // --------------------------------------- // function setupCanvas(data) { cv = document.getElementById('cv'); cv.width = gfxParams.canvasWidth; cv.height = gfxParams.canvasHeight; ctx = cv.getContext('2d'); // here you should translate and scale the context // so that it shows your data. } function drawGrid(ctx) { var i = 0, pos = 0, lw = gfxParams.gridLineWidth; ctx.fillStyle = gfxParams.gridColor; var vLineCount = gfxParams.canvasWidth / gfxParams.gridSpacing; for (i = 0; i < vLineCount; i++) { pos = i * gfxParams.gridSpacing; ctx.fillRect(pos, 0, lw, gfxParams.canvasHeight); } var hLineCount = gfxParams.canvasHeight / gfxParams.gridSpacing; for (i = 0; i < hLineCount; i++) { pos = i * gfxParams.gridSpacing; ctx.fillRect(0, pos, gfxParams.canvasWidth, lw); } } function animate() { requestAnimationFrame(animate); var now = Date.now(); // erase screen ctx.clearRect(0, 0, gfxParams.canvasWidth, gfxParams.canvasHeight); // draw grid drawGrid(ctx); // draw lines var lastIndex = getLastDrawnIndex(data, now - animationParams.startTime); drawLines(ctx, data, lastIndex); if (debug) { ctx.save(); ctx.fillStyle = '#000'; ctx.fillText(lastIndex + ' lines drawn. Time elapsed : ' + (now - animationParams.startTime), 10, 10); ctx.restore(); } } // comment function launchAnimation() { requestAnimationFrame(animate); animationParams.startTime = Date.now(); } // comment function getData() { var newData = []; for (var i = 0; i < 500; i++) { newData.push([Math.random() * 600, Math.random() * 600]); } return newData; } // comment function getLastDrawnIndex(data, timeElapsed_ms) { var timeElapsed = timeElapsed_ms / 1000; if (timeElapsed >= animationParams.duration) return data.length - 1; return Math.floor(data.length * timeElapsed / animationParams.duration); } function drawLines(ctx, data, lastIndex) { ctx.strokeStyle = gfxParams.lineColor; // other ctx setup here. for (var i = 0; i < lastIndex - 1; i++) { drawLine(ctx, data[i], data[i + 1]); } ctx.strokeStyle = gfxParams.lastLineColor; drawLine(ctx, data[lastIndex - 1], data[lastIndex]); } function drawLine(ctx, p1, p2) { ctx.beginPath(); ctx.moveTo(p1[0], p1[1]); ctx.lineTo(p2[0], p2[1]); ctx.stroke(); } <canvas id='cv'></canvas>
Trouble animating spritesheet in EaselJS
I'm trying to animate a spritesheet using EaselJS, but I keep getting an uncaught type error: undefined is not a function on this line - bmpAnimation = new createjs.BitmapAnimation(spriteSheet); Here is my code so far: // JavaScript Document window.onload = function(){ //Creating a new Stage instance, passing in our canvas element's ID. var stage = new createjs.Stage("canvas"), imgMonsterARun = new Image(); imgMonsterARun.src = "img/MonsterARun.png"; var spriteSheet = new createjs.SpriteSheet({ // image to use images: [imgMonsterARun], // width, height & registration point of each sprite frames: {width: 64, height: 64, regX: 32, regY: 32}, animations: { walk: [0, 9, "walk"] } }); // create a BitmapAnimation instance to display and play back the sprite sheet: bmpAnimation = new createjs.BitmapAnimation(spriteSheet); // start playing the first sequence: bmpAnimation.gotoAndPlay("walk"); //animate // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds // of animated rats if you disabled the shadow. bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4); bmpAnimation.name = "monster1"; bmpAnimation.direction = 90; bmpAnimation.vX = 4; bmpAnimation.x = 16; bmpAnimation.y = 32; // have each monster start at a specific frame bmpAnimation.currentFrame = 0; stage.addChild(bmpAnimation); createjs.Ticker.setFPS(60); createjs.Ticker.useRAF = true; createjs.Ticker.addListener(window); function tick() { // Hit testing the screen width, otherwise our sprite would disappear if (bmpAnimation.x >= screen_width - 16) { // We've reached the right side of our screen // We need to walk left now to go back to our initial position bmpAnimation.direction = -90; } if (bmpAnimation.x < 16) { // We've reached the left side of our screen // We need to walk right now bmpAnimation.direction = 90; } // Moving the sprite based on the direction & the speed if (bmpAnimation.direction == 90) { bmpAnimation.x += bmpAnimation.vX; } else { bmpAnimation.x -= bmpAnimation.vX; } // update the stage: stage.update(); } tick(); }; Any help would be appreciated.
In 0.8.0 you can use the normal SpriteSheet to create an animated SpriteSheet. Checkout the Demo on http://createjs.com/Demos/EaselJS/SpriteSheet (make sure to check the code under "live-edit" ;-))
Try using "Sprite" instead of "BitmapAnimation". That is bmpAnimation = new createjs.BitmapAnimation(spriteSheet); becomes bmpAnimation = new createjs.Sprite(spriteSheet); Worked for me.