Installation Instructions

Transcription

1 Installation Instructions Important Notes: The latest version of Stencyl can be downloaded from: Available versions for Windows, Linux and Mac This guide is for Windows installation only Instructions for other platforms can be found online at Once you have downloaded the desired version of Stencyl, you run the setup wizard by double clicking the downloaded installation file. This initial screen should appear and the setup wizard will guide you through the installation process by following the on-screen instructions. A screen noting that the installation is complete will verify that Stencyl has been successfully installed to your system. Stencyl can now be accessed through the Start Menu item. If you run Stencyl for the first time, you will need to agree with the software s licensing agreement in order to access the software. The welcome screen of the software allows you to register or login with an existing Stencyl account. It is recommended to have a Stencyl account since you will need one in order to publish your games. A new Stencyl account requires just a working address. If you click Create Account you will prompted to select a username and a password for the new account. Also, you will be prompted register your address. This address will be registered as a credential for the new account. If you already have a registered Stencyl account, you can simply type your user name and password and click Sign In at the right-bottom corner of this screen. - 1 / 31 -

2 Stencyl Resources Each game implemented in Stencyl, is built using the available Stencyl resources described briefly in this section. We will use these resources extensively in our example game guide. Actors Actors represent the living, interactive part of a game. Actors are the players, enemies, projectiles, vehicles, items, interface elements and anything in a game that lives. Every actor can be broken up into a few common elements: Appearance - How the actor looks or appears in-game. Behavior - How the actor behaves or acts. Physics - How the actor interacts with the world when it collides with it. Scenes Scenes are where everything in a game takes place. Scenes can be the levels of the game or even menus. Scenes are the place where the player and the actors interact with each other. Scenes are connected with other scenes in order to build the story of the game. Scenes are built from tiles (or even custom images) and are organized in layers (which tiles/images are in from of others etc, just like Photshop). Every scene can be broken up into a few common elements: Scene - How the tiles are organized in space. Behavior - How the elements (actors, tiles) in this scene behave or act. Physics - How the scene affects its elements (e.g. gravity). Sounds This resource is all the sound effects associated with the game. Each sound can be utilized by actors or scenes to make the game more appealing and interactive. Tilesets/Backgrounds/Fonts Resources that allow for having a pre-defined set of building blocks for easily build each scene of the game. Logic This resource is the brain of the game. Logic consists of all of Actor Behaviors and Scene Behaviors. Behaviors are reusable, configurable abilities that you attach to Actor Types or Scenes. Together, they handle all interactions that occur in the world of the game. - 2 / 31 -

3 Stencyl Environment Initial Screen 1 2 A B 4 C D The initial screen of Stencyl (shown above) has four areas: A. The system menu: This is the main menu of Stencyl software and provides access to all of Stencyl tools and system dialogs. The File tab holds the new/open/save/close commands, allows access to the Stencyl account associated with each installation and the system preferences. The View tab allows for showing or hiding additional Stencyl toolbars. The Run tab allows us to test our games and open directly the platforms that we developed our games for (such as the flash player or our browser). The Publish tab provides the tools for finalizing our game and prepares the game for the platform we select. The Extensions tab allows access to Stencyl s extension manager. The Debug tab is holding all tools associated with resolving errors in games and verifying correct story line. Lastly, the Help tab contains shortcuts to online help resources and information about the Stencyl software. B. The toolbar: Allows easy access to create/save commands and the online Stencyl help system Stencylopedia. More importantly, the toolbar allows access to the Game Settings (Item 1) and to the Log Viewer (Item 2). These two Stencyl tools are extremely useful when we develop our games since Game Settings provide access to the global parameters of the game and the Log Viewer is an important debugging tool that allows us to verify the correct execution of our games. - 3 / 31 -

