How to Make Doodle Jump with V-Play - Multiple Scenes and Google Analytics

Introduction

This is the third part of the How to Make Doodle Jump with V-Play tutorial. In this part we will cover two major features that no game should miss.

  • First, I will show you how to add multiple scenes to your game. More specific, we will add a menu scene and handle the navigation between the menu and the game scene.
  • And second, we will integrate the V-Play Google Analytics plugin into our game. We will use this to track the number of times each scene is active.

Multiple Scenes

Scene Base

Having multiple scenes is essential for every decent game. To add this feature, we are going to perform some changes in our project.

Create a new file SceneBase.qml in your scenes folder.

SceneBase.qml

import VPlay 2.0
import QtQuick 2.0

Scene {
  id: sceneBase

  width: 320
  height: 480

  // by default, set the opacity to 0. We handle this property from Main.qml via PropertyChanges.
  opacity: 0

  // the scene is only visible if the opacity is > 0. This improves performance.
  visible: opacity > 0

  // only enable scene if it is visible.
  enabled: visible
}

SceneBase.qml is going to be the base class for all our other scenes.

In this class we set the default width and height values for all other scenes. Also we define some basic scene transition properties. We will need those later, to navigate between scenes.

Update Game Scene

Now change the GameScene's root element from Scene to SceneBase.

import VPlay 2.0
import QtQuick 2.0
import QtSensors 5.0
import "../"

SceneBase {
  // ...
}

Of course, we want to be able to navigate from the GameScene to the MenuScene. So let's prepare a new signal menuScenePressed to your GameScene.qml.

SceneBase {
  // ...
  signal menuScenePressed
  // ...
}

Signals in QML are a great way to realize communication between components. Whenever you face a situation, where one component should react to an event that occurs in another component, signals are your best friend. To learn more about signals, see the official documentation here.

After that, we add this Image element just before the last closing } of your GameScene.qml.

Image {
  id: menuButton
  source: "../../assets/optionsButton.png"
  x: gameScene.width - 96
  y: -40
  scale: 0.5
  MouseArea {
    id: menuButtonMouseArea
    anchors.fill: parent
    onClicked: {
      menuScenePressed() // trigger the menuScenePressed signal

      // reset the gameScene
      frog.die()
      gameScene.state = "start"
    }
  }
}

With this, we have a clickable button, that triggers our signal when it is pressed. We will handle the menuScenePressed signal in our Main.qml later.

Menu Scene

Create MenuScene.qml in the scenes folder and paste the following code.

MenuScene.qml

import VPlay 2.0
import QtQuick 2.0
import "../"

SceneBase {
  id:menuScene

  // signal indicating that the gameScene should be displayed
  signal gameScenePressed

  // background image
  Image {
    anchors.fill: menuScene.gameWindowAnchorItem
    source: "../../assets/background.png"
  }

  Column {
    anchors.centerIn: parent
    spacing: 20

    Rectangle {
      width: 150
      height: 50
      color: "orange"
      Image {
        id: gameSceneButton
        source: "../../assets/playButton.png"
        anchors.centerIn: parent
      }

      MouseArea {
        id: gameSceneMouseArea
        anchors.fill: parent
        onClicked: gameScenePressed()
      }
    }

    Rectangle {
      width: 150
      height: 50
      color: "orange"
      Image {
        id: scoreSceneButton
        source: "../../assets/scoreButton.png"
        anchors.centerIn: parent
      }
      MouseArea {
        id: scoreSceneMouseArea
        anchors.fill: parent
        onClicked: frogNetworkView.visible = true
      }
    }
  }
}

So we begin with creating a signal to trigger the GameScene transition. Then we set a background image.

The Column element helps us defining the layout of our menu. All elements defined in a Column are placed below each other. We add two Rectangle elements - these are our menu buttons. The first one leads to the GameScene, the second one to our VPlayGameNetworkView.

If you are wondering why the two Rectangles are used to create the buttons, here's why: The Column component aligns the buttons based on the fixed height of the Rectangles. The Image inside is actually bigger. So by using the Rectangle for alignment, the Images overlap a bit in the middle.

That's all we need for our new scene. So let's add the MenuScene to our Main.qml and move the VPlayGameNetworkView from the game scene to the menu scene.

Main.qml

GameWindow {
  // ...

  GameScene {
    id: gameScene
  }

  // the menu scene of the game
  MenuScene {
    id: menuScene

    VPlayGameNetworkView {
      id: frogNetworkView
      visible: false
      anchors.fill: parent.gameWindowAnchorItem

      onShowCalled: {
        frogNetworkView.visible = true
      }

      onBackClicked: {
        frogNetworkView.visible = false
      }
    }
  }

  // ...
}

As the last step, because we now access the game network from the menu, you can remove the makeshift SimpleButton in your GameScene.qml.

