Skip to content
Rengy
Menu

Tutorials · Ship Evader · Chapter 3

Bringing the art in

20 minutes Uses: Sprite

By the end

  • The 32 pictures, sounds and font the game uses, in the project’s art, audio and fonts folders
  • Why a file’s name and folder matter: its id comes from its place in the project
  • The field painted with the pack’s dark purple sky, tiled
On this page

Reference

Copy the files in

A Rengy project is its folder. There is no import button: a file belongs to the project once it is in the folder, and the editor finds it there. Ship Evader keeps its pictures in art, its sounds and music in audio, and its font in fonts.

  1. In your file manager, open the ship-evader folder and make three folders in it: art, audio and fonts.
  2. Copy the 32 files below into them, each under its own name, from where the list says it is in your downloads.
  3. Save the menu music as menu_3.ogg, not menu.ogg: the rest of the tutorial calls it that.
  4. Back in the editor, press Refresh in the bar of the Assets panel. The three folders appear, with every file in them.
The Assets panel listing the project’s folders, art, audio, fonts and scenes, and the Viewport showing the field painted dark purple
The Assets panel with the art folder open, listing the pictures from “buttonBlue.png” and “darkPurple.png” down

As it finds each file, the editor writes a small .meta file beside it, holding the file’s id. The id is made from the file’s place in the project, so the same files in the same folders under the same names get the same ids as the game this tutorial was made from.

Paint the field

The dark blue field from chapter 2 becomes the pack’s dark purple sky: a picture 256 pixels square, repeated across the field. The node stays; only what draws it changes.

  1. Select field in the Hierarchy and rename it background.
  2. In the Inspector, remove its Shape with the bin icon at the right of the ShapeComponent header.
  3. Press Add component and choose SpriteComponent.
  4. Drag art/darkPurple.png from Assets onto the Sprite’s Texture.
  5. Set Size to 720 and 1280, and Sort Layer to -10, as the field was.
  6. In the Sprite’s Draw mode fold, set Draw Mode to Tiled, and set Tile Size to 256 and 256, the picture’s own size, and press Enter.
  7. Leave Color white, Blend on Alpha, and Opaque unticked.
  8. Press Ctrl+S.
The background selected: its Sprite shows Texture darkPurple.png, Size 720 by 1280 and Sort Layer -10, and the Viewport shows the field tiled with the dark purple sky
The background’s Sprite narrowed to its tiling rows: the Draw mode fold open, Draw Mode Tiled and Tile Size 256 by 256, with its Physics shape fold below

Tiled repeats the picture at Tile Size across the Sprite’s Size, rather than stretching one copy over it, so the sky keeps its faint stars small however big the field is.

Check it works