How to Build a Game with REA Without Sacrificing Visual Quality

We built a small browser game called Relay garden. Collect six energy cells, avoid the drones, and return to the dock before your battery runs out.

We used two tools:

• REA (Reverse Engineer Anything) to find the code that controls movement.
• DreamLayer to create the environment and matching game objects.

A coding agent used REA’s findings to build the movement, then ran tests to check it. The game uses HTML, Canvas, CSS, and JavaScript. You do not need a DreamLayer account or API key to play.

Check how the player moves

We started with one question: does moving diagonally make the player move faster?

We wrote a small reference game, then gave REA its minified JavaScript: a compact version of the code prepared for delivery. REA helped locate the movement function. The agent read that code and worked out the rule: with full input, moving diagonally and moving straight ahead cover the same distance in the same time, as long as nothing blocks the player.

We then compared our implementation with the reference over 2,000 repeatable test cases, plus checks for boundaries and long frames. The results matched. A long frame also has a limit on how far the player can move, which prevents a sudden jump after a delay.

REA also reported gaps in its analysis. That is why we checked the behavior with tests. This is an example built around our own reference code. The movement investigation includes the exact formula, findings, and test limits.

Run the example yourself

Use Node.js 22, version 22.19 or newer. Clone the repository, install its dependencies, and start the game:

git clone https://github.com/TheDesignFounder/dreamlayer-game-assets.git
cd dreamlayer-game-assets
npm ci
npm start

Open the local address shown in your terminal, or play the live demo in your browser. Move with the arrow keys, WASD, or the on-screen buttons. Press Space to stun nearby drones and Escape to pause. You have three shields and 90 seconds to collect all six cells and return home.

To repeat the investigation and checks, open a second terminal in the same folder and run:

npm run investigate
npm test
npm run validate:assets

The drones, shields, pulse, and time limit are game rules we added. REA’s investigation covered movement.

Add matching game artwork

Next, we used DreamLayer to create the artwork in three steps:

1. Generate the environment. We asked for a sunlit garden courtyard with open space for the game objects.
2. Create a matching object sheet. We used the courtyard as the visual reference for a rover, drone, planter, energy cell, dock, and beacon.
3. Remove the background. DreamLayer made the space around the objects transparent so we could place them in the game.

You can read the exact prompts and generation records and download the original images from the repository.

The artwork does not control the game logic. Pause the game and switch between Artwork and Geometry: the player’s position, collected cells, remaining time, and movement rules stay the same. Changing an image’s size or empty space around it does not change the player’s collision area.

Prepare the generated assets

The images still needed a little preparation before we could use them. We:

• cropped each object from the sheet and trimmed the empty space;
• added eight transparent pixels around each crop;
• set each object’s display size and position in the game;
• recorded the crop coordinates, image dimensions, and import settings.

The import script repeats the cropping and padding steps. The game code sets where each image appears. The asset list records each file’s source and dimensions.

The rover is a still image that turns as it moves. We did not generate an animation for it. The game also respects reduced-motion settings by keeping the energy cells still instead of making them bob.

Reuse the workflow

We added integrate-game-art to the existing DreamLayer agent workflows. It is a set of instructions your coding agent can follow to:

• check what artwork a game needs and reuse suitable references;
• plan the credit budget before generating images;
• save job IDs so it can recover results after an interruption;
• check the downloaded files and test them in the game.

Choose your coding agent, then run the command from your project folder:

npx skills@1.7.2 add https://github.com/TheDesignFounder/dreamlayer-agent-plugin/tree/7bc11ad78e5238d5acec01dfd5ea584a5d371f87 --skill integrate-game-art --agent codex

Each option installs the same workflow. This walkthrough was tested with Codex.

Then follow the DreamLayer connection guide. Installing the instructions does not connect your account. Generating new artwork needs an API key and credits; playing the example does not. Keep your key in your local configuration, outside the game files.

Before a new generation, check what DreamLayer supports, check your balance, and set a total spending limit. If a request is interrupted, check its saved job ID before submitting another one. The asset workflow guide includes the planning and recovery commands.

REA is optional. Use it when you need to investigate existing game code. You can generate and integrate artwork without it. This example used the REA command-line tool; connecting REA through MCP is a separate setup.

What we learned from the DreamLayer Game Jam

Three jam entries helped shape our approach:

• Underbloom used consistent references for its creatures.
• Attar grouped props on a sheet before cutting them out.
• The Last Lamplighter connected changes in the artwork to what was happening in the game.

We used those ideas for a matching art set and dock lights that show how many cells you have collected. The artwork was generated for this example. We did not copy artwork from the jam entries.

Cost and testing

Creating the artwork used three DreamLayer credits, one for each completed operation:

All three jobs completed, and the account balance decreased by three credits. The times include running the command, uploading, and downloading. They describe this run; future requests may take a different amount of time.

We checked the movement, image files, transparency, and a complete browser playthrough. We also checked pause and restart, switching between visual modes, keyboard and on-screen controls, reduced motion, and desktop and phone layouts.

The example was tested with Node.js 22.23.3, REA 6.5.0, and Chrome 155. It demonstrates this browser-game workflow. We did not test the game in Unity or Godot. The verification record has the full versions, results, and limits.

Try it yourself

Start with the example code and bundled artwork, or use the workflow to create assets for your own game. Explore DreamLayer’s game artwork tools and the API, CLI, and MCP options when you are ready to generate something new.