"Security System" Video Game

This is how to make a simple platformer in flowlab.io The game used as the example in this tutorial can be played and its programming viewed and edited (but not saved) at this link: https://flowlab.io/game/play/1130006

Step 1: Step One: Create Main Player

Use the sprite editor to create the design of your player. From here, add moving behaviors, health bundle behaviors, and if desired projectile shooting behaviors. In the health bundle, add behaviors that allow the player to be damaged by enemies and objects. Animations can be tied to all these behaviors.

^An example of the final behaviors for a player character. Basic movement comes in an adjustable pre-packaged bundle, keys can be assigned animations and/or projectiles, health is complicated so is kept in a separate bundle for organization purposes. This programming looks complicated but most of the complexity here comes from using logic gates to establish what takes priority when keys are pressed and animations/actions occur.

^Part of this player character’s health behaviors. When an object “hurts” the player character, the behavior is not programmed into the enemy/object, but into the character, where interacting with the enemy/object removes some of the player’s “health” and when the health hits zero, behaviors such as pausing and ending the game can be applied.

^The appearances of objects can be edited using flowlab.io’s pixel art editor or by uploading your own images into flowlab’s pixel art editor

^In the same editor animations can be created for use by that object, such as the walk cycle above

Step 2: Step Two: Create Enemies | A: Bugs

Use the sprite editor to create the design of your enemy, in this case a bug. From here, add behaviors to make the enemy move. For this enemy, we created a continuous movement behavior bundle and behaviors that allow projectiles and overhead collision to destroy it.

^Edit the behavior of the object after you create it by clicking on the object and clicking “behaviors”

^The animation and behaviors that allow the player to shoot or jump on the bug to destroy it

^The animation that makes the bug appear to walk back and forth. In reality it is programmed to continuously move forward and it just flips direction on a timer. In the middle you will see “RayCast”. This programming causes the bug to turn around if an invisible ray it is projecting detects that it is about to walk off a cliff.

Step 3: Step Two: Create Enemies | B: Worms

Use the sprite editor to create the design of your enemy worm. From here, add the continuous movement behavior bundle you just made for the bug.

^The difference between this enemy and the bug is that we’ve created an enemy health bundle that subtracts a fixed amount from a value we assign the worm (here 3) when it touches projectiles and overhead collision, deleting the worm when that value reaches zero, thereby giving the worm 3 health. The two behaviors at the bottom left create an intangible “-1” generated at a random angle around the worm when it is hit: this lets the player know that they are doing damage to the worm.

Step 4: Step Two: Create Enemies | C: Viruses

Use the sprite editor to create the design of your enemy virus. Add the enemy health bundle you already made that allows the virus to take damage from projectiles and overhead collision, increasing the amount of health it has to 4 to make it more dangerous. Instead of adding the continuous movement bundle again, we created a new bundle for a different kind of movement.

^In this movement bundle we added behaviors that cause the virus to chase the player when it is level with it. We did this using “Raycast”, the same thing that stops enemies from running off cliffs in the continuous movement bundle. In this case, if the invisible ray sent out by the virus detects the player, the virus will move in that direction.

Step 5: Step Two: Create Enemies | D: Security System Bosses

Use the sprite editor to create the design of your security system boss. From here, add the enemy health bundle that allows the boss to take damage from projectiles, giving it 35 health as it is a major enemy. In the same bundle, add a destroy behavior that allows the boss to drop the backdoor key object when destroyed (will go into detail on the key later). Next add the movement behaviors based on a raycast like the virus has, so the boss will move towards the player. Now, we want the boss to show up multiple times, but increase in difficulty each time. Instead of creating multiple different objects that all look like the boss but with slightly altered behaviors, we will use the same boss object every time, and include behaviors that increase the boss’s difficulty that are only activated later. We do this using the “message” and “mailbox functions.”

^We want certain behaviors to activate on certain levels, so first we create a new object off-screen for each level. Above is the level 3 object.

^Add behaviors so that every time that level starts, the object you just created sends a message to whatever objects you want to activate level-specific behaviors in, in this case the boss. The level 3 object sends a message labeled “lvl 3”. It doesn’t matter what the message says, just that the mailbox on the receiving object matches it.

^This is part of the programming of the boss. When the mailbox receives “lvl1” from the Level 1 Object, it activates the behaviors that cause the boss attack the player with punches that release short, weak shockwaves while it is in level 1.

^When the mailbox receives “lvl2” from the Level 2 Object, it activates the behaviors that cause the boss to start shooting projectiles while it is in level 2, which it didn’t do in level 1, while the level 1 behaviors stay inactive.

^When the mailbox receives “lvl 3” from the Level 3 Object, it activates behavior that cause the boss to shoot larger, more damaging projectiles while it is in level 3.

Because you have to create a new object every level for this to work, it may at first seem like the same amount of work as recreating the boss every time, but it is a lot simpler to program the object to send a different message than it is to copy over the basic programming of the boss every time. Even more importantly, the level objects you create can send messages to multiple objects, so you can use them to create level-specific behaviors for any object you want.