4 C. The Welcome Center: This is the main area of the initial Stencyl s screen. The Welcome Center is partitioned in three regions: its menu at the left, the game selection panel in the center, and the useful shortcuts list at the top-most right side (Item 3). The main purpose of the Welcome Center is to allow the selection of an existing game for editing or the creation of a new one. This is reflected on the option of the shortcut list (Item 3) as well. We can create a new game, export an existing game or even importing a Stencyl game created in another installation. The menu of the welcome center provides easy access to existing games in our installation through the Games option (Item 4) and to additional downloadable online material from Stencyl website. The Games option is the default pre-selected value and loads the game selection panel in the center. The game selection panel holds shortcuts for all games associate with our Stencyl installation and has a shortcut for creating new games as well. In our case, the panel has no games since we have a clean install and the only visible shortcut is the new game option (Item 5). D. The status bar: The initial screen s status bar holds a shortcut to our game folder (Item 6) and a button that opens the game we may have selected in the game selected panel. The game folder is the location in our hard drive where Stencyl operations and files are stored. If we press the View Game Folder (Item 6), our operating system will display the contents of this location in our hard drive: The Game Folder is stored under the stencylworks folder in our system s hard drive and holds not only our games but all Stencyl tools and procedures as well. The stencylworks\games subfolder is the physical location where our games will be stored each in a new folder named with the same name as each game. Important Notes: Removing a game (for example named <ABCD>) from the game selection panel, immediately DELETES all files from stencylworks\games\<abcd> and VICE-VERSA! The removal of a game is IRREVERSABLE when done through Stencyl! Please regularly backup stencylworks folders in order to keep your games save! - 4 / 31 -

5 By selecting to create a new game either through Item 3 or Item 5 of the Welcome Center and giving our game a name, we are ready to start building the recourses for our game. This tutorial will try to provide the necessary know-how to successfully creating a game using the Stencyl software through a hands-on game example inspired by the participants of CODERED workshop in Cyprus. Through a step-by-step guide we demonstrate how we utilize all necessary Stencyl resources for creating a Flash game. First, we will take a look at the Stencyl s Game Design Screen: Game Design Screen 1 2 The Game Design Screen of Stencyl has the same layout, menus and toolbars as the Initial Screen. The only difference is that the Welcome Center is now replaced with our game s Dashboard panel. Everything we will need to create a game is present in the Dashboard and all toolbars and shortcuts of the Dashboard will change and reflect the selected Stencyl resource s options. For example, the shortcut buttons (Item 1) are referring to the creation of new scenes since Scenes are selected in the resource list (Item 2). We can access all types of Stencyl resources (Actors, Scenes, Tiles, and Logic) by simply clicking on the name on the resource in the list (Item 2). The toolbar on the bottom of the panel (Item 3), allows for easy access to commands such as Edit, Remove. In our screenshot above, the commands in the toolbar (Item 3) are referring to Scenes since Scenes are the selected resource in the list (Item 2). Now, we are ready to start building our game! The first important step is to analyze the game description and its features in order to extract useful information on the Stencyl resources we will need. 3-5 / 31 -

6 Hands-on Example: The h-angry Donkey! game Important Notes: The h-angry Donkey game has been designed by the participants of CODERED workshop The game is provided under the EUPL Open Source Software License Download link: Game Features Goal: Feed the hungry donkey or it will be angry Correctly associate each monument/beach with the six pre-defined districts of Cyprus in order to move the donkey closer to its haystack Summary: Learn the location of the key cultural monuments of Cyprus Learn the location of the key beaches of Cyprus Interesting features: The game is targeting young students and tourists Attempts to trigger their interest in visiting the monuments/beaches of Cyprus Attractive game with funny music and hilarious donkey voices Characters/Environment: The main character is the donkey and the player tries to feed it The whole game takes place within a map of Cyprus with clear indication of the six districts Structure: Select if you want to play with monuments or beaches The donkey initially is away from its haystack The player associates each monument/beach by dragging and dropping it over one of the island s districts If the monument/beach is correctly associated with its location, the donkey moves closer to its haystack If the monument/beach is wrongly associated, the donkey moves further away from its haystack If the donkey reaches its haystack, the game is won and the donkey is sounding happy If the donkey falls off the edge of his path, the game is lost and the donkey is now angry and asks you to play again in order to feed him successfully If there are now more monuments/beaches available, the game ends and the donkey encourages you to try again - 6 / 31 -

