Card templates, ships, operations and icons

Phew! We have a big update for you this week. Not only do we have an update on the icons (see previous blog post where we asked for help) but we also have adapted our card templates based on all the great feedback we got (see previous post about card templates). Most of your valuable comments came to us on other websites, forums and reddit pages, so please keep your feedback coming! (on this website or wherever it is you happen to be). We hope you will like what we have done with this latest revision.

New cards and templates

Cardtype-trio

From left to right we have: Developments, Ship designs and Operations. Developments and Ship designs are similarly colored and styled because they represent “things that go on the map” when played. In other words, when you play a ship, the card will leave your deck and instead transform into a 3D model on the map. The same thing happens when you play a development, so the act of building things thins your deck indirectly. When a ship or development is destroyed or discarded from the board, it reverts back to a card and goes into your discard pile.

Operations, the right most card are a little different in that they are played, do something and then get discarded.

Let’s go a little deeper into each card type:

Developments

Dev-explanation

Most cards cost resources to play, which is in the top-left corner. The special indicators on the left-middle will show you important things like: this card is Unique (only 1 on the board allowed) or that it is an HQ (only 1 HQ per Sector).

Tech-level is a universal meter that lights up to tell you if the card is zero, one, two, or tech level three. Higher tech level cards can only be obtained in-game by researching them and are more expensive to include when building decks from other factions outside of your own.

The lower area holds important icons with values, victory points for this item, some possible troop bonuses, political influence points etc. All the values on this lower part of the card are values that will be accumulated together when totaling up a Sector’s value.

Rotating around to the bottom middle we have our special text, which could be literally anything we are willing to code and debug, and above that is a number that indicates the Structural points of the development (basically it’s life points). Naturally the card has a name, but also subtypes for triggering off of other combos; and last but not least, a faction banner (which has yet to be designed so it is just a solid color).

Ship designs

Ship-explanation

Below the resource costs on the left, Ships have a size indicator that is a symbol and beneath it a reminder of the movement cost of this particular sized hull. We see in this example a circle icon; which tells us this is a large (dreadnaught sized) vessel. Dreadnaughts cost a lot of energy to move, which is why the movement-activation cost of this card is 3 (indicated right below the green circle).

At the bottom we see a curious row of modules. Ships will almost always have several modules equipped, each module is a special ability of some kind, many of these abilities are attached to a numeric value of some kind, which is listed below. Unlike the other two card types you will notice that ships are purely symbolic, meaning there is no free-text field, just modules. Modules can be added, improved, changed and there will be an ever growing pool of new modules to adapt to your ship models. We will eventually do a whole post on just the modules themselves.

Above this we see two red and blue symbols. The large red number is this ship’s base Attack power and the smaller red number is its Retaliation: how much damage this ship does when fired at, in return. The blue number is its Hull, or life points. How much damage it can take before being destroyed and put back into your discard pile.

Operations

Ops-explanation

Many operations are played, do something and then get discarded. However some operations have a little red X on the left (like this one), which instead indicates that you play it once, and then it gets moved to the Void instead of your discard pile. For current intents and purposes moving it to the Void is like removing it from your deck for good.

Otherwise the card is fairly simple. The art is presented in portrait instead of landscape and with a full gradient bleed. A lot of text space leaves the future open if we felt like writing long complicated unending card text with missing punctuation (what do you mean that’s a bad idea?)

Other card types?

We just showed you 3 card types, but in actuality there are 3 more card types still to come:

Cardtype-mysteries

Each deck will be built around a home world, with a special ability. This is your starting sector and drives your deck building. Every sector you explore is connected to a Sector card and a final card type are Mods. Which we won’t tell you much about right now, because we are only just getting to know one another, and you need to keep coming back for more, right?

Hey icons!

Oh yeah, our icons look different, as I am sure you noticed. Someone was also kind enough to point out that we spent an entire blog post talking about them but never mentioned what they actually meant! Ahem, yes so without further ado, here are the new icons along with what they actually are conceptually:

There are 3 base resources in the game: materials, research and energy. Or if you are a geek for science: matter, time and energy.

Generally, you will need materials to build everything, what do you make first? Research will require you to make difficult decisions between playing cards that cost Research, drawing new cards or buying higher-tech cards. Finally, Energy is used to not only create things but also to move elements around the map, or to activate certain abilities, forcing you to prioritize what is important.

