×
Namespaces

Variants
Actions
(Difference between revisions)

WaterBubble Game Using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers)
chintandave_er (Talk | contribs)
(Chintandave er - removed Nokia project link and uploaded .zip source code)
Line 1: Line 1:
 
[[Category:Qt Quick]][[Category:Code Examples]][[Category:Games]][[Category:MeeGo Harmattan]][[Category:Symbian]]
 
[[Category:Qt Quick]][[Category:Code Examples]][[Category:Games]][[Category:MeeGo Harmattan]][[Category:Symbian]]
{{Abstract|[http://projects.developer.nokia.com/WaterBubble 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.}}
+
{{Abstract|[[File:WaterBubble Project.zip|thumb|Water Bubble]] 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.}}
  
 
[[File:WaterBubbleN8.png|300px]]
 
[[File:WaterBubbleN8.png|300px]]
  
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= [[Media:WaterBubble.zip]]
+
|sourcecode= [[File:WaterBubble Project.zip|thumb|Water Bubble]]
 
|installfile= [[Media:WaterBubble.zip]]
 
|installfile= [[Media:WaterBubble.zip]]
 
|devices= Nokia N8, E7, C7
 
|devices= Nokia N8, E7, C7
Line 171: Line 171:
 
== Source Code and sis file ==
 
== Source Code and sis file ==
  
The source code is available at [https://projects.developer.nokia.com/WaterBubble 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.
+
The source code is available from [[File:WaterBubble Project.zip|thumb|Water Bubble]]. You can download sis file for Symbian^3 device from this link: [[File:WaterBubble.zip]]. This Game is tested on Nokia N8 device.
 
+
  
 
== Video==  
 
== Video==  
 
You can also watch the WaterBubble Game in action below:
 
You can also watch the WaterBubble Game in action below:
 
<mediaplayer>http://www.youtube.com/watch?v=dRPqV7gbmwU</mediaplayer>
 
<mediaplayer>http://www.youtube.com/watch?v=dRPqV7gbmwU</mediaplayer>

Revision as of 15:24, 24 September 2013

File:WaterBubble Project.zip 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.

WaterBubbleN8.png

Article Metadata
Code Example
Installation file: Media:WaterBubble.zip
Tested with
Devices(s): Nokia N8, E7, C7
Compatibility
Platform(s): Symbian
Symbian
Nokia Belle
Article
Created: chintandave_er (23 Dec 2010)
Last edited: chintandave_er (24 Sep 2013)

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.

WaterBubbleN8.png

WaterBubbleSS.png

WBSnapshot5.png

WBSnapshot11.png

WBSnapshot12.png

Source Code and sis file

The source code is available from File:WaterBubble Project.zip. 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...

134 page views in the last 30 days.
×