Guides & Tutorials API Reference Examples & Demos
Documentation

V-Play Gaming Components

V-Play Gaming Components provide a specialized set of QML components for building 2D games for multiple platforms, with the same source code. Components exist for handling multiple display resolutions & aspect ratios, Sprites, Physics, Particles, Multimedia, Multitouch Input and AI.

Supported Platforms

The supported mobile platforms are iOS, Android, BlackBerry 10, Symbian and MeeGo. Supported desktop platforms are Windows, Mac OS X and Linux which are also used for fast development and testing.

Specifically, these platform versions are supported:

  • iOS Apple iOS version 5.0 and above / iPhone 3GS, iPad, iPod touch 3rd Gen or newer (armv7 architecture)
  • Android Android version 2.3 ("Gingerbread") and above / armeabi-based devices (armv5 and armv7 architecture)
  • BlackBerry All BlackBerry 10 devices
  • Symbian Symbian "Anna" and above
  • MeeGo All versions
  • Windows 32- or 64-bit Microsoft Windows XP Service Pack 2 or later
  • Apple 64-bit Apple Mac OS X 10.6 or later
  • Linux 32- or 64-bit Linux Ubuntu 12.04, 12.10, 13.04 & 13.10 or OpenSuse 12

Documentation Overview

If you are new to QML & the Qt Creator IDE, please follow the QML Introduction in this document. The Getting started with QML & Qt Creator guide explains QML and Qt Creator step-by-step in more detail.

For a short overview of V-Play, see the V-Play Introduction below. The tutorial about the Getting Started with V-Play goes through the most important V-Play components by creating a simple yet fun stacking game. For more sample games, have a look at the V-Play Components Examples and Demos overview. It is a collection of games that are live in the App Stores and also part of the V-Play SDK. They contain the full source code, so you can quickly create your own versions of tower defenses, platformers, side scrollers and more.

The table below shows an overview of the V-Play documentation:

Guides & Tutorials API Reference Examples & Demos

QML Introduction

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, because when the parent item moves all children will follow. JavaScript is used as a scripting language in QML. For a detailed documentation about QML, see the Qt & QML Resources section below for further links. In this section we will cover the basics of QML and its advantages by an example.

As code speaks more than 1000 words, here is a QML example implementing the following:

  • Displays a white background Rectangle with 800x600 px
  • Adds a grey button element which changes the color from grey to blue while pressed
  • The button is draggable
  • The button tracks the number of presses and displays it in its text element
  • The button gets invisible after it got pressed 10 times.

How many lines of code would it take you to develop this application with the same functionality in another programming language? With QML, it is just 30 lines, excluding the comments and empty lines:

 import QtQuick 1.1 // for accessing all QML elements like Rectangle, Text or MouseArea

 Rectangle {
   // background rectangle filling whole screen with black color
   color: "#000000" // white color, open up color picker with Ctrl+Alt+Space
   width: 800
   height: 600

   Rectangle {
     id: button
     color: "lightgrey"
     x: 100
     y: 50
     width: 100
     height: 40
     visible: pressCount < 10 // after the button being pressed more than 10 times, it gets invisible

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

     Text {
       text: "Pressed " + button.pressCount + " times" // this will automatically update when pressCount changes
       color: "black"
       anchors.centerIn: parent
     }

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

       onPressed: {
           // make the button blue when pressed
           button.color = "blue"

           button.pressCount++ // increase pressCount property by 1 each time the button is pressed
       }

       onReleased: button.color = "lightgrey" // reset to initial color when the button is released

     }
   }
 }

For a step-by-step introduction to QML and the Qt Creator IDE follow the Getting Started with QML & Qt Creator guide. This guide also contains tips how to use Qt Creator most efficiently, so it might be a good read even if you are already familiar with QML. More information on QML can also be found in the following resources.

Qt & QML Resources

If you need any support don't hesitate to ask for help in our support forums.

V-Play Introduction

After downloading the V-Play SDK, you can create a new V-Play game in Qt Creator: Select File/New Project and choose one of the V-Play templates. The following image shows a sample project created with the Empty V-Play Project template.

All V-Play games automatically support scaling to multiple resolutions if the GameWindow and Scene elements are used. You can read more about this feature in the guide How to create mobile games for different screen sizes and resolutions. You can even test how your game will look like on different devices like iPhone 3GS, iPhone 4, iPhone 5 or popular Android devices by pressing 1 - 6 on your keyboard while your game is running.

For an introduction to the most important V-Play components, please follow the Getting Started with V-Play guide. It contains a step-by-step tutorial how to create a simple game with V-Play including physics, particle effects and sound.

The V-Play Gaming Components are available with the following import statement in your QML file:

 import VPlay 1.0

For a list of available components see the Functional List of V-Play Components. It contains an overview of all V-Play Gaming Components with a short description what they do and is thus the perfect starting point if you are looking for certain functionality in your game. Also use the support forums if you have any questions how to implement your game idea, or for code-specific questions.