7 Breaking Game Features into Stencyl Resources The first step of implementing a game in Stencyl is to identify beforehand the Stencyl resources we will need for our game. In order to do this, we will need to have a clear understanding of our game s features. We will use The h-angry Donkey (now on referred as the game) as a hands-on example. The game has been created during the CODERED workshop help in Cyprus and the game creators have documented the game features, mentioned in the section above. We will now take each individual feature of the game and decide the Stencyl resources we will need to map it into the game. Characters/Environment: The main character is the donkey v and the player tries to feed it The whole game takes place within a map of Cyprus with v clear indication of the six districts v Goal: Feed the hungry donkey or it v will be angry Correctly associate each monument/beach with the six pre-defined districts of v Cyprus in order to move the donkey closer to its haystack v Structure: Select if you want to play with monuments or beaches The donkey initially is away from its haystack The player associates each monument/beach by dragging and dropping it over one of the island s districts If the donkey reaches its haystack, the game is won [ ] If the donkey falls off the edge of his path, the game is lost [ ] If there are now more monuments/beaches available, the game ends [ ] Looking at the game features, we identify the donkey as an Actor. The donkey lives in the game and can move towards and further away from its haystack. The game takes place on a map of Cyprus, so we identify the map of Cyprus as an important building block (custom image as tile) of the game scenes. The player must associate each beach/monument with the district it is located. The districts are identified as Actors since the player and other actors are interacting with them. The haystack is an Actor as well since it interacts with the donkey. The player needs to be able to choose between monuments or beaches. So we will need an initial scene that describes the game and allows the selection. The signs marking each available selection must be Actors as well since the player interacts with them. The player controls the game by dragging and dropping monuments and beaches on the six pre-defined districts. In each phase of the game, the monument or the beach that the player controls must be an Actor. Since we have two different modes in the game monuments and beaches, we must create two scenes (SceneMonuments, SceneBeaches). Each of these scenes must include the map of Cyprus where the game takes place and the route the donkey has to follow to its haystack, as tiles. We need a final scene as well, where we will display the results and we will prompt the player to play again. - 7 / 31 -

8 Structure: Select if you want to play with monuments or beaches The donkey initially is away from its haystack The player associates each monument/beach by dragging and dropping it over one of the island s districts If the monument/beach is correctly associated with its location, the donkey moves closer to its haystack If the monument/beach is wrongly associated, the donkey moves further away from its haystack If the donkey reaches its haystack, the game is won [ ] If the donkey falls off the edge of his path, the game is lost [ ] If there are now more monuments/beaches available, the game ends [ ] The structure of the game is very useful to extract the game logic. The features described in the structure section are laying out the rules of the game. These rules are guiding our effort to build the brain of the game. We need to describe what the game has to do when the player selects one of the two categories (beaches or monuments). Additionally, we need to create the question/answer system that the game will use to identify correct or wrong association of monuments/beaches with the six pre-defined districts. Lastly, we need to identify how the donkey moves on its route to the haystack and what happens when the game ends. All of the above logic resources will be implemented either as behaviors how the actors interact with each other or with each scene s elements - or as events. Events are game logic that is executed only when the player of the game triggers an input command, such as pressing a button, dropping or hitting an actor etc. The game features are noting that the game should have funny music and donkey sounds. We should select our audio/sound files beforehand and we will use them as Sound resources in Stencyl when we start building our game. Important Notes: Analyzing the game before starting the implementation in Stencyl, allows for accurate planning of the resources we will need. This will allow faster implementation because if we start without a resource plan, most probably we will need to change the structure of the game again and again. - 8 / 31 -

9 Creating Actors with Stencyl The first step in successfully creating a game in Stencyl is the creation of the actors used in the game s scenes. For our hands-on example, the actors derived from our analysis are: The Donkey The Haystack The Beach/Monument Selection Sign The six Districts of Cyprus The Beach player The Monument player Additionally, we will need a few actors that will allow us to interact with the player. First, we will need an actor that will report the game results in the final scene (Another option will be to create multiple final scenes depending on the results). Finally, we will need another two actors that will allow for presenting the next beach/monument to be associated, i.e. next question buttons. Important Notes: Before creating actors in Stencyl, we will need to have their animation images ready. The images will reflect their desired action in the game and can be either static (a single frame) or animated (multiple images in multiple frames looping) These necessary image files can be created in Photoshop/Paint.NET or any other image processing software For our example game, the images for each actor are assumed to be available beforehand. First, we select Actor Types from the resource list in the left side of the screen. Next, we click on the Create New button on the shortcut list on the top-right corner of the Dashboard panel. A dialog box will ask as for its name. In our case, let us use Donkey to create the first actor in our list. - 9 / 31 -

