Skip to main content

Editor

Let's start by making a new project and giving it a name.

Creating your project​

We are going to open the Easel Game Editor in a new tab so you can easily switch between the editor and this guide as you follow along.

  1. Right-click the Launch Editor button in the top-right corner of this page, then choose Open Link in New Tab from the pop-up menu.
  2. Once the editor loads, click New Project.

Now you are ready to start creating your game.

tip

If you have multiple screens, place this tutorial on one screen and the editor on another so it is easy to switch back and forth.

Exploring the editor​

The first thing you will see are these four files listed in the left sidebar:

  • readme.md contains some helpful information about your project. This is where you would write instructions for your future self or for future developers on your project.
  • easel.toml contains configuration for your project.
  • main.easel and home.easel are Easel code files that define your game. Most of your time with Easel will be spent editing files like these.

On the toolbar at the top are a few buttons:

  • Code is where you edit the code for your game and where you will spend most of your time.
  • Publish allows you to publish your game to the internet so other people can play it.
  • Help links to useful resources to help you make your game.
  • Next there is the Save button which will save a copy of your game to your computer. It is a good idea to save often!
  • In the top-right corner, Preview runs your code so that you can see what your game looks like. You will be clicking this button often!

Naming your project​

It is a good idea to give your project a name. This will help you find it later if you have many projects.

  1. Select the file easel.toml from the left sidebar.
  2. Find the name field in the [project] section. It will initially contain a randomly generated name like "Generous Pink Biscuit".
  3. Change the name to "Astroblast!". Be sure to keep the double quotes (") that surround the name.

The top section of your file should look like the following once you are done:

[project]
name = "Astroblast!"

[authors]
# ...
note

You will be inserting and modifying a lot of code in this tutorial. Look for the highlighted blocks of code to see what to change. Sometimes we will omit other parts of the file for brevity. This will be indicated by a ....

tip

If you make any mistakes while editing a file, you can always undo your most recent change by pressing Ctrl+Z (Windows) or Cmd+Z (Mac) on your keyboard.

Click the Preview button in the top right to see your changes. You should see a page that says "Astroblast!", a text box asking for your name, and a Play button. Enter a username for yourself (don't use your real name) and click Play.

You will see a black screen, a small message greeting your into your empty universe. This is your game world, which we will soon fill with a spaceship and asteroids. Click Exit Preview in the top left to return to the editor.