10 - Background

Let's draw a nice blue background for our bird to jump in, instead of the default white background we have now.

We add a t.rectangle Texture as the first Sprite returned in the Level Sprite render method. Sprites are rendered in the order they're returned, so this way our background will always be drawn at the back.

We also want to fill the full view, not just the safe zone. To do this we need a rectangle the width and height of the view, plus the margins. Sprite methods also have a device parameter with a size field just for this.

We could set a position for the rectangle through an x and y prop, but actually the default x: 0, y: 0 position is exactly what we want. In Replay, the origin is directly in the center of the screen, and when you position a Sprite you're positioning its center point too. The y axis is also positive upwards.

Back Next

JavaScript
TypeScript

1import { makeSprite, t } from "@replay/core";
2import { Bird } from "./bird";
3
4const birdX = 0;
5
6export const Level = makeSprite({
init() {
  return {
    birdY: 10,
    birdGravity: -12,
  };
},
13
loop({ state, getInputs }) {
  const inputs = getInputs();
16
  let { birdGravity, birdY } = state;
18
  birdGravity += 0.8;
  birdY -= birdGravity;
21
  if (inputs.pointer.justPressed || inputs.keysJustPressed[" "]) {
    birdGravity = -12;
  }
25
  return {
    birdGravity,
    birdY,
  };
},
31
render({ state, device }) {
  const { size } = device;
  return [
    t.rectangle({
      color: "#add8e6",
      width: size.width + size.widthMargin * 2,
      height: size.height + size.heightMargin * 2,
    }),
    Bird({
      id: "bird",
      x: birdX,
      y: state.birdY,
    }),
  ];
},
47});
48

Preview