Getting Started with QML & Qt Creator

After installing the V-Play SDK like described in V-Play Installation, create a new project with File/New. Choose the Empty V-Play 2 Project like it is shown in the image below.

Now specify a project location, build targets (Kits) and project details.

Note: The App identifier can only contain uppercase or lowercase letter, numbers or periods to succeed to the next step. See the license information in the publishing documentation for more information about the identifier.

Afterwards, the main.qml file is opened which contains the GameWindow and Scene components which is the basis for every resolution-independent V-Play game.

Qt Creator

The Qt Creator IDE is a powerful development environment available for all desktop systems including Windows, Mac and Linux. For a full documentation of Qt Creator see the Qt Creator Manual.

On the left sidebar the main edit modes are available:

  1. Welcome mode: Lists previously opened projects and Examples and Tutorials in an overview
  2. Edit mode: The default mode for development and coding.
  3. Design mode: Opens the QML GUI designer for the selected qml file. We recommend to use it only for early mockups of new UI files, as it may not be stable with complex files.
  4. Debug mode: For debugging C++ and JS code - if a breakpoint is set and the application is debugged Qt Creator will automatically switch to this mode.
  5. Projects mode: Other deployment targets like Symbian or MeeGo can be added here and different compilers can be selected. Also shadow building can be enabled. Shadow building is useful if the build output should be copied to a different folder.
  6. Analyze mode: When the application is launched from the Start button in the Analyze mode, the QML profiler or Valgrind memory or function profiler will be enabled. Mention that Valgrind is only supported on Unix systems (so on Linux and Mac platforms) and not on Windows. QML profiling including JS profiling works on all platforms!
  7. Help mode: Opens the integrated help. Most useful is searching after items or property names from the Index setting.

The integrated help is the primary source for documentation about the V-Play Gaming Components. There are 2 ways to use the integrated help of Qt Creator:

  1. Switch to the Help mode manually as explained above or with the shortcut Ctrl+7
  2. Place the mouse over an item or a property and press F1. This will automatically search the integrated help and open the help window. This is the suggested work-flow as it is quicker than searching the web or the index manually, because you are directly navigated to the documentation of the component, method or property.

Qt Creator Tips & Shortcuts

To get out most of Qt Creator, the following shortcuts are very useful:

Shortcut Meaning
Alt + Key left / right Navigate to previous used / next document
F2 Go into component
Ctrl + Space Perform auto-completion
Ctrl + Alt + Space Open QML helper for the currently selected item or property (like a color picker, animation selector, etc.)
Ctrl + K Searches all files in all open projects
Ctrl + / Toggle comment selection
Ctrl + 1-7 Switch between editor modes
Alt + 0 Show sidebar
Alt + 1-5 Switch between output pane
Ctrl + Shift + F Open advanced find
Ctrl + Shift + U Find usage of selected id
Ctrl + Shift + R Refactor & Rename

It is also convenient to split the Projects-View on the left side into a Projects-View PLUS an Open Documents-View. Just select the Split button next to the Close button of the Projects-View and then change Projects to Open Documents.

QML Basics

QML stands for "Qt Markup Language" and is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties. This tree is also often referred to as Scene Graph.

In this section we will cover the mere basics of QML and will create a custom button and place it in a screen-resolution-independent Scene.

QML Items and Syntax

First of all, clear the content of the main.qml, we will add our own code.

The most basic V-Play application consists of a GameWindow and a Scene, like this:

 import VPlay 2.0 // for accessing the V-Play gaming components
 import QtQuick 2.0 // for accessing all default QML elements

 GameWindow {
   Scene {

   }
 }

We are now adding a simple button with the following source code:

 import VPlay 2.0 // for accessing the V-Play gaming components
 import QtQuick 2.0 // for accessing all default QML elements

 GameWindow {
     Rectangle {
         // background rectangle filling whole screen with black color
         color: "black"
         anchors.fill: parent
     }

     Scene {
         Rectangle {
             color: "lightgrey"
             x: 100
             y: 50
             width: 100
             height: 40

             Text {
                 text: "Press me"
                 color: "black"
                 anchors.centerIn: parent
             }

         }
     }
 }

Just press the green run button on the bottom left of Qt Creator and the application will launch!

The code example shows some of the QML characteristics:

  • By default, the origin is always the top left position. If you want to change the origin, you can set an arbitrary transform. Anchoring is very useful for positioning as well - you can specify where the QML element should be placed based on the parent or sibling element.
  • With QML, you can easily set up item hierarchies and scene graphs, because when the parent item moves all children items will follow!

Let's go one step further and make the button click-able and let it follow user touches. There exists a component that handles touch or mouse input: MouseArea.

Let's assume the text of the Text element should change to Pressed when the user clicks the button, the color should turn green and the button should follow the mouse. Sounds complicated? Well it's as easy as that:

 Rectangle {
     id: button
     color: "lightgrey"
     x: 100
     y: 50
     width: 100
     height: 40

     Text {
         id: buttonText
         text: "Press me"
         color: "black"
         anchors.centerIn: parent
     }

     MouseArea {
         id: buttonMouseArea
         anchors.fill: parent // make the touchable area as big as the button
         drag.target: button // this forwards the dragging to the button

         onPressed: {
             // change the properties
             button.color = "blue"
             buttonText.text = "Pressed"
         }
         onReleased: {
             // reset to initial property values
             button.color = "lightgrey"
             buttonText.text = "Press me"
         }
     }

 }

You can see that references to other components are handled with the id property. Items are accessible with this id from the whole qml file and thus it must be unique, otherwise an error is reported.

QML Property Propagation

We can now extend this example to count how often the button was pressed and display the amount in another text element, and show an image after it got pressed at least 6 times. Therefore we need to define an own property pressCount and are using a great feature of QML called property propagation: When a property changes its value, it can send a signal to notify others of this change. You can listen to that change by adding a on<PropertyName>Changed signal handler like the following:

 Rectangle {
     id: button
     color: "lightgrey"
     x: 100
     y: 50
     width: 100
     height: 40

     onXChanged: console.debug("x changed to", x)
 }

The great thing is, you can put arbitrary complex JavaScript expressions into the signal handlers, which allows listening to state changes and thus fast, readable and very little code in your games. In addition, changes of properties are detected automatically if you put them inside an expression. This may sound complex at first, but let us have a look at the solution for the above example:

 Scene {
     id: scene

     property int pressCount: 0 // initialize with 0, increase in onPressed

     Text {
         text: "PressCount: " + scene.pressCount // this will automatically update when pressCount changes
         color: "#ffffff" // white color, open up color picker with Ctrl+Alt+Space
     }

     Image {
         // position the image at the right center
         anchors {
             right: parent.right
             verticalCenter: parent.verticalCenter
         }
         source: "vplay-logo.png"
         visible: scene.pressCount>5 // only display when pressCount is bigger than 5
     }

     MouseArea {
             onPressed: {
                 // change the properties
                 button.color = "blue"
                 buttonText.text = "Pressed"

                 scene.pressCount++ // increase pressCount by 1
             }
     }
 }

So the image will only be visible when the button was pressed at least 6 times, and the text will automatically change whenever the pressCount property gets changed. This is the result how it will look like:

There are many more items available in QML, but the above mentioned are the most important. For a list of most useful QML components see here. In addition to these QML items, you can use the V-Play Gaming Components which are specialized for 2D games.

In the next guide, we examine the most important V-Play Gaming Components and will create a simple game using physics, particle effects and audio across all platforms. Follow the link to Entity Based Game Design

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