Adding the Navigation

So now that our scenes are all set up, we can handle the scene transitions.

In your Main.qml update your GameScene and MenuScene,

Main.qml

GameWindow {
  GameScene {
    id: gameScene
    onMenuScenePressed: gameWindow.state = "menu"
  }

  MenuScene {
    id: menuScene
    onGameScenePressed: gameWindow.state = "game"

    VPlayGameNetworkView {
          // ...
    }
  }
}

and finally add this piece of code, to add states and handle state transitions.

GameWindow {
  // ...

  // starting state is menu
  state: "menu"

  // state machine, takes care of reversing the PropertyChanges when changing the state. e.g. it changes the opacity back to 0
  states: [
   State {
     name: "menu"
     PropertyChanges {target: menuScene; opacity: 1}
     PropertyChanges {target: gameWindow; activeScene: menuScene}
   },
   State {
     name: "game"
     PropertyChanges {target: gameScene; opacity: 1}
     PropertyChanges {target: gameWindow; activeScene: gameScene}
   }
  ]
}

So what's happening here? In the GameScene and MenuScene we handle our navigation signals and change the game's state to either menu or game. Our state machine then activates and shows the respective scene.

Great, now that we have multiple scenes functionality, it's very easy to add even more scenes. For a more detailed description of how to create games with multiple scenes or levels, check out this tutorial.

Google Analytics

Requirements

V-Play offers many different plugins. They help you to display ads, connect to social media or even add in-app purchases to your game. For a list of all available plugins see here.

To add plugins, like Google Analytics, to your game, you will need the following things:

  • A Valid V-Play license, Indie or higher. With a such a license you can use all available plugins. Alternatively, you can also purchase a license for only one individual plugin.
  • A correctly set up Qt environment. Follow these install instructions.
  • Make sure your project uses the Gradle Build System, as described here.
  • For the Google Analytics plugin: A Google Analytics account. You can create one here.

For a guide how to add Google Analytics plugin to your project, please visit the plugin integration page. After you successfully added the plugin, you can proceed with the next step of the tutorial.

If you have any troubles with the various installation steps, please ask for help in the forums: V-Play Plugin Support.

Using the Plugin

Go to the admin tab of your Google Analytics account and create a new property.

Select Mobile App, enter an App Name and press Get Tracking ID.

You are going to receive a property ID. This ID will look like this: UA-12341234-1. We will need this property ID to add the Google Analytics Plugin to our game.

Next you will need a V-Play license key, that allows you to use the Google Analytics plugin. You can create a license key here. Just select the plugin and enter the correct app-identifier and version-code of your project. If you are not sure about these values, you can look them up in your Other Files/qml/config.json file. In case you already have a licenseKey set in your GameWindow, replace your previous licenseKey with this new one.

Now open your Main.qml and import Google Analytics.

  import VPlayPlugins 1.0

Afterwards add the GoogleAnalytics element, right after the EntityManager.

GoogleAnalytics {
  id: ga
  licenseKey: "yourLicenseKey"

  // property tracking ID from Google Analytics dashboard
  propertyId: "UA-12341234-1"
}

Enter both your V-Play licenseKey for Google Analytics and the Google Analytics propertyId. If you already use the licenseKey in the GameWindow, you may skip adding the licenseKey for the plugin. The GameWindow licenseKey will be used automatically.

Tracking

Now we have everything ready to start tracking the game. There are two functions you can use to track the game.

  • logScreen(string screenName) let's you keep track of screens.
  • logEvent(string eventCategory, string eventAction, string eventLabel, int value) helps you track events.

Events are a useful way to collect data about a user's behavior. For example you can track button presses or the use of a particular item in the game. Every event has to have at least an eventCategory and an eventAction.

Now let's add tracking to our game. In your Main.qml add the logEvent function to the MenuScene and the GameScene components.

GameWindow {
  // ...

  GameScene {
    id: gameScene
    onMenuScenePressed: {
      gameWindow.state = "menu"
      ga.logEvent("Click", "MenuScene")
    }
  }

  MenuScene {
    id: menuScene
    onGameScenePressed: {
      gameWindow.state = "game"
      ga.logEvent("Click", "GameScene")
    }

    VPlayGameNetworkView {
        // ...
    }
  }
}

You see it's very simple. We log an event every time the user presses one of the buttons to switch scenes.

To see your collected data go to the Google Analytics page. Open the Reporting tab, click on Behavior in the sidebar, then open the Events subsection.

At first everything might look a bit confusing, but I'm sure you'll get the hang of it once you log more events and browse through the data and statistics.

Well Done!

Now you can track your user's behavior and use the collected data to further improve your games. In the next part of this tutorial I will explain how you can monetize your game to earn some money with two more V-Play plugins: AdMob and Chartboost.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us