Skip to main content

​
Creating Your First Game

This guide walks you through creating your first interactive 3D game in G3Engine. You’ll learn the fundamentals of the editor, scene manipulation, and basic interactivity.

​
Prerequisites

Before you begin:
  • Signed into G3Engine (via Email or Social login)
  • Access to the Editor dashboard

​
What You’ll Build

A simple 3D scene with a cube that moves when you press a key - the foundation for any interactive game.
1
Create a New Project
2
  • From your dashboard, click New Project
  • Select Blank 3D Canvas (or choose a template like “3D Platformer” to start with pre-built assets)
  • Your editor will open with an empty scene
    • 3
    Understanding the Editor Layout
    4
    The G3Engine editor uses a canvas-first design with floating panels:
    5
  • Left Panel: Scene Graph (tree view of all objects, lights, cameras)
  • Bottom Panel: Asset Library for drag-and-drop objects
  • Right Panel: Inspector showing properties of selected objects
  • Top Bar: Global controls (Play/Stop, Undo/Redo, Web3, Publish)
    • 6
    The 3D viewport occupies the full background, letting you focus on your creation.
    7
    Add Your First 3D Object
    8
  • Open the Asset Library at the bottom of the screen
  • Click or drag a Cube from the primitives section into the viewport
  • The cube appears at the scene origin (0, 0.5, 0)
    • 9
    You can also add objects by:
    10
  • Clicking the asset card once to spawn it at the origin
  • Dragging the asset card into the 3D viewport
    • 11
    Available primitive shapes:
    12
  • Cube
  • Sphere
  • Cylinder
  • Plane (useful for ground)
  • Cone
  • Torus
    • 13
    Position the Object
    14
    With your cube selected:
    15
  • Use the transform gizmo (colored arrows) to drag the cube in 3D space
  • Or use the Right Panel Inspector to set precise coordinates:
    • 16
    {
  "position": { "x": 0, "y": 0.5, "z": 0 },
  "rotation": { "x": 0, "y": 0, "z": 0 },
  "scale": { "x": 1, "y": 1, "z": 1 }
}
    17
    Transform Mode Shortcuts (Top Bar):
    18
  • W - Position/Translate mode (move arrows)
  • E - Rotation mode (rotation rings)
  • R - Scale mode (scale handles)
    • 19
    Customize the Appearance
    20
    In the Right Panel Inspector, customize your cube’s material:
    21
  • Color: Click the color picker to choose a new color (default: #6366f1)
  • Roughness: 0.0 (mirror-like) to 1.0 (matte). Try 0.4
  • Metalness: 0.0 (non-metal) to 1.0 (fully metallic). Try 0.1
  • Emissive: Make objects glow by setting an emissive color and intensity
    • 22
    Example material settings:
    23
    {
  "color": "#6366f1",
  "roughness": 0.4,
  "metalness": 0.1,
  "opacity": 1.0,
  "transparent": false
}
    24
    Add Lighting
    25
    Every scene needs light! Add basic lighting:
    26
  • From the Asset Library, add an Ambient Light (provides base lighting for the whole scene)
  • Add a Directional Light (simulates sunlight from a specific direction)
  • Add a Point Light (emits light from a single point in all directions)
    • 27
    In the Inspector, you can adjust:
    28
  • Light Intensity: Brightness (default: 1)
  • Light Color: The color of the light
    • 29
    G3Engine automatically adds default lighting to new scenes, but you can customize or replace it.
    30
    Add Interactivity with Visual Scripting
    31
    Now make your cube interactive using the node-based visual scripting system:
    32
  • Click the Bottom Panel to expand the Node Editor
  • Click ➕ Add Node in the top-left corner
  • Search for and add these nodes:
    • On Key Press (Event category)
    • Move To (Action category)
  • Connect the nodes:
    • Drag from the exec output (white square) of “On Key Press”
    • Connect to the exec input of “Move To”
    • Connect the cube object to the “Target” input of “Move To”
  • Set the Position input on “Move To” to where you want the cube to go
    • 33
    Your first interactive behavior is complete!
    34
    Visual Scripting Pin Types:
    • White square = Execution flow
    • Red circle = Boolean
    • Green circle = Float (decimal number)
    • Blue circle = Integer
    • Pink circle = String (text)
    • Yellow circle = Vector (3D position)
    • Blue rounded = Object reference
    35
    Test Your Game
    36
  • Click Play in the Top Bar (or press spacebar)
  • The UI panels hide, giving you a fullscreen preview
  • Press the key you configured (e.g., Arrow key)
  • Watch your cube move!
  • Click Stop to return to the editor
    • 37
    During Play mode:
    38
  • The editor UI automatically hides
  • Your visual scripts execute in real-time
  • You can test interactions immediately
    • 39
    Save Your Work
    40
    G3Engine auto-saves your project, but you can also:
    41
  • Export the scene manually via the File menu
  • Your scene is stored as JSON with this structure:
    • 42
    {
  "version": 1,
  "exportedAt": "2026-03-04T10:30:00.000Z",
  "objects": [
    {
      "id": "uuid-here",
      "name": "Cube 1",
      "type": "box",
      "position": { "x": 0, "y": 0.5, "z": 0 },
      "rotation": { "x": 0, "y": 0, "z": 0 },
      "scale": { "x": 1, "y": 1, "z": 1 },
      "material": {
        "color": "#6366f1",
        "roughness": 0.4,
        "metalness": 0.1
      },
      "visible": true
    }
  ],
  "metadata": {
    "objectCount": 1,
    "hasLights": true,
    "hasWeb3": false
  }
}
    43
    Next Steps
    44
    Congratulations! You’ve created your first interactive 3D game.
    45
    Explore further:
    46
  • 3D Scene Setup - Advanced scene design techniques
  • Adding Interactivity - Complex visual scripting patterns
  • Publishing Games - Share your creation with the world

    • ​
    Common Issues

    You need to add lighting to your scene. Add an Ambient Light and a Directional Light from the Asset Library.
    Make sure an object is selected by clicking it in the viewport or Scene Graph. Check that you’re in the correct transform mode (W, E, or R).
    Pin types must be compatible. Check that you’re connecting matching types (e.g., exec to exec, float to float). Execution pins are white squares, data pins are colored circles.
    Check that your camera is positioned correctly in the scene. The default camera looks at the origin (0, 0, 0) from position (0, 5, 10).

    ​
    Keyboard Shortcuts

    ShortcutAction
    WTranslate/Move mode
    ERotate mode
    RScale mode
    SpacePlay/Stop
    Cmd/Ctrl + ZUndo
    Cmd/Ctrl + Shift + ZRedo
    DeleteRemove selected object

    ​
    Tips for Success

    Start Simple

    Begin with basic shapes and simple interactions. You can always add complexity later.

    Use the Scene Graph

    Name your objects descriptively in the Scene Graph (Left Panel) to stay organized as your scene grows.

    Test Frequently

    Hit Play often to test your interactions. It’s faster to catch issues early.

    Learn Node Scripting

    Master a few node types at a time. Start with Events (Begin Play, Key Press) and Actions (Move, Rotate).

    Build docs developers (and LLMs) love

    Get started for freeTalk to us