Cascades animations in games

This article is a follow-up of How to use Cascades built-in animations

Animations are perfect for simple games, so let’s create one right now. The game we’ll be building is called ‘No Fly Zone’ and consist of a fly flying around the screen that we need to kill. First, we’ll need a fly image, so I’ve found this one from http://www.openclipart.org :

We’ll separate this image in two parts : the body and wings. Save those 2 images in ‘assets/images/’ folder (you’ll need to create ‘images’ folder).

To make the wings flap, we’ll put both images on top of each other and then set a small back and forth rotation transition to the wings. Let’s create a custom component for that fly and name it FlyImage.qml :

// FlyImage.qml
import bb.cascades 1.0

Container {
    id: flyContainer
    layout: DockLayout {}
    property int angleForWingsFlapping: 20

    maxHeight: 100
    maxWidth: maxHeight
    
    ImageView {
        imageSource: "asset:///images/fly_wings.png"
        onCreationCompleted: {
            wingsFlappingAnimation.play()
        }
        animations: [
            SequentialAnimation {
                id: wingsFlappingAnimation
                repeatCount: AnimationRepeatCount.Forever
                RotateTransition {
                    // Rotate wings clockwise slightly
                    toAngleZ: angleForWingsFlapping
                    duration: 2
                }
                RotateTransition {
                    // Rotate wings counterclockwise slightly
                    toAngleZ: 0 - angleForWingsFlapping
                    duration: 2
                }
            }
        ]
    }
    
    ImageView {
        id: flyBodyImage
        imageSource: "asset:///images/fly_body.png"
    }
}

Now, in main.qml, we can add this custom component by calling its name, and we’ll have a fly with flapping wings on the screen :

// main.qml
import bb.cascades 1.0

Page {
    content: Container {
        FlyImage {}
    }
}

https://www.youtube.com/watch?v=TJ6c6ZmBi-M&feature=youtu.be

Now that we have a fly with animated wings, let’s move that fly around the screen :

// main.qml
import bb.cascades 1.0

Page {
    id: mainPage
    
    // You may need to change deviceWidth and deviceHeight values depending on your device
    property int deviceWidth: 1440
    property int deviceHeight: 1440
    property int speed: 3000
    
    onCreationCompleted: {
        // Starts the animation when the app launch
        thisAnimation.play()
    }
    
    content: Container {
        layout: DockLayout {}
        background: Color.LightGray
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        
        FlyImage {
            id: flyImageAlive
            
            maxHeight: 100
            maxWidth: maxHeight
            
            // Starts at the bottom of the screen                        
            translationX: Math.random() * deviceWidth 
            translationY: deviceHeight + 100
            
            animations: [
                ParallelAnimation {
                    id: thisAnimation
                    
                    onEnded: {
                        // This is what happens when one animation cycle is done
                        
                        // Recalculate new translation points
                        thisTranslation.toX = Math.random() * deviceWidth
                        thisTranslation.toY = Math.random() * deviceHeight
                        
                        // Recalculate new scale transition value
                        thisScale.toX = (Math.random() * 1.5) + 0.5
                        thisScale.toY = thisScale.toX
                        
                        // Restart the animation with the new values
                        thisAnimation.play()
                    }
                    
                    TranslateTransition {
                        // Move the fly toX and toY values
                        id: thisTranslation
                        duration: speed
                        easingCurve: StockCurve.Linear
                        toX: Math.random() * deviceWidth
                        toY: Math.random() * deviceHeight
                    }
                    
                    ScaleTransition {
                        // Rescale the fly randomly
                        id: thisScale
                        duration: speed
                        toX: (Math.random() * 1.5) + 0.5
                        toY: toX
                    }
                }
            ]
        }
    }
}

https://www.youtube.com/watch?v=D40qomAw054&feature=youtu.be

So now we have a fly flying randomly around the screen. Only thing left to do is handling tap event for when the user hit the fly and creating a score board, and there you have a simple game using Cascades built-in animations.

Complete source code is available on GitHub

You can find ‘No Fly Zone’ free game in BlackBerry World at :
http://appworld.blackberry.com/webstore/content/59946084