2D Game Creation

G3Engine includes a powerful 2D editor for creating sprite-based games. This guide covers the 2D workflow, sprite management, layers, and 2D-specific features.

Understanding the 2D Editor

The 2D editor uses a canvas-based coordinate system with:

Origin (0, 0) at the center of the canvas
X-axis increases to the right
Y-axis increases upward
Default canvas size: 800×600 pixels

Switch to 2D Mode

From your project dashboard, create a new project

Select 2D Game Template or switch an existing project to 2D mode

The editor layout changes to a 2D viewport with canvas-specific tools

2D Editor Layout

Left Panel: Layer list and sprite hierarchy

Manage layer order, visibility, and locking

View all sprites organized by layer

Bottom Panel: Tools and asset library

Drawing tools: Select, Move, Draw, Erase, Shape, Text

Sprite library for pre-built assets

Right Panel: Inspector

Sprite properties: position, size, rotation, opacity

Layer properties

Canvas settings

Viewport: Main canvas area

Grid overlay for alignment

Pan with middle-mouse or Alt+drag

Zoom with mouse wheel

Canvas Settings

Configure your game canvas in the Right Panel:

{
  "canvasWidth": 800,
  "canvasHeight": 600,
  "backgroundColor": "#12121c"
}

Common canvas sizes:

800×600 - Classic 4:3 aspect ratio

1280×720 - HD 16:9 aspect ratio

480×320 - Mobile portrait

320×480 - Mobile landscape

Working with Sprites

Create Your First Sprite

Click the Shape tool (U) in the toolbar

Click on the canvas to place a shape

A sprite appears with default properties:

{
  "id": "sprite-uuid",
  "type": "shape",
  "layerId": "layer-default",
  "x": 0,
  "y": 0,
  "width": 50,
  "height": 50,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "opacity": 1,
  "visible": true,
  "shapeType": "rectangle",
  "fillColor": "#6366f1",
  "strokeColor": "#000000",
  "strokeWidth": 0,
  "cornerRadius": 0
}

Sprite Types

Rectangle Sprite:

{
  "type": "shape",
  "shapeType": "rectangle",
  "width": 50,
  "height": 50,
  "fillColor": "#6366f1",
  "cornerRadius": 0
}

Circle Sprite:

{
  "type": "shape",
  "shapeType": "circle",
  "width": 50,
  "height": 50,
  "fillColor": "#ff6b6b"
}

Text Sprite:

{
  "type": "text",
  "text": "Hello World",
  "fontSize": 24,
  "fontFamily": "Inter, sans-serif",
  "fillColor": "#f0f0f5"
}

Emoji Sprite:

{
  "type": "shape",
  "emoji": "🎮",
  "width": 64,
  "height": 64
}

Transform Sprites

Using the Inspector (Right Panel):

Position: X and Y coordinates (center of sprite)

Size: Width and height in pixels

Rotation: Degrees (0-360)

Scale: ScaleX and ScaleY multipliers

Opacity: 0.0 (invisible) to 1.0 (opaque)

Using Tools:

V - Select tool: Click sprites to select

G - Move tool: Drag to reposition

Drag corner handles to resize

Shift+drag to maintain aspect ratio

Snap to Grid: Enable in the Right Panel to align sprites precisely:

{
  "snapToGrid": true,
  "gridSize": 16
}

Style Sprites

Fill and Stroke:

{
  "fillColor": "#6366f1",
  "strokeColor": "#ffffff",
  "strokeWidth": 2
}

Rounded Corners:

{
  "cornerRadius": 8
}

Transparency:

{
  "opacity": 0.5,
  "fillColor": "rgba(99, 102, 241, 0.5)"
}

Layer Management

Layers control rendering order and organization.

Understanding Layers

Each layer has:

{
  "id": "layer-uuid",
  "name": "Layer 1",
  "order": 0,
  "visible": true,
  "locked": false,
  "opacity": 1.0
}

Order: Lower numbers render first (behind higher numbers)

Visible: Toggle layer visibility

Locked: Prevent editing sprites on this layer

