Weekend Coder: Custom game UI

By Brian Scheirer on 29 Mar 2014 02:54 pm EDT

Much like musicians are often inspired by each other, I think that app design can be inspired from others too. A few weeks back I showed my interpretation of how to make a custom TabbedPane inspired by the Sochi Olympics app and today I have another design to share. Before I go any further, please don’t confuse this with stealing code/ripping off apps. These examples all contain original code that I am sharing for others to get an idea of a way something can be done.

In the Sochi app example, the idea was to mimic BlackBerry10’s native UI/UX but with custom colors and effects. This time my design breaks all the rules of the native experience and is more similar to the recently popular game called ‘Threes’. While I don’t recommend you use a UI like this for an app, it is perfectly acceptable to have it in a game. Let’s take a look at all the screen states possible for this UI in the diagram below.

The main Container of the main.qml page is defined by the red dashed box. In the case of the Z30, it is 2160px wide and 2560px tall or 3 screens wide and 2 screens tall. Each black dashed line box is the size of a full screen, therefore only one of these will be in the visible region of the screen at any given time. So the idea is that the screen labeled “A”  is the default view of the screen and can translate up to bring the “B” Container, the blue dashed lines, into the visible region. The “B” container is the width of three screens (B1, B2, B3). This is represented by the following QML code, where GameScreen and MenuPages are custom components:

Container { minWidth: 2160 minHeight: 2560 layout: DockLayout { } GameScreen { id: gameScreen minHeight: 1280 minWidth: 720 animations: [ TranslateTransition { id: gameUp toY: -1280 duration: 800 easingCurve: StockCurve.QuadraticInOut }, TranslateTransition { id: gameDown toY: 0 duration: 800 easingCurve: StockCurve.QuadraticInOut } ] } MenuPages { id: menuPage minHeight: 1280 minWidth: 2160 translationY: 1280.0 animations: [ TranslateTransition { id: menuUp toY: 0 duration: 800 easingCurve: StockCurve.QuadraticInOut }, TranslateTransition { id: menuDown toY: 1280 duration: 800 easingCurve: StockCurve.QuadraticInOut } ] } }

Inside of the GameScreen component there is a custom Button defined for starting the menuUp and gameUp animations:

CustomButton { verticalAlignment: VerticalAlignment.Bottom buttonHeight: 95 buttonWidth: 95 buttonImage: "asset:///images/menuicon.png" downImage: "asset:///images/menuicon2.png" gestureHandlers: TapHandler { onTapped: { menuUp.play(); gameUp.play(); } } }

And similarly in MenuPages the back buttons do the opposite:

CustomButton { verticalAlignment: VerticalAlignment.Bottom buttonHeight: 95 buttonWidth: 225 buttonLabel: "Back" gestureHandlers: TapHandler { onTapped: { menuDown.play(); gameDown.play(); } } }

Then as far as the swiping between menu pages, only the blue container slides left to right meaning that regardless of which of the three pages you are on, the “A” page is still directly above it.

Finally, to see this in action I have used this UI/UX in my latest game called Double Up. Above are screenshots from the game and yes not only did I use ‘Threes’ as an inspiration for the UI but the actual game too. While the game is great, I am here to tell you about the cool UI that houses it but feel free to chat with me about the game in the forums. As always, I hope this tutorial inspires BlackBerry coders to create awesome new apps.

Reader comments

Weekend Coder: Custom game UI


Nice article Brian! I've wanted to look into making a game in Cascades for a while as I've been making apps instead; so, this article is going to make me start making games :D

Posted via CB10

Just deleted ALL the funny comments regarding the small font size!?

C'mon, so much about historical preservation of things that happened on CB. Don't agree...

(OK, your post, Brian, if you think that reflects negatively on your professionalism, then delete it, or accept it - with a smile - as one of the things that just happen)

"No Q10?" -> "Buy from Chen... "

I thought it would be confusing to leave them in after it was fixed. Plus it only affected the app not through the browser.

Posted via CB10

Sounds complicated but I'm sure plenty of people smarter than me will take full advantage of this.

 BlackBerry Q10 

Thank you so much! Coding for BlackBerry seems so easy in comparison with Android. I really don't understand why android (java) is so difficult.

Posted via CB10

I really think so too. Cascades (QML) seems to just make sense. I think even more so than HTML/CSS which everyone always claims is the "easiest". I don't know Java (so by extension, I don't code Android) but the few times I have poked around I didn't like it too much.

Posted via CB10

Not a coder here, but still really interesting information, so thank you for posting, and for dedicating your time and effort to the BlackBerry community!

Tapped and flicked from my BlackBerry Z30!

Fantastic. I was actually just trying to figure this out the other day. Your example is a lot simpler than mine haha.

Posted via CB10

One thing to consider though is inside of what I have called MenuPages, depending on how many pages and what's in them it may be a good idea to have those as ComponentDefinitons to delay loading on app opening. And that way they load only when they need to be seen. And conversely you can have them free up memory when they are not visible.

Posted via CB10