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 on top of Qt 5 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.

See V-Play Benefits for Qt 5 Developers for more details how V-Play improves the Qt framework.

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)
  • 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
  • Windows Phone 8 & Windows Runtime See here for the Deployment Guide.

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 2.0 // for accessing all QML elements like Rectangle, Text or MouseArea
import VPlay 2.0 // for accessing all V-Play elements like GameWindow

GameWindow {

  Rectangle {
    // background rectangle filling whole screen with black color
    color: "#000000" // white color, open up color picker with Ctrl+Alt+Space
    anchors.fill: parent // make as big as parent GameWindow
  }

  Scene {

    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

      }
    }
  }// Scene
}// GameWindow

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 ctrl(cmd)+1-7 on your keyboard while your game is running.

For an introduction of 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 2.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.

V-Play Benefits for Qt 5 Developers

V-Play, a Qt Technology Partner of Digia, enhances the Qt 5 framework with many components and its gaming API used in hundreds of games.

Existing Qt 5 games can benefit from this gaming API and V-Play plugins, because they work as an extension of the Qt framework and work together with existing projects. As a Qt developer, you get the following benefits by using V-Play:

And of course as part of V-Play you can use our leading Qt plugins that enable you to:

  • Monetize your game with cross-platform in-app purchases, AdMob & Chartboost ads or a Level Store
  • Constantly improve your game with Flurry analytics
  • Make your game social with V-Play Game Network including support for Facebook and GameCenter

The following sections explain V-Play benefits for Qt developers in more detail.

Content Scaling

Content Scaling allows you to create a game once for all screen sizes and resolutions. V-Play simplifies working with a single logical size with these use-cases:

  • Position your game entities on a logical scene for equal and fair game experience across all platforms.
  • Easy positioning of UI elements based on the screen and not based on the logical scene. See here for a tutorial.
  • Easily define physics objects across devices. Without this addition, each physics object would behave differently because its dimensions would depend on the physical screen size. V-Play solves this issue.
  • Keep entity positions in levels consistent across screen resolutions: If one level is saved on one resolution and then played on another device with a different resolution, the level would look different. V-Play solves this issue.

Content scaling can be used with the MultiResolutionImage, AnimatedSpriteVPlay and SpriteSequenceVPlay components. For a tutorial see How to create mobile games for different screen sizes and resolutions.

Dynamic Image Switching Support

V-Play adds support for dynamic image switching based on the screen size, on top of Qt 5. This allows you to:

  • Save graphics memory: based on the screen size, the best matching image is selected to avoid upscaled and blurry images, and to save memory compared to an approach where always the highest resolution images are used.
  • Improve loading times: as the best-sized image is selected, you get an ideal loading time of the used image.
  • Work with the logical size of the image in your GameWindow and Scene to simplify multi-resolution positioning and to use Content Scaling.

See the V-Play File Selectors documentation for more details about dynamic image switching.

The V-Play Script for Multi-Resolution Asset Generation alllows you to create sprite sheets from single sprite frames and scale them down automatically.