Step 6: Step Three: Create Environmental Factors | A: Spikes

Use the sprite editor to create the design of your spike. From here, uncheck the movable and enable rotation boxes on the editor menu.

^The spike itself has no behavior. The behavior for the spike to damage or delete the player is located in the player health bundle.

Step 7: Step Three: Create Environmental Factors | B: Logic Bombs

Use the sprite editor to create the design for your logic bomb. From here, add proximity and projectile behaviors that trigger the bomb explosion and uncheck the movable and enable rotation boxes on the editor menu.

^If the player gets within a certain range of the bomb or shoots a projectile at it, an animation plays (which acts as a delay for the player to run away) then the bomb extracts its own x and y coordinates, deletes itself, and at those coordinates (with some values added by us to shift the locations slightly) three other objects that look like explosions spawn and then delete themselves.

^In the player’s health there is the usual damage programming so that the explosions hurt the player, but there are also behaviors that cause the player to be “blown back” by the explosions.

Step 8: Step Three: Create Environmental Factors | D: +2 Health

Use the sprite editor to create the design of your +2 health. From here, unclick the movable and enable rotation boxes and add a destroy behavior that will remove the object from the game once the player has collided with it.

^The only behavior the +2 health object has is that it deletes itself after the player touches it (not pictured). Same as objects that damage the player, the the behaviors that make the +2 object affect the player’s health are located in the player health bundle. However, instead of having collision with the objects subtract from the player’s health value, collision with the +2 object adds 2 health to the player.

Step 9: Step Three: Create Environmental Factors | E: Platforms

Due to the aesthetic we were going for we couldn’t go the usual route for platforms: creating a single block design that you can line up or stack as many times as needed to create platforms of different shapes and sizes.

^ We therefore created four different objects that were platforms of different lengths (long, medium, short, and shortest) consisting of images of text uploaded to the pixel editor.

Step 10: Step Three: Create Environmental Factors | F: Trap Platforms

We created two types of trap platform.

^The first is identical in appearance to the shortest platform, and has very simple programming. A set amount of time after the player touches it, the platform deletes itself, dropping the player if they are still standing on it.

^The second is used to create the arena for the bossfight. It looks identical to the long platform, but when the player touches it six objects are emitted at six different angles and stay there, creating a wall behind the player.

^The activated trap

Step 11: Step Three: Create Environmental Factors | G: Firewalls

Use the sprite editor to create the design of your firewall. From here, unclick the movable and enable rotation boxes and add an idle animation. These are the objects emitted by the trap platform. They serve to box in the player character in the boss fight of each level. They basically serve the same purpose as a traditional platform, being boxes that can be placed anywhere to block the player. In this game the use of this special wall marks the end of the level that the player must try to get to.

^The wall created by the firewall objects.

Step 12: Step Four: Create Objectives | A: Level Notifications

Notifications are a good way to tell the player some information about what they’re doing or give them technical instructions. This is where the level-specific objects that were created to send messages to the boss come back into play. To create notifications specific to the level, have the level-specific object send a message to an object that appears in that level (in this case the text that the player spawns in front of).

^When this object receives the message for each level, the behaviors for that mailbox are activated, showing different notifications depending on the level.

^The notifications that appear in the first level give some information about the setting(“COMMAND PROMPT OPEN” and “begin hack”), instructions on how to move, and tell the player that there are multiple levels and they are on level 1.

Step 13: Step Four: Create Objectives | B: Backdoor

Create an object and copy the appearance of the firewall, but we will give it different behaviors. It is then placed at the ground level of the firewall at the end of the level. This is the object that will send the player to the next level.

^The programming for the backdoor requires a switch. The switch is set to start in the off position. This prevents the player from progressing to the next level just by running past the boss and touching the disguised backdoor. When the door receives the message from the key (mentioned next) to unlock, the switch is turned on and an animation plays that reveals the backdoor. Now when the player touches the door they will be sent to the next level.

Step 14: Step Four: Create Objectives | C: Key

When the boss of every level is defeated, it deletes itself and spawns a key in its place.

^When the player touches the key, it sends a message to the backdoor that causes it to run its behaviors to that allow the player to touch it to advance to the next level.

Step 15: Step Four: Create Objectives | D: Victory

There should be something that rewards the player for beating the game, or at least tells them they beat it. For the example game, the game was created to be a puzzle in an escape room, so when the player beat all three levels an animation played that revealed the answer to the puzzle.

^An object that says “Security Disabled” appears with an animation of loading dots. A timer has the animation stop after a set amount of time, which starts another animation that says “Loading Documents” with loading dots and at the same time starts another timer. When that timer finishes it stops the animation, deletes the object, and spawns a picture that has the final part of the puzzle the player needs to solve the escape room.

Of course, the game can have any end reward you want.