Game mechanics, states, characters, design system
A space game where half the work is states
A space clicker. You build a station and a battleship, defeat galactic creatures and collect Galaxy Points. Five tabs on the surface, with all the upgrading, exploring and economy underneath.
- Game UI
- Design system
What I did
The game interface and the design system behind it. Screens, states, the look of every mechanic, the characters.
The game is built as a set of loops, and pages do not describe it. So most of the work went into states of the screens that already existed.
What the game is
You build and develop a space station and a battleship. You defeat galactic creatures and earn Galaxy Points for them.
From there, three ways to grow. Improve battle skills, head into discovery for battleship energy, invest in the workshop for passive mining.
The point of all of it is the airdrop at the end, which is why the points are counted seriously.
Five tabs
On the surface the game looks simple. Station, battle, discovery, workshop, friends. Everything else lives inside those five.
Hence the main task. There are many screens and only five ways in, and nobody should get lost between them.
The screen map
The whole MVP map. Onboarding with its guide, quests for subscriptions, account settings, the skills list, station upgrades, info windows, the airdrop.
The map zooms with the wheel and drags with the mouse, because nothing on a map this size is legible otherwise. Click it, then the wheel zooms.
Click to zoom with the wheel
The component library
The library lives apart from the screens. Every element is kept with all of its states at once, whatever form it happened to take on a particular mockup. Buttons, notifications, energy meters, station badges, battle icons, the tab bar, a frame-by-frame loader.
Buttons. Default, unavailable, with a notification dot, and a separate one for loading. Loading is a state of the button here, and nobody throws a spinner on top of it.
Notifications. Three colours cover everything. Green it worked, orange try again, red it failed. The colour reads before the text does.
The tab bar. Laid out for all five tabs, plus the variants with unread dots. It sits on every screen, so any slip in it is visible all the time.
The fleet and the stations
Nine ships and nine stations. This is the upgrade ladder. Every next step is a new model, so the player sees the growth literally, with their eyes, without a number in the corner.
Where they came from. The models were not drawn from scratch, they were bought and then taken further with a 3D artist. Renders, assembly, colour grading.
Where the work actually was. Bringing eighteen models to a single look. One material, one pair of colours, one light, one camera angle. Otherwise neighbouring upgrade steps look like they came from different games.
The main screen at every step
These are not nine different sections but the same main screen after each upgrade. Raise the station and the ship, and both of them change along with the planet behind them.
So progress shows up where the player spends most of their time, with no separate statistics window. Nexus, Pulsar, Nebula, Eclipse, Aurora, Starlight, Voyager, Zenith, Endurance.
Upgrading the station
Buying the station is not enough. Alongside the coins you need the technology branches raised, and the requirements are listed right on the station card, with ticks against what is done.
A branch level is the minimum across it. For technology to count as level three, every item inside has to be at least level three. One straggler holds the whole branch back.
Branches pay back. Every upgrade adds to the passive mining rate, so putting money into the requirements is not a toll on the station, it is an investment in income.
Upgrading the ship
The other half of the same economy. The station feeds you, the ship hits, and they are built the same way, they just pay for different things.
What gets upgraded. Five combat stats, click power, crit chance and crit power, recovery rate and recovery limit. Each one states what it was and what it becomes.
The branches are locked together. A new ship asks for levels the way the station does, and its upgrades additionally depend on specific station technologies. Neither grows without the other.
Discovery, tap the asteroids
Discovery is the second source of resources. Rocks fall from above, you have to hit them, and coins and energy drop out.
What it costs. Discovery burns battleship energy. It is a trade, you spend one kind of energy to mine another.
Why it exists. What you collect goes into Battle, where that energy is spent on monsters. Discovery is not a side amusement, it is preparation for the fight.
What it is made of. Thirty-nine rocks, an explosion of about fifty frames and two canisters, green for points and orange for energy. The canister is not a separate layer, it is drawn into the last frames of the explosion itself.
On the left is a screen assembled on this page, with no video involved. It is a demonstration of the mechanic and cannot be played.
One creature, evolving
Monsters get hit for a long time, and the same enemy wears out sooner than the interest in the game does. So each one has an evolution.
The steps run in order, from simple to heavy. The silhouette stays recognisable while the armour, the colour and the detail change, so the enemy growing is visible without a caption.
About a hundred creatures
Around a hundred monsters in the Battle section. That many are needed so the progression does not run out before the player does.
There are slightly fewer in the frame. One did not fit, but the grid came out even.
The Battle mode
The prototype is interactive, click the monster
A fight rests on one action, so the response to it matters more than anything else. Three things answer a tap at once.
The heat. The faster you hit, the redder the edges of the screen get. Stop, and the red drains away. It is the only way to show tempo without drawing a counter.
The crit. Every few hits a red texture flares over the screen and the number comes in large with a label. A rare event has to look like an event.
The damage numbers. They scatter from the point of the tap and fade. Set in the font the game uses.
Social and the airdrop
Everything a player does with other people lives here. Friends, quests, the leaderboard and the airdrop that the rest is for.
Friends. The bonus comes for the invitation, for a battle your friend wins and for the points they mine. Three reasons to bring people in instead of one.
Qualification. The airdrop screen gathers scattered actions into a checklist with a single verdict, passed or not. Until it is passed, you can see what is missing.
Onboarding
Seven steps before the first hit. Each one explains a single thing and shows it as a screen, with no explanatory text beside it.
The order mirrors the order of the game. Station and ship first, then the fight, then discovery and the workshop, and only at the end the airdrop that the whole thing is for.
A landing page before launch
Before launching the game we put together a landing page. It explains what the project is and serves as the way in for anyone who did not arrive from Telegram.
