Post news RSS Project: Card Battler Blog post #1

We're cooking up a deck builder storm as we begin developing our new card battler! Check out the details within!

Posted by on

Hey everyone, we're here to bring you our very first blog post for our new project!! I’m sooooo damn excited about it, let’s jump right into it!

Obviously our project is still in its infancy phase so today’s blog is going to be about game design. More specifically, UI design and game mechanics.

How It Started:

pasted image 0

As you can see, we went with the option to have 3 characters on the screen.

Then came time to decide how to handle our first UI elements (you can see above that we were testing how 3 rows of debuffs looked… not conclusive! )

We could either go for 3 separate decks (keeping in mind that we want every player interaction to happen within one turn, and not in separate turns) or have just one single deck for the party. After choosing the second option we arranged for the game to show which character owns the card when highlighted.

So now that we have our 3 characters drawing all at once, we need to show the casting cost of cards, and all other relevant info.

pasted image 0 1

We started from this and slowly worked our way to this:

pasted image 0 2

Here’s a little sneak peak on how this went:

First, we chose the icons representing the 4 casting cost components, which we call Strength, Dexterity, Faith and Destruction.

First iteration:

pasted image 0 3

Now that we had our casting components, we needed to decide where to place them on the screen, for each of the characters, and on the cards.

We tried a few things:

Surrounding icons and slanted card icons:

pasted image 0 4

Overhead icons and vertical card icons on the left side:

pasted image 0 5

Side icons and same card configuration:

pasted image 0 6

Back to overhead icons with split card icons:

pasted image 0 7

… with horizontal card icons:

pasted image 0 8

… with vertical card icons inside the art area:

pasted image 0 9

… with new icons inside the card art area:

pasted image 0 10

… with icons back in the corner:

pasted image 0 11

… with a slightly bigger background for the circle where the icons are located:

pasted image 0 12

... finally with some visible card effects:

pasted image 0 13

And a video to finish it off!

That’s it for now, time to go back to designing cards for the Priest, the Wizard and all the other ** classes we have planned. See you all on the next blog or in the feedback channel in Discord if you want to let us know your preference between the overhead icons or the side ones for the characters on the screen, or any other comment about the project of course!




Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.