fledge_render_2d #

2D rendering components for Fledge games. Sprites, cameras, animation, and texture atlases.

Features #

• Transform2D: Position, rotation, and scale with hierarchy support
• Camera2D: Orthographic camera with viewport control
• Sprites: Textured quad rendering with materials
• Texture Atlases: Sprite sheets with frame-based animation
• Animation: Clip-based animation with playback control
• Pixel Perfect: Utilities for crisp pixel art rendering

Installation #

dependencies:
  fledge_render_2d: ^0.1.0

Transforms #

Use Transform2D for local transforms relative to parent:

import 'dart:math' as math;

world.spawn()
  ..insert(Transform2D(
    translation: Vector2(100, 200),
    rotation: math.pi / 4,
    scale: Vector2.all(2),
  ));

The TransformPropagateSystem computes GlobalTransform2D from the entity hierarchy.

Camera #

Create a camera with Camera2D:

world.spawn()
  ..insert(Transform2D.from(0, 0))
  ..insert(Camera2D(
    projection: OrthographicProjection(viewportHeight: 20),
    pixelPerfect: true,  // Snap to pixels for crisp rendering
  ));

Sprites #

Render textured quads with Sprite:

world.spawn()
  ..insert(Sprite(texture: playerTexture))
  ..insert(Transform2D.from(100, 200));

Or use SpriteBundle for convenience:

SpriteBundle(texture: playerTexture, x: 100, y: 200).spawn(world);

Texture Atlases #

Work with sprite sheets:

final atlas = TextureAtlas.fromGrid(
  texture: spriteSheet,
  columns: 8,
  rows: 4,
);

world.spawn()
  ..insert(AtlasSprite(atlas: atlas, index: 0))
  ..insert(Transform2D.from(100, 200));

Animation #

Create and play animations:

final walkClip = AnimationClip(
  name: 'walk',
  frameIndices: [0, 1, 2, 3],
  frameDuration: Duration(milliseconds: 100),
);

world.spawn()
  ..insert(AtlasSprite(atlas: characterAtlas, index: 0))
  ..insert(AnimationPlayer(clip: walkClip, autoPlay: true))
  ..insert(Transform2D.from(100, 200));

Character Orientation #

Track entity facing direction:

world.spawn()
  ..insert(Orientation(Direction.right))
  ..insert(Velocity(x: 10, y: 0));

// The Orientation.updateFromVelocity() method updates direction from movement

Documentation #

See the Rendering Guide and Pixel-Perfect Rendering for detailed documentation.

Related Packages #

• fledge_ecs - Core ECS framework
• fledge_render - Render infrastructure
• fledge_render_flutter - Flutter backend
• fledge_tiled - Tilemap rendering

License #

Apache 2.0 - See LICENSE for details.