Quick Start Tutorial

The goal of this guide is to show you all the core functionality in the Pixel Stories Engine. After this quick guide, you’ll be primed with all the basic knowledge you need to explore more as well as start creating your first story game!

We’ll be building a simple game from scratch. In the tutorial, we go through setting up the project and game assets, building a game map, and adding game interactions with events.

Project Setup

First let’s make a project in the game engine.

1. Open the Pixel Stories Engine.
2. Log in or create an account.
3. Create a new blank project.

Game Assets

Now that you have a project, we need to add some game assets to start building our map. For now we’ll use the default assets the engine provides.

1. In the Game assets tab, and open the Assets library.
2. Click on the zelta-like asset pack
3. Add the following:
   • A grass terrain
   • A few rock variations

After adding those to your project, you’ll find those assets under Game assets > Map assets.

These assets will just serve as placeholders for now. Later on, you can see how to add custom assets.

Game Map

With our assets in place, we can start creating the game map. This section goes though using terrains, placing map objects, and map collision boundaries.

Drawing Terrains

Terrains allow you to draw into the map without worrying about connecting each individual tile. Learn more about terrains.

Drawing terrains in the map is done through the map’s Edit map section. Select a terrain and click in the map to draw. There are also useful tools above the game window to pan, draw, and erase.

Terrain layers

The ground layer is to place main terrain tiles, floors, walls, and walkable surfaces. The Details Layer is for detail adding terrains like grass, flowers, or ground tile variations.

Placing Map Objects

Map objects in the game are free to be placed anywhere, have no limitations in size, and are meant to be the “objects” in your map. Learn more about map objects.

Similar to terrains, you can place map objects into the game in the Edit map > Map objects section.

Map grid settings

Change how map objects snap to the grid with the map settings on the top right of game window.

Map Collisions

If you play test your game in Play test tab, you’ll find the player can walk anywhere, even off the map. We can fix that by adding map collisions

Navigate to Edit map > Edit collisions. Put collision boxes around your map and at any map objects that require a collision box.

Event System

Events are the building blocks for your game in Pixel Stories. We’ll be working with the Spawn character, Move character, and Dialog events. Later, you’ll see how we can use event groups to combine events and trigger it from player interaction.

New Character

In this section, we’re going to spawn a character into the map using the Spawn character event.

But before we can do that, we have to first add a new character into our game in the Game assets tab.

Navigate to the Game assets tab and create a new character. The character will have the default ghost walking animations so we don’t have to worry about putting in animations for now.

Now that you have a character in the game, lets add it into the map.

1. Navigate to your map and to the initial events section.
2. Add a new event: Spawn character.
3. Select the new character you created to spawn.
4. Set the spawn position in the map.

You won’t see the character in the editor game window for now. But if you go to the Play test tab, then the initial map events will be executed, and the character will be in the map.

Playing Dialog

The Dialog event shows text in a dialog box in the game.

In the same way we added the spawn character event, add a Dialog event. Within the dialog event configuration, you’ll find a big text box, In that text box you can write all your dialog.

Dialog is written in a specific format. If you type an opening bracket [, you can find all the tags that control how the dialog plays.

The most useful ones are:

• [r] for playing the text on a new line
• [pb] for playing the text on the next dialog box

Feel free to copy the following into your Dialog event:

Hello world! Coming from the dialog event.

[r]

This text is on a newline.

[pb]

And this text is on the next dialog box!

Event Sequence

Events play one after another. So if you had an actor move event before the dialog, the dialog only shows after the actor is finished moving.

Triggering Events

You’ll notice the current events in the game automatically play right away when the map loads. That’s because they are in the initial events section. To play an event when a player triggers it, we need to use an event group.

How Event Groups Work

Event groups are a group of events separate from the map’s initial events which play when the map loads.

To use event groups, first you define the event group and add events to it, then you add the event group to the map with the Add event group event. Once its added to the map, they can be triggered by player Interact or Touch.

New Event Group

Let’s add an event group to our game.

1. Define a new event group in the map’s event groups section.
   • Name the event group My dialog trigger.
   • Add a new Dialog event into the event group.
2. Add an Add event group event in the initial events section of the map.
   • Select the event group you’ve defined.
   • Set the trigger type to interact.
   • Set the position in the map for the trigger.

Now head over to Play test tab and use the Arrow keys to walk to where you set the trigger. Press Enter or z and you should see the dialog play!

The possibilities… Now with this system, you can implement story-driven game mechanics such as:

• Map exploration from interacting on map objects and showing pieces of lore, using Dialog or Show image events.
• Traversing to different maps with doors or portals by using the Transfer player event.
• Quests, such as ones where the player must find a key to a door before they can progress.
• Jump scares by using Play sound along with Show image events when the player walks into an area.
• Completely new mechanics that I never dared think about…

This document goes more in depth about how event groups work. For more complex mechanics such as branching dialog and multiple endings, it’s good to look into Variables and Conditional Branching as well.

Sharing Your Game

Share your game by copying the link found in the Share game button at the top right. Through the link, your friends and other players will be able to play your game in the browser.

What’s next?

Now you’re primed with all the basic knowledge to start building a story game, we recommend to start building out your idea right away and learn as you go!

Below are some guides and concepts which go in more depth on how to use the Pixel Stories Engine for special mechanics and features.

• Moving your player between maps
• Making a quest
• The events system
• Map editor
• Variables and branching
• Game Assets

Thanks for going through the tutorial! Join us on Discord if you’d like to get help or give feedback/suggestions.