application · game-engine · gamedev

Nodes, scenes, and freedom,Godot.

A free, open-source game engine for 2D and 3D games across desktop, mobile, and web — built on a modular node and scene system, scripted in GDScript, C#, or C++/Rust, and shipped under the MIT license with no fees or royalties. This guide covers animation, GDShader, and building for the web with Supabase integration.

AnimationsShadersBuild & export

LEGO-like by design

Nodes are the building blocks — sprites, physics, sounds — and scenes combine them into reusable, hierarchical chunks you can instance anywhere. Community-driven and free from corporate gate-keeping.

• Animation — AnimationPlayer and AnimatedSprite2D built in.
• Shaders — GDShader, a GLSL-derived engine language.
• Web — HTML5/WASM exports with Supabase via CDN.

MITLicense

GDScriptLanguage

2D + 3DDimensions

HTML5/WASMWeb export

FeaturesFAQRelated

On this page

What this guide covers

Animations

AnimationPlayer keyframes, AnimationTree state machines, and frame-by-frame sprite sheets with AnimatedSprite2D.

Shaders

The GDShader language — shader_type contexts, processor functions, built-in I/O, uniforms, and cel shader references.

Build & export

WASM configuration notes for GDExtension plus wiring a web build to Supabase for itch.io deploys.

Guides & demos

Official HTML5 export tutorials, export-template troubleshooting, and the GDQuest demo repository.

Start here

Overview

Godot is a free, open-source game engine for building 2D and 3D games across desktop, mobile, and web — under the permissive MIT license with no fees or royalties. Its node and scene system gives a modular, LEGO-like workflow, and it supports GDScript, C#, and C++/Rust.

This guide covers animation, shaders, and building/exporting including Web and Supabase.

The engine

Information

Godot is a free, open-source game engine for creating 2D and 3D games across desktop, mobile, and web platforms—without fees or restrictive licenses. At its core, Godot’s node and scene system provides a modular, LEGO-like approach to game design—nodes are the building blocks, handling everything from sprites to physics, and scenes combine them into reusable, hierarchical chunks you can instantiate anywhere. This flexibility is paired with support for multiple programming languages, including its own lightweight GDScript (a Python-inspired concept), C#, and even C++ for performance junkies, letting developers pick their comfort zone.

What truly sets Godot apart is its community-driven development model, shout-out to the amazing discord community servers too! Built and evolved by a passionate global user base, it continues to grow through open collaboration, free from corporate gate-keeping. With built-in editors for animation, shaders, and tilemaps, plus a permissive MIT license, Godot provides a complete toolbox for crafting anything from pixel-art platformers to expansive 3D experiences, all while remaining lightweight enough for modest hardware.

It’s no surprise that indie developers and hobbyists alike see it as a refreshing, empowering alternative to larger engines like Unity or Unreal.

Bring it to life

Animations

In the beloved Godot engine, animation is a powerful and flexible system that brings your game to life—allowing you to animate virtually any property of any node or object, from position and rotation to color and even custom variables. At the heart of this system is the AnimationPlayer node, a versatile tool that lets you create everything from simple transitions—like a character moving across the screen—to complex cinematic sequences with ease.

You can keyframe properties manually in the animation editor, use Bezier curves for smooth transitions, or even animate function calls and audio playback, making it a playground for creativity. Godot’s animation capabilities stand out because they’re deeply integrated into the engine, meaning you don’t need external tools—just add an AnimationPlayer, tweak some values, and watch your scene dance. For more advanced control, the AnimationTree complements this by managing state machines and blending animations, perfect for characters with walk cycles or combat moves. Since Godot’s open-source nature keeps it evolving, updates like those in version 4.3 have refined this system further, offering finer control and fixing quirks from earlier builds. Whether you’re fading in a splash screen or orchestrating a dramatic cutscene, Godot’s animation tools are both accessible for beginners and robust enough for pros. It’s no wonder developers rave about its ability to handle everything from 2D sprites to 3D models with a single, unified workflow!

Sprite 2D Animations

In Godot, animating 2D sprites is a breeze thanks to the engine’s dedicated tools tailored for pixel-perfect movement and flair. The Sprite2D node serves as your canvas, where you can attach textures and flip, scale, or rotate them to your heart’s content, all animatable via the AnimationPlayer. For frame-by-frame animations—like a character running or a flickering torch—Godot’s AnimatedSprite2D node steals the show, letting you define sprite sheets and playback sequences with adjustable speeds, looping options, and even signal triggers for events like “animation finished.” You can easily set this up by importing a sprite sheet, slicing it into frames, and dropping them into the node’s animation frames property—boom, instant walk cycle! Pair this with the AnimationPlayer to tweak properties like opacity or position, and you’ve got smooth fades or bouncy effects without breaking a sweat. Godot’s 2D animation shines in its simplicity: no need for complex rigging, just a few clicks and keyframes to make your sprites pop. Since the engine’s 4.0 overhaul, tools like these have gotten snappier, with better editor feedback and tighter integration, making it a favorite for retro-style game devs and artists alike.

