How to Make a Lesson Flow with Flowlab
While doing some research for another project in gamification I kept asking myself - are there any tools out there to make games quickly? After looking around I stumbled upon a great tool for quickly making games called Flowlab.
This browser based development kit takes a lot of the grunt work out of developing games. Flowlab comes pre-packaged with many different objects and scripted behaviors which allow for creating games quickly and reliably.
I will be taking a step by step tour through creating a simple game with Flowlab. The purpose of this game will be to simply jump around until you can hit a block which will link to some content. Once you get the basics down of creating basic levels and objects you can dive deeper into the world of gamifying your lessons. I look forward to people posting their own projects and fostering new teaching techniques using these simple games.
1) Navigate to Flowlab
2) Create a free account using the Signup Free Button
3) Log in using your newly created credentials
4) This should bring you to a page that looks like this - click the "New Game" button
5) Select Flowlab tutorial from the starting options (for your first game)
6) Follow through the tutorial prompts, inputting and creating the base pieces. Create the ground blocks, choose a background color, and create our movable hero with running and jumping mechanics. After finishing the tutorial it should look something like this.
7) Press the play button to run the game. As you can see by using the arrow keys you can now move and jump!
8) Click open editor to get back into edit mode. Go back into settings and lets make the game a little bigger. Set the width to 20 and the height to 16. You can also rename your game here.
9) Now our blocks look a little weird. No worries, you can drag and drop them wherever you want. Using the clone option lets make a border around our level so our little space man can't fly off into a wormhole. Let's make some more blocks for our man to jump over and make it a little more interesting. You can also move the man back down to the corner for a start.
10) Now lets add a special block for our little man to try and get to. Click on the block directly above the highest block in the last row of obstacles and click "create".
11) press the "click to edit" block in the upper left hand corner. On the left hand side click "browse". In the pop out menu at the top select "tutorial" from the sprite options. Find the golden exclamation point block and hit "OK"
12) In the same golden block popup click the "behaviors" button. This will bring you into a new menu that holds all of the different actions you can apply to objects. From the "triggers" options select the "collision" behavior. This will make the block do something when our little guy hits it.
13) Now we just have to define what we want it to do when we hit it. As mentioned in the description our goal is to pop up another webpage when we hit it. From the options on the left navigate to the "Game Flow" section. As you may have noticed there is a "Open URL" option. Drag this option to the screen next to our collision block. Click on the Open URL and enter the URL which you want to link to. As you can see these behavior blocks also have dots on the sides for their various inputs/outputs. The beauty of Flowlab is all you have to do is drag the dot from the collision block to the "open" dot from the open url block. It's that easy!
14) From the behaviors mode view you can click play in the bottom left. The beauty of this here is you can actually see your code snippets running AS YOU ARE USING THEM. This is a great way to debug any issues you may have. Once you are done testing it, click "OK" in the bottom left.
15) Hit play and check it out!! You can run and jump and if you make it to the block you can unlock some powerful knowledge!!
Here is the link to this simple project, you can look inside if you get lost.
Here is a more complex version with levels
