Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop:tutorials:howtomakeeaplatformergame [2015/10/18 19:20]
127.0.0.1 external edit
gdevelop:tutorials:howtomakeeaplatformergame [2020/06/13 10:29] (current)
rapperdinesh [Adding background objects]
Line 11: Line 11:
 ===== Download GDevelop ===== ===== Download GDevelop =====
  
-If you do not have GDevelop, download it from the official website : **[[http://​compilgames.net]]**. \\+If you do not have GDevelop, download it from the official website: **[[http://​compilgames.net]]**. \\
 Always download GD from this page to be sure to have the **latest version**.\\ Always download GD from this page to be sure to have the **latest version**.\\
 Install or extract GDevelop and launch it. The start page is displayed: Install or extract GDevelop and launch it. The start page is displayed:
  
-{{ gdevelop:​tutorials:​platformertutorial_2_.png?nolink |}}+{{ gdevelop:​tutorials:​platformertutorial_2_16122017.png?nolink |}}
  
 If you want, you can read [[gdevelop:​documentation:​manual:​edit_overview|this page]] to get a quick overview of the interface of GDevelop.\\ If you want, you can read [[gdevelop:​documentation:​manual:​edit_overview|this page]] to get a quick overview of the interface of GDevelop.\\
-Note that the **visual theme** of GDevelop can be different: You can choose a theme by clicking on **File > Options**, then choosing **Appearance** and finally picking one of the available ​theme.+Note that the **visual theme** of GDevelop can be different: You can choose a theme by clicking on **File > Options**, then choosing **Appearance** and finally picking one of the available ​themes.
  
 ===== Create a new game ===== ===== Create a new game =====
Line 25: Line 25:
 A window offers you to choose the platform on which your game will be based, as well as some templates. Choose the Web platform and then click on Empty project: A window offers you to choose the platform on which your game will be based, as well as some templates. Choose the Web platform and then click on Empty project:
  
-{{ gdevelop:​tutorials:​platformertutorial_3_.png?nolink |}}+{{ gdevelop:​tutorials:​platformertutorial_3_16122017.png?nolink |}}
  
 Choose also a directory and a filename for your game, and press Ok to create the project.\\ Choose also a directory and a filename for your game, and press Ok to create the project.\\
Line 40: Line 40:
  
 The player will be controlling a character that can jump and move on platforms. We're going to create this object.\\ The player will be controlling a character that can jump and move on platforms. We're going to create this object.\\
-Make a right click on the center of the gray scene in GDevelop and choose ''​Add a new object''​. A window pops up so as to choose the type of the object to create: Choose to create a ''​Sprite''​ object and click on Ok.+Make a right-click on the center of the gray scene in GDevelop and choose ''​Add a new object''​. A window pops up so as to choose the type of the object to create: Choose to create a ''​Sprite''​ object and click on Ok.
  
-The editor of the object is opened. For now, the object has only one empty animation. The first thing to do is too add an image for this animation: Make a right click on the white area at the bottom of the window, and choose ''​Add an image from a file'':​+The editor of the object is opened. For now, the object has only one empty animation. The first thing to do is to add an image for this animation: Make a right-click on the white area at the bottom of the window, and choose ''​Add an image from a file'':​
  
 {{ gdevelop:​tutorials:​platformertutorial_6_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_6_.png?​nolink |}}
Line 50: Line 50:
 {{ gdevelop:​tutorials:​platformertutorial_7_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_7_.png?​nolink |}}
  
-The object was called ''​NewObject''​ by default: To change this, select the object in the list in the right hand side of the window, and press ''​F2''​. Enter then ''​Player''​ as a new name and press ''​Enter''​.+The object was called ''​NewObject''​ by default: To change this, select the object in the list in the right-hand side of the window, and press ''​F2''​. Enter then ''​Player''​ as a new name and press ''​Enter''​.
  
 {{ gdevelop:​tutorials:​platformertutorial_8_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_8_.png?​nolink |}}
Line 57: Line 57:
 Let's now create an object that will be used for platforms: Let's now create an object that will be used for platforms:
  
-Again, make a right click on the scene and choose ''​Add an object''​. This time, choose the ''​Tiled sprite''​ object type:+Again, make a right-click on the scene and choose ''​Add an object''​. This time, choose the ''​Tiled sprite''​ object type:
  
 {{ gdevelop:​tutorials:​platformertutorial_9_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_9_.png?​nolink |}}
Line 72: Line 72:
  
 You can now click on ''​Ok''​ to close the editor.\\ You can now click on ''​Ok''​ to close the editor.\\
-The object is added on the scene but it is very tiny: Use the handles to resize so that is looks like a platform:+The object is added on the scene but it is very tiny: Use the handles to resize so that looks like a platform:
  
 {{ gdevelop:​tutorials:​platformertutorial_12_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_12_.png?​nolink |}}
Line 81: Line 81:
 ===== Add behaviors to objects ===== ===== Add behaviors to objects =====
  
-The movement of the player could be created using the events of GDevelop, but it would be a quite long and difficult task to recreate a good platformer engine. To avoid this, we're going to use behaviors, which allow to add predefined behaviors to objects.+The movement of the player could be created using the events of GDevelop, but it would be a quite long and difficult task to recreate a good platformer engine. To avoid this, we're going to use behaviors, which allow us to add predefined behaviors to objects.
  
 Make a double click on the player object on the scene: This will show a grid containing properties of the object and, at the bottom, the behaviors applied to the object. Click on ''​Add a behavior'':​ Make a double click on the player object on the scene: This will show a grid containing properties of the object and, at the bottom, the behaviors applied to the object. Click on ''​Add a behavior'':​
Line 93: Line 93:
 That's all: You can see in the property grid that the behavior is now displayed as well as some properties. You can change some properties like the jump speed: Set it for example to 800 so that the jump is more powerful. That's all: You can see in the property grid that the behavior is now displayed as well as some properties. You can change some properties like the jump speed: Set it for example to 800 so that the jump is more powerful.
  
-We also need to mark objects being platforms as such, otherwise the player will fall even if it is colliding with objects that look like platforms.\\+We also need to mark objects being platforms as such, otherwisethe player will fall even if it is colliding with objects that look like platforms.\\
 Click on the platform object on the scene and in the property grid, choose again ''​Add a behavior'':​ Click on the platform object on the scene and in the property grid, choose again ''​Add a behavior'':​
  
Line 106: Line 106:
 ===== Start a preview ===== ===== Start a preview =====
  
-You can now test that the behavior ​are working:+You can now test that the behavior ​is working:
  
 In the //Scene// ribbon, choose ''​Preview'':​ In the //Scene// ribbon, choose ''​Preview'':​
Line 113: Line 113:
  
 Your favorite browser will be opened and the game will be launched:\\ Your favorite browser will be opened and the game will be launched:\\
-You can move the character with the arrows keys, and use //Shift// to jump! For now the object has no animations: We'll add it later.+You can move the character with the arrows keys, and use //Shift// to jump! For nowthe object has no animations: We'll add it later.
  
-If the object is not moving, be sure that you've added the proper behaviors. Be sure that you've added the ''​Platform''​ behavior to the ''​Grass''​ object, otherwise the player will fall outside the screen.+If the object is not moving, be sure that you've added the proper behaviors. Be sure that you've added the ''​Platform''​ behavior to the ''​Grass''​ object, otherwisethe player will fall outside the screen.
  
 ===== Add differents platforms ===== ===== Add differents platforms =====
  
-We can use more than one type of objects as platforms: Add a new object by right clicking on the scene and choosing ''​Add an object''​.+We can use more than one type of objects as platforms: Add a new object by right-clicking on the scene and choosing ''​Add an object''​.
  
 Choose a Sprite object, click on ''​Ok'',​ and in the editor, add the image called ''​Grass.png'':​ Choose a Sprite object, click on ''​Ok'',​ and in the editor, add the image called ''​Grass.png'':​
Line 130: Line 130:
 These objects are now considered as platforms: You can add more of them on the scene and launch a preview to try jumping from platforms to platforms. These objects are now considered as platforms: You can add more of them on the scene and launch a preview to try jumping from platforms to platforms.
  
-Before going any further, you may want to change the background color of the scene: In the project manager, make a right click on the scene being edited ( "New scene" ) and choose ''​Properties''​.+Before going any further, you may want to change the background color of the scene: In the project manager, make a right-click on the scene being edited ( "New scene" ) and choose ''​Properties''​.
  
 {{ gdevelop:​tutorials:​platformertutorial_18_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_18_.png?​nolink |}}
Line 151: Line 151:
 {{ gdevelop:​tutorials:​platformertutorial_21_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_21_.png?​nolink |}}
  
-An animation called ''​Animation 1''​ is added to the list: Click on it to select it. It is empty: In the blank bottom part, make a right click and add the image called ''​p1_jumping.png'':​+An animation called ''​Animation 1''​ is added to the list: Click on it to select it. It is empty: In the blank bottom part, make a right-click and add the image called ''​p1_jumping.png'':​
  
 {{ gdevelop:​tutorials:​platformertutorial_22_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_22_.png?​nolink |}}
  
 This animation will be used when the object will be in the air.\\ This animation will be used when the object will be in the air.\\
-We also need an animation for when the object will be running on a platform: Add another animation ​like we did, and, when adding images, select the 5 images ''​p1_walk03.png'',​ ''​p1_walk04.png'',​ ... and ''​p1_walk07.png''​.+We also need an animation for when the object will be running on a platform: Add another animation ​as we did, and, when adding images, select the 5 images ''​p1_walk03.png'',​ ''​p1_walk04.png'',​ ... and ''​p1_walk07.png''​.
  
 {{ gdevelop:​tutorials:​platformertutorial_23_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_23_.png?​nolink |}}
  
-These images will be displayed so as to create the animation. We need to tweak a bit some options: Make a right click on ''​Animation 2''​ in the list and check ''​Loop the animation''​. Click then on ''​Time between frames''​ and enter ''​0.05''​ in the window so that the animation is faster than when using default options.\\+These images will be displayed so as to create the animation. We need to tweak a bit some options: Make a right-click on ''​Animation 2''​ in the list and check ''​Loop the animation''​. Click then on ''​Time between frames''​ and enter ''​0.05''​ in the window so that the animation is faster than when using default options.\\
 You should have this in the editor: You should have this in the editor:
  
 {{ gdevelop:​tutorials:​platformertutorial_24_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_24_.png?​nolink |}}
  
-You can preview the animation by clicking on the small "​play"​ button in the toolbar ​loacted ​in the top middle part of the editor.\\+You can preview the animation by clicking on the small "​play"​ button in the toolbar ​located ​in the top middle part of the editor.\\
 Close the editor when all animations are ok. Close the editor when all animations are ok.
  
-Now, we need to change the animation displayed by the object according to what the player ​do. Go to the events editor by clicking on ''​Events''​ next to the ''​Scene''​ tab:+Now, we need to change the animation displayed by the object according to what the player ​does. Go to the events editor by clicking on ''​Events''​ next to the ''​Scene''​ tab:
 {{ gdevelop:​tutorials:​platformertutorial_25_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_25_.png?​nolink |}}
  
Line 174: Line 174:
 {{ gdevelop:​tutorials:​platformertutorial_26_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_26_.png?​nolink |}}
  
-The event is created, with an empty list of condition ​( on the left part ) and an empty list of actions ( on the right ). Put your cursor over the condition list and choose ''​Add a condition''​ in the context panel that appeared:+The event is created, with an empty list of conditions ​( on the left part ) and an empty list of actions ( on the right ). Put your cursor over the condition list and choose ''​Add a condition''​ in the context panel that appeared:
  
 {{ gdevelop:​tutorials:​platformertutorial_27_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_27_.png?​nolink |}}
Line 198: Line 198:
 {{ gdevelop:​tutorials:​platformertutorial_31_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_31_.png?​nolink |}}
  
-Then, we have to set the animation 0 when the player ​reach the floor, and also launch animation 2 when the player ​start moving.\\ This could be done using two events: The first one checks if the player is on the ground and if he is moving. In this case, animation 2 is set. The second one checks if the player is on the ground and if he is not moving. In this case, animation 0 is set. Here, we're going to use a nice feature called ''​Sub events'':​ As we're running twice the same condition ( To check if the player is on the ground ), we can insert this condition in an event, and then add sub events to this event: Sub events are only launched when the conditions of their "​parent"​ are fulfilled.+Then, we have to set the animation 0 when the player ​reaches ​the floor, and also launch animation 2 when the player ​starts ​moving.\\ This could be done using two events: The first one checks if the player is on the ground and if he is moving. In this case, animation 2 is set. The second one checks if the player is on the ground and if he is not moving. In this case, animation 0 is set. Here, we're going to use a nice feature called ''​Sub events'':​ As we're running twice the same condition ( To check if the player is on the ground ), we can insert this condition in an event, and then add sub-events to this event: Sub events are only launched when the conditions of their "​parent"​ are fulfilled.
  
-Add an event with ''​Player is on the floor''​ as condition. Then, put the cursor over the event and choose ''​Add a sub event'':​ A blank sub event is added.+Add an event with ''​Player is on the floor''​ as condition. Then, put the cursor over the event and choose ''​Add a sub-event'':​ A blank sub-event is added.
  
 {{ gdevelop:​tutorials:​platformertutorial_32_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_32_.png?​nolink |}}
Line 208: Line 208:
 {{ gdevelop:​tutorials:​platformertutorial_33_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_33_.png?​nolink |}}
  
-Then, create a second sub event. This time, invert the condition so that the condition is true when the player is //not// moving:+Then, create a second sub-event. This time, invert the condition so that the condition is true when the player is //not// moving:
  
 {{ gdevelop:​tutorials:​platformertutorial_34_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_34_.png?​nolink |}}
  
-Also change the animation parameter so that animation 0 is set:+Alsochange the animation parameter so that animation 0 is set:
  
 {{ gdevelop:​tutorials:​platformertutorial_35_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_35_.png?​nolink |}}
Line 220: Line 220:
 {{ gdevelop:​tutorials:​platformertutorial_36_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_36_.png?​nolink |}}
  
-If something does not work, make sure your events ​looks exactly like the events shown above.\\ +If something does not work, make sure your events ​look exactly like the events shown above.\\ 
-You can see that when the player ​go to the left, the sprite is not mirrored. Fortunately,​ there is an action that can be used to mirror sprites.+You can see that when the player ​goes to the left, the sprite is not mirrored. Fortunately,​ there is an action that can be used to mirror sprites.
  
 Go back to the events editor and add a new event: Add a condition checking if the ''​Left''​ key is pressed. Go back to the events editor and add a new event: Add a condition checking if the ''​Left''​ key is pressed.
Line 241: Line 241:
 ===== Center the camera on the player ===== ===== Center the camera on the player =====
  
-There is more than one way to move the camera so it follows the player. For now, we're going to do it very simply using the action ''​Center the camera on an object''​. Just add this action in an blank event without any condition:+There is more than one way to move the camera so it follows the player. For now, we're going to do it very simply using the action ''​Center the camera on an object''​. Just add this action in blank event without any condition:
  
 {{ gdevelop:​tutorials:​platformertutorial_40_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_40_.png?​nolink |}}
Line 248: Line 248:
 ===== Add a 'Jump through'​ platform ===== ===== Add a 'Jump through'​ platform =====
  
-For now, all of the platforms are rock solid, but we can also create platform you can also jump through them:\\+For now, all of the platforms are rock solid, but we can also create ​platform you can also jump through them:\\
 Create a new ''​Sprite''​ object and add to it image ''​bridge.png''​ : Create a new ''​Sprite''​ object and add to it image ''​bridge.png''​ :
  
Line 261: Line 261:
 {{ gdevelop:​tutorials:​platformertutorial_44_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_44_.png?​nolink |}}
  
-That's all! Now you can launch a preview: The player will be able to jump through these kind of platforms.+That's all! Now you can launch a preview: The player will be able to jump through these kinds of platforms.
  
 ===== Add coins and a score ===== ===== Add coins and a score =====
Line 270: Line 270:
 {{ gdevelop:​tutorials:​platformertutorial_45_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_45_.png?​nolink |}}
  
-Now, let's destroy the coin object when the player ​touch them:+Now, let's destroy the coin object when the player ​touches ​them:
 Add a new event and add an event testing for the collision between coins and the Player object: Add a new event and add an event testing for the collision between coins and the Player object:
  
 {{ gdevelop:​tutorials:​platformertutorial_46_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_46_.png?​nolink |}}
  
-Then, add an action to delete the Coin object ( You can find it in All object > Objects > Delete an object ). Note that this action will only be triggered for the Coin that have been "​picked"​ by the conditions, that is to say, only the Coin that are in collisions with the player here! This powerful mechanism allows you to launch actions only on objects that matches ​the criteria specified by the conditions.+Then, add an action to delete the Coin object ( You can find it in All object > Objects > Delete an object ). Note that this action will only be triggered for the Coin that has been "​picked"​ by the conditions, that is to say, only the Coin that are in collisions with the player here! This powerful mechanism allows you to launch actions only on objects that match the criteria specified by the conditions.
  
 We can also play a small sound when a coin is collected. Add another action to play the ''​coin.wav''​ sound: We can also play a small sound when a coin is collected. Add another action to play the ''​coin.wav''​ sound:
Line 292: Line 292:
 Note that you do not need to declare variables before using them: If you use a variable name that does not exist, GDevelop will create this variable for you. You can also declare and even set an initial value to any variable: To do this, click on the button next to the first parameter to open the list of all declared scene variables. Note that you do not need to declare variables before using them: If you use a variable name that does not exist, GDevelop will create this variable for you. You can also declare and even set an initial value to any variable: To do this, click on the button next to the first parameter to open the list of all declared scene variables.
  
-The event should now looks like this:+The event should now look like this:
  
 {{ gdevelop:​tutorials:​platformertutorial_55_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_55_.png?​nolink |}}
Line 309: Line 309:
  
 Then in the events, add a new blank event. Add to it action ''​Modify the text'',​ inside "Text object"​ category. Enter the name of the object ( ScoreText ) in the first parameter, then = in the second parameter, and enter the text to be displayed in the last parameter: We want to display "​Score:"​ followed by the value of the Score variable.\\ Then in the events, add a new blank event. Add to it action ''​Modify the text'',​ inside "Text object"​ category. Enter the name of the object ( ScoreText ) in the first parameter, then = in the second parameter, and enter the text to be displayed in the last parameter: We want to display "​Score:"​ followed by the value of the Score variable.\\
-To do this, we can write the expression ''​Variable(Score)''​ to get the value of the variable. However, this is a number and we must convert it to a text using ''​ToString''​ function. Finally, the expression and the text must be concatened ​using a ''​+'',​ like this:+To do this, we can write the expression ''​Variable(Score)''​ to get the value of the variable. However, this is a number and we must convert it to a text using the ''​ToString''​ function. Finally, the expression and the text must be concatenated ​using a ''​+'',​ like this:
  
-''​"​Score:"​+ToString(Variable(Score))''​+`"​Score:"​+ToString(Variable(Score))`
  
 {{ gdevelop:​tutorials:​platformertutorial_53_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_53_.png?​nolink |}}
Line 336: Line 336:
  
 You can double click on the New Layer so as to rename it ( Name it ''​GUI''​ for example ).\\ You can double click on the New Layer so as to rename it ( Name it ''​GUI''​ for example ).\\
-Finally, make a right click on the text object on the scene, and move it to the GUI layer:+Finally, make a right-click on the text object on the scene, and move it to the GUI layer:
  
 {{ gdevelop:​tutorials:​platformertutorial_42_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_42_.png?​nolink |}}
Line 348: Line 348:
 Let's end this tutorial by adding an enemy that will be moving on platforms.\\ Let's end this tutorial by adding an enemy that will be moving on platforms.\\
 In the layers editor, **make sure that the base layer** is selected ( otherwise, the new objects could be added on the //GUI// layer, and won't be displayed at their right position ).\\ In the layers editor, **make sure that the base layer** is selected ( otherwise, the new objects could be added on the //GUI// layer, and won't be displayed at their right position ).\\
-Then, add three these objects:+Then, add three of these objects:
  
 {{ gdevelop:​tutorials:​platformertutorial_63_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_63_.png?​nolink |}}
  
-The first one called ''​Bad''​ is the object representing the enemy: It is composed of animation looping between images ''​slimeWalk1.png''​ and ''​slimeWalk2.png''​.\\ +The first one called ''​Bad''​ is the object representing the enemy: It is composed of an animation looping between images ''​slimeWalk1.png''​ and ''​slimeWalk2.png''​.\\ 
-The two other objects will be used as markers to make sure that the enemy won't move out of platforms. Put the enemy on a platform. Make sure that it is colliding with one of the marker:+The two other objects will be used as markers to make sure that the enemy won't move out of platforms. Put the enemy on a platform. Make sure that it is colliding with one of the markers:
  
 {{ gdevelop:​tutorials:​platformertutorial_68_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_68_.png?​nolink |}}
Line 393: Line 393:
 {{ gdevelop:​tutorials:​platformertutorial_69_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_69_.png?​nolink |}}
  
-We have already used the conditions and the first action. In last two actions are available inside the //Platform behavior// category.+We have already used the conditions and the first action. In the last two actions are available inside the //Platform behavior// category.
  
 ===== Adding background objects ===== ===== Adding background objects =====
Line 399: Line 399:
 Adding some objects in the background is really easy: Just add some sprites with the images you wish and put them on the scene. Adding some objects in the background is really easy: Just add some sprites with the images you wish and put them on the scene.
  
-To make sure that the objects are displayed behind the player, select them in the scene editor and put a negative value as a Z Order: Any object with a greater Z Order value will be displayed in front of them.+To make sure that the objects are displayed behind the player, select them in the scene editor and put a negative value as a Z-Order: Any object with a greater Z-Order value will be displayed in front of them.
  
 {{ gdevelop:​tutorials:​platformertutorial_70_.png?​nolink |}} {{ gdevelop:​tutorials:​platformertutorial_70_.png?​nolink |}}
  
-Also make sure that these objects are on the Base layer ( The layer property should be empty ).+Alsomake sure that these objects are on the Baselayer ​( The layer property should be empty ).
  
 ===== Enhance the game ===== ===== Enhance the game =====
  
 That's all for this tutorial! You can download the game {{gdevelop:​tutorials:​platformertutorial.zip|here}} if necessary, if you want to compare with your version or if something does not work. \\ That's all for this tutorial! You can download the game {{gdevelop:​tutorials:​platformertutorial.zip|here}} if necessary, if you want to compare with your version or if something does not work. \\
-enhanced version of the game is also available as a template when you create a new game. You can try it online: [[http://​www.compilgames.net/​games/​WebPlatformer]]+An enhanced version of the game is also available as a template when you create a new game. You can try it online: [[http://​www.compilgames.net/​games/​WebPlatformer]]