Qt Dev Days Berlin 20147.10.2014
by Christian Feldbacher, MScCo-Founder V-Play GmbH
Qt Responsive Design&
How to Boost User Retention
• XP– Game Development 10+ years
– iOS, Android, Symbian App Development
– C++ 10+ years
– Qt 5+ years
• Co-Founded V-Play GmbH 2012– Started in 2009, full-time 2011
– Based in Vienna, Austria
– Ehances Qt 5 for games
About Me
Why QML Plugins?
2011
Game prototype
For iOS & Android
QGraphicsView
2011
Custom cocos2d-x
Renderer beginning
2012
V-Play Launch
Ready to publish high performance
iOS & Android games
2014
V-Play Qt 5 Plugins
For apps & games
2010
QML / Qt Quick
Wholy shit
That’s cool!!!
Part 1: Responsive Design with Qt
Part 2: How to Increase User Retention
Agenda
Part 1: Responsive Design with Qt
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
• Very simple to implement
Fixed Ratio, Percentage
Layouts make positioning syntax nicer:
Layouts
Layouts make positioning syntax nicer:
Layouts
vs
• The properties x, y, width, height are
ignored in Layout children items
• Use size constraints minimum*,
preferred*, maximum* and fill*
• Similar to weights concept in Android
LinearLayout, but more flexible
* either Width or Height
Layouts
• 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
https://bugreports.qt-project.org/browse/QTBUG-35701
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
More Issues on Windows with pointSize:
Text Sizes
Remaining Text Issues:
• User font size settings not supported
• You could read it by yourself though
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
Content Scaling
• 1 logical Scene 480x320, Safe Zone
• Gets scaled to full screen
• Default scaleMode letterbox
• Scene is visible on all Devices
• Similar approach to fixed ratio (percentage)
• Esp. for games important to be comparable
• Advantages:
• Simpler positioning, like on iOS
• Easiest to use, fastest to develop
• Good enough for most use cases, also apps
For full screen usage like UI elements, use
gameWindowAnchorItem
Content Scaling
http://v-play.net/doc/v-play-examples-windowscenescaling-example/
• Make background bigger
• Outside zone cut on devices
• What is cut depends on aspect ratio
Content Scaling
• Use Content Scaling when possible:– Pixel values are content-scaled
– Easiest & fastest to develop
– File Selectors auto-supported by V-Play
• If(ContentScaling !== 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
Part 2: How to Increase User Retention
Of mobile apps & games
• Achievement & Leaderboard integration
in 70 Lines of Code!
• Facebook & Game Center integration
• 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
– Challenges
– Cloud storage & syncing
• Deep Facebook connection
• Full offline support
• Skinnable
• Add Gamification also for„normal apps“
V-Play Game Network
http://v-play.net/doc/vplay-vplaygamenetwork/
User-Generated Content
Balance any property at runtime with the ItemEditorcomponent
User-Generated Content
Style the UI to match your app / game
User-Generated Content
Monetize the user-generated content with an “App Store for Levels”
User-Generated Content
This is all it takes to change the width & height property at
runtime
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 IAP
• Customizable Look
Add app store for user generated content to your
own apps/games easily.
Examples (in App Stores):
Stack And Friends
Push Notifications
http://plugins.v-play.net/plugins/notifications
V-Play Plugins
Available at http://plugins.v-play.net
0-100€ per plugin per app, Samples on GitHub
• Gamification elements:
– Leaderboards
– Achievements
– Challenges
• Social Integrations like Facebook
• User-Generated Content
• Push Notifications
User Retention Summary
Contact
Christian Feldbacher
Co-Founder
Alex Leutgöb
Co-Founder
V-Play GmbH
Kolonitzgasse 9/11-14
A – 1030 Wien
http://v-play.net
@vplayengine
http://www.facebook.com/vplayengine
Meet us outside @ the V-Play Booth!
• Summary of Supporting Multiple Screens & Densities at V-Play Blog:http://v-play.net/2014/11/supporting-multiple-screen-sizes-and-screen-densities-with-qt-and-v-play
• 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
Recommended
