Hi Shri

Personally I wouldn't switch from canvas to svg. Canvas is orders of magnitude faster in most browsers.

Now I haven't looked at your code, but if you are using canvas polygons and fill functions to draw your tiles, you may want to call Sprite.cache to speed things up. Sprite.cache uses your current draw function to draw an image to an off-screen canvas, and subsequently uses this new canvas with Wade's standard draw functions to draw the sprites. This means that your canvas polygons are drawn once, not every time the sprite is drawn. Depending on how complex your draw function is, this could speed things up massively.

Another side benefit of doing that, is that you can keep your layers in their default webgl mode and benefit from sprite batching on systems that support webgl.

By the way, your Wtg looks great - keep it up :)

Gio,

Thanks for the info, in a nutshell, this is what I am doing when adding biome colors to map polygons.

Where should I add the sprite cache call ? In the fillCell function, or when the sprite is returned or after the sprite is attached to the scene object ?

Does it matter that I am setting up the map layer as 2d ?

// In the main app, the map draw layer is set to 2D
wade.setLayerRenderMode(wade.app.MAP_LAYER,'2d');

// then in wtgMap.js, I create a scene object to attach all the sprites to
var mSceneObject =  new SceneObject(0,0,0,0);
wade.addSceneObject(mSceneObject);

// then when the map is created and colored with the biome colors
// this for loop is called for all the polygons
for (var i=0; i<mappedPolygons.length; i++) {
	var cell = mappedPolygons[i];	
	var cellColor = DISPLAY_COLORS[cell.biome];
	var fsp = self.fillCell(cell,cellColor);
/*
ADD SPRITE CACHE CALL HERE ???
        fsp.cache();
*/
	mSceneObject.addSprite(fsp);

/* 
ADD SPRITE CACHE CALL HERE ???
        fsp.cache();
*/
};	// end for mappedPolygons

// the fillCell function looks like this
this.fillCell = function(cell,fillColor) {
	var fillColor =  fillColor || 'red';
	if (!cell) { return null; }
	var fillSprite = new Sprite(0,mLayer);
	fillSprite.setDrawFunction(function(context){
		context.beginPath();
		context.fillStyle = fillColor;
		context.strokeStyle = fillColor;
		context.moveTo(cell[0][0],cell[0][1]);
		cell.forEach((point) => { context.lineTo(point[0],point[1]); })
		context.fill();
		context.stroke();
	});	// end setDrawFunction
/*
ADD SPRITE CACHE CALL HERE ???
        fillSprite.cache();
*/
	return fillSprite;
};	// end fillCell

As usual any help you can provide is appreciated

cheers - Shri

Hey Shri

It looks correct to me. You could do it in either place, it doesn't really matter - as long as you do it after setting the draw function and before the sprite is drawn.

When you call Sprite.cache, the sprite is drawn to an off-screen canvas. Now if the Sprite is on a '2d' layer, it will be drawn on a 2d canvas, otherwise it will be drawn on a webgl canvas. Since you're using 2d canvas draw functions (fill, stroke, etc), you want the sprite to be on a 2d layer when you call Sprite.cache().

This however doesn't mean that you can't move the Sprite to a webgl layer after calling Sprite.cache(). Or you could keep doing what you're doing there, but after all sprites have been cached, you can change the render mode of the map layer to 'webgl'