HTML and CSS Reference
In-Depth Information
//-----------------------------
this.create=function(width,height)
{
this.x = -1;
this.y = -1;
this.w = width;
this.h = height;
//create a brand new canvas object, which is NOT attached to the dop
//this will make the canvas 'offscreen' in that we can render into it, use it, but it
//will not be visible to the end user directly
var can2 = document.createElement('canvas');
can2.width = width;
can2.height = height;
this.cvsHdl = can2;
this.ctx = can2.getContext('2d');
};
In the forward-rendering model, you needed to add viewport culling to reduce the number of draw calls per
frame. Although you now have fewer objects to draw, you must still do viewport culling in order to reduce the
number of pixel-processing operations that occur unnecessarily. As such, your canvasTile class contains an
isVisible function:
function CanvasTile(){
//.....................
//-----------------------------
this.isVisible=function()
{
var r2 = gMap.viewRect;
var r1 = this;
return gMap.intersectRect( {top:r1.y,
left:r1.x,
bottom:r1.y+r1.h,
right:r1.x+r1.w},
{top:r2.y,
left:r2.x,
bottom:r2.y+r2.h,
right:r2.x+r2.w});
};
}
The goal of this technique is to be able to prerender the entire map into separate canvasTiles and then render
only the visible ones during the main loop. As such, you have to create a container to hold all the canvasTiles, such
that the map can fill and iterate on them:
gMap.canvasTileSize={"x":1024,"y":1024};
gMap.canvasTileArray=[];
Search WWH ::




Custom Search