Layers?

[mindplay-dk]

Hi,

Wonderful, fun little framework! 😃

I am new to Flutter as well as to Flame, so I've looked at the documentation for Canvas as well as the Flame docs and tutorials, and maybe I don't know what to look for - but is there any support for layers of any sort?

For example, I'd like to have a background layer, and a separate layer with some tiles, and the tile layer would be rendered with a drop shadow.

I could of course loop over the tiles and render individual shadows under every tile first, but that wouldn't perform very well (and wouldn't look quite right either) since I'd be painting individual, overlapping shadows progressively.

What I'd like to do is draw the tiles on a layer (or buffer, or separate canvas) of some sort, and then draw the rendered tile layer in one operation, with a drop shadow.

Anything like that possible? 🙂

[mindplay-dk]

In the minimalist spirit of the library, without introducing more architecture or concepts, if I could simply draw on a big, blank sprite, and then draw the sprite, maybe that would work?

[erickzanardo]

Hey, sorry, I saw your issue yesterday, but was kind busy and couldn't answer before.

Indeed Flame does not provides anything regarding that, usually, we rely a lot on the Canvas API and don't implement much stuff like that.

I found a method saveLayer on the Canvas, but I couldn't test it yet, and I am not sure if it does what you need.

You sure could do the individual sprite thing, In fact I have done that on this example: https://github.com/fireslime/flame-examples/blob/master/shadow_sprites/lib/main.dart, but yeah, that can have perfomance implications, although I think you would only suffer from perfomance on a absurd number of sprites.

That second idea of the empty sprite could work, but it is not very easy to accomplish that, you could use a Picture Recording to obtain a canvas to draw, than convert it to an image, and then draw it, and its shadow, we use this technique on our Flare support, you can see an example here: https://github.com/flame-engine/flame/blob/master/lib/flare_animation.dart#L123

Hopefully that can help you. Let me know if any of this worked.

[luanpotter]

We have the priority property to determine kind of the zindex of components. other than that, to determine "layers" as pre-rendered group of objects, I use PictureRecorder to create a in memory image. For example, for Tile maps, I draw the tiles on an image and then render that image on the canvas. Not sure if these concepts help you. Would be cool to try to figure out something more akin to a layer to help out!

[erickzanardo]

We have the priority property to determine kind of the zindex of components. other than that, to determine "layers" as pre-rendered group of objects, I use PictureRecorder to create a in memory image. For example, for Tile maps, I draw the tiles on an image and then render that image on the canvas. Not sure if these concepts help you. Would be cool to try to figure out something more akin to a layer to help out!

I am on it, should submit a PR soon.

[spydon]

jrsonica mentioned on Discord that the current implementation won't work with web yet, just thought I'd put the referenced issues here so that we keep track of them: drawPicture: https://github.com/flutter/flutter/issues/48491 saveLayer: https://github.com/flutter/flutter/issues/48417

[erickzanardo]

jrsonica mentioned on Discord that the current implementation won't work with web yet, just thought I'd put the referenced issues here so that we keep track of them:

drawPicture: https://github.com/flutter/flutter/issues/48491

saveLayer: https://github.com/flutter/flutter/issues/48417

Awesome, thanks for opening the issues, but I am almost sure that those methods works when using the skis method, which should always be used when developing games for web with flame.

Although it would be good if it worked without skia, as it easy for development process

[erickzanardo]

Fixed on #371