How to Make a Flappy Bird Game with V-Play

Introduction

This game idea is from the multi million hit Flappy Bird http://en.wikipedia.org/wiki/Flappy_Bird.

In this tutorial I will strip up basic things like creating menus and switching scenes, instead this is an in-depth explanation of how to create the mechanics of the Flappy Bird game with V-Play. It features sprite sequences, multiple devices & aspect ratios support, animations, physics, touch input and property bindings.

We also provide the full source code of Flappy Bird made with V-Play on GitHub.

For an overview of the game features, see Flappy Bird Game.

Resources

I prepared a small template project where I already included the assets that we need for our game, go ahead and dowload it here.

The Project Template

Extract the downloaded project to your preferred destination and then open it with Qt Creator. Let me first quickly show you the project structure: Any non source code files are found under Other files in the project tree on the left hand side. Go to Other files\assets, that's where our images are.

As you can see, we provide only one size for each image and not distinct versions for higher resolutions. This means on high resolution devices, the graphics will be simply scaled up and won't look crispy clear. But for our pixel style graphics, this is not such a huge deal, so we are fine with that. However if you are only using one size of images, you must disable the File Selectors which select the right asset folder (root folder, +hd, +hd2) depending on the device resolution. Use the project tree to navigate to Sources\main.cpp. As we only want to use the images from the root folder, we need to add one line to the main.cpp file:

// ...

int main(int argc, char *argv[])
{

  // ...

  // add this to disable the file selection for different device resolutions
  vplay.setContentScaleAndFileSelectors(1);

  engine.load(QUrl(vplay.mainQmlFileName()));

  return app.exec();
}

Alright, everything is prepared, let's get the party started!

Player

Use the project tree to navigate to QML\qml, this is where all the qml files are. Now create a new Player.qml file with the following content:

import VPlay 2.0
import QtQuick 2.0

EntityBase {
  id: player
  entityType: "player"
  width: 26
  height: 26

  SpriteSequenceVPlay {
    id: bird
    anchors.centerIn: parent

    SpriteVPlay {
      frameCount: 3
      frameRate: 10
      frameWidth: 34
      frameHeight: 24
      source: "../assets/bird.png"
    }
  }
}

The EntityBase is the base class of all V-Play entities and enables them to be controlled by the EntityManager. Then we got a SpriteSequenceVPlay to create an animated sprite of the flying bird. All we need to do is specify the image file, provide the size of one frame, and the number of frames that the animation has. In our case it is 3 frames for the different wing positions.

Add the player to the Scene in main.qml

import VPlay 2.0
import QtQuick 2.0

GameWindow {

  // ...

  Scene {
    id: scene

    Player {
      id: player
      x: 147
      y: 167
    }
  }
}

If you run the project, you already can see the flying bird.

Background

Add a background image to the Scene main.qml. Make sure to put it before the Player item to have the right z-ordering. (You could also define the z-ordering manually via the z property, but it's more clear if you put them in the right order in the first place)

Image {
  id: bg
  source: "../assets/bg.png"
}

B-e-a-u-t-i-f-u-l!

Ground

Create a Ground.qml file and add the following content:

import VPlay 2.0
import QtQuick 2.0

EntityBase {
  id: ground
  entityType: "ground"
  width: sprite.width
  height: sprite.height

  SpriteSequenceVPlay {
    id: sprite

    SpriteVPlay {
      frameCount: 2
      frameRate: 4
      frameWidth: 368
      frameHeight: 90
      source: "../assets/land.png"
    }
  }
}

Pretty much like the Player, our Ground is made of an animated sprite. Notice that we define a width and a height here so we will be able to position the ground correctly by anchoring it in the next step. In contrast the player entity will logically be just a point, which is fine as we only need to know the center of the player to put him in his starting position. The rest will be handled by the physics system as you will see later.

Add it to the Scene in main.qml, between the background image and the Player item.

Ground {
  anchors.bottom: scene.bottom
}

If you run the project, we got a ground anchored to the bottom of the scene, yay! But since this game is for mobile devices, we got to support a huge range of different screen resolutions and aspect ratios. We already took care of the resolutions (kind of), by effectively not caring about them and using the same images for every one of them. Now it's time to worry about the aspect ratios.

You can modify the game window at runtime, by moving to the edge of it and resizing the application window, or just press the shortcut keys Ctrl + 1-7 to switch to popular resolutions.

The first thing that you will see is that we get white borders (the default background color of a Qt application is white and not black). Also the layout gets pretty messed up. But you maybe also notice that the images are bigger than the initial window size. Because we were thinking ahead when designing the images, just like we teach you in this tutorial. It's a really important tutorial, you definitely should have a look at it right now, if you haven't done so already. But promise to come back to this tutorial. ;)

