Web games

Ryuo makes web games in TypeScript: 3D with three.js and 2D with Phaser. The game runs inside Ryuo while you work on it, and when it's ready you get a zip you can upload to a game portal or put on any website.

You don't need to install anything. Ryuo brings its own copy of Node, Vite and TypeScript, and the packages the templates use, so a new web game works without Node.js and without an internet connection.

Set upCopy Anchor Link

Open Engines & setup in the left sidebar and choose the Web card. It checks Ryuo's built-in runtime and the game templates, and is ready straight away. Node.js is listed as optional: you only need it if you want to run the game's npm scripts in your own terminal.

Make a new web gameCopy Anchor Link

Choose + beside Games, then Create from scratch, pick Web and choose a template:

• 3D · three.js: a third-person character you move with WASD or the arrow keys, jump with Space and sprint with Shift, a camera you turn by clicking into the game and moving the mouse, Rapier physics, crates loaded from a glTF model, and coins to collect.
• 2D · Phaser: a pixel-art platformer with an animated player, platforms and coins.

Both have a heads-up display in HTML, sounds, gamepad support and a level file (levels/level-1.json) that says where everything is. Ryuo copies the template, installs its packages in a few seconds and opens the game under Games with a globe icon.

Play the game in RyuoCopy Anchor Link

Select the Web tab and choose Launch Web. Ryuo starts the game's development server and shows the game in the tab, in a page of its own, so a game that crashes or hangs never takes Ryuo with it. Click into the game to play it.

• When Ryuo (or you) changes the code, the game reloads by itself. Changes to the level file update the running game without a reload.
• Pause and Resume in the tab's toolbar stop and start the game's clock.
• Editor shows an inspector beside the game: everything in the scene, with the position, rotation and scale of what you select (it's highlighted in the game), frame rate and draw calls, buttons to pause, step one frame and reload, and the level file. DevTools opens the browser's developer tools for the game.
• Drag a 3D model (in a three.js game) or a sprite (in a Phaser game) from Generations onto the game to add it to the level where you drop it.

What Ryuo can do in a web gameCopy Anchor Link

The agent reads and edits the game's code and level files, checks the code with TypeScript and ESLint, and play-tests the game itself: it reloads the game, holds keys, runs short scripts inside the running game, takes screenshots and reads the game's console, errors and frame rate. It can pause the game, step it frame by frame and replay it with the same random seed to check exactly what happened.

Images, 3D models, sprites, sounds, music, materials and videos made in Ryuo go into public/assets/. 3D models are compressed with Meshopt, which the three.js template already loads. Sprites come with a Phaser texture atlas.

In a three.js game Ryuo can also turn a generated model into an animated character: it's rigged, given idle, walk, run and jump animations, and can become the player, keeping the player's controls and collision. Characters have no ragdoll in web games, and Phaser games use sprites instead.

Share the gameCopy Anchor Link

Ask Ryuo to package the game. It builds it for release into dist/ and zips it into builds/, with index.html at the top of the zip and only relative links, so it runs from any folder. Upload the zip to itch.io as an HTML game or submit it to CrazyGames. Ryuo warns you when the zip has more files than itch.io allows or is larger than CrazyGames recommends.

What's in your projectCopy Anchor Link

A web game is a normal Vite project you can open in any code editor:

• ryuo.json tells Ryuo it's a web game.
• src/ holds the game's TypeScript, levels/ its level files and public/assets/ its models, images and sounds.
• ryuo/ holds a small development-only Vite plugin that lets Ryuo see inside the running game. It's left out of the release build. Ryuo keeps it up to date each time you open the game.
• If you have Node.js, npm run dev runs the game in your browser and npm run build makes the release build.