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!!!

V-Play Plugins

Available at http://plugins.v-play.net

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

chris@v-play.net

Alex Leutgöb

Co-Founder

alex@v-play.net

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