10 A new panel named Donkey is now appearing. We can select between active panels using the tabs on the top-left corner. As we can see, there are two active panels: Dashboard and Donkey. The Donkey panel will allow us to create and later edit our Donkey actor. The Donkey panel has a new toolbar appearing in the top-middle for the screen. This toolbar allows access to the six resources that will use to build our actor. The first resource is Appearance which is already selected in our screenshot above. Here we will be able to implement how our Donkey actor will appear in our scenes. We will now use the Add Animation button (+) of the left-bottom side of the status bar in order to add our donkey images / 31 -

11 When the Add Animation button is pressed, a new animation named Animation 0 appears in the Animations List in the left side of the screen. We can now edit the properties and the frames of the selected animation. The properties panel contains the name of the animation and options like looping. Looping means that the frames of this animation will repeat forever when this animation is active for our Donkey actor. Let us now import our donkey image for this animation. First, we need to press the import frames button, a dialog box appears that will allow us to find the images in our hard drive by clicking the Choose Image button: Moreover, we can specify the dimensions of the frame by using the panel to the left side of the dialog box to resize our image. Additionally, we can select the scale of the image, i.e. the imported image in which scale will be used in the platform we are building the game for, and the resize method for different resolution of the platform. Please, note that Stencyl when you click Add on the bottom-right of the dialog box, will automatically create multiple versions of the frame for different scales (0.5x, 1x, 1.5x, 2x, 4x) in order to allow smooth graphics in various resolutions and screen sizes. For example, the graphics of a game generated in Stencyl for smartphones will not appear pixelated when playing in from a PC because Stencyl prebuilds the graphics for each scale. Ideally, our imported graphics should be large enough for setting them for scale 4x in order to have higher definition animations. Using the same method, we will create three different animations for our donkey actor: One looking to the left, one looking to the right and one smaller for our score bar. When finished the appearance of actor should be like the screenshot below: - 11 / 31 -

12 We are now ready to build the rest of our Donkey actor. We decided for the donkey to not have any explicit behavior or events (i.e. no logic), thus we move to the Collision tab. Here, we need to define the area for each animation we have created, that can interact with the player and other actors. We either select a general shape such as rectangle to cover the whole image or we can use custom shapes to cover specific regions of the frame. For example, in a shooting game we may want to deal with a bullet hitting a target actor differently depending for where it hit (head, torso, legs etc.). In our donkey case, we can use the default rectangle covering all of each animation. The Physics tab, allows for setting the laws that depict the movement of our actor in the world of the game. For example, we can decide if our Donkey can be pushed by other actors or not, if its affected by gravity and if it can rotate freely when moving or falling: - 12 / 31 -

13 Last tab is the Properties tab. Here we can rename our actor, add a description about it and choose the group that it belongs. The group in which each actor belongs is very important because it guides the interaction between actors and other objects such as tiles of a scene. Our donkey should be a member of the actors group. The groups are considered global options and as such can be accessed either through the Edit Groups button in the Properties tab or directly by hitting the Game Settings button at the Stencyl s toolbar. Actors belonging to the Actors group are set to collide only with other members of the Actors group and tiles of each scene. This means that a player cannot move or touch our Donkey since his/her Actor will be a member of the Players group / 31 -

14 This is the general way we create Actors in Stencyl. We will now look in the rest of actors in our list and we will follow a similar procedure to create them in Stencyl. The complete list of actors should be similar to the one presented in the screenshot below: We created two actors for bringing next questions for monuments and beaches, two actors Beach, Monument belonging to the Player group that will be controlled by the player of the game, the haystack actor belonging to the Actors group, the sign actor that will allow the player to choose between beaches and monuments in the initial scene of the game, the actor that will allow us to display the results of the game, and the six district actors that will be associated with our questions. We will now show some screenshots of actors that are a little more complex than the Donkey actor: - 14 / 31 -

