Creating Games With Stencyl

Gurigraphics – Creating games with Stencyl
Criação de Jogos
com Stencyl
How to do something this book explains
1st Edition
by
Gurigraphics
www.address.com
Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016.

Content
INTRODUCTION............................................................................02
Chapter 01 - How to download Stencyl ...............................................03

Chapter 02 - How to install Stencyl ....................................................04
Chapter 03 - How to create a shortcut for Stencyl ................................08
Chapter 04 - How to create a new game in Stencyl ..............................09
Chapter 05 - How to create a Scene ...................................................12
Chapter 06 - How to test a Scene ......................................................15
Chapter 07 - How to duplicate a Scene ...............................................16
Chapter 08 - How to save the Game Project ........................................18
Chapter 09 - How to close the Game Project .......................................19
Chapter 10 - How to open the Game Project .......................................20
Chapter 11 - How to set the Starting Scene of the Game ......................21
Chapter 12 - How to diplay a Text on the Screen ..................................22
Chapter 13 - How to position an Element on the Screen ........................25
Chapter 14 - How to use Variables .....................................................26
Chapter 15 - How to create an attribute .............................................27
Chapter 16 - How to use an attribute .................................................28
Chapter 17 - How to use the "When Creating" Event ............................29
Chapter 18 - How to Use the "When Updating" Event ...........................30
Chapter 19 - How to remove Events ...................................................32
Chapter 20 - How to Use Mathematical Operations ...............................33
Chapter 21 - How to use Mouse Events ..............................................34
Chapter 22 - How to disable an Event ................................................36
CONCLUSION................................................................................37
Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 1

Introduction
Stencyl is one of the best opensource engines for learning how to create games. It is the most
organized and productive engine of all. It does not require knowledge of a programming
language. Requires only programming logic. But you can also use code.
The Engine is written in Haxe which is a cross-platform language similar to C++, C# and Action
Script. With Haxe and Openfl libraries it is possible to create extensions to extend the
possibilities of Stencyl.
In the Starter version of Stencyl it is possible to export in formats: Flash and HTML5.
In the Indie version you can export to Flash, HTML5, Windows, Mac and Linux.
And in the Enterprise version it is possible to export to Flash, HTML5, Mac, Linux,
Windows, Iphone and Android.
Stencyl uses the same code to export in native code for all these platforms. The performance is
about 10x better than a HTML5 game running on a smartphone's browser when it's not a native
app.
Stencyl is the best option for those who do not want to be just a programmer. And neither take
the whole afternoon to just make a character walk the screen.
About the book
In this book you will learn the basics about how the Stencyl works. All exposed in a simple and
step-by-step way, without excess of words and explanations. You will learn here, in a practical
method, what it would take you several weeks to learn alone.
Welcome to Level 01
Subscribe to my Youtube Channel to follow the upcoming books launch:
youtube.com/gurigraphics

Chapter 01 – How to download Stencyl
In your web browser, go to the Stencyl site: stencyl.com
On the Stencyl website click the "download" button. You will be redirected to another page
where you can choose the version of Stencyl for your operating system: Mac, Windows or
Linux. The program has about 100Mb. Download the program.

Chapter 02 – How to install Stencyl
To perform the installation, double-click the program icon:
When open the window, click “Next >”.

If you want to choose a specific folder to install Stencyl click "Browse ...".
After that click "Install".

When installation is complete click “Next >”.

Finally, if you want to run Stencyl check the "Run Stencyl" option and click "Finish".

Chapter 03 – How to create a shortcut

for Stencyl
Access the folder that you installed the program. Right click on the Stencyl icon and choose the
option "Create shortcut".
A new icon will be created. Copy this icon (Ctrl + C) and paste (Ctrl + V) into your desktop or
wherever you prefer.
To run Stencyl simply double-click this icon.

Chapter 04 – How to create a new

game in Stencyl
There are four ways to create a new game:
1- Click on the area: "Click here to create a Game".

2- Click the button: "Create a New Game".
3- Click on: File → Create New → Game.
4- Use the keys: Ctrl + Shift + N.

In the next window will appear the question: "What kind of game do you want to create?".
Select the "Blank Game" option and click "Next".

Then choose a name for your game and the resolution that is the size of the game screen.
In this book we use the name: Game.
And the default resolution:
640 Width (Screen width)

480 Height ( Screen Height)
Finally, just click on "Create".

Chapter 05 – How to create a Scene
What is a scene? A scene is one of the game screens. A scene can be the home screen of the
game, the screen of credits of the game, a phase of the game, etc.
There are four ways to create a scene:
1- Click on the area: "This Game contains no Scenes. Click here to create one ".
2- Click the button: "Create New".
3- Click on: File → Create New → Scene.
4- Use keys: Ctrl + N.

