More about our card game’s interface

More about our card game’s interface

Today I would like to go a little deeper into our UI and the development process behind it.

If you’ve been following us you will have noticed that we have thus far shared two zoom levels of our UI: really far away (Galactic level) and very close (Battle level). Today we will go a little deeper into the various zoom levels and also share some of our transition-concept videos that should give a sense of how the UI looks and feels:

Galactic Level

Gala_Mainscreen_Blog_exposed
At this zoom level there will only be some basic information shown: Where your systems are and your opponents’ and the connections between various areas (the lines). This is just a concept image of the galaxy and will eventually need to be rebuilt in Unity3D. I should point out that we will be tweaking this in the game to have the lines between the sectors be more clearly visible. This may mean pushing back a bit on the galaxy-image.

Sector level


As we zoom in one “pinch” or “roll” we get a view of some of the sectors and their connections. The yellow and green diamonds represent quantities of ships, the circles beneath the sector represent how many developments that have been built on it. Beneath each is a number, which tells you how much available Command* remain.

* Command: How many ships you can have in a sector, bigger ships take up more command.

On the edge of the big circle are two small green and red circles, these rotate around the circumference like compass points and point towards (known) friendly and enemy home worlds.

For now this image shows the same gray planetoids all over the place, but the actual game will have various celestial bodies shown ranging from nebula clouds, to asteroids and various planet types.

The idea with the flow is that you will be able to pan the camera position by dragging your finger across the iPad screen (or scrolling if with your mouse). As sectors move to the edge they fade away and fade into view.

If you click on an actual sector it will move to be in the center of your view and then expand to show you more information, and look something a bit like this:

sector-view-circle_v2_with_HUD

This is very similar to the above image but now the central planet is enlarged into view. The 3D models of your ships hover on the left, and any enemy ships hover around the planet on the right.

You can move ships from this planet to neighboring sectors by dragging the ship over its neighbor. A single tap on your ship will also show you its information and related card; the same can be done with enemy ships. Planets (aka Sector-cards) and developments are also all tied to cards and by tapping on them, you will see their details too.

The 3 white circles in this image beneath the sector planet are place-holders for what our actual Development-symbols will be. Most likely they will become hexagonal in shape and be projected around the planet in a hexagon wire-cage. You may recall from my previous blog post with our first card spoilers that Developments are planetary structures of some kind.

Battle zoom

battle_with_HUD

This is the same image as before for the battle, just with the HUD around it. In battles you will select your targets, as will your opponent and then when all shots have been selected, both (or all players if more than 2) see each shot firing from all the ships involved.

Beneath the ships we will likely have more than 1 number. At the very minimum each ship will show beneath it 3 numbers: Attack, Hull and Retaliation. If you are familiar with other card games, these numbers may already make sense to you. Attack is how much damage the ship will deal, retaliation is how much it returns if fired at and Hull is how much remaining life points the ship has before being destroyed.

We will be experimenting with the use of icons to display special abilities of ships but for now the UI is clean and devoid of such information.

Not shown here is the fact that a tap on any ship will bring up further information and its related card. Like on the Sector zoom you can tap on your or enemy ships to see their full details.

The size of a ship can be important in our game, which currently is reflected in the size of the circle beneath the ship.

Ships have variable heights from the board but this is for visual aesthetics so that it feels like we are playing a miniatures game.

Finally all these 3D models are (probably) temporary, for purposes of concept illustration. The real game will also have a lot more color and not just be in gray tones.

Transition videos

These videos show, very roughly, how the transitions between the zoom levels might feel. This first video shows from the galactic to the sector zoom. This video has WAY too many sectors on it, but the feeling of it is great. So imagine it with half or less:

GalaCollider – 2-stage transition from GalaCollider on Vimeo.

Note that the movement depicted here for the sector level is a bit off because it shows some rotation when in fact all movement will only be pans (if this sentence doesn’t make sense to you, it probably doesn’t mater!)

Finally this video shows the 3 zoom levels. Like the first video though it isn’t entirely accurate in how it moves around, but the transition between the sector and the battle is nice and probably similar to how we will render it in our game. Before someone asks the red and blue lines are just tracing lines to make sure everything is matching up!

GalaCollider – 3-stage transition from GalaCollider on Vimeo.