Alignment of Components

To support multiple display resolutions and aspect ratios of different devices, we need to think about the exact positioning of the components.

To master this challenge, V-Play provides you with the following set of tools.

It highly depends on your game to find the right way of designing and aligning your components to make it look nice and equally playable on any device. I recommend to run the game after each of the following adaptions, and resize the application window to see the change in the behavior of the game at different aspect ratios. Of course you can produce pretty weird aspect ratios on the desktop, which you won't encounter on real devices.

Apply the following fixes in main.qml:

Image {
  id: bg
  source: "../assets/bg.png"
  anchors.horizontalCenter: scene.horizontalCenter
  anchors.bottom: scene.gameWindowAnchorItem.bottom
}
Ground {
  anchors.horizontalCenter: scene.horizontalCenter
  anchors.bottom: scene.gameWindowAnchorItem.bottom
}
Scene {
  id: scene

  sceneAlignmentY: "bottom"

  //...
}

Now we got everything horizontally centered, and vertically anchored to the ground. This makes it not only look flawless on any device, it also provides us with a constant ground height, perfect for displaying an ad banner like in the original Flappy Bird.

Now that we have one thing less to worry about, we can focus on the gameplay.

Physics

Oh my god physics, even worse than maths right? But physics makes a real bird fly. And we also need physics to make our bird fly. Fortunately, this is a no-brainer with V-Play, so let's go.

General

Add a PhysicsWorld to the Scene in main.qml

PhysicsWorld {
  debugDrawVisible: true // set this to false to hide the physics debug overlay
  z: 1000 // set this high enough to draw on top of everything else
}

Now add a collider to the Player.qml entity to turn it into a physical object.

import VPlay 2.0
import QtQuick 2.0

EntityBase {
  id: player
  entityType: "player"
  width: 26
  height: 26

  SpriteSequenceVPlay {

    // ...

  }

  CircleCollider {
    id: collider
    radius: 13
  }
}

If you run the game now, you will see an overlay displaying the PhysicsWorld and the physics objects.

The next step is to add gravity, to make the player drop.

PhysicsWorld {
  debugDrawVisible: true // set this to false to hide the physics overlay
  gravity.y: 27 // 9.81 would be earth-like gravity, so this one will be pretty strong
}

Now the player immediately starts to fall when the game starts. To prevent the player from falling endlessly, we will also add a collider to the EntityBase in Ground.qml

BoxCollider {
  anchors.fill: parent
  bodyType: Body.Static
}

Notice that we declare the BoxCollider::bodyType property to Body.Static, to prevent the ground from any form of displacement due to collisions, forces or gravity.

Time to Fly!

If we touch the screen, we want the bird to get pushed up. So the first step is to add a push function to the EntityBase in Player.qml

function push() {
  collider.body.linearVelocity = Qt.point(0,0)
  var localForwardVector = collider.body.toWorldVector(Qt.point(0,-280));
  collider.body.applyLinearImpulse(localForwardVector, collider.body.getWorldCenter());
}

