How to support multi-screen in a game?



  • Hi,

    I'm very new to Qt...

    Having a little background in cocos2d-x, it supported there through separate folders of sprites for different screen ratios and resolutions and choosing appropriate folder according to a device.

    Is the same approach useful in Qt or there is another solution for it?

    Regards,
    Mike.



  • Hi Mike,
    Qt does not support that by default, that's why we added it on top of it as part of "V-Play Game Engine":http://v-play.net, which is based on Qt 5.

    With our additions you can do this:

    1.) Dynamic Image Switching
    You can put your images of different quality into separate folders (similar to cocos2d-x version 2). For example your "single definition" or "sd" image has 100x100px, then you can provide a high definition (retina) image with 200x200px and put it into the +hd subfolder. If you also want to target high-density screens like the iPad 3, you can provide an image with 400x400px in the +hd2 subfolder. The images of these subfolders are then used & selected automatically by V-Play. So provide your imgages in this folder structure:

    image.png
    +hd/image.png
    +hd2/image.png

    2.) Content Scaling
    To be able to make your game work across multiple resolutions and aspect ratios, we added content scaling to the engine. That way, you have a single logical resolution to work with, and then it gets scaled up by your chosen "scaleMode":http://v-play.net/doc/vplay-scene/#scaleMode-prop. This "single logical or virtual resolution" (which is 480x320 or 320x480 in portrait games by default) has the advantage that it makes your game fair & comparable across devices, and you don't have to worry about different aspect ratios & resolutions.

    You can still use the whole screen, by using "gameWindowAnchorItem":http://v-play.net/doc/vplay-scene/#gameWindowAnchorItem-prop or setting the scaleMode or "sceneAlignment":http://v-play.net/doc/vplay-scene/#sceneAlignmentX-prop to what works best for your game.

    Also, I'd recommend making your background a bit bigger (See "here":http://v-play.net/doc/vplay-different-screen-sizes/#letterbox for exact sizes and a Photoshop template), to fill the whole screen no matter what aspect ratio your game is running on.

    Here is some additional information on these topics, taken from the V-Play documentation:

    Dynamic Image Switching Support

    V-Play adds support for dynamic image switching based on the screen size, on top of Qt 5. This allows you to:

    • Save graphics memory: based on the screen size, the best matching image is selected to avoid upscaled and blurry images, and to save memory compared to an approach where always the highest resolution images are used.
    • Improve loading times: as the best-sized image is selected, you get an ideal loading time of the used image.
    • Work with the logical size of the image in your GameWindow and Scene to simplify multi-resolution positioning and to use Content Scaling.

    You can check out the "V-Play File Selectors documentation":http://v-play.net/doc/vplay-multiresolutionimage/#v-play-file-selectors for more details about dynamic image switching.

    Content Scaling

    Content Scaling allows you to create a game once for all screen sizes and resolutions. V-Play simplifies working with a single logical size with these use-cases:

    • Position your game entities on a logical scene for equal and fair game experience across all platforms.
    • Easy positioning of UI elements based on the screen and not based on the logical scene. See here for a tutorial.
    • Easily define physics objects across devices. Without this addition, each physics object would behave differently because its dimensions would depend on the physical screen size. V-Play solves this issue.
    • Keep entity positions in levels consistent across screen resolutions: If one level is saved on one resolution and then played on another device with a different resolution, the level would look different. V-Play solves this issue.

    Content scaling can be used with the "MultiResolutionImage":http://v-play.net/doc/vplay-multiresolutionimage/, "AnimatedSpriteVPlay":http://v-play.net/doc/vplay-animatedspritevplay/ and "SpriteSequenceVPlay":http://v-play.net/doc/vplay-spritesequencevplay/ components.

    You can also have a look at our tutorial:
    "How to create mobile games for different screen sizes and resolutions":http://v-play.net/doc/vplay-different-screen-sizes/

    Additionally, we'll release a blog post next week how to write density-independent and resolution-independent games next week. I'll post the link here then.

    Best,
    Chris


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.