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

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)

2. cross-platform 2D game development in days
import VPlay 2.0

3. V-Play Game Engine

4. Same Code, Multiple Screen Sizes

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

6. Part 1: Responsive Design with
Qt & V-Play Apps

7. Goal: Native User Experience

8. Screen Sizes, Portrait / Landscape

9. Goal: Shared Code
iOS Android
QML & JavaScript
C++
…

10. Android
Goal: Shared Code
C++
…iOS
QML & JavaScript

11. Fixed Ratio, Percentage

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

15. Calculate screenDpi
Example screenDpi values are:
– 326 for iPhone Retina
– 212 for Nexus 7
– 143 for 13“ fullHd notebook
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

21. • To achieve this:
Density-Independence Summary

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

23. Portrait & Landscape

24. Portrait & Landscape Code

25. Android vs. iOS

26. • Page Transitions
• List Views
• Dialogs
• Input
• Controls
• Fonts
• Default Sizes
Android vs. iOS

27. iOS vs. Android Navigation

28. Navigation Component

29. Platform Changing at Runtime

30. Showcase App Live Demo

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

35. Push Notifications

36. V-Play Plugins
Available on www.plugins.v-play.net
Samples on GitHub & in V-Play SDK

37. • Provide content worth sharing
– Success moments in your app/game
– User Image Upload
– User Generated Content
• Share in-app and via
Social Networks

38. User-Generated Content

39. V-Play Sample Launcher
v-play.net/samples

40. User-Generated Content

41. User-Generated Content

42. User-Generated Content

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

45. V-Play Game Network

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

49. Multiplayer Game Template

50. Retention Measurement

51. Google Analytics Integration

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