vplay-2-17-1-qt-3d-plugin-doc-live-reloading-and-more

Release 2.17.1: Use Qt 3D with Live Reloading and Test Plugin Code Examples from Browser

By Alex July 17, 2018

V-Play 2.17.1 adds a long list of improvements and fixes. You can now also use 3D components with live code reloading in your apps and games. The plugin documentation now includes the example run button. Use it to test code examples for ads, Firebase and more from the browser on your mobile device. You can also learn how to make custom list delegates with 2 new examples in the documentation.

Use Qt 3D in Your Apps and Games, with Live Code Reloading

V-Play and Qt make it easy to add 3D content to your apps or 2D games. With the QML 3D modules, you can embed 3D objects anywhere within your app. This feature is now also available with the Live Clients on desktop, iOS and Android.

Here is a small code example for you to try right away. It displays a 3D cube on your page. The cube rotates depending on the device rotation, using the RotationSensor. You can also change the color of the cube. All that with about 130 lines of code, without empty lines and comments it’s about 100 lines.

v-play-3d-cube-rotation-sensor-color-select

import VPlayApps 1.0
import QtQuick 2.9
// 3d imports
import QtQuick.Scene3D 2.0
import Qt3D.Core 2.0
import Qt3D.Render 2.0
import Qt3D.Input 2.0
import Qt3D.Extras 2.0
import QtSensors 5.9

App {
  // Set screen to portrait in live client app (not needed for normal deployment)
  onInitTheme: nativeUtils.preferredScreenOrientation = NativeUtils.ScreenOrientationPortrait
          
  RotationSensor {
    id: sensor
    active: true
    // We copy reading to custom property to use behavior on it
    property real readingX: reading ? reading.x : 0
    property real readingY: reading ? reading.y : 0
    // We animate property changes for smoother movement of the cube
    Behavior on readingX {NumberAnimation{duration: 200}}
    Behavior on readingY {NumberAnimation{duration: 200}}
  }
  
  NavigationStack {
    Page {
      title: "3D Cube on Page"
      backgroundColor: Theme.secondaryBackgroundColor
      
      Column {
        padding: dp(15)
        spacing: dp(5)
        
        AppText {
          text: "x-axis " + sensor.readingX.toFixed(2)
        }
        AppText {
          text: "y-axis " + sensor.readingY.toFixed(2)
        }
      }
      
      // 3d object on top of camera
      Scene3D {
        id: scene3d
        anchors.fill: parent
        focus: true
        aspects: ["input", "logic"]
        cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
        
        Entity {
          
          // The camera for the 3d world, to view our cube
          Camera {
            id: camera3D
            projectionType: CameraLens.PerspectiveProjection
            fieldOfView: 45
            nearPlane : 0.1
            farPlane : 1000.0
            position: Qt.vector3d( 0.0, 0.0, 40.0 )
            upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
            viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
          }
          
          components: [
            RenderSettings {
              activeFrameGraph: ForwardRenderer {
                camera: camera3D
                clearColor: "transparent"
              }
            },
            InputSettings { }
          ]
          
          PhongMaterial {
            id: material
            ambient: Theme.tintColor // Also available are diffuse, specular + shininess to control lighting behavior
          }
          
          // The 3d mesh for the cube
          CuboidMesh {
            id: cubeMesh
            xExtent: 8
            yExtent: 8
            zExtent: 8
          }
          
          // Transform (rotate) the cube depending on sensor reading
          Transform {
            id: cubeTransform
            // Create the rotation quaternion from the sensor reading
            rotation: fromAxesAndAngles(Qt.vector3d(1,0,0), sensor.readingX*2, Qt.vector3d(0,1,0), sensor.readingY*2)
          }
          
          // The actual 3d cube that consists of a mesh, a material and a transform component
          Entity {
            id: cubeEntity
            components: [ cubeMesh, material, cubeTransform ]
          }
        }
      } // Scene3D
      
      // Color selection row
      Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        spacing: dp(5)
        padding: dp(15)
        
        Repeater {
          model: [Theme.tintColor, "red", "green", "#FFFF9500"]

          Rectangle {
            color: modelData
            width: dp(48)
            height: dp(48)
            radius: dp(5)
            
            MouseArea {
              anchors.fill: parent
              onClicked: {
                material.ambient = modelData
              }
            }
          }
        }
      }
    } // Page
  } // NavigationStack
} // App

