Rendering many pixels efficiently and aesthetically

[Darker]

I am making simple game which looks a little like snake, only your tail doesn't move. You can see it here: http://u8.8u.cz/lines/ My problem with current setip is that it eats all the processor:

GameRenderer.prototype.startRendering = function() {  //Do not start multiple rendering chains  if(this.rendering)    return;  //Set up rendering lock  this.rendering = true;  var _this = this;  // run the render loop  animate();  function animate() {    // Draw pixel grids over each other (currently, only one exists at a time)     if(_this.pixels!=null)      _this.drawPixels();    _this.renderer.render(_this.stage);    //This check shouldn't be necessary as rendering is synchronous but you never know...    if(_this.rendering)      requestAnimationFrame(animate);  }}/** * Draws all pixel grids on screen. **/GameRenderer.prototype.drawPixels = function() {  var gr = this.gameMap;  //When I didn't remove the map every time, it didn't update  this.stage.removeChild(this.gameMap);  gr.clear();  for(var i=0,l=this.pixels.length; i<l; i++) {    var px = this.pixels[i];    // Classic X/Y loop below    for(var y=0,yl=px.length; y<yl; y++) {      var r = px[y];      //If pixel row is empty it is undefined      if(r!=undefined) {        //console.log("Checking row.");        for(var x=0,xl=r.length; x<xl; x++) {          // Non zero pixels are occupied          if(r[x]!=0) {            gr.lineStyle(0, 0x0000FF, 1);            gr.beginFill(px.lineByIndex(r[x]).color, 1);            gr.drawRect(x+this.offsets[0], y+this.offsets[0], 1, 1);          }        }      }    }  }  this.stage.addChild(this.gameMap);}

This eats up whole processor even when the game is not running. When I switch to another tab the CPU usage drops immediatelly, demonstating usefulness of requestAnimationFrame.

 

Can you please give me better idea of how to render the game grid? Also, keep in mind that it's a game grid and does not need to be rendered exactly as it is. I would even prefer if it looked more smooth and plastic.

 

I'd like to make it larger and add player names to the heads of "snakes". So what are first steps?

 

I looked at all the tutorials and all I see is how to draw sprites. But this map is consistently updating...

[xerver]

First, your "drawPixels" can get really expensive. Adding/removing a child each frame will be costly, as will completely redrawing a Graphics object. If you don't have your tail move, why do you need to redraw all of it?

 

Another thing I notice is that `startRendering` creates a render loop, but there is no way to clear it. I hope you are only calling `startRendering` one time ever, because multiple calls will be multiple loops.

[Darker]

The loop is locked, so far I didn't need to clear it, so there's no way to do so.

 

But yeah, I need to redraw the whole pixel array because pixels may also dissapear or appear at random locations - I plan on some fun features in the game. The only optimization I can do, and I did, is to only redraw when pixel array has changed.