Pre-Game and Post-Game
At this point, we have created a playable game loop, so let's complete the beginning and end parts so the game is nicely packaged.
Displaying instructions
It is always a good idea to add some simple instructions to your game so new players know how to play. Let's display instructions instead of a score when the game starts.
Select your main.easel file. Modify the TopContent block in your Main function
to match the highlighted code below.
You will need to delete what is there and replace it with the new code.
pub game fn World.Main() {
SpawnEachPlayer owner {
// ...
TopContent {
with Score {
if Score > 0 {
H1 { %(Score) }
} else {
VStack(align=Align:Center) {
P {
Span(bold=true, color=#00ff00) { "Click" }
" to accelerate, and press "
Span(bold=true, color=#00ff00) { "Spacebar" }
" to fire"
}
}
}
}
}
}
// ...
}
You will find a complete list of all available user interface elements in the Elements section of the reference documentation.
Click Preview and you should see the instructions displayed at the top of the screen. When you start shooting asteroids, the instructions will disappear and your score will be displayed instead.
Waiting until ready
It is best to wait until the player is ready before starting the game. We will do this by only starting the game once one of the players presses the spacebar to fire a plasma bolt.
Select your ship.easel file. Insert the following highlighted snippet into the Ship function:
pub fn ship.Ship([owner]) {
// ...
on ButtonDown(KeySpacebar) {
CommenceGame
Spawn projectile {
PlasmaBolt(ship=)
}
await Tick(0.1s)
}
}
CommenceGame indicates when the game has started, and also will stop new players from joining the game if this is a multiplayer game.
Let's stop asteroids from spawning until the game has started.
Select your main.easel file.
Within your Main function, surround your with Tick(2s) block with the highlighted code below.
You will need to insert two snippets of code - once AfterGameCommenced { before the block,
and a closing brace } on the line after the block.
Once this is done, make sure to indent the block to match the example below.
You can do this by selecting all of its lines and pressing Tab.
Don't forget you can select multiple lines and press Tab or Shift+Tab to change their indentation.
Indentation helps you visually organize your code and makes it harder for
bugs to hide.
pub game fn World.Main() {
// ...
once AfterGameCommenced {
with Tick(2s) {
const MaxAsteroids = 25
if QueryCount(filter=Category:Asteroid) < MaxAsteroids {
Spawn asteroid {
Asteroid
}
}
}
}
// ...
}
Click Preview. You should notice the asteroids do not start spawning until you press Spacebar.
Stopping when the game ends
Let's also stop asteroids spawning once the game ends.
To do this, we are going to give the name spawnAsteroids to our behavior
so that we can refer to it by its name later.
In main.easel, within your Main function, insert behavior<spawnAsteroids> before where it says with Tick(2s)
so that it looks like the following:
pub game fn World.Main() {
// ...
once AfterGameCommenced {
behavior<spawnAsteroids> with Tick(2s) {
const MaxAsteroids = 25
if QueryCount(filter=Category:Asteroid) < MaxAsteroids {
Spawn asteroid {
Asteroid
}
}
}
}
// ...
}
Now let's add the code to stop our spawnAsteroids behavior when the game ends.
Insert the following block of code below the once AfterGameCommenced block that you were just editing:
```easel
pub game fn World.Main() {
// ...
once AfterGameCommenced {
behavior<spawnAsteroids> with Tick(2s) {
const MaxAsteroids = 25
if QueryCount(filter=Category:Asteroid) < MaxAsteroids {
Spawn asteroid {
Asteroid
}
}
}
}
once AfterGameConcluded {
delete behavior<spawnAsteroids>
}
// ...
}
Click Preview. You should find that after you have played the game and died, new asteroids stop spawning.
Announcing deaths
Let's display a message when a player's ship explodes. This helps us create story and emotion in our game, and makes the game more engaging.
Select your ship.easel file. Insert the following code into your Ship function,
inside its on BeforeCollide block:
pub fn ship.Ship([owner]) {
// ...
on BeforeCollide that {
if that.Category.Overlaps(Category:Asteroid) {
repeat 5 {
Spark(color=#ffffff, luminous=1, bloom=3, feather=1, dissipate=0.75s, splatter=1, speed=10)
}
Transmission(audience=Audience:All) {
P {
PlayerNameDisplay
"'s ship disintegrates into space dust"
}
}
Expire
break
}
}
}
The built-in Transmission function
displays a temporary message on the screen for a given duration.
Normally, user interface content like Transmission is only shown to the owner player.
We set audience=Audience:All to make sure that, once we have multiplayer, all players will see the message,
not just the player whose ship exploded.
Click Preview, then collide your ship into an asteroid. You should see a message saying something like "raysplaceinspace's ship disintegrates into space dust".
Save your work
If you haven't already, this would be a good place to save your work. Click the Save icon in the toolbar. This will save your project to a file on your computer, which you can load back into the editor later to continue working on your game.
If you are using Google Chrome, you will be asked to choose where to save your project. This is what we recommend:
- Go to your
Documentsfolder - Create a new folder called
Easel Projects, and go into that folder. - Create a subfolder called
Astroblast, and choose that folder.
Now any changes you make will be autosaved directly into a folder called Astroblast.
Note that other browsers will simply download a copy of your project to your Downloads folder, as autosave is not yet supported in other browsers.