15 The six district Actors are created to be in the custom epar Group. This is done through the Groups in Game Settings where we click on the Create New button and then we set the Name and the collision attribute of this group. We want the members of this group to interact only with the actors belonging to the Players group. The sign actor belongs to the custom sign Group which is created using the same method as the epar custom group interacting with NO other actor group. The actor is only accessible through user controls (such as a mouse). Moreover, this actor has two animations: one for each question category. The monument and beach are built in a similar manner. Both actors belong to the Player group and have multiple animations each one showing a different monument/beach. Moreover, we have a custom collision shape. We want only the push pin of each animation to interact with the rest of the actors / 31 -

16 Creating Scenes with Stencyl The next step for creating our game is to create the scenes where our actors will interact with the player and between each other. However, we will need the building blocks for our scenes to be ready beforehand. These resources are partitioned in three categories: Backgrounds Sounds Tilesets Backgrounds work similarly with the Animations we create for our actors. Basically, are images set as frames and these frames can create static backgrounds for our scene; or even animated backgrounds when we use multiple frames for a single background resource. Backgrounds are accessible through the left menu in the Dashboard panel. Backgrounds have toolbars for creating, editing and removing a background from our game. We created two static backgrounds for our game: A starting scene background that holds the instructions for the game The map of Cyprus with the six districts that we will use for our beach and monument scenes Tilesets resources are collections of square images (called tiles) that are necessary to build the paths for our actors in our scenes. Tilesets are accessible by the left menu of Dashboard as well. Tiles can be used to layout grass, walls, corridors, water and can be set to interact with each actor group differently! For example, we set in the Groups option in our Game Settings that only the Donkey and the haystack (Group Actors) will interact with the tiles in our scenes. This basically means, that only these two actors can collide, fall and crash on each scene s tiles. We have downloaded the Blobs Mixed Grass Tileset from Stencyl s online resources for our game and just imported it in The h-angry donkey! - 16 / 31 -

17 Sounds as already mentioned before are the songs and sound effects that we will need to add in our game in order to make it fun and attractive. First, we need to have our sound files ready in MP3 or OGG format. Then we access the Sounds resources from the left menu in Dashboard. Here, we can add/edit or remove sounds in our game. In our game, we have three sounds: A funny donkey-related song for our starting scene A satisfied donkey voice for winning the game A hungry-angry donkey voice for losing the game - 17 / 31 -

18 Important Notes: MP3 audio files can be used for creating game sounds and music only for Flash games. All other platforms (Windows, Linux, Android, ios, Mac) require that we have imported our sounds in OGG audio format. These files can be generated from MP3 files easily either by using a sound editor (Stencyl recommends the free tool Audacity) or even online using tools such as: When we create a new sound for our game, the above panel appears. In this panel, we can edit the name of the sound, select if it s a sound effect or background music, import the appropriate audio file and edit the audio file in an external sound editor. Stencyl requires that the audio MP3 or OGG files we import in our games to be in line with the instructions Stencyl clearly indicates in the bottom-right side of the panel. Initial Scene We are ready to create our first scene for our game. The initial scene will display the instructions for the game and will allow to the player to select beaches or monuments to play with. First we click on Scenes on the left menu of Dashboard. The scenes have the same layout as all of the other resources we discussed before. Then, we click the Create New button in the top-right shortcut bar. A dialog box appears that allows us to define the properties of the new scene. Here we can set the name of the new scene, its dimensions and the background color (if we need one). The standard size is 20x15 tiles (each tile is 32x32 pixels wide) but we can change it according to the game specifications. For example, we can make the scene smaller for mobile games etc. Stencyl uses tiles for size since tiles are the main building blocks for Stencyl scenes / 31 -

