"How to Develop with Qt for Multiple Screen Resolutions and Increase Your User Retention (of Cross-Platform Apps and Games)" - Qt Developer Days 2014 Presentation by V-Play
•
10 likes•38,591 views
*** NOTE *** A summarized version is available here: http://v-play.net/2014/11/supporting-multiple-screen-sizes-and-screen-densities-with-qt-and-v-play *** Quick Summary *** In the first part, we show how to use Qt Quick features to create UIs for multiple screen sizes, screen resolutions and form factors like phones, tablets and desktop PCs. We cover dynamic image switching, content scaling and basic Qt Quick features like file selectors, Loader elements, QML Singletons and property bindings and compare the use cases for each of them. We also cover how to implement adaptive layouts and responsive design in Qt and V-Play. Plus, how to create density independence and HighDPI / Retina screen support. The second part shows: •How to increase user engagement with user-generated content and how to build a community around your app or game. • How gamification can be added to apps or games in just a few minutes and its benefits. *** Presentation Keywords *** Qt, Qt Quick, QML, JavaScript, V-Play Game Engine, 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 Qt 5 Plugins, V-Play Plugins, Qt Facebook Plugin, Qt Chartboost, Qt AdMob, Qt Flurry Analytics, Qt Push Notifications, Qt In-App Purchases
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to "How to Develop with Qt for Multiple Screen Resolutions and Increase Your User Retention (of Cross-Platform Apps and Games)" - Qt Developer Days 2014 Presentation by V-Play
Similar to "How to Develop with Qt for Multiple Screen Resolutions and Increase Your User Retention (of Cross-Platform Apps and Games)" - Qt Developer Days 2014 Presentation by V-Play (20)
Recently uploaded
Recently uploaded (20)
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your User Retention (of Cross-Platform Apps and Games)" - Qt Developer Days 2014 Presentation by V-Play
- 1. Qt Dev Days Berlin 2014 7.10.2014 by Christian Feldbacher, MSc Co-Founder V-Play GmbH Qt Responsive Design& How to Boost User Retention
- 2. •XP –Game Development 10+ years –iOS, Android, Symbian App Development –C++ 10+ years –Qt 5+ years •Co-FoundedV-Play GmbH 2012 –Started in 2009, full-time 2011 –Basedin Vienna, Austria –EhancesQt 5 forgames AboutMe
- 3. 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!!!
- 4. V-Play Plugins Availableat http://plugins.v-play.net
- 5. Part 1: ResponsiveDesign withQt Part 2: HowtoIncreaseUser Retention Agenda
- 6. Part 1: ResponsiveDesign withQt
- 8. •Usemultiplicationforsizes •UseImage.PreserveAspectFit •Usefont.pixelSize* heightforText •Usefulforappsthatshall/canhavethesame UI ratioon all devices •Verysimple toimplement Fixed Ratio, Percentage
- 11. •The propertiesx, y, width, heightareignoredin Layout childrenitems •Usesizeconstraintsminimum*, preferred*, maximum* andfill* •Similartoweightsconceptin Android LinearLayout, but moreflexible * eitherWidthorHeight Layouts
- 12. •Items shallbesame physicalsize(millimeters) acrossall devices •Pixels not usable •Usedpinstead–howtodo thatin QML? Density-Independence
- 13. CalculatescreenDpi https://bugreports.qt-project.org/browse/QTBUG-35701 ExamplescreenDpivaluesare: –326 foriPhone Retina –212 forNexus 7 –143 for13“ fullHdnotebook Density-Independence
- 14. At a 160 dpi screen, 1 dp= 1 pixel At a 320 dpi screen, 1 dp= 2 pixels Still thesame physicalspace! Implementation Guide & Usage: Density-Independence
- 15. More Issueson Windows withpointSize: Text Sizes
- 16. RemainingText Issues: •User fontsizesettingsnot supported •Youcouldreaditbyyourselfthough Text Sizes
- 17. •Problem with1 image: –Low resimage: blursat upscaling –High resimage: space& memorywaste, performanceissuesat loadingtime •Solution: Chooseimagebasedon screensizeordpi •Bad Approach: Dynamic Image Switching
- 18. •File accessgeneralizedacrossplatforms •Works behindthescenes •V-Play Approach: Lesscode& easiertoread(noifdefs) Same physicalsizethankstodp() Dynamic Image Switching +hd2/imageSwitching.png +hd/imageSwitching.png imageSwitching.png
- 19. •Also useper platform, e.g. +ios, +android •TogetherwithQML Singletons setfontsizes, dimensions, layouts •DisadvantagesFile Selectors: –Must besetbeforeQmlEngine.load() –Cannotbechangedat runtime Todo that, useLoader –Not asmatureasAndroid (e.g. sw600dp) File Selectors
- 21. Content Scaling •1 logicalScene 480x320, Safe Zone •Getsscaledtofullscreen •Default scaleModeletterbox •Scene isvisibleon all Devices •Similarapproachtofixedratio(percentage) •Esp. forgamesimportanttobecomparable •Advantages: •Simpler positioning, like on iOS •Easiesttouse, fastest todevelop •Goodenoughformostusecases, also apps
- 22. Forfullscreenusagelike UI elements, usegameWindowAnchorItem Content Scalinghttp://v-play.net/doc/v-play-examples-windowscenescaling-example/
- 23. •Makebackgroundbigger •Outside zonecuton devices •Whatiscutdependson aspectratio Content Scaling
- 24. •UseContent Scalingwhenpossible: –Pixel valuesarecontent-scaled –Easiest& fastest todevelop –File Selectorsauto-supportedbyV-Play •If(ContentScaling!== possible): –ForequalphysicalItem sizesusedp() –ForText usefont.pixelSize: sp() •Supply sd(default), +hd, +hd2 graphics •Never usepixels! QML ResponsiveDesign Summary
- 25. Part 2: HowtoIncreaseUser Retention Ofmobile apps& games
- 26. •Achievement& Leaderboardintegrationin 70 Lines ofCode! •Facebook & Game Center integration •Also usefulforapps! V-Play Game Network
- 29. •GameCenteron steroidsmadefor/withQt •True cross-platform: –Leaderboards –Achievements –Challenges –Cloud storage& syncing •DeepFacebook connection •Fulloffline support •Skinnable •Add Gamification also for„normal apps“ V-Play Game Networkhttp://v-play.net/doc/vplay-vplaygamenetwork/
- 30. User-GeneratedContent Balance any property at runtime with the ItemEditorcomponent
- 31. User-GeneratedContent Style the UI to match your app / game
- 32. User-GeneratedContent Monetize the user-generated content with an “App Store for Levels”
- 33. User-GeneratedContent This is all it takes to change the width & height property at runtime
- 34. 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 appstoreforusergeneratedcontenttoyourownapps/gameseasily. Examples(in App Stores): Stack And Friends
- 36. V-Play Plugins Availableat http://plugins.v-play.net 0-100€per pluginper app, Samples on GitHub
- 37. •Gamification elements: –Leaderboards –Achievements –Challenges •SocialIntegrationslike Facebook •User-GeneratedContent •Push Notifications User Retention Summary
- 38. Contact Christian Feldbacher Co-Founder chris@v-play.net Alex Leutgöb Co-Founder alex@v-play.net V-Play GmbH Kolonitzgasse9/11-14 A –1030 Wien http://v-play.net @vplayengine http://www.facebook.com/vplayengine Meet us outside @ the V-Play Booth!
- 39. •Summary ofSupportingMultiple Screens & Densitiesat V-Play Blog: http://v-play.net/2014/11/supporting-multiple-screen-sizes-and-screen-densities- with-qt-and-v-play •Android Guide –„SupportingMultiple 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 DevCenter Guide –„DPI andDevice-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
Editor's Notes
- Hi & welcome to my presentation about.. Well, first let me tell you a little story why I’m here or what brought me here…
- I am now programming games since 13 years, and what fascinated me MOST was that you can create games that are fun and bring joy to people, with already small teams and just a bunch of guys! That’s also what made me dive into mobile app development, quite a while ago for the good old Nokia devices with J2ME and native Symbian, and then the iPhone came out! This changed just about everything, because all of a sudden you could reach millions of users without any publisher! So I started to port my games to the iPhone, and then later to Android too and also created more native apps. At that time, I came across Qt and I thought: wholy shit, that’s cool! You can use the same code base of your apps and games across all platforms! And this QML was the best thing I’ve ever seen! What if you could use that to create cross-platform games, no need to port it to other platforms!
- Qml was introduced in sep 2010 with qt 4.7.0, first used it 2011; Code so much faster (60% less code compared with previous project done in C++), with almost same performance Game prototype based on both QGraphicsView and QtQuick – too slow for sprites, particles, etc. (Just mention that we now look into qt5.2 as high performance renderer if we are asked!) Mobile first
- After last year‘s lightning talk was well received, we announced v-play plugins to extend qt 5 mobile app services And got selected as qt technology partner
- Besides engine & plugin development, we have since 5 years been developing native apps for iOS & Android, both as own apps and client projects. In the meantime, we do most of them with Qt5, so i‘ll now share our experiences with that!
- Responsive design = how to support all kind of screen resolutions, phones, tablets, desktop
- Simplest approach: property bindings with multiplications Will have the same ratio on all devices – if that is ok for your app UI, thats good and easy In screenshot shows that portrait & landscape most of the time different layout is needed
- - Less mistakes, more flexible: if you add another item, with the prop bindings the calculation needs to be adopted & an id is required for each item - and faster (in c++ not evaluated in QML) than with property bindings
- - Less mistakes, more flexible: if you add another item, with the prop bindings the calculation needs to be adopted & an id is required for each item - and faster (in c++ not evaluated in QML) than with property bindings
- Side Note: recommended button height is 36-48dp, based on Android style guide Images from: http://developer.android.com/guide/practices/screens_support.html
- On windows it seesm that logicalDpi & physicalDpi are swapped! Since qt 5.2, on Android bug that the reported physicalDpi is incorrect! Thus retieve via JNI (you need to add QT+=androidextras for jni access in the pro file!)
- On windows pointSize is too big, kills UI! On ios & android same size as sp The blue rect is 50dp – so 50dp is not the same as 50dp for the pixelSize! Multiply with custom value in sp() to do that!
- pointSize not supported: read device dpi settings (in android & ios in settings, in windows screen dpi settings); also not by sp yet
- Bad, because error-prone, a lot to type, slow at runtime PLUS, it still is NOT the same physical size on all screens!
- Based on the max screen size - Up to 960px max width -> +sd - 960px – 480*2.8=1344 -> +hd - >1344 -> +hd2 These values & thresholds are adjustable! Disadvantage multiple images: app size gets bigger! But you could use DownloadableComponent for that to download zipped content and unpack it permanently to device at 1st app start, based on how many dpi it has Or multiple versions in app store (on android that is possible); on iOS make hd version for example with higher-res images
- X Also useful to load different layouts based on the min width (like in android sw600dp) – doesnt work because higher values are not used by it! E.g. sw600 is not set by default, you would need to manually add it to the fileSelectorlist! (e.g. make list: sw600, sw590, sw580, etc. -> maybe show code how to use singletons or layouts per platform? – no time!
- Show vpqt5 example GameWindowSceneScaling.qml
- Show squaby live demo with resizing the window and how the ui changes with it, and how bg is cut off Additional advantage when using vp: Image File Selectors(+hd, +hd2) auto-supported Old: Easiest approach, good enough for most use cases! All px values get scaled; images automatically the correct ones taken
- Show live demo kochgourmet, what you can do with content scaling as well as non-content scaling approach SideBar moves in at certain width (GameWindow size or dp); delegates change (no rating shown, no images), gridview -> listview
- Examples to use in apps: award users with credits for coming back; give them achievements for several opens, for certain activities that matter to you (e.g. when they buy something); maybe even give them credits to use in your app when an achivement is rewarded!
- Problem in most apps: keep users coming back; one way to do this, especially in games but also normal apps can use it by adding gamification elements, is a GAME NETWORK We have built a game network from the ground up
- - Most powerful way of user engagement, is to let them create their own content and share that with others! We have component for that! Runtime balancing, runtime level generation App examples: * user-generated pictures in a travel app * bmw app where configurable car, share this picture * modify colors of app and share these settings, so friends can have the same color style
- Show squaby level editor functionality, with level sharing & publishing
- App examples: * user-generated pictures in a travel app * bmw app where configurable car, share this picture * modify colors of app and share these settings, so friends can have the same color style
- Here the width & height is changeable – can be anything in your app, like colors, images, etc.!
- Remind them to come back to the app, e.g. in an alarm clock app that he did not use it for a longer time, 1 hour in this example reward users for coming back with some credits
- - The push notifications plugin is available at plugins.v-play.net, free sample on github - Along with other plugins that may be useful for your qt 5 app like iap or ads for monetization
- We are looking for interns in summer, so apply if you are interested in game development