Need help with PIXI.js optimization
I am creating a game similar to guitar hero but for piano. This is an early prototype where notes are created and animated. It creates 15,000 notes and then animates them downward. I need this to run smoothly, but currently the frame rate is where I want it. If you have any recommendations for optimizations, please fork and send me your improvements.
by MicahHauge
CSS
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
JavaScript
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// timing stuff
var startTime = performance.now() / 1000;
// note scaling stuff
var noteWidth = canvasWidth / 52;
var whiteKeyLen = 120*noteWidth/23;
var noteAreaHeight = canvasHeight;
// Divides the screen up into a grid. One second is one unit on the grid.
// So, it will take a note yGrid seconds to go from the top of the screen to the bottom.
// The update function will adjust the speed of notes based on ySlope to keep proportion.
var yGrid = 2;
var yScale = noteAreaHeight / yGrid;
var ySlope = (noteAreaHeight / 2 - noteAreaHeight) / (.5 * yGrid);
// Autodetect, create and append the renderer to the body element
var renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHeight, { backgroundColor: 0xFFFFFF, antialias: false});
document.body.appendChild(renderer.view);
// Create the main stage for display objects
var stage = new PIXI.Container();
// notes array
var notes = [];
// Initialize the pixi Graphics class
var graphics = new PIXI.Graphics();
// note styling
var naturalNoteColor = 0x66ccff;
// container to hold note graphics for animation
var group = new PIXI.Container();
// function to create note object
function Note (pitch, startTime, len) {
// set timing and pitch
this.startTime = startTime;
this.stopTime = startTime + len;
// coordinated of note.
var x = pitch*noteWidth;
var y = -1*startTime*yScale;
var length = len*yScale;
// Graphics
var noteGraphics = new PIXI.Graphics();
noteGraphics.beginFill(naturalNoteColor);
noteGraphics.drawRoundedRect(x, y, noteWidth, length, 5);
noteGraphics.endFill();
this.graphic = noteGraphics;
return this;
}
// loop to create 15,000 notes for benchmark purposes notes
for (var i = 0; i < 1000; i++) {
x = i;
while (x > 20) {
x -= 20;
}
for (j = 0; j < 15; j++) {
note = new Note(x+j*2, .15*i, .15);
notes.push(note);
}
}
// add all note graphics to group and set visible = false
for (i...