19 Stencyl will now open our new scene and will present the Scene editor for it. Scenes panel has a toolbar on the top (Item 1) that allows easy access to all of configuration categories we need for creating a scene for our game. The toolbar (Item 1) is similar with the one we used in the Actors panel. If you are familiar with image processing software such as Photoshop, Paint etc. you will find Stencyl s scene editor quite easy to use The left toolbar (Item 2) provides access to the basic image processing tools such as Fill, Pencil, Zoom etc. The middle of the screen is the empty scene we just created. The right toolbar is partitioned in three compartments: Tiles/Actors (Item 3), Tilesets (Item 4) and Layers. Tilesets (Item 4) are pre-loaded with the tilesets we have imported in our Game through the Dashboard. The tiles belonging to the selected tileset are available through the Tiles compartment (Item 3). If we select one tile, we can simply press and drag on the empty scene to create a series of the selected tile. Layers are an important asset for our scene since they are useful when we create complex scenes with multiple tiles, shapes, images and actors. Layers are used with the same manner as we use them in image processing software such as Photoshop. Layers can be added or modified through the layer toolbar (Item 5). First, we need to add the background we have created for this scene. We press the (+) button of the Layer toolbar (Item 5) and we select the new Background Layer option. A dialog box with the available backgrounds we have created in our game will appear and we select the start scene background. Immediately the background appears in our scene / 31 -

20 Next, we select the Layer 0, and we use the available tiles to draw a grass field that will allow for our donkey to move on it. Then, we are ready to add our actors. First, we need to select the Actors compartment from the right toolbar. All of the actors we have created for our game, now appear in the compartment. The initial scene needs three actors: The donkey and the two signs that will allow to the player to select between beaches and monuments. We select the donkey actor and we can place it in our scene by clicking on the desired position. We also are going to place two copies of the sign actor in our scene: One on the left and one on the right side of the donkey. Important Notes: Actor placement will be affected greatly by the physics and the actor group when the scene will be active in our game. The Donkey actor, for example, is affected by gravity. As such, as soon as the scene is created in our game, the donkey will start falling towards the bottom of the screen and its fall will only stop when it collides with something. Donkey belongs to the Actor group that can collide with tiles. As such, the donkey will fall until it reaches the grass tiles. This can be useful to great realistic scenes fast. For example, we can just place the donkey above the grass without worrying about the vertical placement (i.e our donkey will not appear to be floating even if we place it quite above the grass) - 20 / 31 -

21 The final appearance of the initial scene is shown to the left. After placing our actors on the scene, we are ready to move to the rest of the scene configuration categories. We have no behaviors regarding our scene, so we will move directly to the events tab. Events are a part of the logic resources of the game. As such, we will now introduce the logic editor of Stencyl: The logic editor of Stencyl has three distinct areas. The events menu on the left, the logic editor in the middle and the components lists on the right. The event menu will show all created events for our scene and we can create or remove an event by using the event toolbar (Item 1). The components lists are partitioned in three compartments: The general category (Item 2), the subcategories of each general category (Item 3) and the logic components that we can drag and drop in the logic editor (Item 4). First, we need to decide what events we need to create for our initial scene. We can extract useful information from the analysis we did on The H-angry Donkey game and the game s rules. The tasks we need to perform are: - 21 / 31 -

22 Play the funny song when the scene starts. Change the right sign actor to its monument animation. When the player uses the mouse: o If the mouse is over a sign, the sign should grow bigger for emphasis. o The above effect must be reversed when the mouse leaves the area of a sign. o When the player clicks beaches or monuments sign, we need to move the donkey towards the clicked sign and then change to the next scene. First, we will create the event that does the first two actions in our list. We press the add event button of the Event toolbar. Then we go to Basics and we select the When Creating Event. Now, the When Created block is appeared in the logic editor. We are ready to add our actions in the newly created block. We select Sound & Images from the general categories in the components list. Then, we select the Sound subcategory. We find the Play Sound component under the Playback tag. We can drag and drop this component into the logic editor and place it in the When Created block. Similarly, we go to Actor under general categories in the components list. We are looking for the command that will allow us to switch animation for an actor. We go to Draw sub-category since animations have to do with the way our actor appears in a scene. There under the Animation tag, we find the Switch Animation component. We drag and drop that component under the When Created block as well. We can change the order of the components under a block to fit our game needs. In this case however, we can put the Switch Animation component and the Play Sound component with any order we want since they do not affect the game directly / 31 -

