Skip to main content
Type definitions for 2D sprites, layers, camera, and editor tools used in the canvas-based 2D editor.

​
Sprite types

​
Sprite2D

The core 2D sprite interface representing all drawable objects on the canvas. 
interface Sprite2D {
  id: string;
  name: string;
  type: 'sprite' | 'shape' | 'text' | 'tilemap';
  x: number;
  y: number;
  width: number;
  height: number;
  rotation: number;
  scaleX: number;
  scaleY: number;
  opacity: number;
  visible: boolean;
  locked: boolean;
  layerId: string;
  
  // Rendering
  fillColor: string;
  strokeColor: string;
  strokeWidth: number;
  
  // Shape-specific
  shapeType?: ShapeType;
  cornerRadius?: number;
  
  // Text-specific
  text?: string;
  fontSize?: number;
  fontFamily?: string;
  
  // Sprite image
  emoji?: string; // For quick prototyping
}
​
id
string
Unique identifier (UUID)
​
name
string
Display name shown in the layer panel
​
type
'sprite' | 'shape' | 'text' | 'tilemap'
Sprite category determining how it’s rendered
​
x
number
Horizontal position on canvas (pixels)
​
y
number
Vertical position on canvas (pixels)
​
width
number
Sprite width in pixels
​
height
number
Sprite height in pixels
​
rotation
number
Rotation angle in radians
​
scaleX
number
Horizontal scale multiplier (default: 1)
​
scaleY
number
Vertical scale multiplier (default: 1)
​
opacity
number
Opacity value from 0 (transparent) to 1 (opaque)
​
visible
boolean
Whether the sprite is rendered
​
locked
boolean
Whether the sprite can be selected/edited
​
layerId
string
ID of the layer this sprite belongs to
​
fillColor
string
Fill color (CSS color string)
​
strokeColor
string
Stroke/border color
​
strokeWidth
number
Border width in pixels
​
shapeType
ShapeType
Shape type (for shape sprites only)
​
cornerRadius
number
Corner radius for rounded rectangles
​
text
string
Text content (for text sprites only)
​
fontSize
number
Font size in pixels (for text sprites)
​
fontFamily
string
Font family name (for text sprites)
​
emoji
string
Emoji character for quick prototyping

​
ShapeType

type ShapeType = 'rect' | 'circle' | 'line' | 'polygon';
Available shape primitives:
  • rect - Rectangle or rounded rectangle
  • circle - Circle or ellipse
  • line - Straight line
  • polygon - Multi-point polygon

​
Vec2

2D vector for positions and offsets. 
interface Vec2 {
  x: number;
  y: number;
}

​
Layer types

​
Layer2D

Layer system for organizing sprites by render order. 
interface Layer2D {
  id: string;
  name: string;
  visible: boolean;
  locked: boolean;
  opacity: number;
  order: number;
}
​
id
string
Unique layer identifier
​
name
string
Layer name (e.g., “Background”, “Main”, “UI”)
​
visible
boolean
Whether all sprites on this layer are rendered
​
locked
boolean
Whether sprites on this layer can be edited
​
opacity
number
Layer-wide opacity multiplier (0-1)
​
order
number
Render order (higher numbers render on top)
Default layers: 
const DEFAULT_LAYERS = [
  { id: 'layer-bg', name: 'Background', order: 0 },
  { id: 'layer-main', name: 'Main', order: 1 },
  { id: 'layer-ui', name: 'UI', order: 2 },
];

​
Camera types

​
Camera2D

2D camera for panning and zooming the canvas view. 
interface Camera2D {
  x: number;
  y: number;
  zoom: number;
}
​
x
number
Camera horizontal offset (panning)
​
y
number
Camera vertical offset (panning)
​
zoom
number
Zoom level (0.1 to 5, default: 1)

​
Tool types

​
Tool2D

Available drawing and editing tools. 
type Tool2D = 'select' | 'move' | 'draw' | 'erase' | 'fill' | 'shape' | 'text';
Tool descriptions:
  • select - Select and transform sprites
  • move - Move sprites on canvas
  • draw - Freehand drawing
  • erase - Erase pixels or sprites
  • fill - Bucket fill tool
  • shape - Create shape primitives
  • text - Add text labels

​
Usage examples

​
Creating a sprite

import { useEditor2DStore, Sprite2D } from '@/store/editor2DStore';

const editor2D = useEditor2DStore();

// Add a rectangle sprite
editor2D.addSprite({
  name: 'Platform',
  type: 'shape',
  shapeType: 'rect',
  x: 400,
  y: 500,
  width: 200,
  height: 20,
  fillColor: '#8b5cf6',
  strokeColor: '#000000',
  strokeWidth: 2,
});

// Add an emoji sprite
editor2D.addSprite({
  name: 'Player',
  type: 'sprite',
  x: 400,
  y: 300,
  width: 64,
  height: 64,
  emoji: '😊',
});

// Add a text sprite
editor2D.addSprite({
  name: 'Title',
  type: 'text',
  text: 'My Game',
  fontSize: 48,
  fontFamily: 'Arial',
  x: 400,
  y: 100,
  fillColor: '#ffffff',
});

​
Working with layers

// Create a new layer
editor2D.addLayer('Enemies');

// Select a layer
editor2D.selectLayer('layer-main');

// Toggle layer visibility
const layer = editor2D.layers.find(l => l.name === 'Background');
if (layer) {
  editor2D.updateLayer(layer.id, { visible: false });
}

// Change layer order
editor2D.reorderLayer(layer.id, 3);

​
Camera controls

// Pan camera
editor2D.panCamera(100, 50); // Move right 100px, down 50px

// Zoom in
editor2D.zoomCamera(editor2D.camera.zoom * 1.2);

// Zoom out
editor2D.zoomCamera(editor2D.camera.zoom / 1.2);

// Reset camera
editor2D.resetCamera(); // Returns to x:0, y:0, zoom:1

​
Transform sprites

// Update sprite position
editor2D.updateSprite(spriteId, {
  x: 500,
  y: 300,
});

// Rotate sprite
editor2D.updateSprite(spriteId, {
  rotation: Math.PI / 4, // 45 degrees
});

// Scale sprite
editor2D.updateSprite(spriteId, {
  scaleX: 2,
  scaleY: 2,
});

// Change colors
editor2D.updateSprite(spriteId, {
  fillColor: '#ff0000',
  strokeColor: '#000000',
  strokeWidth: 3,
});

​
Grid and snap settings

// Toggle grid visibility
editor2D.toggleGrid();

// Toggle snap-to-grid
editor2D.toggleSnap();

// Grid size is 32px by default
const { gridSize, snapToGrid, showGrid } = useEditor2DStore();

​
See also

Build docs developers (and LLMs) love

Get started for freeTalk to us