Game design, art direction, and engineering brought together in a playable adventure.

My Role in this Project

Game direction and systems design
Visual identity and art direction
Player interface and interaction design
Map layout and world composition
Game and desktop development

Technologies Used

Phaser 4 and TypeScript
Vite
Electron and Electron Forge
Vitest and isolated play scenarios
Next.js and React marketing site

The Impact

A working adventure foundation
Consistent art and interface language
Readable equipment decisions
Shared browser and desktop gameplay
Repeatable design and testing workflows

A closer look.

Explore the screens. Select an image to view it full size.

The title screen establishes the visual language: weathered materials, warm gold, blue flame, and a simple menu that leaves room for the artwork. Captured from the development build.

An idle west-facing Son of Adam in the Ruined Hideout, surrounded by mossy stone walls, branching paths, a stash chest, and a blue travel lamp — The Ruined Hideout brings the adventure’s quieter systems into one place: a travel lamp, stash, woodland paths, and reclaimed stonework. Captured from an isolated development scenario.

Son of Adam facing southeast beside a stone-lined pond and pink cherry trees in the Blushing Grove — The Blushing Grove uses pink foliage, pale stone, and garden ponds to give its routes a distinct atmosphere. The character is shown in a southeast-facing idle pose.

A west-facing Daughter of Eve outside wooden shipwright and fishing workshops in Salt Port — Salt Port trades forest scenery for working waterfront details: timber decking, workshops, and nautical props. This development view shows Daughter of Eve facing west.

Daughter of Eve facing northeast on a pale stone bridge with decorative railings above Salt Port’s blue water — Stone crossings and iron railings give Salt Port a different rhythm from its wooden quays. The same fixed viewport frames the bridge and a northeast-facing idle pose.

A southwest-facing Daughter of Eve near a courtyard fountain in the dark stone streets of Crowroot Village — Crowroot Village shifts the palette toward dark stone and warm street lighting. Courtyard landmarks help break up the connected streets and distinguish the setting from the brighter maps.

Arrowflame development gameplay showing an archer in a snowy environment with a cabin and player HUD — World composition balances paths, scenery, and clear playable space. A fixed logical viewport preserves the same field of view as the game scales to different displays.

Daughter of Eve facing northwest beside a snow-covered crowned statue and royal hall ruins at Frostglass Lake — Frostglass Lake’s royal hall remnants bring larger landmarks into the snow map: a crowned statue, broken masonry, and frosted paving. Daughter of Eve is shown facing northwest.

A north-facing Son of Adam among broken stone ruins and overgrown paving on the Weeping Road — The Weeping Road uses overgrown paving, ruins, and a restrained pool of light around the player to create a more subdued expedition setting. The idle pose faces north.

Arrowflame’s equipment and inventory panel showing a bow, six worn items, ammunition, food, spare gear, and gems, with the idle character visible beside it — The equipment panel groups the bow, worn gear, and carried items while shifting the camera to keep the character visible beside it. This isolated scenario includes ammunition, food, spare equipment, and gems.

Arrowflame’s gems panel showing red, yellow, and green equipped gems above the carried-item grid, beside the hideout world view — The gems tab reuses the inventory’s frame and carried-item grid while giving passive upgrades their own space. Color and silhouette distinguish the equipped gems at a glance.

Arrowflame’s stash and equipment panels open side by side, with ten ammunition types sorted into the stash’s ammunition tab — The hideout stash places categorized storage beside the player’s equipment and inventory. Ten real ammunition types in this temporary scenario show how item silhouettes, rarity colors, and quantities read together.

The rationale

Build the world. Make every interaction belong.

Arrowflame brings together the parts of product work I enjoy most: defining an experience, giving it a visual identity, and building the systems that make it work. It is a top-down pixel-art archery and extraction adventure in active development under Makeable. The challenge is making movement, environments, equipment, menus, and feedback feel like parts of the same world.

The visual direction needs to hold together at several scales. A title illustration can carry atmosphere and detail, while a small inventory icon has to communicate through its silhouette. I’m developing a consistent language across character animation, environment art, item icons, typography, and parchment panels, then judging those pieces inside the actual game. Asset galleries and focused viewport studies make scale, contrast, and style differences easier to catch before they spread.

World design starts with traversable space. Route shapes, open areas, boundaries, and landmarks need to make sense before decoration is added. Keeping map layout and collision separate from presentation lets me refine the scenery without losing the structure of the playable space. The camera uses a fixed logical viewport and whole-number scaling so larger screens preserve the composition and field of view.

The interface has its own design problem: help players make decisions without burying the world under information. Equipment, carried items, and character panels share a compact visual system. Item inspection compares the effect of a possible equipment change against the current loadout, rather than leaving players to interpret isolated numbers. Clear grouping, consistent icon sizes, and hover cards that stay within the viewport make those details usable.

Underneath that presentation, Phaser and TypeScript run the same game in the browser and an Electron desktop shell. Focused gameplay systems separate rules from scene composition, rendering, and input. Framework-independent tests and isolated development scenarios let me check a particular interaction or screen without replaying the entire game or touching ordinary character saves. That structure gives design iteration a reliable foundation.

Arrowflame is still being built. The current result is a playable foundation and an evolving design system, with more content, balance, and polish ahead. Its coming-soon site carries the same identity into a deliberately restrained introduction. The goal at this stage is to show the craft behind the experience while leaving the world itself for players to discover.

Behind the build.

Short videos exploring the ideas, decisions, and work shaping Arrowflame.