Opacity: Layer-wide opacity multiplier

Create Layers

In the Left Panel, click New Layer

Name your layer (e.g., “Background”, “Player”, “UI”)

Drag layers to reorder them

Recommended layer structure:

Layer 0: Background
Layer 1: Environment
Layer 2: Enemies
Layer 3: Player
Layer 4: Effects
Layer 5: UI

Assign Sprites to Layers

Select a sprite

In the Inspector, change the Layer dropdown

The sprite moves to the new layer and re-renders in the correct order

Use locked layers to prevent accidentally selecting background elements while working on foreground sprites.

2D Camera Controls

Camera Properties

The 2D camera is defined by:

{
  "camera": {
    "x": 400,
    "y": 300,
    "zoom": 1.0
  }
}

x, y: Camera center position (in canvas coordinates)

zoom: Zoom level (1.0 = 100%, 2.0 = 200%)

Pan the Camera:

Middle-mouse drag

Alt + Left-mouse drag

Programmatically: Update camera.x and camera.y

Zoom:

Mouse wheel to zoom in/out

Zoom centers on the cursor position

Range: 0.1× to 10×

Reset View:

Click Reset Camera in the Top Bar

Returns to default: {x: canvasWidth/2, y: canvasHeight/2, zoom: 1}

Drawing Tools

Tool Keyboard Shortcuts

KeyToolDescriptionVSelectClick to select spritesGMoveDrag sprites to repositionBDrawFreehand drawing (future feature)EEraseRemove spritesUShapeAdd rectangle/circle shapesTTextAdd text sprites

Shape Tool Workflow

Press U to activate Shape tool

Click on the canvas

A shape appears at cursor position

Adjust properties in the Inspector:

Shape type (rectangle/circle)
Fill color
Stroke color and width
Corner radius (rectangles only)

Text Tool Workflow

Press T to activate Text tool

Click on the canvas

Type your text in the Inspector

Customize:

Font size
Font family
Color
Alignment

Building a 2D Platformer

Set Up the Canvas

{
  "canvasWidth": 800,
  "canvasHeight": 600,
  "backgroundColor": "#1a1a2e"
}

Create Layers

Background (order: 0) - Sky, distant scenery

Platforms (order: 1) - Ground and platforms

Player (order: 2) - Player character

UI (order: 3) - Score, health, etc.

Add Ground Platform

{
  "layerId": "platforms",
  "type": "shape",
  "shapeType": "rectangle",
  "x": 0,
  "y": -250,
  "width": 800,
  "height": 40,
  "fillColor": "#4a4a5e",
  "cornerRadius": 0
}

Add Player Character

Use an emoji or simple shape:

{
  "layerId": "player",
  "type": "shape",
  "emoji": "🎮",
  "x": -200,
  "y": -180,
  "width": 48,
  "height": 48
}

Add Platforms

Create jumping platforms:

[
  {
    "x": -100,
    "y": -100,
    "width": 120,
    "height": 20,
    "fillColor": "#6366f1"
  },
  {
    "x": 100,
    "y": -50,
    "width": 120,
    "height": 20,
    "fillColor": "#6366f1"
  },
  {
    "x": 300,
    "y": 0,
    "width": 120,
    "height": 20,
    "fillColor": "#6366f1"
  }
]

Add UI Elements

Score Display:

{
  "layerId": "ui",
  "type": "text",
  "text": "Score: 0",
  "x": -350,
  "y": 250,
  "fontSize": 20,
  "fillColor": "#14f195"
}

2D Physics & Interactivity

While the 2D editor provides the visual layout, interactivity is added through visual scripting:

Switch to the Node Editor (Bottom Panel)
Add event nodes for 2D-specific events:
- On Key Press - Player input
- On Collision 2D - Sprite collisions
- On Click - Mouse/touch interactions
Add action nodes for 2D manipulation:
- Move To - Animate sprite position
- Set Sprite Property - Change color, opacity, size
- Play Animation - Sprite animation sequences

Example: Move player on arrow key press:

