Feral — Game case study

A neon action adventure seen through a feline heroine.

Players follow her through a rain-soaked city at night, exploring its streets, slipping past enemies, and uncovering what the city hides.

Overview

Feral is a 2.5D action-adventure game about exploration, stealth, and discovery. Players guide a feline heroine through a layered neon city, where she slips past enemies and examines what she finds. Contextual prompts point out objects worth a closer look, and an inventory keeps track of what she carries.

**Trailer**Exploration, stealth, and the neon city. With audio.

What I did

Interface design: Designed eight connected screens, from the main menu and heads-up display (HUD) to the inventory and character options, and built them as working, interactive screens.
Interaction design: Compared three inventory layouts and shaped how the HUD leads players from noticing an object to examining it.
Design system: Defined the colors, type, and reusable components, with available, selected, and locked states for every item.
Animation: Animated the interface’s highlights and transitions, and the movement of the heroine and her enemies.
Gameplay: Developed the playable prototype, where movement, stealth, and event feedback work together.
World & characters: Designed the city’s layered streets and neon landmarks, and developed the heroine from sketches to a 3D model.

Interface design

Eight interactive screens connect the main menu, gameplay, inventory, and character options.

Interaction design

Inventory paths and responsive HUD states show how the interface responds to player choices.

NEW WIREFRAME ALTERNATIVES

Inventory layouts

Three layouts compare how players browse items, read details, and move through the inventory.

A Grid layout 01

◇

Grid with visible details

Chosen: the grid keeps items and details visible together.

B List layout 02

◇

List with more text space

Alternative: the list gives descriptions more space but shows fewer items at once.

C Radial layout 03

◇

Selection around a circle

Alternative: the radial layout emphasizes position but makes keyboard navigation less clear.

Layout comparison

Drag the divider to compare the wireframe with the finished inventory screen.

↔

Inventory flow

Start or endScreen or actionDecision

Select a route to follow an available item or a locked slot.

HUD SOURCE + TARGETED SCAN STUDY

HUD & discovery

The HUD guides players from noticing an object to examining it.

ASPECT RATIO

Responsive layouts

The HUD keeps its four corners in view on wide, ultrawide, and compact screens.

COLOR / TYPE / STATES / COMPONENTS

Design system

Color, typography, and reusable components define the interface’s visual language.

Color palette

Canvas#020305

Selection rail#FF176C

Selected label#FF2F7F

Selection border hue#D9155D

Cyan accent#20D9EE

Screen heading#EEF2F5

Body text#C8D0D7

Typography

INVENTORY50 px / 700 / .22em tracking

PARALLAX OS CHIP34 px / 700 / .2em tracking

Encrypted Parallax OS storage.

19 px / 1.55 line-height / .03em tracking

DATA CHIP14 px / .16em tracking

Spacing1648 × 928 px source screen

ARTWORK

LABEL / 40 PX ROW

← 228 px →202 px14 px corners

22Grid gap · px

10Artwork inset · px

46 × 30Minimum key label · px

Item states

Available

Label: #DCE3E9
Border: rgba(150,162,175,.17)
Behavior: Filled slots can be selected.

Selected

Label: #FF2F7F
Border: rgba(217,21,93,.62)
Feedback: An edge highlight and glow mark the selection.

Locked

Label: #58636D
Artwork: A cross marks an empty slot.
Behavior: Locked slots cannot be selected; arrow keys skip them.

Interface motion

Animated highlights and transitions show when the selection or inventory changes.

Selection

900 ms

Inventory

900 ms

Gameplay design

Movement, stealth, and event feedback work together as the heroine crosses the city.

Neon streetsThe heroine crosses a lit main street in the open.

Close quartersAn enemy closes in and the fight plays out at arm’s length.

RooftopsA route above the street, away from the patrols below.

InteriorsIndoor spaces hold objects worth examining.

Environment design

Layered streets, neon signs, and landmarks give the city a distinct sense of place.

A dark bedroom with two lamps, framed posters, and a lit board of clippings above the bed — **Interiors**Two lamps and a board of clippings give the room its own pool of light.

A green-lit street corner with a Keep Out gate, vending screens, and a road closed barrier — **Side entrance**A gated doorway and a closed road turn the strip into a route.

A rain-soaked street with Japanese neon signage, news screens, and a patrol car in the distance — **Media City**Rain, screens, and a distant patrol car set the street’s mood.

A rooftop at dusk with red neon lettering, the Parallax Corp tower, and a large moon low in the sky — **Rooftops**Neon lettering and the Parallax tower mark the skyline.

Character design

A feline heroine and distinct enemy types establish the cast through models, movement, and combat behavior.

Main character

The heroine develops from pencil sketches into a finished 3D model.

Pencil concept of a hooded feline girl sitting above a city street with a cat

Three views of the feline character: wireframe, textured model, and clay model

Enemy design

The enemy’s form, movement, and visual detail are built and tested in the engine.