Skip to content
Rengy
Menu

Tutorials · Cameras and Framing · Chapter 2

Any window

20 minutes Uses: Camera

By the end

  • The project’s window, 1280 by 720, read in Project settings…
  • The town’s camera on Letterbox, Extent 180, Width 320 and Zoom 1: exactly 320 by 180 of the street in every window, with the Background in the bars
  • The game seen at a phone’s, a four-by-three screen’s and a tall window’s size in the Viewport, with the size picker beside Look through
  • FixedVertical, FixedHorizontal and Pixels tried on the same camera, and what each does with a window of another shape
On this page

Reference

A bigger window, more street

Chapter 1’s camera is on Pixels: four screen pixels to a unit, at any window. So the size of the window decides how much of the town is seen. In a window of 1920 by 1080 it shows 480 by 270 of the street, half as much again each way:

Chapter 1’s camera in a window of 1920 by 1080: the watchman the same size as before, but the picture holds more of the street around him, the west wall’s dark stone near the left edge with a strip of sky beyond it, and the sky reaching far above
Chapter 1’s Pixels camera at 1920 by 1080: the same four pixels a unit, so 480 by 270 of the street.

A game is played in windows of every size and shape: a monitor, a laptop, a phone held sideways or upright, a window dragged to another size. A screen scaled to make text bigger counts too: the window opens at 1280 by 720 of the screen’s scaled points, which is more screen pixels than that, so a Pixels camera shows more of the world there. A camera that shows one street everywhere has to decide how much of the world to show from the window, not from its pixels.

The project’s window

  1. Choose File → Project settings… and open its Window tab.
  2. Read it, and change nothing: Title The Lookout, Size 1280 and 720, Mode Windowed.
  3. Close the window with the × at the right of its title bar.
Project settings on its Window tab, over the Viewport: Title The Lookout, Size 1280 w and 720 h, Mode Windowed, Borderless and Always on top unticked, the Save button beside cameras-and-framing/window.ron, and the line Read once, when the game’s window is created
The starter’s window: 1280 by 720, titled The Lookout.

That is the window the game opens in, from Run game or an exported game, and the size the editor shows the game at while it looks through the camera. It is where a game starts, not where it stays: the camera is what decides what any other size shows.

A Letterbox

  1. Select camera. In its Camera, set Scaling to Letterbox.
  2. Set Extent to 180 and Width to 320. They are no longer greyed: a Letterbox reads both.
  3. Set Zoom back to 1.
  4. Press Ctrl+S.
camera selected and looked through: the night-blue sky over the street’s mossy cap, the watchman at the left, the camera’s cross above the middle; the Inspector’s Camera reads Active ticked, Zoom 1, Rotation 0°, Offset 0.0 and 16.0, Scaling Letterbox, Extent 180.00 u, Width 320.00 u, Pixel Snap ticked and the Background swatch
The camera on Letterbox: the same 320 by 180 as chapter 1, now decided by Width and Extent.
Letterbox
Shows exactly Width by Extent world units, as large as the window allows, centred. A window of another shape gets bars, at its sides or above and below, in the camera’s Background. The picture keeps its shape and the world it shows in every window; only its size on the screen changes.
The Camera’s Extent, under Letterbox
The view’s height in world units: 180, the street’s ground and the sky over it.
The Camera’s Width
The view’s width in world units, under Letterbox alone: 320. Together with Extent it sets the picture’s shape, here 16 by 9, the window’s own.

The view is chapter 1’s, 320 by 180 of the street from 0, -134 to 320, 46, drawn from the same 160, -44: the Offset and the Background stay. The Zoom goes back to 1 because it magnifies whatever the Scaling shows: at 4, it would show a quarter of the Letterbox’s 320 across and of its 180 down.

Five windows

The street is the same in every window. What changes is how many screen pixels a unit takes, and where the bars are:

WindowPixels a unitThe picture: x, y, width, heightThe bars
1280 × 72040, 0, 1280, 720none
1920 × 108060, 0, 1920, 1080none
2400 × 1080, a phone6240, 0, 1920, 1080240 wide, at each side
1024 × 768, four by three3.20, 96, 1024, 57696 tall, above and below
720 × 1280, a tall window2.250, 438, 720, 405above and below
The game at 1280 by 720: the night-blue sky over the street, the watchman at the left, filling the window
At 1280 by 720: the window’s own shape, no bars.
The game at 1920 by 1080, shown smaller: the same street, the same watchman at the left, filling the window
At 1920 by 1080: the same 320 by 180, six pixels a unit.
The game at a phone’s 2400 by 1080, shown smaller: the same street and watchman in the middle of a wide window, night-blue bars at the left and right where the street’s ground stops short of the edges
A phone held sideways, 2400 by 1080: the street in the middle, a bar of Background at each side.
The game at 1024 by 768: the same street and watchman across the middle band of the window, night-blue bars above and below
Four by three, 1024 by 768: bars above and below.
The game in a tall window, 720 by 1280: a narrow band across the middle holding the same street and watchman, small, and tall night-blue bars above and below
A tall window, 720 by 1280: the same street in a band across its middle.