A scene has the following settings.
Name: The name of the scene (which should not contain accents and special characters).
Width: The width of the scene. (Measured in tiles or pixels)
Height: The height of the scene.
Tile Width: The width of the tile.
Tile Height: The height of the tile.
Color: The color of the background.
What is a Tile?
Tile is like a slice of an image. In a game, to save memory and the game does not get too heavy,
we do not use whole images, but pieces of images that repeat themselves. These pieces of images
are the tiles.

For example, in a game, the lives of the characters are usually represented by the images of
hearts.
On the game screen you can see 3 or 4 images of hearts about 32px by 32px. However, repeated
pictures are not used in the game. It is the same image that repeats 3 or 4 times on the screen.
What is a Tileset?
Tileset is like a kind of mosaic. It's a set of tiles like the image above.
Since we do not need repeated images inside a game, we can construct an image equal to the
image above with this simplified tileset below. For, we can only repeat these images as a kind of
stamp.
In other book we will come back to this.

Chapter 06 – How to test a Scene
With the scene open, in the upper right corner you choose the options:
1- Flash (Player) - to open the scene in the Flash player.

2- Flash (Browser) - to open the scene in the Flash player in your internet browser.
3- HTML5 (Beta) - to open the scene in HTML5 format in your internet browser.
After choosing the format you want to test the scene click on "Test Scene".

Chapter 07 – How to duplicate a Scene
To duplicate a scene click the "Dashboard" tab. Select the scene you want to duplicate. Then
right click on it. And click on "Duplicate".

After duplicating the scene, double-click on the newly created scene or press "Enter".
Then click "Properties" to open the scene settings and change the name, for example, from "1
Copy" to "2". Finally, click "ok".

Chapter 08 – How to save the Game

Project
To save the game click on "Save Game".

Or, go to: File → Save Game.
Or, still press: Ctrl + S.
What if I need to create different versions of the same game?
Then, you will go to: File → Save Game As ....

And choose another name for the game: Game01, Game02, etc.
What if I need to open the game project on a different computer?
Then you will go to: File → Export Game. And export the game project in * .stencyl format
After on the other computer go to: File → Import Game.
With this, the project will always be available in the home screen: "Welcome Center".

Chapter 09 – How to close the Game

Project
To close the project click on: File → Close Game.

Or press: Ctrl + Shift + W.
Then select the "Save" options to save changes or "Don't Save" to close without saving.

Chapter 10 – How to open the Game

Project
From the home screen "Welcome Center", double-click the project or select the project and press
"Enter."

Chapter 11 – How to set the Starting

Scene of the Game
With the project open:
1- Click the "Dashboard" tab.

2 - Select the scene.
3 - Click on: "Mark as Starting Scene".
This way, if you click on "Test Game" instead of "Test Scene", the whole game will open, and
the selected Scene will be the first one to be displayed. However, in these our examples
obviously the scenes are still blank.

Chapter 12 – How to diplay a Text on

the Screen
First open the scene with a double click. Or select the scene and press "enter".
Then: 1- Click the tab "Events". 2- Click "Add Event". 3- Click "Basics" and select "When
Drawing".

On the right choose "Drawing" and drag the "draw text" block to the left.
Write the text "Hello World" and the positions x = 32, y = 32.
Then click "Test Scene" to save, compile the game and run:

The result:

Chapter 13 – How to position an

Element on the Screen
The elements are positioned according to these Cartesian Coordinates:
The X-axis is horizontal. The Y-axis is vertical.

And the "zero point” is located in the upper left corner.
As before we chose X = 32, Y = 32, the text was displayed in that position.

Chapter 14 – How to use Variables
What are variables? Variables are spaces in the temporary memory of the computer that we use
to store data.
In Stencyl there are two types of variables: Attributes and Game Attributes.
Attributes work as local variables. When you create an attribute in a scene, this data is only
available in this scene.
Game Attributes work as global variables. They store data that can be accessed in any scene.
When to use Attributes or Game Attributes?
An attribute can be used, for example, to store a text or the position of an element on the screen.
For, this value needs to be accessed only in this scene.
A game attribute can be used, for example, to store the player's score or level of progress. For
these values need to be accessed in several scenes.
In Stencyl there are 21 types of Attributes. And only 5 types of Game Attibutes.

Chapter 15 – How to create an

attribute
To create an attribute:
1- Click on "Attributes".
2- Click on "Create an Attribute ...".
3- Enter the name of the attribute.
4- Choose the type of attribute, for example, type: "Text".
5- Click "ok".

Chapter 16 – How to use an attribute
When you create an attribute two types of blocks are generated: Getters and Setters
A "Setter" block is used to define the value that will be stored in the attribute.
A "Getter" block is used to access the value that was defined by the "Setter" block.
Example:
In the first block we define the value of the attribute text with the phrase: "My first attribute".
In the second block we draw on the screen the attribute text value in the positions x: 32, y: 32 of
the screen.
What is the advantage of using variables / attributes? The advantage is that we can change the
value only once, and it will be changed in all places that the same attribute is used.

Chapter 17 – How to use the "When

