"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
*** 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
Ähnlich wie "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
Ähnlich wie "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)
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
"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!!!
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
Hinweis der Redaktion
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 runtimePLUS, 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