replacing canvas calls in wtg
Shri

Gio,

In my current WTG project, I am drawing lines and filling polygons for the map using canvas calls. The standard, lineTo, moveTo, fill stuff.

For example, to color the various "biomes" on the map, each polygon on the map has an individual color sprite with a setDrawFunction(Add canvas calls here to do color fill) and then that sprite is attached to a global scene object for display and update.

Looking around at what others are doing in this regards, it seems like using svg calls is the way to go ? But then, I would just be rewriting the canvas routines as svg routines ? Anyway, I was wondering if you had any suggestions on how to make the drawing part more up to date / efficient.

As usual any help you can provide is appreciated

cheers - shri

All 3 Comments
Gio

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 :)

Shri

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

Gio

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'

Post a reply
Add Attachment
Submit Reply
Login to Reply