Add “On Key Press” event node
Add “Move To” action node
Connect execution flow
Set target to player sprite
Calculate new position based on key

Grid and Guides

Grid Display

Toggle grid visibility in the Right Panel:

{
  "showGrid": true,
  "gridSize": 16
}

Common grid sizes:

8px - Pixel-perfect retro games

16px - Standard platformers

32px - Larger tile-based games

64px - Coarse alignment

Snap to Grid

Enable snapping to align sprites:

{
  "snapToGrid": true
}

Sprites snap to the nearest grid intersection when moved.

Canvas Bounds

The game canvas is visualized with:

Distinct background color (inside bounds)

Dashed border outline

Dimension label (e.g., “800×600”)

Sprites can be positioned outside bounds during editing but won’t be visible during gameplay.

Export and Runtime

Scene Data Structure

The 2D scene exports to JSON:

{
  "version": 1,
  "type": "2d",
  "canvas": {
    "width": 800,
    "height": 600,
    "backgroundColor": "#1a1a2e"
  },
  "layers": [
    {
      "id": "layer-1",
      "name": "Background",
      "order": 0,
      "visible": true,
      "locked": false,
      "opacity": 1.0
    }
  ],
  "sprites": [
    {
      "id": "sprite-1",
      "layerId": "layer-1",
      "type": "shape",
      "x": 0,
      "y": 0,
      "width": 50,
      "height": 50,
      "fillColor": "#6366f1"
    }
  ]
}

Testing 2D Games

Click Play to enter preview mode

The canvas displays at actual size

Test interactivity and visual scripting

Click Stop to return to editing

Tips for 2D Games

Use Layers Wisely

Separate background, gameplay, and UI into distinct layers for easier editing and performance.

Grid Alignment

Enable snap-to-grid for pixel-perfect positioning, especially important for platformers.

Emoji as Sprites

Emojis make great placeholder art. Use the emoji property for quick prototyping.

Center Your Scene

Work around the origin (0,0) for easier camera and physics management.

Common 2D Game Patterns

Side-Scrolling Platformer

Canvas: 800×600
Player on left side of screen (x: -200)
Platforms extending to the right
Camera follows player X position
Grid: 16px for tile alignment

Top-Down Adventure

Canvas: 800×800 (square)
Player at center (0, 0)
Environment arranged around player
Camera follows player position (X and Y)
Grid: 32px for room/tile design

Puzzle Game

Canvas: 600×800 (portrait)
Fixed camera (no following)
Grid-aligned pieces (64px grid)
UI layer for score/timer
High layer count for piece depth sorting

Shooter Game

Canvas: 800×600
Player at bottom center (y: -200)
Enemies spawn at top
Bullets on separate layer
No grid needed (free movement)

Next Steps

Adding Interactivity - Visual scripting for 2D games
Publishing Games - Deploy your 2D game
3D Scene Setup - Compare with 3D workflow

Get Started

Core Features

Guides

Web3

2D Game Creation

2D Game Creation

Understanding the 2D Editor

Working with Sprites

Layer Management

2D Camera Controls

Drawing Tools

Building a 2D Platformer

2D Physics & Interactivity

Grid and Guides

Export and Runtime

Tips for 2D Games

Use Layers Wisely

Grid Alignment

Emoji as Sprites

Center Your Scene

Common 2D Game Patterns

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

Web3

​2D Game Creation

​Understanding the 2D Editor

​Working with Sprites

​Layer Management

​2D Camera Controls

​Drawing Tools

​Building a 2D Platformer

​2D Physics & Interactivity

​Grid and Guides

​Export and Runtime

​Tips for 2D Games

Use Layers Wisely

Grid Alignment

Emoji as Sprites

Center Your Scene

​Common 2D Game Patterns

​Next Steps

Build docs developers (and LLMs) love

2D Game Creation

Understanding the 2D Editor

Working with Sprites

Layer Management

2D Camera Controls

Drawing Tools

Building a 2D Platformer

2D Physics & Interactivity

Grid and Guides

Export and Runtime

Tips for 2D Games

Common 2D Game Patterns

Next Steps