flame_2d_basic

Simple example project showcasing the basics of 2d transformations.

This game intentionally does not use the built-in Camera system from Flame; instead it has simple implementations of multiple types of coordinate transformations for basic 2d games. You can change the camera mode by pressing M.

It also includes two possible choices for physics system; top-down or platformer. Press P to switch between them.

2d Projections

These are the projections available in the game:

No camera

Just scales to screen size. Does not translate. Does not preserve aspect ratio.

    final scale = size.clone()..divide(worldSize);
    canvas.scaleVector(scale);

Or in matrix form:

    final scale = size.clone()..divide(worldSize);
    canvas.transform(
      (Matrix4.identity()..scale(scale.x, scale.y, 1)).storage,
    );

Fixed Aspect Ratio Camera

Setup:

    final scale = min(size.x / screenSize.x, size.y / screenSize.y);
    canvas.scale(scale);
    canvas.translateVector((size / scale - screenSize) / 2);
    canvas.clipRect(screenSize.toRect());

Basic version:

    canvas.translateVector(-cameraPosition + screenSize / 2);

Or in matrix form:

    canvas.transform(
      (Matrix4.identity()..translate2(-cameraPosition + screenSize / 2))
          .storage,
    );

Expand Camera

Expand to fit the canvas. Does not respect aspect ratio.

    final scale = size.clone()..divide(screenSize);

    canvas.scaleVector(scale);
    canvas.translateVector(-cameraPosition + screenSize / 2);

Or in matrix form:

    canvas.transform(
      (Matrix4.identity()
            ..scale(scale.x, scale.y, 1)
            ..translate2(-cameraPosition + screenSize / 2))
          .storage,
    );