Construct 3 Tutorial: Build Games Without Code

Construct 3 is the most refined no-code browser game engine available in 2026. The whole tool runs in your browser. The output runs in any browser. You build game logic by adding events to event sheets — pictures of conditions and actions, not lines of code. This tutorial walks through how to use Construct 3 to build a working browser game from a blank project: setting up the editor, placing objects, writing your first events, and exporting to HTML5. No programming required.

What Construct 3 is

Construct 3 is a 2D game engine that runs entirely in the browser at editor.construct.net. You don’t install anything. You log in, create a project, and the editor loads with a layout view, an event sheet, a project tree, and a properties panel. The output is HTML5 — a folder of files you can host on any web server.

The philosophy is “no code” in a real sense. There’s no scripting language to learn (though JavaScript scripting is available as an option for advanced users). The event sheet — a list of “when X happens, do Y” rules — is the entire programming surface. For beginners and visual thinkers, the approach is dramatically faster than learning a code-first engine like Phaser.

Pricing

Construct 3 has a free tier with limits — small numbers of events and objects per project, fewer export options. The paid tier (subscription, billed annually) unlocks larger projects, all export targets, and removes the splash screen. For a beginner tutorial-stage project, the free tier is enough; for any serious release, you’ll want the paid tier.

Creating a new project

Log into editor.construct.net. Click “New Project.” Choose “New empty project.” Pick a viewport size — 1280×720 is a common HD baseline. Click “Create.”

The editor loads with:

• Layout view (center): The visual representation of one game scene. Where you place sprites and objects.
• Project bar (left): A tree of every layout, event sheet, sprite, sound, and so on.
• Properties bar (right): Details for whatever you’ve selected.
• Bottom bar: Layers, tilemaps, the event sheet (when you switch to it).

Adding sprites

Double-click anywhere in the layout. A dialog appears with a list of object types — Sprite, TiledBackground, Text, Sound, behaviors, plugins. Choose Sprite.

The sprite editor opens. You can paint pixels directly, or use Load Image to import a PNG. For a tutorial, just paint a colored square — a 32×32 red box for the player, say. Save and close.

The sprite appears in the layout. You can drag it, resize it, rotate it. The Properties bar shows its position, size, angle, and animation frames.

Behaviors: instant movement and physics

Behaviors are pre-built rules you attach to an object. They handle common game patterns without writing any logic.

To add one: select your sprite, in the Properties bar, click “Add behavior.” A list opens with options like:

• Platform: Side-scroller platformer movement — gravity, jump, walk left/right.
• 8Direction: Top-down movement — arrow keys move in eight directions.
• Car: Top-down car physics — accelerate forward, turn left/right.
• Solid: Other objects bounce off this one. Use it for walls and floors.
• Bullet: Move in a fixed direction at a fixed speed. Useful for projectiles.
• Physics: Full 2D physics simulation (gravity, mass, collisions).

Add 8Direction to your player sprite. Add Solid to a wall sprite. Run the project (the play button at top). The player moves with arrow keys; the wall blocks it. You’ve built movement without writing anything.

Event sheets: the programming layer

Event sheets are how you express custom logic. Open the Event Sheet (project bar → event sheets → double-click).

An event has two parts:

• Condition: When something is true — every tick, on a key press, on a collision, when a variable reaches a value.
• Action: What to do — change a sprite’s position, set a variable, play a sound, create another object.

Click “Add event.” A dialog opens. Pick the object the condition applies to (e.g., Keyboard). Pick the condition (e.g., “On key pressed”). Choose the key (Space). Now your event has a trigger.

Click “Add action.” Pick the object (e.g., Player). Pick the action (Set position, Move forward, Spawn object). Choose the parameters.

The result: “When Space is pressed, spawn a bullet at the player’s position.” No code.

A complete first game: jump and avoid

Let’s build a minimal endless-runner-style game:

1. Layout: a flat ground sprite at the bottom (Solid behavior), a player sprite above it (Platform behavior).
2. Add an Obstacle sprite. Set its Behaviors to Bullet (with speed 200) and a custom property “obstacle” so we can identify it.
3. Event sheet, Event 1: Every 2 seconds → Create Obstacle at (1280, ground.y – 32). Now obstacles spawn on the right and travel left.
4. Event 2: Obstacle X < 0 → Destroy Obstacle. Cleans up off-screen obstacles.
5. Event 3: Player on collision with Obstacle → Restart layout. Game over and reset.
6. Event 4: Keyboard, on Space pressed → Player Platform: Simulate Jump pressed. Player jumps with Space.

That’s six events. You have a working browser game. The whole thing took ten minutes.

Sounds

Drag a sound file (MP3 or OGG) into the Sounds folder in the project bar. It imports.

In the event sheet, add an action: Audio → Play. Pick the sound. Save. The sound plays whenever that event fires.

Construct 3 handles autoplay restrictions automatically when sounds are triggered by user input. If your background music doesn’t play, it’s almost certainly because the player hasn’t interacted with the page yet — add a “Click to start” splash.

Variables

For score, lives, time, or any state, use variables. Right-click in the event sheet → Add Global Variable. Name it (Score). Set type (Number) and initial value (0).

Reference variables in conditions (“Compare global variable: Score >= 100”) and actions (“Add 1 to Score”). Display them with a Text object: action → set text to “Score: ” + str(Score).

Exporting to HTML5

Menu → Export Project → HTML5 (Website). The dialog asks about minification, asset compression, and output options. Defaults are fine for a first export.

Click Export. A zip downloads. Unzip it — you get an index.html plus assets and JavaScript. Upload the folder to any web host. The game runs in any modern browser.

For mobile-first publication, Construct 3 also exports to Cordova for app stores, and to platforms like Scirra Arcade. For a first game, just host the HTML5 export.

Common mistakes

Three mistakes new Construct 3 users hit:

• Overusing “Every tick” events. Every-tick events run 60 times a second. Use specific triggers (“On collision,” “On key pressed”) when possible — they’re cleaner and cheaper.
• Forgetting to set the layout’s “Unbounded scrolling”: Players walk off the edge of the layout. If the layout is set to bounded, the player stops at the edge. For wider levels, set the layout dimensions larger than the viewport.
• Mixing Physics and Platform behaviors: They conflict. Use one or the other on a given sprite. Platform is the cleaner default for side-scrollers.

What Construct 3 isn’t great for

Construct 3 is excellent for 2D platformers, top-down adventures, puzzle games, and arcade-style games. It’s less ideal for:

• 3D games. Construct 3 is 2D-only.
• Heavy procedural generation. The event sheet gets hard to maintain for complex algorithms.
• Multiplayer with custom netcode. The Multiplayer plugin exists but is harder to work with than a code-first engine.

For everything else in 2D, Construct 3 is one of the fastest ways from idea to playable browser game.

Resources

Construct’s official documentation at construct.net/en/make-games/manuals/construct-3 covers every feature. The Scirra forums have an active community with hundreds of example projects you can open and learn from. The Scirra Arcade hosts thousands of published Construct games — a useful reference for what the engine can produce.

Frequently asked questions

Is Construct 3 actually no-code?

Yes for most use cases. The event sheet covers the logic of typical 2D games without scripting. Construct 3 also supports JavaScript scripting if you want to add custom code, but it’s optional.

Is the free version of Construct 3 enough for a tutorial?

Yes. The free tier has event and object count limits but is enough for learning the engine and building small games. The paid tier matters for larger projects.

Can Construct 3 export to mobile app stores?

Yes, via Cordova or Construct 3’s built-in mobile export options. For browser publishing, the HTML5 export is the direct path.

How does Construct 3 compare to GameMaker or Godot?

Construct 3 is more beginner-friendly because the no-code event sheet is more accessible than GameMaker’s GML or Godot’s GDScript. The tradeoff is that complex projects are easier to manage in code-first engines.

Does Construct 3 work offline?

The editor is a PWA — it caches and runs offline after the first load. You can build games on a flight without internet.

The takeaway

Construct 3 tutorial work boils down to: open the editor, add sprites with behaviors, write events on event sheets, export to HTML5. The no-code event system handles 80% of typical 2D game logic without ever showing you a line of code. For a no-build browser game break while you’re learning, the Chrome Dino game is the simplest endless runner you can play in a tab.