The bars are the camera’s Background, the same night blue as the sky, so the sky seems to run on into them; the street’s ground stops at the picture’s edge. At 1024 by 768 and 720 by 1280, a unit is not a whole number of pixels, and Pixel Snap puts the camera on a whole screen pixel: the view’s middle moves by up to half a screen pixel there, and its size stays exact. The picture at 720 by 1280 starts 437.5 pixels down, which is drawn from the whole pixel 438.

Any window, in the editor

The editor shows the game at the size you pick, without a window of that size. The picker is beside Look through in the toolbar, and reads the size it shows: as it comes, the project’s window as the game opens on your screen, 1280×720 on a screen at its own scale.

  1. With camera selected and Look through on, click the size picker beside it.
  2. Choose Phone 20:9 2400×1080. The Viewport shows the game at that size, letterboxed into the tab.
  3. Choose Tall 9:16 720×1280, then Window again, the first in the list.
The size picker beside Look through, open: Window (1280×720) lit, then 1280×720, 1920×1080, Phone 20:9 2400×1080, 4:3 1024×768, Tall 9:16 720×1280 and Free (the tab); under it the Viewport looks through the camera at the street
The size picker, open: the project’s window, five common screens, and the tab itself.
The Viewport looking through the camera at the phone’s 2400 by 1080: the frame round the 320 by 180 in the tab’s middle, the street inside it stopping at the frame’s edges, and night blue everywhere outside it, the phone’s bars at the left and right and the tab round the phone’s shape alike, so that only the frame stands out and the phone’s own shape is not marked; the toolbar’s picker reads 2400×1080
The phone’s size in the Viewport: the frame round the 320 by 180, the Background in the bars beside it.
The Viewport looking through the camera at the tall 720 by 1280: the same street small, in the frame round the 320 by 180 across the middle of the tab, and night blue above and below it and all round it, so that only the frame stands out and the tall window’s own shape is not marked; the toolbar’s picker reads 720×1280
The tall window in the Viewport: the same street, small, in a band across the middle.
The size picker
The size of the game you look at in the Viewport, while it looks through the camera and in Play: Window, the project’s window as the game opens on this screen, as it comes; five common screens, 1280×720, 1920×1080, Phone 20:9 2400×1080, 4:3 1024×768 and Tall 9:16 720×1280; or Free (the tab), the tab’s own shape. The game is letterboxed into the tab, and what is outside its shape is the camera’s Background, so only the camera’s frame stands out against it. It changes nothing in the project, and the Camera tab’s Game size reads it.

The other Scalings

A Letterbox keeps both the width and the height, so it needs bars. The other two Scalings keep one and give up the other. Try each, see it, and put the camera back. Each picture below is the game in a window of the size it says, which the size picker shows in the Viewport too.

  1. Set Scaling to FixedVertical. Extent stays 180; Width is greyed, since only a Letterbox reads it.
  2. Pick Phone 20:9 2400×1080 in the size picker.
The game at 2400 by 1080 under FixedVertical, shown smaller: no bars, the street running the full width of the window, a sliver of sky and then the west wall’s dark stone at the left edge, the watchman left of the middle, the same height of sky and ground as before
FixedVertical at 2400 by 1080: 180 tall, as before, and 400 across, no bars. The extra width shows the west wall.
  1. Set Scaling to FixedHorizontal and Extent to 320.
  2. Pick Tall 9:16 720×1280 in the size picker.
camera selected and looked through at the tall 720 by 1280: a tall field in the middle of the tab, night blue like the rest of the tab, marked by the frame’s edge, the street small across it, no bars; the Inspector’s Camera reads Scaling FixedHorizontal, Extent 320.00 u, and Width 320.00 u greyed
FixedHorizontal reads Extent as its width: 320. Width is greyed.
The game in a tall window, 720 by 1280, under FixedHorizontal: the street across the whole width, small, with a tall field of night blue above it and below it, and no bars
FixedHorizontal at 720 by 1280: 320 across, as before, and 568.9 tall.
  1. Set Scaling to Pixels, with Zoom still 1. Pick Window in the size picker.
The game at 1280 by 720 under Pixels at Zoom 1: a wide night-blue field, the west wall a dark column about a third of the way across, from under the street almost to the top, the street a thin strip of mossy stone from it to the right edge, the watchman tiny on it, and night blue below the street too
Pixels at Zoom 1: the window’s own 1280 by 720, a pixel to a unit.
FixedVertical
The view is always Extent units tall, and as wide as the window’s shape makes it: 400 at 2400 by 1080, 320 at 1280 by 720. No bars, and a wider window shows more to the sides. For a game whose height matters, a side view in which the floor and the ceiling must always show.
FixedHorizontal
The view is always Extent units wide, and as tall as the window’s shape makes it: 568.9 at 720 by 1280. Its width is Extent, not Width: Width is the Letterbox’s own, and greyed here. No bars. For a game whose width matters, played upright.
Pixels
A world unit to a screen pixel, times the Zoom, as a camera comes: the window shows as much of the world as it is big. Chapter 1’s Zoom of 4 made that 320 by 180 at one window size only.
  1. Put the camera back: Scaling Letterbox, Extent 180, and the size picker on Window. Width is still 320.
  2. Press Ctrl+S.

The camera

NodeComponentFieldChapter 1Now
cameraCameraScalingPixelsLetterbox
Extent360180
Width640320
Zoom41

Everything else is chapter 1’s: Position 160, -60, Offset 0, 16, the Background and Pixel Snap.

Check it works