5 - Game Size
In our gameProps size, we set a height of 600 and width of 400, which works well for portrait devices. Note that these are game coordinates, not pixels! The important thing is the aspect ratio (width and height ratio).
Our game has a 3:2 aspect ratio, but our iPhone on the right has a 16:9 aspect ratio, which caused black bars to be rendered at the top and bottom before.
To fix this we can add a height margin. Update gameProps with a maxHeightMargin to remove the black bars.
Our 400x600 area is the safe zone where we put important things. Outside of this area may not be visible on some screens, depending on their size, but you can still fill it up with visuals like backgrounds.
- JavaScript
- TypeScript
1import { makeSprite } from "@replay/core";
2import { Bird } from "./bird";
3
4export const Game = makeSprite({
5 render() {
6 return [
7 Bird({
8 id: "bird",
9 }),
10 ];
11 },
12});
13
14export const gameProps = {
15 id: "Game",
16 size: {
17 width: 400,
18 height: 600,
19 maxHeightMargin: 150,
20 },
21 defaultFont: {
22 family: "Helvetica",
23 size: 24,
24 },
25};
26
1import { makeSprite, GameProps } from "@replay/core";
2import { Bird } from "./bird";
3
4export const Game = makeSprite<GameProps>({
5 render() {
6 return [
7 Bird({
8 id: "bird",
9 }),
10 ];
11 },
12});
13
14export const gameProps: GameProps = {
15 id: "Game",
16 size: {
17 width: 400,
18 height: 600,
19 maxHeightMargin: 150,
20 },
21 defaultFont: {
22 family: "Helvetica",
23 size: 24,
24 },
25};
26
Preview