Godot Getting Started for Web Games

Download and Install Godot

Visit the official Godot website and download the latest stable release, which is currently Godot 4.6. The download page offers two versions: the Standard version and the .NET version with C# support. For web game development with GDScript, the Standard version is what you want since it produces smaller exports and avoids the additional complexity of the .NET runtime.

Godot does not require installation. The download is a compressed archive containing a single executable file. On Windows, extract the ZIP and run the .exe file directly. On macOS, drag the application to your Applications folder or run it from the extracted location. On Linux, make the binary executable with chmod and run it from the terminal or your file manager. The entire editor is under 100 MB, which is remarkably compact compared to other game engines.

When you first launch Godot, you will see the Project Manager. This is your hub for creating new projects, opening existing ones, and managing export templates. There is no account to create and no sign-in required. The editor is ready to use immediately.

Create a New Project

Click the "New Project" button in the Project Manager. Give your project a name that describes what you are building, then choose a folder on your filesystem where the project files will be stored. Godot creates a project directory with a project.godot configuration file that stores all your project settings.

You will be asked to choose a rendering backend. For web games, the "Compatibility" renderer is the safest choice because it uses OpenGL ES 3.0, which is supported by all modern browsers through WebGL 2.0. The "Forward+" renderer uses Vulkan features that may not be available in all browser environments. If your game is 2D or uses simple 3D graphics, Compatibility gives you the widest browser support with minimal visual tradeoff.

Click "Create and Edit" to open your new project in the full Godot editor. The editor loads with an empty scene, ready for you to start building.

Learn the Editor Layout

The Godot editor is divided into several panels that you will use constantly. The left side has the Scene dock at the top, which shows the node tree for your current scene, and the FileSystem dock at the bottom, which shows all the files in your project directory. The right side has the Inspector, which displays the properties of whatever node you have selected. The center is the main viewport, which switches between 2D view, 3D view, Script editor, and AssetLib depending on the tabs at the top.

The bottom of the editor has an Output panel for print statements and debug messages, a Debugger panel for breakpoints and profiling, and an Audio panel for sound bus management. You can resize, rearrange, and dock these panels to match your workflow preferences.

Spend a few minutes clicking through the menus and exploring the settings. The Editor Settings (under Editor in the menu bar) let you customize themes, keybindings, and behavior. The Project Settings (under Project in the menu bar) control everything about your game: input mappings, display resolution, physics configuration, and rendering options.

Build Your First Scene

Every game in Godot is composed of scenes, and each scene is a tree of nodes. Click "2D Scene" in the Scene dock to create a root Node2D, or click "Other Node" to search for a specific node type. For a simple character you can move around, create a CharacterBody2D as your root node.

Right-click the CharacterBody2D in the Scene dock and select "Add Child Node." Add a Sprite2D node for the character's visual appearance, then add a CollisionShape2D node for physics interaction. Select the Sprite2D and drag an image file into the Texture property in the Inspector, or use Godot's built-in icon by dragging icon.svg from the FileSystem dock. Select the CollisionShape2D and create a New RectangleShape2D in the Shape property, then resize it to match your sprite.

Save your scene with Ctrl+S. Godot will ask you to name the scene file, which uses the .tscn extension. Name it something descriptive like player.tscn. Your first scene is now on disk and ready for scripting.

Write Your First GDScript

Select the CharacterBody2D node in the Scene dock and click the "Attach Script" button (the scroll icon). Accept the default settings and click Create. This opens the script editor with a template that includes the _physics_process function, which is where movement code belongs.

Replace the template contents with basic movement code. Define a speed variable at the top of the script, read input in _physics_process using Input.get_vector() to capture directional input from arrow keys or WASD, multiply by speed to get velocity, assign it to the velocity property, and call move_and_slide(). This gives you smooth, physics-aware character movement in about ten lines of code.

Before your input will work, open Project Settings, go to the Input Map tab, and define input actions for the four directions: move_left, move_right, move_up, and move_down. Assign keyboard keys to each action. The Input.get_vector() function reads these action names to produce a normalized direction vector, which prevents diagonal movement from being faster than horizontal or vertical movement.

Test in the Editor

Press F5 to run your project. If you have not set a main scene, Godot will ask you to select one. Choose your player scene. A game window opens and you can test your character movement with the keyboard keys you mapped. Press F6 instead if you want to run only the current scene without setting it as the main scene.

If something is not working, check the Output panel at the bottom of the editor for error messages. Common issues for beginners include forgetting to add input actions in Project Settings, not connecting the collision shape to the character body, or having the character spawn outside the camera view. The Godot debugger also lets you set breakpoints in your script by clicking in the gutter next to line numbers, which pauses execution and lets you inspect variable values.

Export to HTML5

Open the Export dialog from Project in the menu bar, then click "Add" and select "Web" from the preset list. If this is your first web export, Godot will prompt you to download the export templates, which are the runtime binaries that your game needs to run in the browser. Click "Download and Install" and wait for the templates to download.

Configure the export settings. The most important options for web are the output filename (typically index.html for easy hosting), whether to enable threads (requires specific server headers), and whether to enable progressive web app features. For your first export, the defaults work well.

Click "Export Project," choose a destination folder, and Godot will generate the HTML5 files: an .html file, a .wasm binary, a .pck data file, and supporting JavaScript. To test locally, you need a local web server since browsers block WASM loading from file:// URLs. Python's built-in server (python -m http.server) in the export directory works perfectly for local testing. Open localhost:8000 in your browser and your game runs right there.