Hi, welcome to V-Play!

We prepared a one-minute tour to introduce you to V-Play, a cross-platform development SDK based on the popular Qt framework.

You can also start creating cross-platform apps & games right away!

The Basis of V-Play

Qt is a very popular C++ framework which has simplified cross-platform development for 20 years and is used by more than 1,000,000 active developers.

Did You Know?

Qt is pronounced exactly like "cute". Encountering Qt worshippers and pronouncing it wrong can lead to bad mood and (in rare extreme cases) to 3D transformations of your nose. Yeah, they are sometimes special...

Taking Qt One Step Further

V-Play enhances the Qt core with components for app and game development.
It also offers plugins for ads, in-app purchases, analytics and much more.

  • Code Once - Deploy Everywhere
  • Native Performance
  • Component Based
  • Native Device Features
  • Sensors & Location
  • Networking & Connectivity
  • Storage / Database
  • Multimedia Content
  • Localization

Watch Video
  • V-Play App Components
  • Native Look & Feel
  • Auto-adapting UI
  • Controls
  • Smooth Animations

  • V-Play Game Components
  • Resolution Independence
  • Physics
  • Game Templates
  • Multiplayer
  • Leaderboards and Achievements
  • In-game Level Editor

Monetization
Analytics
Push Notifcations
Social Services

Write Better Code - with QML

Qt Meta Language is a highly intuitive declarative 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.

Hello V-Play! 0
  • Code Once - Deploy Everywhere
  • Powerful Property BindingsConnect properties to update on changes, automatically!
  • Save up to 80% Code
  • Increase Productivity

Create your own V-Play app in 1 minute, without installing the SDK!

Only 2 Steps to Your First App

1. Download the V-Play Live Coding App

The V-Play Live Coding app is available for Android and iOS in the Appstore.

or
Scan QR to download

2. Connect the App

To connect the app with this editor, you only need to generate a Live-ID and enter it in the App.

Live Coding Tutorial

The V-Play Live Coding App

Before we can proceed, please make sure you downloaded, started and connected the V-Play Live Coding app on your mobile phone.

Once connected, you can switch between Android and iOS native layout of your application, in the lower right corner of the app.

The Editor

On the right, you can see the code editor, used to write your code.

Any time you want to run your code, just press the green button in the lower right corner of the editor, and the app on your mobile will automatically be updated with the latest code.

This tutorial will show you how to use some of the V-Play app components to create a traditional app, that looks native on both Android and iOS.

Hello V-Play

The editor already contains the code for a simple 'Hello V-Play' app. Try to change the text property of the AppText component and press run, to see the changes in your app.

Display an Image

As a first step of this short tutorial, we'll add a scary to our app. This is super pretty easy, using the AppImage component.

Note: In the code below, I stripped the contents of the AppText and just added { ... } instead, to make the code more readable. I will do this frequently in this tutorial, make sure not to copy this to the editor on the right. If you have problems in any step, just use the Insert Code button after each code block.

App {
  id: app

  AppText { ... }
  
  AppImage {
    width: dp(150)
    height: dp(150)
    anchors.horizontalCenter: parent.horizontalCenter
    y: dp(40)
    source: "https://v-play.net/qml-live/monster.jpg"
  }
} //App
Insert Code

If you run the app, you'll see the image. If you have a look at the source property of the AppImage, you'll see that it is possible to use an URL, not only local images. We also applied a custom width, height and centered the image horizontally.

Pages

An app usually shows different informations on different pages. In order to manage the visibility of the different pages, we need to wrap our content with Page components, like this:

Page {

  AppText { ... }
  
  AppImage { ... }
} //Page
Insert Code

Push another Page

Next we want to add a very simple form of navigation: Pushing a new page on the stack and navigate back to the initial page.

To do this, first of all we wrap our page in a NavigationStack component to enable push and pop of pages, as well as displaying the navigationbar.

NavigationStack {

  Page {
    
    AppText { ... }
    
    AppImage { ... }
  } //Page
} //NavigationStack
Insert Code

We also add a title to the Page and an id to the NavigationStack in order to interact with it.

