Skip to main content

Backdrop

Our game will take place on a backdrop of stars. Let's add that to our game world!

Importing assets​

tip

In Easel, the various image, sound and video files that make up a game are called Assets.

First we will need to import the image file that we want to use for our backdrop.

Add an image to your project using the following steps:

  1. Download the following file by right-clicking the link and choosing Save Link As (Google Chrome) or Download Linked File (Safari):

  2. Drag-and-drop the file backdrop.png into the file list on the left side of the editor.

If you did this successfully, you should see a new file called backdrop.png in the file list.

note

This asset comes from the Space Shooter Remastered asset pack from Kenney, an excellent resource for free game assets!

The beginning of your universe​

It's time to start coding!

Select your main.easel file from the sidebar on the left.

We want to start fresh, so delete everything inside the Main function until it simply looks like this:

pub game fn World.Main() {
}

Now we are ready to start filling our Main function with code that will create our game world.

info

Inside the main.easel file is the Main function which is the entrypoint into your game's code. This is where you set in motion all the entities and systems that make up your game.

Adding a backdrop​

Our game will take place on a backdrop of stars, so let's add that first.

pub game fn World.Main() {
    ImageSprite(body=@(0, 0), image=@backdrop.png, radius=7, repeatX=100, repeatY=100, layer=-100)
}

Click the Preview button at the top right of the editor to test your game. You should see a subtle starry background filling the screen, waiting for you to pilot your spaceship through it (which we will add in the next section).

info

To display this backdrop, we just added an ImageSprite component to the World entity. Because the function is declared as World.Main, World is the current entity that we are adding components to within this context.

Recap​

In this chapter you imported an image asset into your project and used it to create a backdrop for your game world. In the next section, we will add a spaceship that you can fly around the universe!