tupicAcademy

Getting Started with the TupicGame Editor

·course·2026-06-12

The TupicGame Editor is where you fine-tune a game after the AI has generated it. If the creation flow is about getting a playable draft fast, the editor is about control: adjusting how the game looks, plays, and feels, down to individual objects, levels, animations, and sounds.

If you've ever used a game engine like Unity, Unreal Engine, or Godot, the editor will feel familiar. It borrows the same proven layout those tools use — a scene view in the middle, a hierarchy on one side, an inspector on the other, and tool panels along the bottom — but it's tailored for casual HTML5 games and stays simple enough for non-developers.

Opening the editor

You open the editor for a specific game using its address with the game's ID:

/editor?id=YOUR_GAME_ID

In practice you'll usually reach it by selecting a game from your collection and choosing to edit it. The editor loads that game's full configuration — its levels, objects, assets, physics, and settings — ready for you to work on.

The five-panel layout

The editor is organized into five areas, the same arrangement used by mainstream engines:

  1. Topbar (top) — the game's name and genre, undo/redo, display toggles, and the Play and Save buttons.
  2. Hierarchy (left) — a tree of everything in your game: levels, objects, assets, physics, and more. This is the equivalent of Unity's Hierarchy window, Unreal's World Outliner, or Godot's Scene dock.
  3. Viewport (center) — where you see and arrange your game. It works like Unity's Scene view or Godot's 2D editor.
  4. Inspector (right) — the properties of whatever you've selected. This mirrors Unity's Inspector, Unreal's Details panel, or Godot's Inspector dock.
  5. Bottom panel (bottom, collapsible) — tabbed tools for code, animation, sound, analytics, and more, much like the dockable utility panels in those engines.

Edit mode vs. Play mode

The editor has two modes, just like the engines it's modeled on:

  • Edit mode shows your game on a canvas where you can select, move, and resize objects without the game running.
  • Play mode runs the actual game inside the editor so you can test it immediately. Unreal calls this exact feature Play In Editor (PIE); Unity calls it Play mode; Godot calls it running the scene. TupicGame works the same way — you stay in the editor while the real game plays.

The relative coordinate system

One important concept underpins everything: object positions are stored relatively (as fractions of the screen size, not just fixed pixels). This is why a layout you design on a desktop screen still renders correctly on a phone. Engines handle this with anchors and scaling systems (Unity's anchors, Unreal's anchors, Godot's anchors and containers); TupicGame does it automatically so your game adapts to any device.

With the layout and these concepts in mind, the next chapters walk through each part of the editor in detail.

    share