This function mimics the original Flappy Bird movement pretty well. First of all it stops the movement of the player, then creates a vector pointing up (in negative y-direction) and applies it as impulse to the player.

Now we only need to check if there is a touch on the screen, and call the push function. Add this to the Scene in main.qml

MouseArea {
  anchors.fill: scene.gameWindowAnchorItem
  onPressed: {
    player.push()
  }
}

We let the MouseArea fill the Scene::gameWindowAnchorItem instead of just the Scene, to make sure it fills the whole screen of the device.

To complete the player movement, we will also add the bird tilt mechanism. We want the nose of the bird to follow the direction and speed of its flight. So the faster it moves up, the higher the nose should be, and the faster it drops, the lower it should get. That sounds complex to code, but is it?

Add this plain awesome property binding to the Player.qml

SpriteSequenceVPlay {
  id: bird

  // adjust the rotation of the bird depending on its vertical speed
  rotation: collider.linearVelocity.y/10

  //...
}

That's it, every time the vertical speed of the player is changed, we change the rotation of the bird accordingly. Aren't property bindings cool?

Pipes

Time to add obstacles and turn this flight simulator into a challenging game!

Create a new Pipe.qml file containing this code:

import VPlay 2.0
import QtQuick 2.0

EntityBase {
  id: pipe
  entityType: "pipe"

  height: 90
  width: 1

  Image {
    id: lowerPipe
    source: "../assets/pipe.png"
    anchors.top: pipe.bottom
    anchors.horizontalCenter: pipe.horizontalCenter
  }

  Image {
    id: upperPipe
    source: "../assets/pipe.png"
    mirror: true
    rotation: 180
    anchors.bottom: pipe.top
    anchors.horizontalCenter: pipe.horizontalCenter
  }
}

The pipe entity itself will logically be only the gateway (1 x 90 pixels in size). The pipe images are anchored on top and bottom of it. This makes the positioning of the pipes in the game very easy, as you only have to care about the correct position of the gateway, and the pipe images will be aligned automatically.

Then add the pipe to the Scene in main.qml, between the background image and the Ground item.

Pipe {
  id: pipe1
  x: 400
  y: 30+Math.random()*200
}

As the pipe is now positioned far enough outside of the screen (you can resize the game horizontally at runtime to see the pipe), it's time to move it across the screen.

Add this to the EntityBase in Pipe.qml

MovementAnimation {
  id: movement
  target: pipe
  property: "x"
  minPropertyValue: -80
  velocity: -120
  running: true
  onLimitReached: {
    pipe.x = 400
    pipe.y = 30+Math.random()*200
  }
}

This will move the pipe horizontally from 400 to -80 (480 pixels total) and then reset it back to 400 and continue the movement.

Next, we will add physics to the pipes, put this in the EntityBase in Pipe.qml

EntityBase {
    BoxCollider {
      anchors.fill: pipe
      bodyType: Body.Static
      collisionTestingOnlyMode: true
    }

    BoxCollider {
      anchors.fill: lowerPipe
      bodyType: Body.Static
      collisionTestingOnlyMode: true
    }

    BoxCollider {
      anchors.fill: upperPipe
      bodyType: Body.Static
      collisionTestingOnlyMode: true
    }
}

The colliders will be in collisionTestingOnlyMode, as we only need them to detect collisions, without actually affecting the player movement. We got 3 colliders total, 2 for the upper and lower pipes, and one for the gateway between the pipes, to check if the player successfully passed them.

Before we implement the actual game logic, we will add another pipe to make the game a little more challenging. Add this next to the first pipe in main.qml

Pipe {
  id: pipe2
  x: 640
  y: 30+Math.random()*200
}

We position the 2nd pipe by 240 pixel (half of the total travel width) left of the first pipe (400 + 240 = 640 in total). The 2nd pipe will then reach the reset point later and from that point on they will keep crossing the screen one after the other.

