Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and Increase & Measure your Cross-Platform App Success (In-Depth Tech Session)
A summarized version is available here:
http://v-play.net/?p=10928
*** Quick Summary ***
This session shows how to develop applications for multiple screen sizes, screen resolutions and form factors like phones, tablets and desktop PCs with Qt. We show how you can use the same code base, while having native-looking UIs across platforms like iOS and Android with Qt and V-Play Apps. This involves tips for responsive design with Qt and a comparison when to use Qt Quick and in which cases C++ is the better choice.
We cover dynamic image switching, content scaling and basic Qt Quick features like file selectors, Loader elements, Layouts, QML Singletons and property bindings and compare the use cases for each of them. In addition, we introduce a density-independent approach you can use to create Qt apps on different resolutions and screen densities.
This talk also explains which V-Play components you can use to increase your application downloads and user retention. And how to measure the success of your apps across platforms.
This presentation gives you a technical overview with code snippets and hands-on examples of the possibilities with Qt for multi-screen development. For a non-technical overview of this topic, we recommend the first part of this presentation in the Qt Technology Strategy Track.
*** Presentation Keywords ***
Qt, Qt Quick, QML, JavaScript, V-Play Game Engine, V-Play Apps, V-Play Qt 5 Plugins
Screen density, screen resolution, screen size
Density independence, density-independent pixels; pixel density
Dynamic image switching, dynamic image selection; Android: alternative bitmaps; retina display, retina images
High dpi screens
Multiple screen aspect ratios
Supporting Multiple Screens, Responsive Design (tablet layout, adaptive layout, adaptable layout, scalability)
Multiple resolutions
Content scaling, upscaling, adaptive scaling
User Retention, User-Generated Content, UGC, community building, V-Play Game Network, Gamification, Leaderboards, Achievements, Multiplayer, Chat, Push Notifications, Mobile Analytics
Qt 5 Plugins, V-Play Plugins, Qt Facebook Plugin, Qt Chartboost, Qt AdMob, Qt Flurry Analytics, Qt Push Notifications, Qt In-App Purchases
Similar to Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and Increase & Measure your Cross-Platform App Success (In-Depth Tech Session)
Similar to Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and Increase & Measure your Cross-Platform App Success (In-Depth Tech Session) (20)
BDSM⚡Call Girls in Sector 71 Noida Escorts >༒8448380779 Escort Service
Qt World Summit 2015 Talk by V-Play: How to Develop with Qt for Multiple Screen Resolutions and Increase & Measure your Cross-Platform App Success (In-Depth Tech Session)
1. Qt World Summit Berlin 2015
7.10.2015
by Christian Feldbacher, MSc
Co-Founder V-Play GmbH
Qt Responsive Design
&
How to Boost User Retention
(Tech Talk)
5. 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
12. • 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
13. • 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
14. • Items shall be same physical size
(millimeters) across all devices
• Pixels not usable
• Use dp instead – how to do that in QML?
Density-Independence
16. 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
17. 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
18. • 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
19. • 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
20. • Also use per platform, e.g. +ios, +android
• Together with QML Singletons set font
sizes, 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
22. • 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
31. • 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!
32. „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
33. • 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
34. Part 2: How to Increase User Retention
Of mobile apps & games
37. • Provide content worth sharing
– Success moments in your app/game
– User Image Upload
– User Generated Content
• Share in-app and via
Social Networks
43. 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
44. • Achievement & Leaderboard integration
in 60 Lines of Code! Also useful for apps!
V-Play Game Network
47. • 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
48. • Embed in your app/game
• Chat
• Smart Matchmaking: Friends, ELO Ranking
• Real-time & turn-based
Chat / Multiplayer
In-App Chat Matchmaking
52. • 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
53. 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
54. • 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