Creating" Event
Click in:
1- Add event
2- Basics
3- When Creating
When Creating is used to perform events only when the scene is created.
For example:
When the scene is created the attribute text will be set to the value "My first Attribute".

Chapter 18 – How to Use the "When

Updating" Event
Click in:
1- Add event
2- Basics
3- When Updating
When Updating is used to run an event several times per second.
As a game is updated at the speed of about 60FPS (frames per second), this event will run about
60 times per second.

For example:
1- Create an attribute type "number". (As seen in Chapter 15)

2- Name this attribute to "number"
3- In the Drawing tab place this attribute to be drawn on the screen.
4- In the Updating tab place the block "set number" for "number + 1".
The sum block you find in "Numbers & Text".
Click "Test Scene" to see the result:
The result will be a kind of timer because whenever the game is updated (When updating) +1
will be added to the "number" value. And this will occur 60 times per second.
TIP: "Slowdown" in games usually occurs just in these constant updates. So avoid using "When
updating" as much as possible.

Chapter 19 – How to remove Events
To remove an event:
1- Select an event, for example, "Updating"

2- Click on the negative sign "-".
3- Click "Yes".

Chapter 20 – How to Use Mathematical

Operations
You do not need to know how all the blocks work. You need to learn to use only the most
commonly used blocks. So:
1- Click on "Numbers & Text" and choose some of those operations.

2- Then click "Drawing" and use some of those blocks.
3- Finally, click "Test Scene" to test.
4- Test several blocks to see the results.
With this you will learn how to make a sum, subtraction, division, multiplication.
The "random integer between" block will draw a random integer number between the first and
second value. And "random float between" will do the same with non-integer numbers -
Remember to use point (.) and no comma (,) between numbers.

Chapter 21 – How to use Mouse Events
With the scene open, click: Events → Add Event → Input → Click
This mouse event block has four functions:
1- pressed: when the left mouse button is pressed.

2- released: when the left mouse button is released.
3- moved: when the mouse is moved.
4- dragged: when the mouse is moved with the left button pressed.
When this occurs everything that is placed inside the block is executed.

For example:
In the first block we define the following: whenever the left mouse button is pressed, the value of
the attribute number must be set to a random value and integer between 1 and 6, as a dice.
In the second block we define the following: draw a text on the screen with the value that is
stored in the attribute number in positions x: 32, and: 32.

Chapter 22 – How to disable an Event
If you do not want to delete an event, you can only deactivate it. To do this simply click on the
"text-box" of the event.
Do this and click "Test Scene" to verify that the mouse click did not really work.

Conclusion of LEVEL 01
Congratulations on completing the Level 01
Subscribe to my Youtube Channel to follow the upcoming books launch:
youtube.com/gurigraphics
And follow me on social networks:
facebook.com/gurigraphics
twitter.com/gurigraphics
You can use and share this book for free, licensed under a
Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)
https://creativecommons.org/licenses/by-nc/3.0/
This book is an independent publication.

And has no connection with Stencyl brand and company.
By Gurigraphics
December 07, 2016
Made in Brazil

Creating Games With Stencyl

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Creating Games With Stencyl

Caricato da

Copyright:

Formati disponibili

Gurigraphics – Creating games with Stencyl

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016.

Chapter 01 - How to download Stencyl ...............................................03

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 1

About the book

Subscribe to my Youtube Channel to follow the upcoming books launch:

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 2

Chapter 01 – How to download Stencyl

In your web browser, go to the Stencyl site: stencyl.com

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 3

Chapter 02 – How to install Stencyl

To perform the installation, double-click the program icon:

When open the window, click “Next >”.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 4

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 5

When installation is complete click “Next >”.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 6

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 7

Chapter 03 – How to create a shortcut

To run Stencyl simply double-click this icon.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 8

Chapter 04 – How to create a new

There are four ways to create a new game:

1- Click on the area: "Click here to create a Game".

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 9

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 10

In this book we use the name: Game.

And the default resolution:

640 Width (Screen width)

Finally, just click on "Create".

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 11

Chapter 05 – How to create a Scene

There are four ways to create a scene:

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 12

A scene has the following settings.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 13

In other book we will come back to this.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 14

Chapter 06 – How to test a Scene

1- Flash (Player) - to open the scene in the Flash player.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 15

Chapter 07 – How to duplicate a Scene

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 16

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 17

Chapter 08 – How to save the Game

To save the game click on "Save Game".

What if I need to create different versions of the same game?

Then, you will go to: File → Save Game As ....

What if I need to open the game project on a different computer?

After on the other computer go to: File → Import Game.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 18

Chapter 09 – How to close the Game

To close the project click on: File → Close Game.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 19

Chapter 10 – How to open the Game

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 20

Chapter 11 – How to set the Starting

With the project open:

1- Click the "Dashboard" tab.

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 21

Chapter 12 – How to diplay a Text on

Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) Gurigraphics 2016. 22