Custom canvas drawing

[Johan Euphrosine]

Hi,

We are looking forward using tile5 for a web based mobile game client
for the playground project (http://playground.mekensleep.com/), and I
was wondering how to implement custom canvas drawing over tile5
layers.

So far I came up with the following hack (http://
playground.mekensleep.com/~proppy/tile5hacking/), forcing
T5.isTweening to true, in order to force CustomLayer redraw, but I was
wondering if there was a better way to do it:

// force
redraw
T5.isTweening = function() {
return true;
};

var CustomLayer = function(params) {
params = T5.ex({
zindex: 999,
}, params);

var noise1 = noise({x: 200, y: 200, size: 128});
var noise2 = noise({x: 300, y: 400, size: 128});

var self = T5.ex(new T5.ViewLayer(params), {
draw: function(context, offset, dimensions, state, view,
redraw) {
noise1(context);
noise2(context);
}
});

return self;
};

var noise = function(args) {
return function(context) {
context.save();
context.fillStyle = "#FF00FF";
context.translate(args.x, args.y);
for (var x = 0; x < args.size; x+=1) {
for (var y = 0; y < args.size; y+=1) {
if (Math.random() > 0.5) {
context.fillRect(x, y, 1, 1);
}
}
}
context.restore();
};
};

Thanks in advance.

[Damon Oehlman]

Hey Johan,

Yep - I can definitely provide some information on how to get a layer to flag that it has been updated.  I'm just out for a couple of hours this morning, but as soon as I am back in the office I will shoot through some info.

Cheers,

Damon.

--
Damon Oehlman
http://distractable.net/

[Damon Oehlman]

Johan,

I think for the moment, that is the way you are going to have to go.  I've had a look through the Tile5 source and I don't think I've provided the best support for what you are trying to do.  All the pieces are there, but not as clear as they should be to use.  

I'll make some changes for the next release and push them up to github soon, so if you are feeling brave you should be able to try this stuff out in the next day or two.

Thanks for getting in there and having a go - I'll be interested to see what you can pull off :)

Cheers,

Damon.

[Jeremy Arnold]

I've been playing with something similar and keep meaning to ask about it.
My attempt is drawing annotations / graphics on the map using canvas
instead of images (based on a copy of the default annotation
implementation)

There seems to be some serious performance issues though as panning a
map with 180ish complex annotations does not animate.

More importantly more simple annotations do not render consistantly, I
suspect sometimes they are drawn twice (they appear twice as
"bright"), often the glitches are at tile edges. (see attached
screenshot)

Code is here: http://paste2.org/p/1110799

I was also hoping to animate and/or update the annotations in
real-time. From the animated routing example I know it should be
possible.

Should I ditch the annotations and use a custom layer like Johan?
Any advice / suggestions?

I am willing to release what I do on git and maybe even write some
documentation.

BTW I am pulling from git almost daily... :)

Regards,
Jeremy

fyi, I have reasonable knowledge of openlayers and GIS as my day job
involves web mapping.

[Damon Oehlman]

Hey Jeremy,

Love the look of what you are doing.  Let me have a look at the code and I'll see what I can suggest.  It has taken a bit but I'm getting close to the point where managing transparent layers and efficient drawing using the canvas is getting more reliable and this will prevent a lot of the "double drawing" that you are seeing.  

One thing I would try is creating 

From a performance perspective you are right, what you are trying to do is going to be a little tough using an annotation based implementation, but I think there are some things worth trying that may yield some performance gains.

I would try creating offscreen canvases for the light glows of various sizes, i.e. determine the size you need, maybe colour as well if you are thinking of having different colours down then track and then checking to see if you have a glow of the appropriate size available.  If you don't then you create it and "cache it".  A bit more memory would be used, but I think the performance benefit would probably be worth it.

You would want to do this outside of the actual T5.Glow class though so you could have a "pool of lights" that any T5.Glow annotation could access and use.  Does this make sense?

Back on the double drawing, I will do some tests and see how things are behaving.  One thing I have done is added an additional configuration option to a T5.ViewLayer to specify that it is transparent.  Have a look at T5.PolyLayer (/src/js/geo/poly.js) for an example on how it's used, but I don't think it's quite perfect yet.  

One thing I think I will do is to add the ability to turn on a "standard draw" mode for any T5.View which pushes back to using a more traditional, but less optimal draw process.  Currently everything is pretty much in a draw only if you think you have to mode to assist with performance on mobile devices, but does complicate the process of using transparent animated layers.  In standard draw, everything would just work :)

Cheers,

Damon.

[Damon Oehlman]

Hey All,

Actually doing a little refactoring on this right now.  Forget the transparent layer flag, I'm making that the behaviour by default - just making sure I haven't broken anything else now...

As per the animation changes, the updates will be pushed to the sandbox branch in github and I'll let you know when they are available (along with some info on how to use them).

Cheers,

Damon.

[Damon Oehlman]

OK - changes have been pushed to the sandbox branch in github with improved support for transparency in both layers and markers.

Additionally, I have put together a sandbox demo that shows how fairly simple custom markers can be created (nothing as ambitious as what Jeremy is attempting) but I think it shows that the double draw problems are pretty much solved. 

Anyway, check it out and let me know what you think:

http://sandbox.tile5.org/code/716522

Feel free to fork the gist, go nuts, and share with the group :)

Cheers,

Damon.