Odin + Raylib Browser Game Setup

This is a basic setup for creating browser games using Odin and Raylib compiled to WebAssembly.

Project Structure

project/
├── main.odin          # Main game code
├── index.html         # HTML wrapper
├── build_wasm.sh      # Build script
├── README.md          # This file
└── build/             # Output directory (created by build script)
    ├── game.js
    ├── game.wasm
    └── index.html

Prerequisites

1. Odin Compiler: Install from https://odin-lang.org/
2. Emscripten: Install from https://emscripten.org/
3. Raylib WebAssembly Build: You'll need to build Raylib for WebAssembly

Building Raylib for WebAssembly

# Clone Raylib
git clone https://github.com/raysan5/raylib.git
cd raylib/src

# Build with Emscripten
emcc -c rcore.c -Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2
emcc -c rshapes.c -Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2
emcc -c rtextures.c -Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2
emcc -c rtext.c -Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2
emcc -c rmodels.c -Os -Wall -DPLATFORM_WEB -DGRAPHICS_API_OPENGL_ES2
emcc -c utils.c -Os -Wall -DPLATFORM_WEB
emcc -c raudio.c -Os -Wall -DPLATFORM_WEB

# Create library
emar rcs libraylib.a rcore.o rshapes.o rtextures.o rtext.o rmodels.o utils.o raudio.o

# Copy to your project
cp libraylib.a ../path/to/your/project/raylib-web/

Building the Game

1. Make the build script executable:

   chmod +x build_wasm.sh
   

2. Run the build script:

   ./build_wasm.sh
   

Running the Game

1. Navigate to the build directory:

   cd build
   

2. Start a local web server:

   # Using Python 3
   python3 -m http.server 8000
   
   # Or using Node.js
   npx http-server -p 8000
   
   # Or using any other static file server
   

3. Open your browser and navigate to: http://localhost:8000

Game Controls

• Arrow Keys or WASD: Move player
• Space: Restart game (when game over)

Game Features

The basic setup includes:

• Player movement (blue circle)
• Random enemy spawning (colored circles falling from top)
• Collision detection
• Score tracking
• Game over and restart functionality

Customization

Modifying Game Settings

Edit these constants in main.odin:

SCREEN_WIDTH  :: 800    // Game window width
SCREEN_HEIGHT :: 600    // Game window height  
TARGET_FPS    :: 60     // Target frame rate

Adding Assets

1. Create an assets directory in your project root
2. Place your assets (images, sounds, etc.) there
3. The build script will include them in the build

Extending the Game

The game uses a simple structure:

• Player struct for player data
• Enemy struct for enemy data
• GameState struct for overall game state
• Separate update and draw functions

You can extend it by:

• Adding new enemy types
• Implementing power-ups
• Adding particle effects
• Including sound effects
• Creating multiple levels

Troubleshooting

"Odin compiler not found"

Make sure Odin is installed and in your PATH.

"Emscripten not found"

Activate the Emscripten environment:

source /path/to/emsdk/emsdk_env.sh

"Raylib WebAssembly files not found"

Build Raylib for WebAssembly following the instructions above.

Game doesn't load in browser

• Check browser console for errors
• Ensure you're running from a web server (not file://)
• Verify all build files are present

Alternative Build Method (Direct Emscripten)

If you have issues with the Odin WebAssembly target, you can compile to C first:

# Generate C code from Odin
odin build main.odin -out:game.c -target:c

# Compile with Emscripten
emcc game.c raylib-web/libraylib.a \
    -s USE_GLFW=3 \
    -s FULL_ES3=1 \
    -s ASYNCIFY \
    -s TOTAL_MEMORY=67108864 \
    -o build/game.js

Resources

• Odin Documentation
• Raylib Documentation
• Emscripten Documentation
• WebAssembly MDN