Setting up FlameGame for pixel art

[projectitis]

Hi there,

What's the recommended way to set up the FlameGame for pixel art for each of these two approaches below? (code snippet welcome :) ) -

Scale root canvas

Scale everything from the root x10 with no smoothing, so that each pixel is 10x10 pixels.
A sprite moving by 1 pixel would actually move by 10 pixels.

Scale each sprite

Scale each sprite x10 with no smoothing, so that each pixel is 10x10 pixels.
A sprite would need to move by 10 pixels to align to other sprites (this allows for smoother movement)

Any help appreciated!

[erickzanardo]

In my experience, scaling the whole viewport is simpler and more effective since it is done once per render, not to mention that doing the viewport, you need to write code to scale each individual sprite

[projectitis]

Thanks @erickzanardo - I'm after a snippet/example of how to achieve these two things. Any idea? :)
Sorry, will update my question!

For example, I've been trying to scale sprites, but can't work out how to turn off antialiasing. Same with TextComponent

[erickzanardo]

I can't write any snippets right now, but this might help you

If you use Flame's camera Api, and use the fixed viewport, you will be able to achieve that super easily, you can just define the resolution that you want and then design your sprites all without any scaling, flame will take care of scaling the viewport for you

Flame have two camera APIs, the current one and the experimental one

Current: https://docs.flame-engine.org/1.7.0/flame/camera_and_viewport.html#

Experimental: https://docs.flame-engine.org/1.7.0/flame/camera_component.html#viewport

Both will be able to do what you need, but the current one will eventually be deprecated in favor of the experimental one.

[projectitis]

Thanks @erickzanardo

For scaling SpriteComponents it was as easy as settings up a fixed resolution viewport:

camera.viewport = FixedResolutionViewport(Vector2(320,240), clip: false);

This shows very nice crisp scaled sprites with no antialiasing.
However, any text rendered using a TextComponent is still smooth. Any idea how I can scale these in the same way?

[erickzanardo]

For text, you will probably need to use a bitmapfont, which are sprites that you can write text with, using the same API of writing text based on fonts, or to use a pixel art font.

When drawing text with font files, they will scale up and down indefinitely, because font files are in a way similar to SVG, so you will never be able to get that pixelated feel.

Unless you really want to keep your requirements retro, I would advice to use a pixel art font as it would be way easier and the end result would be the same. If you looking for a good pixel art font, I suggest the Press Start 2P from google fonts, it is my favorite!

[projectitis]

Thanks @erickzanardo - no worries. I'm quite familiar with bitmap fonts - and bitmap-style TT fonts. I'm the author of this. I'll likely use a bitmap style font at the correct font size to look pixelated. I'm an experienced dev, but brand new to flutter and flame, so I'm learning I a lot, and just wanted to know other options I might have.

Speaking of other options - is it possible to render text to an intermediary surface, then scale that surface and use it as a sprite (for example)?

[projectitis]

It's looking promising, anyway (using a bitmap-style ttf)!
NB: Art for this test by Dani/NostalgicTree

[st-pasha]

For text rendering, we have SpriteFontRenderer (https://github.com/flame-engine/flame/blob/main/packages/flame/test/text/sprite_font_renderer_test.dart), specifically for rendering text using sprite-based fonts.

[erickzanardo]

Thanks @erickzanardo - no worries. I'm quite familiar with bitmap fonts - and bitmap-style TT fonts. I'm the author of this

Wow, this is super cool, you just got yourself a star and I've bookmarked that, will try to use in on of my projects!

Speaking of other options - is it possible to render text to an intermediary surface, then scale that surface and use it as a sprite (for example)?

Yeah, sure, flutter have you covered in that, Wrote the following example very quickly, so I haven't tested it, but hopefully my memory serves me well and this will work or give you some a path to follow:

final recorder = PictureRecorder()
final canvas = Canvas(recorder);

canvas.draw...

recorder.endRecorder();
final picture = recorder.toPicture();
final image = picture.toImage(200, 200); // width and height
final flameSprite = Sprite(image);

[projectitis]

Just to round off this discussion - I ended up going for the approach where all Sprites and assets are scaled individually, rather than scaling the viewport. This has a couple of benefits:

• Some assets can be unscaled/unpixelated if required - like dialogs or other things
• It allows the addition of lighting, blur and other effects (which should not be scaled)
• It allows the choice to move assets smoothly as well as move assets by 'pixel' steps

Having said all that, I implemented a new BitmapSpriteComponent that always snaps to a pixel boundary. Just extend/use this instead of Sprite. The scale of the sprite itself is used as the pixel size (x and y can be scaled differently). This could be simplified if Canvas allowed to set or reset the transform directly, but it only allows multiplication, so the math is little more complicated (but not much) because of that. Has not been tested when sprite is rotated.

/// bitmap_sprite.dart

import 'dart:ui';
import 'package:flame/components.dart';

class BitmapSpriteComponent extends SpriteComponent {

  final Float64List _pixelSnapTransform = Float64List.fromList([
      1.0, 0.0, 0.0, 0.0,
      0.0, 1.0, 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,
      0.0, 0.0, 0.0, 1.0]);

  @override void render(Canvas canvas) {
    _pixelSnapTransform[12] = -(position.x / scale.x - (position.x / scale.x).floor());
    _pixelSnapTransform[13] = -(position.y / scale.y - (position.y / scale.y).floor());
    canvas.save();
    canvas.transform(_pixelSnapTransform);
    super.render(canvas);
    canvas.restore();
  }

}

This is just a general dart question rather than flame, but would this be more performant if the Float64List was a private class property and persisted rather than created each time render is called? Not sure what sort of optimisation the dart compiler does.

p.s. Thanks for the star :)

[erickzanardo]

if the Float64List was a private class property and persisted rather than created each time render is called?

I don't think you can save the instance created there right? You need to calculate dx and dy, which are based in the position which will change overtime right?

But as a thumb rule, whenever you can, it is good to avoid instantiating things in render because that runs for every frame, although this is such a simple instantiation that you will probably not notice any issues.

No problem for the star, totally deserving :D

[projectitis]

Thanks for that. I've updated the code above so that the transform is persisted.