How to make a full screen image suitable for portrait and landscape mode.


In the scene editor, I've added preview settings so you can test how the image will look on different screen sizes.

Tuesday js scene editor

Most developers want to make an app that is comfortable to use in both portrait and landscape mode. But due to many factors, this idea sometimes has to be abandoned in favor of convenience. As a rule, the portrait mode is considered the most convenient, because the device can be held with one hand.

In the case of visual novels, there is a problem with the background and other images in full screen mode. Tuesday js sets background images to the center of the screen by default, but the image itself has to be adapted to different screens.

How to make a full screen image suitable for portrait and landscape mode.
It's very simple, the further from the center of the image the object is, the higher the probability that it will not be visible in one of the modes.

To avoid this, I create an image on a 1: 1 square canvas and split it as follows (half size, centered vertically and horizontally), this will show the area to be displayed exactly in both modes with a maximum aspect ratio of 1: 2.


Get Tuesday JS visual novel engine

Download NowName your own price

Comments

Log in with itch.io to leave a comment.

What about the dialog box?