Weekend Coder: Custom game UI

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.