OverviewV-Play 2 Support (Qt 5)Mixing components from VPlay Apps and VPlay Games › Reply To: Mixing components from VPlay Apps and VPlay Games

OverviewV-Play 2 Support (Qt 5)Mixing components from VPlay Apps and VPlay Games › Reply To: Mixing components from VPlay Apps and VPlay Games

V-Play Team

Hi Kool!

We didn’t do intensive tests about this up until now, but all components that do not rely on the application to be a GameWindow or an App should actually work. We can’t guarantee that some types might have some problems though.

It is possible to use the Game or App components in the other project type if you add the import statement (e.g. import VPlay 2.0 in an App project).
You could for example use a MultiResolutionImage with an App this way. Using Game components in an App should actually work in most cases.

Using App components in games can be a bit more difficult as there are more dependencies between the different app types. I set up a small demo project that uses some app types in a game and also fixes some initial compatibility errors, have a look:

import VPlay 2.0
import QtQuick 2.0
import VPlayApps 1.0

GameWindow {
  id: gameWindow

  activeScene: scene

  width: 960
  height: 640

  // you may change app theming options here
  Component.onCompleted: {
    Theme.platform = "android" // change platform to "ios" or "android" for testing on desktop
    Theme.colors.statusBarStyle = Theme.colors.statusBarStyleHidden // app setting to hide status bar
    Theme.colors.tintColor = "#ff0000" // or set some other theme settings ...

  Scene {
    id: scene

    // the "logical size" - the scene content is auto-scaled to match the GameWindow size
    width: 480
    height: 320

    // use app components normally
    Navigation {
      NavigationItem {
        title: "Nav 1"
        icon: IconType.home

        NavigationStack {
          Page {
            title: "Nav 1"
            AppSwitch {
              anchors.centerIn: parent

      NavigationItem {
        title: "Nav 2"
        icon: IconType.list

        NavigationStack {
          Page {
            title: "Nav 2"
    } // navigation

  } // scene

  // these functions are some quick fixes to solve some compatibility issues
  // (apps usually automatically provide these functions, and some components need them)
  function getApplication() {
    return gameWindow

  function px(value) {
    return gameWindow.gameWindow.px(value)

This example uses a Navigation and a Page with an AppSwitch within a Game/Scene. You may use this as a starting point if you want, but keep in mind that this is a bit hacky, so you should definitely test if everything really works the way it should.


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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support