23 The last step to complete our event is to specify the parameters of each component. First, we will setup the Play Sound component. This component has two parameters. If we click on the first, we get two possible options: Play and Loop. We select Play since we want to hear the song just once. The second parameter will allow us to select the sound we are going to play. By clicking it, we get two options us well: Choose Sound and Choose Attribute. We select Choose Sound and a dialog box with all the sounds we have created for our game. We select the starting song and we hit OK. The Switch Animation component has two parameters as well. We will need to set the for parameter first. If we click the parameter, we will get three options: Last Created Actor, Choose Actor and Choose Attribute. We select Choose Actor. A dialog box with all the actors presented in our scene will appear. We select the sign actor on the right side of the donkey. Now, we are ready to select the animation we want to appear with this actor. We click the first parameter and we write the name of the desired animation. In this case, the name is Monuments. The finished event should look like the screenshot in the left. Now, the moment that our initial scene is created, our game will execute two actions: first, it will start playing the startmusic sound and second, it will make the right sign to show the monuments animation. The next step is to create the events related with mouse actions. All events follow a similar procedure to be created. First, we click on the Add Event button and then we select On Actor (Universal Mouse and Touch Event) under the Input category. Then, we use the components to build and configure the desired actions. The screenshot below shows the completed On Actor event that is executed when the player clicks the beaches sign. The game first makes the donkey to turn towards the clicked sign (using Switch Animation), then launches the donkey towards the sign using a series of move commands, fades the initial screen sounds and finally switches to the beaches scene / 31 -

24 Creating Behaviors in Stencyl The last part of this tutorial will focus on how we can create behaviors for our actors. Behaviors are logic blocks that can be created either to be specific for one actor type or to be generic which allows to be parameterized for many actors. Stencyl provides a number of universal behaviors such as drag and drop that we can use directly in our games. Another option is to create custom behaviors ourselves. We will explore both options in this section. First, let us see how we can see Stencyl s universal behaviors for our actors. The game features are mentioning that the player drags and drops each beach/monument on a district of Cyprus. This means that our actors Beach and Monument should have a drag and drop behavior. We use the Dashboard panel to access the Actor Types. Then we click on the Beach actor and we click the Edit button on the bottom of the panel. We access the Behaviors tab from the top and we are ready to add a new behavior to our actor. Next, we press the Add Behavior button of the statusbar and the Choose a Behavior dialog box appears. From here we can either select a custom behavior we created in this game by choosing a behavior from under FROM THIS GAME tag or select a Stencyl universal behavior from under FROM YOUR LIBRARY tag. Stencyl s Drag and Drop behavior can be found under the Control category from the FROM YOUR LIBRARY tag. We select it and press Choose. Now our Beach actor can be dragged and dropped around the scenes of our game without any additional coding from our part. We need to do the same procedure to add the Drag and Drop behavior to the Monument actor of our game / 31 -

25 The last important part of our game is the question system i.e. how our game will decide what question will present and how the score will be displayed to the user. An important asset in Stencyl is attributes. Attributes can be used exactly as variables in any other programming language. We can use attributes to keep questions, scores, inventory and other important data during each round of our game. There are three types of attributes in Stencyl: Game Attributes, Actor/Scene Attributes, and Behavior Attributes. Game Attributes can be accessed in the Game Settings. These attributes can be accessed by any other resource in a game. This means that are the equivalent of global variables used in any other programming language. Game Attributes can be used to keep data that are needed to be visible by the events and behaviors of multiple actors/scenes in our game. Actor/Scene/Behavior Attributes, on the other hand, are visible only to the events of the actor/scene they belong to. For example, the Beaches scene can have an attribute called numberofitems that we can use to hold the number of active actors in the scene. All Events of the scene can view and modify this value / 31 -

