Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and...
-
Upload
vplay-game-engine -
Category
Mobile
-
view
4.799 -
download
0
Transcript of Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and...
Qt World Summit Berlin 20157.10.2015
by Christian Feldbacher, MScCo-Founder V-Play GmbH
Qt Responsive Design&
How to Boost User Retention(Tech Talk)
cross-platform 2D game development in days
import VPlay 2.0
V-Play Game Engine
Same Code, Multiple Screen Sizes
V-Play App Engine / V-Play Apps
Now available on www.v-play.net/apps
the easiest to use mobile app development framework
Powered by
import VPlayApps 1.0
Part 1: Responsive Design withQt & V-Play Apps
Goal: Native User Experience
Screen Sizes, Portrait / Landscape
Goal: Shared Code
iOS Android
QML & JavaScript
C++
…
Android
Goal: Shared Code
C++
…iOS
QML & JavaScript
Fixed Ratio, Percentage
• Use multiplication for sizes
• Use Image.PreserveAspectFit
• Use font.pixelSize * height for Text
• Useful for apps that shall/can have the
same UI ratio on all devices
• Simple to implement
Fixed Ratio, Percentage
• Will look OK on most devices, but sizes
are not „native“ UX
• Landscape & Portrait not both
supportable
• Ugly syntax: dependent on the height of
parent items
• Hard to change: all sizes depend on
parent height
Problems with Fixed Ratio
• Items shall be same physical size
(millimeters) across all devices
• Pixels not usable
• Use dp instead – how to do that in QML?
Density-Independence
Calculate screenDpi
Example screenDpi values are: – 326 for iPhone Retina
– 212 for Nexus 7
– 143 for 13“ fullHd notebook
Density-Independence
At a 160 dpi screen, 1 dp = 1 pixel
At a 320 dpi screen, 1 dp = 2 pixels
Still the same physical space!
Implementation Guide & Usage:
Density-Independence
Remaining DPI Tasks:
• Read system font size settings
• Provide additional scaling constants– for PC
– Custom user scale settings possible (both sp and dp)
Implemented in V-Play already!
Text Sizes
• Problem with 1 image:
– Low res image: blurs at upscaling
– High res image: space & memory waste,
performance issues at loading time
• Solution: Choose image based on screen
size or dpi
• Bad Approach:
Dynamic Image Switching
• File access generalized across platforms
• Works behind the scenes
• V-Play Approach:
Less code & easier to read (no ifdefs)
Same physical size thanks to dp()
Dynamic Image Switching
+hd2/imageSwitching.png
+hd/imageSwitching.png
imageSwitching.png
• Also use per platform, e.g. +ios, +android
• Together with QML Singletons set fontsizes, dimensions, layouts
• Disadvantages File Selectors:
– Must be set before QmlEngine.load()
– Cannot be changed at runtime
to do that, use Loader
– Not as mature as Android (e.g. sw600dp)
File Selectors
• To achieve this:
Density-Independence Summary
• Use Fixed Ratio when possible:– Pixel values based on parent.height ratio
– Easiest & fastest to develop & test
– File Selectors are auto-supported by V-Play
– Mostly in Games, not well suited for mobile apps!
• If(FixedRatio !== possible):– For equal physical Item sizes use dp()
– For Text use font.pixelSize: sp()
• Supply sd (default), +hd, +hd2 graphics
• Never use pixels!
QML Responsive Design Summary
Portrait & Landscape
Portrait & Landscape Code
Android vs. iOS
• Page Transitions
• List Views
• Dialogs
• Input
• Controls
• Fonts
• Default Sizes
Android vs. iOS
iOS vs. Android Navigation
Navigation Component
Platform Changing at Runtime
Showcase App Live Demo
• Messaging App like Facebook: 140 loc
• Twitter App: 840 loc
• Weather App: 150 loc
• Widgets: 330 loc
Lines of Code
No platform-specific application code!
„Qt 5 Showcases by V-Play Apps“
www.v-play.net/showcase-app
Open Source with all App Samples in V-Play SDK
For Windows, Mac, Linux, iOS, Android, Win Phone
• Powerful Animations, User Interfaces with Qt Quick
• Very few lines of Code
• Build on proven tech: C++, JavaScript
• Native Performance
• Easy & clean to integrate Scripting (QML) with C++
V-Play Apps• Native UX across platforms, single code base
• Mobile First! (iOS, Android)
• Auto Adapting UI Elements (Master/Detail View)
• Density Independence
• Advanced Lists (Pull-to-refresh, Scroll Indicator, VisibilityRefresh), Page Transitions, …
Strengths of Qt & V-Play Apps
Part 2: How to Increase User Retention
Of mobile apps & games
Push Notifications
V-Play Plugins
Available on www.plugins.v-play.net
Samples on GitHub & in V-Play SDK
• Provide content worth sharing
– Success moments in your app/game
– User Image Upload
– User Generated Content
• Share in-app and via
Social Networks
User-Generated Content
V-Play Sample Launcher
v-play.net/samples
User-Generated Content
User-Generated Content
User-Generated Content
V-Play Level Editor & Level Sharing
Squaby Particle Editor
• Save time in internal development
• Let users create levels
• Social Sharing & Rating of Levels Community
• Monetize content packs with In-App Purchases
• Customizable Look
Add app store for user generated content to your
own apps/games easily.
Examples (in App Stores):
Stack And Friends
• Achievement & Leaderboard integration
in 60 Lines of Code! Also useful for apps!
V-Play Game Network
V-Play Game Network
V-Play Game Network
• GameCenter on steroids made for/with Qt
• True cross-platform: – Leaderboards
– Achievements
– Cloud storage & syncing
• Deep Facebook connection
• Full offline support
• Skinnable
• Add Gamification also for„normal apps“
V-Play Game Network
• Embed in your app/game
• Chat
• Smart Matchmaking: Friends, ELO Ranking
• Real-time & turn-based
Chat / Multiplayer
In-App Chat Matchmaking
Multiplayer Game Template
Retention Measurement
Google Analytics Integration
• Push Notifications
• Social Integrations like Facebook
• User-Generated Content
• Gamification elements: – Leaderboards
– Achievements
– Multiplayer & In-App Chat
Measure with Analytics from Day 1!
User Retention Summary
Final Slide
Meet us outside @ the V-Play / Gimasi Booth! We will show you Qt games & apps that shine
www.v-play.net/apps
www.v-play.net
• V-Play Apps: http://v-play.net/apps
• V-Play Resources about Level Editor & User-Generated Content: http://v-play.net/level-editor
• Android Guide – „Supporting Multiple Screens“: http://developer.android.com/guide/practices/screens_support.html
• V-Play Guide - „How to create mobile games for different screen sizes and resolutions”: http://v-play.net/doc/vplay-different-screen-sizes/
• Windows Dev Center Guide – „DPI and Device-Independent Pixels“: http://msdn.microsoft.com/en-us/library/windows/desktop/ff684173%28v=vs.85%29.aspx
• V-Play Tutorial - „How to increase player retention & downloads in 10 minutes”: http://v-play.net/doc/lesson-5/
• V-Play Tutorial – „How to add Facebook & Game Center sharing to your game”:http://v-play.net/doc/lesson-6/
• V-Play Tutorial – „How to boost level creation and balancing of your game with V-Play Level Editor”:http://v-play.net/doc/lesson-7/
• V-Play Tutorial – „How to benefit from user-generated content in your game with V-Play Level Store”:http://v-play.net/doc/lesson-8/
References