Skip to content

2D Tutorial

Jump to bottom
Phil Schatzmann edited this page Apr 26, 2026 · 16 revisions

Overview

This tutorial explains the most important 2D concepts of TinyGPU: - Surface - FrameBuffer - Sprite - Color formats (RGB565, BGR565, RGB666, RGB888) - FrameBuffer sprite operations

Surface

A Surface is a 2D pixel buffer you can draw into. The coordinate (0,0) is in the uppler left corner.

Example

Surface surface(width, height,FontRGB565);
surface.begin();
surface.clear(color);
surface.drawPixel(x, y, color);
CartesianView view(surface);
view.drawPixel(x, y, color);

CartesionView

If you want to use a coordinate system where (0,0) is in the lower left corder you can wrap the surface with a CartesianView!

Example

Surface surface(width, height,FontRGB565);
CartesianView view(surface);
view.drawPixel(x, y, color);

FrameBuffer

A FrameBuffer is a Surface that represents the display output.

Example

FrameBuffer fb(width, height,FontRGB565);
fb.begin();
fb.clear(color);
fb.drawRect(x, y, dx, dy, color);

Sprite

A Sprite is a reusable image.

Example

Sprite sprite(width, height, FontRGB565);
surface.drawSprite(sprite, x, y);

Color Formats

Color formats define how an individual pixel is storing the color information.

RGB565

  • 16-bit color
  • 5R, 6G, 5B

BGR565

  • Same as RGB565 but red/blue swapped

RGB666

  • 18-bit color (6 bits each channel)

RGB888

  • 24-bit color (8 bits each channel)

How to use

The color format is a template parameter to the classes mentioned so far where the default is RGB565.

so

FrameBuffer fb
FrameBuffer<RGB565>fb

are identical. You can give any of the color format mentioned as parameter if you want to work with other formats.

FrameBuffer Sprite Operations

addSprite

auto id = framebuffer.addSprite(sprite, x, y);

moveSprite

framebuffer.moveSprite(id, newX, newY);

removeSprite

framebuffer.removeSprite(id);

scaleSprite

framebuffer.scaleSprite(id, scaleX, scaleY);

Example Loop

auto id = fb.addSprite(player, 10, 10);

while (true) {
    fb.moveSprite(id, x, y);
    fb.update();
}

Type Aliases

Since it is quite tedious to use the type parameters for color formats, the following types have been predefined:

Surface Types

Alias Underlying Type
SurfaceRGB565 Surface<RGB565>
SurfaceRGB666 Surface<RGB666>
SurfaceRGB888 Surface<RGB888>
SurfaceBGR565 Surface<BGR565>

FrameBuffer Types

Alias Underlying Type
FrameBufferRGB565 FrameBuffer<RGB565>
FrameBufferRGB666 FrameBuffer<RGB666>
FrameBufferRGB888 FrameBuffer<RGB888>
FrameBufferBGR565 FrameBuffer<BGR565>

Sprite Types

Alias Underlying Type
SpriteRGB565 Sprite<RGB565>
SpriteRGB666 Sprite<RGB666>
SpriteRGB888 Sprite<RGB888>
SpriteBGR565 Sprite<BGR565>

LinePrinter Types

Alias Underlying Type
LinePrinterRGB565 LinePrinter<RGB565>
LinePrinterRGB666 LinePrinter<RGB666>
LinePrinterRGB888 LinePrinter<RGB888>
LinePrinterBGR565 LinePrinter<BGR565>

BitmapFont Types

Alias Underlying Type
BitmapFontRGB565 BitmapFont<RGB565>
BitmapFontRGB666 BitmapFont<RGB666>
BitmapFontRGB888 BitmapFont<RGB888>
BitmapFontBGR565 BitmapFont<BGR565>

IFont Types

Alias Underlying Type
IFontRGB565 IFont<RGB565>
IFontRGB666 IFont<RGB666>
IFontRGB888 IFont<RGB888>
IFontBGR565 IFont<BGR565>

WireFrame3D Types

Alias Underlying Type
WireFrame3D_RGB565 WireFrame3D<RGB565>
WireFrame3D_RGB666 WireFrame3D<RGB666>
WireFrame3D_RGB888 WireFrame3D<RGB888>
WireFrame3D_BGR565 WireFrame3D<BGR565>

Summary

  • Surface = drawing buffer
  • FrameBuffer = Surface + sprite manager
  • Sprite = synonym for Surface (with the intention of a reusable image)
  • Color format represent a pixel

Clone this wiki locally