Working with Viewport
Variables Defining the Viewport
The position and the size of the viewport are defined by these variables:
There are two other variables:
They define how the room was designed in ct.IDE. These variables may be different depending on different viewport scaling methods.
Moving camera around
To move the camera around, you can either modify
ct.room.y by yourself, or use the built-in variables for following things on the screen. The latter approach requires the
ct.room.follow variable to be set. A simple line
ct.room.follow = this; inside the On Create code of your main character will be enough.
You can alter the camera's behaviour by these variables:
ct.room.borderYdefine the area at which the camera shifts if the followed copy enters these borders. These values are represented in pixels, relative to a room's designed size;
ct.room.centermay be set to
trueto automatially set borders so that the followed copy always stays at the center of the screen. It has a higher priority over
ct.room.followShiftYallow to place the camera higher/lower/etc than the target copy's axis;
ct.room.followDriftis a value between [0; 1] that defines how fast the camera reacts to a copy's movement. The default is
0(no drift). For casual games and puzzles, settings
0.9may be a good choice to create a smooth camera.
Making an adaptive UI
Contemporary devices all have various resolutions, and thus your app should adapt to them and still give the maximum quality.
The first step you need to do is to enable the
ct.fittoscreen catmod. Then, select the "Settings" tab and select a scaling mode that suits your game project more:
- Fast scaling with letterboxing is suitable for purely pixelart games, or when performance is vital;
- Expansion works good when the more player sees on the screen, the better (e.g. RTS or games like Factorio);
- Expansion + viewport management is usually preferable over regular expansion as it helps you with keeping important things in focus;
- Scaling with letterboxing works for any types of projects, and can also give nice transforms to your pixelart games. This will remain your designed aspect ratio.
- Scaling without letterboxing ensures both best quality and use of full screen. It is often prerable over scaling with letterboxing.
If you are making a pixelart game, make sure you disable image smoothing at the "Settings" tab.
In general, you should follow these rules:
ct.viewHeightto position things relative to a screen;
- update position of UI elements regularly, as it will be required on resolution change, resizing a windowed version, at random unplug of external monitor, etc;
- when using "Scaling with/without letterboxing", start designing your rooms, graphic assets and UI at a relatively big view size at rooms' settings, e.g. at 1920x1080px, so it will scale down on other resolutions nicely.
Don't forget to test your UI on different screen sizes and devices!