next »

[ambo100]

Hi. I'm independently designing a mobile game in Unity3D which I'm calling 'Card Crashers' for now. I'm looking for advice and constructive feedback on the User Interface of my game.

Gameplay

Put simply, the goal of the game is to destroy a stack of cards by removing as few cards as possible. The players uses touch to tap and remove a card. There is a limit per level to the amount of cards that can be removed.

Animated Gameplay Preview


Building a minimal UI

In an earlier version of game below, starting from the top left, going clockwise you can see the: Exit button, Score, Help Icon, Play Game Button and Restart Level button.



Whilst developing the game I found these icons made the game look cluttered, particularly on a handheld device.

I removed the green 'Play Game' Button. This used to un-pause the games physics and allow the cards to fall, now removing a card will have an instant effect of the physics.

I also removed the blue 'Help' Button because I decided I could include it in the menu or as a tutorial.



After putting together a design document to help me plan the overall theme of the game, I've decided to theme the interface as a playing card.



The only remaining piece of UI is the score which is shown where the black X is (in the top-left corner).

Where I struggle is trying to incorporate the Menu and Restart features of the game. I have already tried developing a way of restarting the game by swiping left or right to reveal a new card below but I had many, many problems implementing this feature successfully.

Ideally I'd like to use intuitive touch/motion controls of the mobile platform to perform these functions rather then spoiling the playing card style. If anyone can suggest any ideas or share games that might inspire me, that would be appreciated!  

[TEETH]

The buttons themselves don't look bad. It's the bright neon color on them. If you make them monochrome and a tad smaller, I don't think it would look that bad.

[valrus]

Now that you have the card skeuomorphism going, it's kind of begging for corner symbols (e.g., where you would have K and a heart).

Maybe in the upper left corner, have your level number and one of four difficulty classes (heart, club, diamond, spade), and if the player taps it the camera pulls back slightly and you get a level-select menu like a tableau of cards spread out (e.g. http://i2.wp.com/successify.net/wp-content/uploads/2013/04/poker_cards-1920x1200.jpg).  Horizontally, vertically, in a rainbow or whoosh, whatever ends up working best.  Scrolling scrolls the tableau to additional cards, selecting another card selects that level.

In the lower corner, some other numeric information like score, or moves remaining, and in place of the suit symbol, the restart symbol.

[ambo100]

The buttons themselves don't look bad. It's the bright neon color on them. If you make them monochrome and a tad smaller, I don't think it would look that bad.

That's not a bad suggestion. That seems like it would be the easiest solution.

Now that you have the card skeuomorphism going, it's kind of begging for corner symbols (e.g., where you would have K and a heart).

Maybe in the upper left corner, have your level number and one of four difficulty classes (heart, club, diamond, spade), and if the player taps it the camera pulls back slightly and you get a level-select menu like a tableau of cards spread out (e.g. http://i2.wp.com/successify.net/wp-content/uploads/2013/04/poker_cards-1920x1200.jpg).  Horizontally, vertically, in a rainbow or whoosh, whatever ends up working best.  Scrolling scrolls the tableau to additional cards, selecting another card selects that level.

In the lower corner, some other numeric information like score, or moves remaining, and in place of the suit symbol, the restart symbol.

I like that idea, I'll need to think about how I will actually implement that in my game because the way it is set up, it is designed to show one card at a time.

I'm using the X to show the current score which is where the card value is usually shown.