How to use Midjourney and Figma Weave to prototype a classic point-and-click adventure

Nostalgia is a powerful drug, and for those of us who spent the nineties pixels-deep in Monkey Island, Myst, or Full Throttle, the classic point-and-click adventure game holds a sacred place in our hearts. Historically, building one required a daunting cocktail of custom engine scripting, pixel art mastery, and intricate scene state tracking.

Today, you can spin up a fully interactive, visually stunning adventure prototype over a single wet weekend. By pairing the spatial rendering capabilities of /platforms/midjourney with the dynamic, AI-powered UI component structures of /platforms/figma-weave, you can build a fully playable adventure game scene complete with hot spots, inventory items, and branching dialogue.

Here is how to get the mechanics right, maintain visual consistency, and assemble your first playable room.

Setting the Scene: Visualising Retro Rooms in Midjourney

Your first challenge is generating environments that actually look like adventure game screens. Point-and-click backgrounds need a very specific composition: they must be wide, flat-angled, and offer clear spatial logic where a character could walk or click. If Midjourney generates a tight close-up or a dramatic, blurry depth-of-field shot, your game is dead on arrival.

To get the composition right, you need to write highly structured prompts. Avoid generic terms like "retro game scene" and instead focus on technical production design terminology.

Start with this base prompt structure:

`text An isometric 2.5D point-and-click adventure game background, [your setting, e.g., a dusty retro-futuristic spaceship engine room], 1990s VGA pixel art style, hand-drawn detailing, clean composition, flat perspective, clear open floor space, detailed interactive consoles, rich colour palette --ar 16:9 --style raw `

If you prefer a late-nineties pre-rendered 3D aesthetic (think Grim Fandango or Myst), swap the "pixel art" descriptors for "low-poly 3D render, early CGI aesthetic, clean light maps". You can check out live examples of what these prompt combinations yield by visiting Midjourney's official showcase gallery on their platform.

To keep your game looking cohesive across different rooms, use the --sref (style reference) command. Once you generate a room you love, grab its image URL and append it to your next room prompts (--sref <URL>). This forces the model to respect the color grading, line thickness, and shading style of your primary scene.

Carving Out the Interactive Elements

Point-and-click games rely on interacting with specific objects. You cannot just have your objects baked into the background image; they need to be interactive, collectable, or capable of changing state.

There are two ways to handle this, and you will need a bit of both:

1. The Masking Method: Generate the scene with the object in place, then use an image editor to cut the object out and save it as a transparent layer.
2. The Direct Generation Method: Generate your items on a clean, solid background, then cut them out.

For direct generation, use a prompt like:

`text A 16-bit pixel art inventory item, [object, e.g., a rusted copper key], isolated on a solid magenta background, flat game asset style --style raw `

Using a solid magenta (or neon green) background makes keying out the asset incredibly easy in any basic image editor. Once you have your background and your isolated items, you are ready to bring them into the canvas.

Building the Logic in Figma Weave

Now we need to make it playable. /platforms/figma-weave is uniquely brilliant for this because it allows you to build dynamic, AI-assisted interactive states without writing complex front-end code from scratch.

Import your background into a new Figma frame, set to a standard 16:9 widescreen ratio (e.g., 1920x1080). Create a semi-transparent vector shape over the area you want to be clickable—for example, a dusty old book on a desk. This vector shape is your interactive "hotspot."

Using Figma Weave, you can attach dynamic, AI-driven UI components to these hotspots. Rather than writing tedious if/then statements for every single possible interaction, you can leverage Weave to prompt the component's interactive behaviour.

For example, select your hotspot and use Weave to generate an interaction model with the following instruction:

> "When the user clicks this hotspot, display a custom dialogue overlay at the bottom of the screen. If the user has 'copper key' in their inventory array, show option A: 'Unlock the chest'. If not, show option B: 'The lock is rusted shut.'"

This is where we see what makes this prototype tick. Weave handles the state variable (in this case, tracking whether the player has picked up the key) dynamically. You can create an Inventory Component at the bottom of your screen as a simple horizontal frame. When a user clicks your isolated key asset in the main scene, trigger a Weave action that pushes the item to the inventory array and hides the key from the game board.

Refining the UX and Handling Layout Quirks

Because we are merging static AI-generated imagery with dynamic vector overlays, you may occasionally run into alignment issues or perspective mismatches.

If you find your elements aren't aligning correctly or if your hotspots feel clunky, here are a few ways to clean up the user experience:

• Hover States: Always include a subtle hover effect on clickable hot spots. A simple cursor change (from a pointer to a magnifying glass or a hand) instantly tells the player what is interactive and what is just background fluff.
• Invisible Walls: If you are trying to make a character sprite move to the clicked location, use invisible vector shapes to map out the walkable floor area. This prevents the player sprite from wandering onto the ceiling.

If you run into issues with Figma's dynamic state engines or struggle with layout constraints while nesting your Weave components, you can find detailed technical workarounds at https://figma-support.com. If your Midjourney assets are looking distorted or lack flat-plane consistency, check out the community threads at https://midjourney-support.com for advanced aspect ratio and zoom parameters.

By the end of this process, you won't just have a static mockup; you will have a living, breathing point-and-click level that you can share with a simple link. It is the ultimate sandbox for testing game flow, puzzle logic, and atmosphere before committing to a heavy-duty development cycle.