WaterBubble Game Using Qt Quick
WaterBubble is a simple children's game in which they pop air bubbles that appear on the screen (either by touching or using the computer mouse). The game is tested on Nokia N8 Symbian^3 device.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
WaterBubble QML File (Step by Step)
So Let’s create this app step by step.
First we need to create Item QML Element. So we created Item Element and gave it a unique Id. Now we need to define the size of the game's screen. So we added Width and Height tag in Item Element. We will add other required QML Elements for this game in this Item Tag. So Item tag will be the Parent for All elements.
Item {
id: waterBubble
// Added property to store bubblecolor
property real bubbleColor: 1
//This is a desktop-sized example
width: 800; height: 480
// All below QML Elements come here
}
Now we add the water Graphics in the item tag by creating Rectangle QML Element with background color look like water. You can design this tag using Design Tab of the Qt Creator. If your design tab is not enabled even if QML File is open in Edit tab, then go to Help Menu >> About Plug-in and check the Designer check box under Qt Creator name.
// water
Rectangle {
id: water
width: parent.width
height: parent.height
radius: 0
gradient: Gradient {
GradientStop {
position: 0
color: "#0d4dcc"
}
GradientStop {
position: 1.01
color: "#3471f5"
}
GradientStop {
position: 0.22
color: "#446af5"
}
GradientStop {
position: 0.99
color: "#3b62ee"
}
GradientStop {
position: 0.74
color: "#0b53c0"
}
GradientStop {
position: 0.22
color: "#186dec"
}
GradientStop {
position: 0.43
color: "#2488f9"
}
GradientStop {
position: 0.99
color: "#0b4cb3"
}
}
}
Now we add Small water bubbles in the water using Particles QML element that popping automatically in the water.
// small bubbles
Particles {
id: smallbubbles
x: 0; y: 0; width: parent.width; height: parent.height - 32
source: "images/SmallBluebubble.png"
angleDeviation: 360
velocity: 0; velocityDeviation: 0
count: parent.width / 30
fadeInDuration: 2000
opacity: 3
}
Now we need to add the code for popping the bubbles when any mouse event occurs. So we added MouseArea QML Element on Item Tag. There we defined the OnClicked and OnPositionChanged events and also added the code there to display image of the bubble.
MouseArea {
width: 800
height: 448
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.fill: parent
onClicked: {
try {
if (bubbleColor == 1){
Qt.createQmlObject("import Qt 4.7\nImage {\n id: whitebubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/Bluebubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: whitebubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
} else if (bubbleColor == 2)
{
Qt.createQmlObject("import Qt 4.7\nImage {\n id: pinkbubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/bubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: pinkbubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
} else if (bubbleColor == 4)
{
Qt.createQmlObject("import Qt 4.7\nImage {\n id: bubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/Greenbubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: bubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
}
} catch(err) {
dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message);
}
}
onPositionChanged:{
try {
if (bubbleColor == 1){
Qt.createQmlObject("import Qt 4.7\nImage {\n id: whitebubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/Bluebubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: whitebubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
} else if (bubbleColor == 2)
{
Qt.createQmlObject("import Qt 4.7\nImage {\n id: pinkbubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/bubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: pinkbubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
} else if (bubbleColor == 4)
{
Qt.createQmlObject("import Qt 4.7\nImage {\n id: bubble\n x:" + mouseX + "-40 \n y: " + mouseY + "-40 \n source: 'images/Greenbubble.png'\n NumberAnimation on opacity { \n to: 0; duration: 5000\n }\n Component.onCompleted: bubble.destroy(2000); \n} ", waterBubble, 'CustomObject');
}
} catch(err) {
dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message);
}
}
}
To make it little more interesting we added feature to select the color of the bubble: White, Pink, and Green.
Game screenshots
Here are some screenshots of the Waterbubble Game running on Symbian simulator and desktop environment.
Source Code and sis file
The source code is available at Nokia Project Repository as a public repository. You can download sis file for Symbian^3 device from this link: File:WaterBubble.zip. This Game is tested on Nokia N8 device.
Video
You can also watch the WaterBubble Game in action below: The media player is loading...
