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 90% Code
  • Increase Productivity

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

Welcome to the Web Demo

Only 2 Steps to Your First App

1. Download the V-Play Live Scripting App

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

or
Scan QR to download

2. Connect the App

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

Live Scripting Tutorial

The V-Play Live Scripting App

Before we can proceed, please make sure you downloaded, started and connected the V-Play Live Scripting 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

This tutorial is for app development, but the general concepts are also a great learning resource to learn how to make games with V-Play!

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
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