Test Code Examples from Plugin Documentation

You can now test the code examples from the plugin documentation. This allows you to run code examples from the documentation on your mobile phone. Just like you are used to from the apps documentation, you can now also test plugins for ads, firebase, analytics and more right from your browser.

You can currently test code examples of the following plugins from the documentation:

 

Here’s a little example for an AdMob advertisement banner:

v-play-admob-banner-ios-live-client

import VPlayApps 1.0
import VPlayPlugins 1.0

App {
  NavigationStack {
    Page {
      title: "Admob Banner"
      
      AdMobBanner {
        adUnitId: "ca-app-pub-3940256099942544/6300978111" // banner test ad by AdMob
        banner: AdMobBanner.Smart
      }
    }
  }
}

New Examples for Custom App List View Delegates

Many of you requested this, so this update adds 2 new examples to the ScollView and ListView documentation. You can check out how to create custom delegate components and display your data with the modelData property.

The second example shows custom foldable delegate components.

applistview-subsections

Improved Handling of Screen Keyboard on iOS and Android

App and GameWindow provide new properties to make the native keyboard handling on Android and iOS easier. You can use keyboardVisible and keyboardHeight to adapt your app layout when the keyboard is shown.

The following example displays a floating action button above the keyboard. It also adapts to size changes of the keyboard:

keyboard-height-floating-action-button


import VPlayApps 1.0
import QtQuick 2.7

App {
  id: app
  
  // We unset the focus from the AppTextField after the keyboard was dismissed from the screen
  onKeyboardVisibleChanged: if(!keyboardVisible) textField.focus = false
  
  NavigationStack {
    
    Page {
      id: page
      title: qsTr("Keyboard Height")
      
      AppTextField {
        id: textField
        width: parent.width
        font.pixelSize: sp(25)
      }
      
      FloatingActionButton {
        // Add the keyboard height as bottom margin, so the button floats above the keyboard
        anchors.bottomMargin: app.keyboardHeight + dp(15)
        // We only show the button if the AppTextField has focus and the keyboard is expanded
        visible: textField.focus && app.keyboardHeight != 0
        icon: IconType.check
        backgroundColor: Theme.tintColor
        iconColor: "white"
        onClicked: textField.focus = false
      }
    }
  }
}

More Features, Improvements and Fixes

Here is a compressed list of improvements with this update:

For a list of additional fixes, please check out the changelog.

How to Update V-Play

Test out these new features by following these steps:

  • Open the V-Play SDK Maintenance Tool in your V-Play SDK directory.
  • Choose “Update components” and finish the update process to get this release as described in the V-Play Update Guide.

V-Play Update in Maintenance Tool

If you haven’t installed V-Play yet, you can do so now with the latest installer from here. Now you can explore all of the new features included in this release!

For a full list of improvements and fixes to V-Play in this update, please check out the change log!

 

 

 

More Posts Like This

 

feature
How to Make Cross-Platform Mobile Apps with Qt – V-Play Apps

vplay-2-17-0-firebase-cloud-storage-downloadable-resources-and-more

Release 2.17.0: Firebase Cloud Storage, Downloadable Resources at Runtime and Native File Access on All Platforms

vplay-update-2.16.1-live-client-module-live-code-reloading-custom-cpp

Release 2.16.1: Live Code Reloading with Custom C++ and Native Code for Qt

teaser-iphonex-support-and-runtime-screen-orientation-change-705px

Release 2.16.0: iPhone X Support and Runtime Screen Orientation Changes

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