Game Logic

The game will have 3 states:

  • wait: Pipes will not move, game starts after the first touch on the screen.
  • play: Actual game.
  • gameOver: Player hits a pipe or the ground and falls down to the ground. The next touch on the screen will reset the game.

Add a custom property to the Scene in main.qml like this:

property string gameState: "wait"

We will begin with the wait state, by setting it as default value.

Then we can use this state to control the gravity, with a property binding

gravity.y: scene.gameState != "wait" ? 27 : 0

To actually start the game, we create a function (we could also set the state directly, but this is little bit cleaner and could come in handy when extending the project) and then call this function when touching the screen, both in the Scene in main.qml

function startGame() {
  scene.gameState = "play"
}
MouseArea {
  anchors.fill: scene.gameWindowAnchorItem
  onPressed: {
    if(scene.gameState == "wait") {
      scene.startGame()
      player.push()
    } else if(scene.gameState == "play") {
      player.push()
    }
  }
}

Now we also need to stop the game if the player hits a pipe or the ground, so we add another function to Scene in main.qml

function stopGame() {
  scene.gameState = "gameOver"
}

Then change the colliders of the pipes and the ground to listen for contacts.

Ground.qml

BoxCollider {
  anchors.fill: parent
  bodyType: Body.Static
  fixture.onBeginContact: {
    scene.stopGame()
  }
}

Pipe.qml

import VPlay 2.0
import QtQuick 2.0

EntityBase {

  // ...

  BoxCollider {
    anchors.fill: lowerPipe
    bodyType: Body.Static
    collisionTestingOnlyMode: true
    fixture.onBeginContact: {
      scene.stopGame()
    }
  }
  BoxCollider {
    anchors.fill: upperPipe
    bodyType: Body.Static
    collisionTestingOnlyMode: true
    fixture.onBeginContact: {
      scene.stopGame()
    }
  }

}

We can also use the gameState to stop the flap and ground animation on game over. Add this to the SpriteSequenceVPlay of Player.qml and Ground.qml

running: scene.gameState != "gameOver"

To complete the gameplay, we need to add a reset function to the Scene in main.qml and call it in our MouseArea as well

function reset() {
  scene.gameState = "wait"
  pipe1.x = 400
  pipe1.y = 30+Math.random()*200
  pipe2.x = 640
  pipe2.y = 30+Math.random()*200
  player.x = 160
  player.y = 180
}
MouseArea {
  anchors.fill: scene.gameWindowAnchorItem
  onPressed: {
    if(scene.gameState == "wait") {
      scene.startGame()
      player.push()
    } else if(scene.gameState == "play") {
      player.push()
    } else if(scene.gameState == "gameOver") {
      scene.reset()
    }
  }
}

Score

Add a new custom property to the Scene in main.qml,

property int score: 0

reset it to 0 in the reset() function,

scene.score = 0

and add a Text element to display the score with a simple property binding

Text {
  text: scene.score
  color: "white"
  anchors.horizontalCenter: scene.horizontalCenter
  y: 30
  font.pixelSize: 30
}

The only thing missing is to increase the score, which should happen when the player passes the pipe gateway, so change this collider in Pipe.qml

BoxCollider {
  anchors.fill: pipe
  bodyType: Body.Static
  collisionTestingOnlyMode: true
  fixture.onBeginContact: {
    scene.score++
  }
}

Now your hunt for a highscore can start!

Where to go from here

Did you notice that the player can still leave the top of the screen? You will need a ceiling with a collider, and stop the game on collision, just like the Ground item does. Also the original game has menus and a nice game over screen with stats like your current highscore and a leaderboard. This is very easy to implement using the V-Play Game Network.

If you have any questions regarding this tutorial, don't hesitate to visit the support forums.

Also visit V-Play Engine Examples and Demos to gain more information about game creation with V-Play and to see the source code of existing apps in the app stores.

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