Feedback? Next reveal?

So, are these new card templates nice? Did we finally make some good icons? What would you like us to talk about next? Here are some aspects of the game we could reveal:

  • Concept art for our alien race(s)
  • Concept art for our ships in progress
  • How higher technology cards are acquired in-game
  • How you construct your deck to play
  • Reveal information about Sector and Homeworld cards
  • Detail out how battles work
  • More about modules
  • A video demoing the Alpha in action with a real turn taking place?

Okay, I’m going to stop there because that’s already a lot!

Have a great weekend!

Oh and if you like what we are doing, please like our facebook page and/or join our newsletter to hear when something big happens (like the game is available to play)!

Space out

 

 

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!

Icons: a work in progress

GalaCollider features icons which appear on the HUD and on the cards. They represent resources available to the player and are an important element of the game.

When designing icons there’s a lot to consider. They need to be clear. They need to represent an idea in a way that can be interpreted by a diverse range of users. They need to stand out from other elements of the game, yet still fit with the over all style. They need to work on a variety of devices. But above all, they must enhance your experience of the game.

Sometimes things are quick to create, other times you just can’t quite seem to get it right. Our icons have gone through several revisions and we are still not there yet with something that looks good, fits our design and meets all the necessary requirements.

Here are the different versions we have made over time:

 

Version 1:

This is the clean, zero shading version. Exact shapes would need refinement but this was the original concept:

icons_v2

 

 

Version 2:

Version 1 pushed in a more “primary shape” direction, with some faded edges:

icons_v1

The conclusion from this was that the icons were too symbolic and would get confused with other colors and shapes in the game.

 

 

Version 3:

This version goes in an iconic direction. These are just placeholders and would need to be re-drawn:

icons_v3

These were now potentially too complex and so we then went to:

 

 

Version 4:

Back to more symbolic but now a symbol that hints at an icon. Somewhere between flat and rendered. Note that the lighting is a little different on the left than the right as part of our experimentation.
icons_v6

However version 4 was lacking “punch” and the icons were too dull and lost, especially at smaller sizes.

 

 

Version 5:

So then version 5: This is the same as the previous version except now with lighting effects from the center of the icons. the first 3 on the left were also cleaned up with thicker lines so that they would retain their shapes on smaller devices (phone screens, tablets etc.)

icons_v5

This looks decent but the colors in particular were not entirely fitting with the artwork and the rest of the style. However this was the “most final” of the icons we had produced as part of this process.

 

 

Version 6:

In a flash of inspiration, or folly… A completely different direction was the latest “let’s think this over again” approach. This is incredibly rough, and these images are just quick “place holders”, but the idea would be to have some sort of drawn icon with the numbers on top of them:

icons_v4

Similar to what Duel of Champions does for their three resources:

Meaning that we would draw icons and then render them in such a way that the number can be on-top of it in white. So you have to “imagine” the rock and the gear drawn to actually look like proper icons (similar to how well the above Duel of Champion icons look).

Considerations:

Simple Icons with a glow.

What makes this complicated is that the icons need to look good not only on the screen as part of the GUI but also when viewed on the top-left edge of one of our cards. We also need to show enough of the artwork on the left-edge of the card that you can see which card it is, by its artwork, without having to always click the card to see it.

As you ca see here, version 5 has nice symbols but the values of each of the resources need to go next to the icon instead of over the top of it, and that means it eats up more horizontal space. It also means that we end up with a lot of color on our cards and this break the coherency and mood of the artwork. (which is part of the reason I threw together version 6 quickly with the rendered icon look).

 

 

Next steps?

Oh icons, how you scorn us. At this point we could go back to version 1 and just refine that simple, iconic flat look, similar to what you see in other games like:

Screen Shot 2015-03-23 at 3.11.15 PM
Starships by Sid Meier

Or we could tweak our version 5 further to make it work on the cards without eating up so much room.

Simple Icons with a glow.

Or we could develop icons like Duel of Champions did.

Or some fourth or fifth option we haven’t thought of yet?

Feedback

So we’d like your feedback, not just on our designs (as shown above) but also about games you play where you like (or even dislike) the icons. What appeals to you? What’s important to you? Did we make any versions here that you like more than others?

Thank you!

 

 

Photo credit: https://www.flickr.com/photos/generated/323388124