Note

Remember to connect the signals for the animations, to create custom effects once the animation is complete.

Official docs

Guides

• Godot Export as HTML5 Tutorial
• Exporting Template for Platforms missing Error Guide

Learn by example

Demos

• GDQuest Repo of Godot Demos

Watch & listen

Media

GPU effects

Shaders

Godot ships its own shading language, GDShader (.gdshader files), a GLSL-derived language wired into Godot’s render pipeline. For the engine-agnostic fundamentals (the GPU pipeline, shader stages, lighting models, performance budget), see the Shaders & Rendering GDD page; this section covers the Godot-specific layer.

GDShader language

GDShader looks like GLSL ES 3.0 but adds Godot-provided built-ins and a shader_type declaration that tells the engine which render path the shader plugs into.

• shader_type — the first line; picks the context:
  • spatial — 3D materials (mesh surfaces).
  • canvas_item — 2D materials (sprites, UI, tilemaps).
  • particles — compute-style particle processing.
  • sky and fog — environment shading.
• Processor functions — you fill in stage entry points: vertex() (per-vertex), fragment() (per-pixel surface output), and light() (per-light custom lighting).
• Built-in I/O — Godot exposes inputs like UV, NORMAL, TIME, SCREEN_TEXTURE, and you write outputs such as ALBEDO, ALPHA, EMISSION, ROUGHNESS, METALLIC — no manual matrix wiring for the common case.
• uniform — parameters exposed to the editor/inspector and settable from GDScript/C# at runtime (material.set_shader_parameter(...)).

shader_type canvas_item;

uniform vec4 tint : source_color = vec4(1.0);
uniform float wave_speed = 2.0;

void fragment() {
    vec2 uv = UV;
    uv.x += sin(TIME * wave_speed + UV.y * 10.0) * 0.02;
    COLOR = texture(TEXTURE, uv) * tint;
}

Note

GDShader has two front-ends: write the language directly in a .gdshader file, or build it with the VisualShader node graph (Godot compiles the graph to the same GDShader under the hood). Use the visual editor to prototype, drop to text for control.

Cel Shaders

This is a quick reference to a couple popular cel shaders for Godot!

eldskald’s complete global cel shader provides a comprehensive cel shader designed for Godot 4.

Further reading

• Godot Shading language reference
• Godot Your first 2D / 3D shader tutorials
• Shaders & Rendering — engine-agnostic shader and rendering fundamentals

Ship it

Build

WASM

WASM Configuration for GDExt

This is a quick reference to the GDExt cargo toml. TODO:

---

Supabase

This section is for integration of Supabase and your Godot application! In our first proof of concept article, we will focus on a Supabase + Itch + Web build!

Make sure to grab a CDN link for Supabase, here is the one that we will be using for this example:

<script type="module">
  import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';

  const supabase = createClient(
    'https://your-project.supabase.co',
    'your-public-anon-key'
  );

  window.supabase = supabase;
</script>

Inside of your supabase instance, make sure to allow both your main itch, in our case kbve.itch.io and the game CDN aka html.itch.zone.

Note

Godot is a free and open-source game engine that offers a unique and innovative way to create 2D and 3D games for a wide array of platforms, from Windows and macOS to Android, iOS, and even the web, all without costing a dime or tying you to proprietary licenses.

Questions

Frequently asked

What is Godot?

Godot is a free, open-source game engine for building 2D and 3D games across desktop, mobile, and web. It uses a node and scene system as its core building blocks, supports GDScript, C#, and C++, and ships under the permissive MIT license with no fees or royalties.

What languages does Godot support?

Godot's primary language is GDScript, a lightweight, Python-inspired language tightly integrated with the engine. It also supports C# (via .NET), and C++ or Rust through GDExtension for performance-critical code. Most gameplay logic is written in GDScript.

What is the difference between nodes and scenes in Godot?

A node is the smallest building block — it handles one job like a sprite, a collision shape, or a sound. A scene is a tree of nodes saved together and reused as a unit; scenes can be instanced inside other scenes, giving Godot its modular, LEGO-like structure.

How do I animate 2D sprites in Godot?

Use AnimatedSprite2D for frame-by-frame sprite-sheet animation with adjustable speed, looping, and finished signals, or drive any node property with an AnimationPlayer. Import a sprite sheet, slice it into frames, and play the sequence — no external rigging required.

Can Godot export to the web?

Yes. Godot exports games to HTML5/WebAssembly so they run in a browser. You need the matching export templates installed, and platforms like itch.io host the build. Web builds can integrate services such as Supabase via a CDN client for auth and data.

Keep exploring

Related applications

UnityThe C# engine alternative with DOTS and Burst.UnrealThe C++ heavyweight for high-fidelity 3D projects.SupabaseAuth and data for your Godot web builds.