NavigationStack {
  id: stack
  
  Page {
    title: "First Page"
    
    AppText { ... }
    
    AppImage { ... }
  } //Page
} //NavigationStack
Insert Code

Next, we add a button to trigger the push of a sub-page. First of all, we'll add the button and anchor it to the bottom of the page.

Page {
  title: "First Page"
  
  AppText { ... }
  
  AppImage { ... }
  
  AppButton {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    text: "Push"
    onClicked: {
      
    }
  }
} //Page
Insert Code

Now you may notice that the onClicked signal handler of the AppButton is empty. That's on purpose, because before we can push a sub-page, we need to create one.

I already prepared a quick minimal page that we can push, just add this to your code.

NavigationStack {
  id: stack
  
  Page { ... }
  
  Component {
    id: subPage
    Page {
      title: "Sub Page"
      AppText {
        anchors.centerIn: parent
        text: "Hello Sub Page"
      }
    }
  } //Component
} //NavigationStack
Insert Code

Now all we are missing is pushing the sub page on our stack. For this, we add one line of code to our button.

AppButton {
  parent.horizontalCenter
  anchors.bottom: parent.bottom
  text: "Push"
  onClicked: {
    stack.push(subPage)
  }
}
Insert Code

Run the app and check out the page transitions!

More Navigation

While a NavigationStack is great for pages like e.g. a settings page with sub-settings, Android and iOS apps also use other concepts to navigate between the main pages of an app.

We wrap our NavigationStack in a combination of Navigation and NavigationItem.

Navigation {

  NavigationItem {
    title: "First"
    icon: IconType.heart
    
    NavigationStack { ... }
  } //NavigationItem
} //Navigation
Insert Code

Now if you run the code and switch between platforms on your device, you'll see how the navigation automatically changes to platform specific layout, tabs on iOS and a drawer on Android.

We add another page, to make our navigation a little more useful.

Navigation {
  
  NavigationItem { ... }

  NavigationItem {
    title: "Second"
    icon: IconType.star
    
    NavigationStack {
      
      Page {
        title: "Second Page"
        
        AppText {
          text: "Hello Again"
          anchors.centerIn: parent
        }
      } //Page
    } //NavigationStack
  } //NavigationItem
} //Navigation
Insert Code

Full Source Code

We reached the end of this short tutorial, we hope you liked it. Here's the full source code of this tutorial as a reference.

import VPlayApps 1.0
import QtQuick 2.5

App {
  id: app
  
  Navigation {
    
    NavigationItem {
      title: "First"
      icon: IconType.heart
      
      NavigationStack {
        id: stack
        
        Page {
          title: "First Page"
          
          AppText {
            anchors.centerIn: parent
            text: "Hello V-Play"
          }
          
          AppImage {
            width: dp(150)
            height: dp(150)
            anchors.horizontalCenter: parent.horizontalCenter
            y: dp(40)
            source: "https://v-play.net/qml-live/monster.jpg"
          }
          
          AppButton {
            parent.horizontalCenter
            anchors.bottom: parent.bottom
            text: "Push"
            onClicked: {
              stack.push(subPage)
            }
          }
        } //Page
        
        Component {
          id: subPage
          Page {
            title: "Sub Page"
            AppText {
              anchors.centerIn: parent
              text: "Hello Sub Page"
            }
          }
        } //Component
        
      } //NavigationStack
    } //NavigationItem
    
    NavigationItem {
      title: "Second"
      icon: IconType.star
      
      NavigationStack {
        
        Page {
          title: "Second Page"
          
          AppImage {
            anchors.fill: parent
            fillMode: AppImage.PreserveAspectCrop
            source: "https://v-play.net/qml-live/monster.jpg"
          }
          
          AppText {
            text: "Hello Again"
            anchors.centerIn: parent
          }
        } //Page
      } //NavigationStack
    } //NavigationItem
  } //Navigation
} //App
Insert Code
import VPlayApps 1.0 import QtQuick 2.5 App { id: app AppText { anchors.centerIn: parent text: "Hello V-Play" } } // App

The live coding editor is in BETA and does not yet support making games. Anyway, you should try it to make your first steps with the QML/JavaScript language.

Did you like this editor? Let us know what you think at support@v-play.net.

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