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.

A first look at our Game UI

Hello GalaWorld. Last week we shared the icons we were working on and got some great feedback on our blog and other forums / reddit pages.

Today we share with you our Game UI that is a “work in progress”. Like our cards that we shared with you a few weeks ago, these are still not final.

Let me run through the layout with you. The center area you may recognize from a few weeks ago when we put up images of our 3D space UI. The center of the screen is where you will be able to navigate around the galaxy, zoom into sectors, see your ships and determine your best strategies.

Screen Shot 2015-03-31 at 9.11.38 PM

Around this center piece we have our HUD with various important pieces of information. The top-left will have the menu button, information about the current phase and a button to press when you are done with your turn. To the right of this, in the middle is our information area. This section of the UI will change contextually depending on what is currently selected or important. Farther on the right we have our rack of icons.

CBIpNl0UMAIz_rl.jpg_large

These Icons are currently undergoing revisions and we shared the Icons with you last week for feedback — they still are not done hence why this block is currently “empty”.

Screen Shot 2015-03-31 at 9.17.05 PM

At the very bottom-left we have some mysterious blue buttons. These will eventually also get proper Icon treatment and then be connected to sub-pages of the game. Right now most of them look the same but this is just “temporary”. When they have proper icons there will be: a tab for information, another for viewing blueprints of built ships, a third for intelligence information on other players and a fourth to review your research options.

On the far right and lower-right corner of the screen we have your deck, discard pile and your hand of cards. New cards can be drawn from the top of your deck and will move (in a hopefully very cool way) into your hand on the bottom-right of the screen. Currently we have the cards placed so that you can see the top-half of each card. We plan on making the full card visible on hover/tap or finger-press hold on the iPad. Cards in your hand can be played by dragging them onto the screen or by taping them and then pressing the “activate” button.

Thoughts?

We hope you like our HUD. As always please feel free to share any thoughts you have, we certainly read everything we hear!

Meet the Team : Rob Masson

Meet The Team Mondays - Head of Operations Rob Masson
Meet The Team Mondays – Head of Operations Rob Masson

We’d like to introduce you to a member of our team every Monday. This week we’re talking to Head of Operations Rob Masson.

Name:

Rob Masson

 

Role:

Head of Operations – Basically I get to do the paperwork.. 😉

 

About:

I am a Software Architect and co-founder of NeoCrux.  I have been an avid boardgamer, role-playing gamer and computer gamer since I was a kid.  Over the past couple of years I have been working on gaming projects to align my passion with my work focus.

 

What’s your favorite thing about GalaCollider? :

Honestly it is two things.  The first is the thrill of watching a new concept take shape and become a reality.  The second is the team.  There are so many awesome people working on this project and I am thrilled to be involved with them!

 

What inspires you? :

I am really inspired by books and movies.  I am an avid Sci-Fi reader and have been enjoying books about man’s adventures to the stars for years.  I love epic storylines like Dune and Foundation and I think GalaCollider has so many of those large epic elements to it!

 

What is your current gaming obsession?: Sid Meiers Beyond Earth for sure.  Plus I just restarted the StarCraft II Campaign.  For physical board games I am playing a lot of Deus and we just played Eclipse recently and I have to say how much I love that game!