[PLUGIN] Canvas

vtrix

You could use the canvas for that. You want to be able to change the tile graphics at runtime right?

One thing to keep in mind is you should only have only one canvas instance per texture to save vram and just position and paste into every location.

The "paste" action already does the relevant calculations so the pasted object at the correct location on the canvas. As far as seams, if they show up you could make the tiles slightly bigger so they overlap a bit.

For performance the tilemap object would be the best way to go, but you do get more flexibility using the canvas.

yes, indeed at runtime, one texture was what i had in mind, so it would combine about 30+ sprites in one texture

still getting my head around, converting the same tiletechnique to one texture,would i need to redraw the full texture or only a part?

thanks for the answer, i need to invest some time in the idea...

Hello R0J0hound

Following your trail example http://dl.dropbox.com/u/5426011/examples%208/canvasTrail.capx I tried to replicate the trail effect http://www.eli0s.com/Tests/TowerLaser.capx and I was wondering why there is a trace left visible behind? Shouldn't the destination out object add to its self to the point that the trail is completely transparent?

In an other case, I tried to fill the canvas with a color ("rbga(0,0,0,0.1)"), the canvas does get darker and darker but the same kind of trace is being left behind.

Any ideas? Does this happens to anybody else? Am I doing something wrong here, because even on R0J0hound example the same thing happens?

Thanks!

I goes completely transparent for me on my computer. I don't know why it wouldn't... Does it fade at all?

I goes completely transparent for me on my computer. I don't know why it wouldn't... Does it fade at all?

Yes, it does fade but not completely, a small trace is left behind. See the photos below.

This is a screen capture from your example:

On my monitor the trace is faint but clearly visible.

Here I manipulated the brightness and contrast in Photoshop to enhance it. If the trail was 0% opaque in the first place, it shouldn't be visible at all, even with the brightness and contrast added, right?

Hmm... It's still completely invisible for me in the first pic. Either way there isn't anything I can do about it in the plugin. One idea you could try is to start with the canvas completely white, aka not transparent at all...

Just tested that and it doesn't work. If finally was able to see it by tilting my screen. I think it's caused by number rounding when the colors blend. A solution that works is to use an additive blend instead.

https://dl.dropboxusercontent.com/u/542 ... itive.capx

R0J0hound

Thank you very much, that did the trick, now the trail fades completely, even if the "eraser" sprite has a very low opacity value, thus producing long, beautiful trails

I took the liberty and arranged your example in a way that displays side to side comparison of both methods and I have to say that the results are very ...transparent

http://www.eli0s.com/Tests/CanvasTests/CanvasAdditiveBlend.capx

Thank you again

Elias

R0J0hound eli0s

Hey! I've been trying out the trail effect as well, noticed two issues with using additive blend:

1. It doesn't display any background or layers underneath, just covers it with a white canvas.

2. It doesn't work well with the eraser set to a colour that isn't white.

Unfortunately I can confirm that... R0J0hound is there a way around the "number rounding when the colors blend" (what ever this thing is ) ? I find it strange that no one has mentioned this before..!

-EDIT-

I thing the problem is that the "eraser" object (or the fill canvas with color) never actually adds up to be fully opaque, in other words it never reach 100% of its color value.

See the following example:

http://www.eli0s.com/Tests/CanvasTests/CanvasNotReachingBlack.capx

I use two canvas objects, on the left one, every tick I fill the canvas with black at 0.01 alpha and on the right I paste a black sprite object with 1% opacity. In theory, in both cases after 100 clicks (~1.4 seconds) the canvas objects should be completely covered with black. But the results are different. They are not the same, the paste sprite method renders darker results than the fill canvas, but never the less it's far from being fully opaque.

I've wrangled with this problem in the past as well. I find it's especially noticeable with a black background and trying to make trails that fade to transparent.

If it's a rounding problem, could a float with higher precision be used behind the scenes to represent the color instead, and it would only round the value when determining what color to set the pixel to, but still leave the precise float behind for any later calculations?

I behavior is in the web browser's canvas, so I can't do anything about the issue as it is. The only idea that would work is looping over all the pixels in javascript to have more control, but it will be very slow since it would be done on the cpu instead of the gpu.

So unless another creative solution is found the fastest way will probably be to use fading sprites.

So unless another creative solution is found the fastest way will probably be to use fading sprites.

R0J0hound can you please show as a practical example with fading sprites..? I tried to use the fade behavior or setting the sprite into an empty frame after a few seconds, but the result is that the main sprite (the one that should leave the trail) just disappears.

There is a link in the How Do I section to a trail effect. Here's a very simple example:

https://www.scirra.com/forum/is-there-a-way-to-give-a-sprite-a-trail_p557543?#p557543

Also, just found this more useful example. Not sure of original author, but thanks to them anyway.

zenox98

All of those examples basically can be summed in to two categories. The first uses a sprite as a trail and this sprite is being spawned every tick or x seconds. The second uses the canvas plugin in some way, just as in the R0J0hound's example found in page 5 in this topic.

The first method, although very flexible, has a major disadvantage, if you have many objects that leave trails (and further more the trails are long), you have to spawn many-many sprites, so there ought to be a performance issues somewhere.

The second method, on the other hand, does not require any number of sprites, but I renders a weird result, best viewed when the opacity values of the "fill canvas with color" action, or the object that has the destination out blend, are very low. The thing is that you'll need low opacity values if you want long trails.

I was hopping that in his last post, R0J0hound has something in mind that uses the canvas object and he was not referring the methods that are under the "spawn sprite trails" category...

Neither example makes use of the canvas plugin at all.