26 Behavior Attributes can be viewed or modified only within the logic of the behavior they belong to. This is equivalent to local variables used in any other programming language. We will use a Game Attribute to hold the correct answers to all beach questions. We go to the Game Settings and we select Attributes. Then we click Create New and we select type List of Text. Lists in Stencyl are like arrays in a typical programming language. Since Stencyl allows only one dimensional lists, we will combine all question data in a single text value. For example, to hold the beach questions, we create the attribute Beach_Master and we add all question/answer in the following form: <Correct District>_<Animation of actor Beach that holds the question>. The screenshot below shows the completed list: We create a second game attribute of the same type called Beach_Questions, where we will copy all questions in the beginning of each round. The idea behind this structure is that we remove each correct answer from the Beach_Questions list and we move the donkey a step towards the haystack. If the donkey reaches the haystack before the Beach_Questions list is empty then the game is won, otherwise is a tie. If the donkey moves outside its path i.e too many wrong answers the game is lost. The win/tie/lost condition is stored in the ExitCondition game attribute / 31 -

27 Now, we can move to the last step of creating our game since we have the question system in place. The last piece we need to implement is a custom behavior for our beach and monument actors. This custom behavior will control the logic behind the question system and will decide the condition of the game. A custom behavior is created by clicking on Actor Behaviors through the Dashboard panel. The list already contains the universal Drag and Drop behavior we already used for our beach and monuments actors. After clicking the Create New button, a dialog box appears and prompts for the new behavior s name, its type and the mode we want to create it in. The pre-selected Design Mode will open the logic editor we already familiarize ourselves with when we were implementing the Events in our scenes and actors. We give the name Answers_b depicting that this behavior will control the question system for beaches. Then we click Create / 31 -

28 The logic editor opens and now we are ready to add events in our Behavior. From the Add Event drop-down list we select Collisions since the Beach actor must be evaluated if it s correctly placed or not when it collides with a district actor. We select Member of Group since there are six districts all belonging to the custom epar group. We then use the component list on the left to create our controller in the logic editor. The answer controller will need to check that the beach actor was dropped over the correct district. Then it decides what effects to do and how the players action affects the score. The completed logic event in our custom behavior is shown in the screenshot below: The Question and the Answer attributes are created as Game Attributes and are updated when the player clicks the new question button in the beach scene by extracting the information from the Beach_Questions list. Once we finish our custom behavior, we simply go back to the beach actor and we add it as we described before for the Drag and Drop behavior / 31 -

29 Testing our Game When we have create all necessary resources and the storyline behind our game is complete, we can now test our game for errors. We can test our game anytime during development by simply clicking the Test Game button on the far right side of Stencyl s toolbar: The default debugging platform of Stencyl is Flash player. If we click the Test Game button, Stencyl will compile and build our game. After a minute (or two, depending on your system) Stencyl will open the game in Flash player for you to test it. All sound effects, events and behaviors will be active!!! Moreover, Stencyl opens the Log Viewer by default. Log Viewer is a useful tool for debugging game s storyline and behavior especially when our logic events and behaviors have Debug components built into them. As an example, the add_newitem _b actor uses the Debug components what we can find under the Flow category in our list of components. We can use these components to print useful attribute data or the condition of our actors and scenes in the Log Viewer. Moreover, there are components that can be used to add useful information on how you build your logic events as comments in your blocks. Adding comments in our code can be very useful when you use complex or difficult-to-read logic. Comments can be useful when a game is developed by a team of developers and will help the team understand the big picture behind each logic event or each behavior / 31 -

30 The screenshot above shows where the debug components in the list of components are, and how we can use them in our logic. The example above prints the question fetched by the add_newitem_b actor and its answer. The screenshot below shows the Log Viewer just after the add_newitem_b actor is pressed and a new question is generated: - 30 / 31 -

31 Publishing our Game Once we finished the testing and evaluation of our game and we corrected all identified errors, we are ready to publish our game in the platform we select. The H-Angry Donkey game has been developed to be a Flash game that will be distributed in the Internet. First, we must go to the Publish tab on the Stencyl menu. Then, we select Web and Flash. Stencyl will begin the process of building and publishing our game to the selected platform. This process typically takes a few minutes. When the process is completed, a system dialog will prompt for the location we desire to save the published game. When we select the location, the publish procedure is finished and the selected folder opens to allow us to access the published game. We can now play our game in any browser! CONGRATULATIONS!!! You now created your first game in Stencyl! Important Notes: The complete Stencyl project and code can be downloaded from: / 31 -