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
gdevelop5:tutorials:geometry-monster:4-desktop-and-mobile-controls [2019/12/04 00:44]
4ian
gdevelop5:tutorials:geometry-monster:4-desktop-and-mobile-controls [2020/12/26 13:56] (current)
Line 6: Line 6:
 Since we already [[gdevelop5:tutorials:geometry-monster:3-introducing-main-character|introduced the Monster]] to the game, it would be nice to be able to control him. Since we already [[gdevelop5:tutorials:geometry-monster:3-introducing-main-character|introduced the Monster]] to the game, it would be nice to be able to control him.
  
-{{ :gdevelop5:tutorials:geometry-monster:28_5.png |}}+{{ :gdevelop5:tutorials:geometry-monster:28_5.png?direct|}}
  
 Drag the Monster from the right panel containing the objects onto the scene and click on the "Level1 (Events)" tab. Drag the Monster from the right panel containing the objects onto the scene and click on the "Level1 (Events)" tab.
  
-{{ :gdevelop5:tutorials:geometry-monster:30.png |}}+{{ :gdevelop5:tutorials:geometry-monster:30.png?direct|}}
  
 The events list is empty at the beginning - the popup message explains that events are composed of **conditions** and **actions**. The events list is empty at the beginning - the popup message explains that events are composed of **conditions** and **actions**.
  
-{{ :gdevelop5:tutorials:geometry-monster:31.png |}}+{{ :gdevelop5:tutorials:geometry-monster:31.png?direct|}}
  
 In the top right section of the editor you will see a few icons - click on the third one from the left: light blue square with a dark blue plus sign. When you hover over it the description will say "Add a new empty event". In the top right section of the editor you will see a few icons - click on the third one from the left: light blue square with a dark blue plus sign. When you hover over it the description will say "Add a new empty event".
  
-{{ :gdevelop5:tutorials:geometry-monster:32.png |}}+{{ :gdevelop5:tutorials:geometry-monster:32.png?direct|}}
  
 When the empty event is added, click on the "Add condition" - it will open a popup. When the empty event is added, click on the "Add condition" - it will open a popup.
  
-{{ :gdevelop5:tutorials:geometry-monster:33.png |}}+{{ :gdevelop5:tutorials:geometry-monster:33.png?direct|}}
  
 In the popup, you will notice there's our Monster on the list of objects, but we're not interested in him right now. Click on the "Other conditions" tab to expand the list of options. In the popup, you will notice there's our Monster on the list of objects, but we're not interested in him right now. Click on the "Other conditions" tab to expand the list of options.
Line 30: Line 30:
 </note> </note>
  
-{{ :gdevelop5:tutorials:geometry-monster:34.png |}}+{{ :gdevelop5:tutorials:geometry-monster:34.png?direct|}}
  
 Other conditions include collisions, variable operations, mouse and touch controls, etc. Click on the "Keyboard" option to expand the list, and then select "Key pressed". Other conditions include collisions, variable operations, mouse and touch controls, etc. Click on the "Keyboard" option to expand the list, and then select "Key pressed".
  
-{{ :gdevelop5:tutorials:geometry-monster:35_5.png |}}+{{ :gdevelop5:tutorials:geometry-monster:35_5.png?direct|}}
  
 This tests if a specific key has been pressed - enter "Left" into the "Key" field, then click "Ok". This tests if a specific key has been pressed - enter "Left" into the "Key" field, then click "Ok".
  
-{{ :gdevelop5:tutorials:geometry-monster:37.png |}}+{{ :gdevelop5:tutorials:geometry-monster:37.png?direct|}}
  
 Now let's get back to our Monster - click to "Add an action". Now let's get back to our Monster - click to "Add an action".
  
-{{ :gdevelop5:tutorials:geometry-monster:38.png |}}+{{ :gdevelop5:tutorials:geometry-monster:38.png?direct|}}
  
 Select Monster, look up "Add a force", and then set the speed to `-450`. Select Monster, look up "Add a force", and then set the speed to `-450`.
Line 50: Line 50:
 After you've done it, click "Ok" to confirm. After you've done it, click "Ok" to confirm.
  
-{{ :gdevelop5:tutorials:geometry-monster:45.png |}}+{{ :gdevelop5:tutorials:geometry-monster:45.png?direct|}}
  
 You can see the final version of the event we just completed - with conditions on the left, and action on the right: when you press the left key, then it will move (by applying the force of `-450` units on the `X` axis and ignoring the `Y` axis with `0` value) to the left edge of the screen. You can see the final version of the event we just completed - with conditions on the left, and action on the right: when you press the left key, then it will move (by applying the force of `-450` units on the `X` axis and ignoring the `Y` axis with `0` value) to the left edge of the screen.
Line 56: Line 56:
 **Congratulations**, the Monster is moving left! Now let's add the movement to the right - try doing that on your own following the exact same steps you did for the left movement. **Congratulations**, the Monster is moving left! Now let's add the movement to the right - try doing that on your own following the exact same steps you did for the left movement.
  
-{{ :gdevelop5:tutorials:geometry-monster:51.png |}}+{{ :gdevelop5:tutorials:geometry-monster:51.png?direct|}}
  
 If you completed the right movement, both events with their conditions and actions should now be in place, so the Monster can move in either direction - left or right. If you completed the right movement, both events with their conditions and actions should now be in place, so the Monster can move in either direction - left or right.
  
-{{ :gdevelop5:tutorials:geometry-monster:52.png |}}+{{ :gdevelop5:tutorials:geometry-monster:52.png?direct|}}
  
 Click on "Add a comment", so the extra field appear. Click on "Add a comment", so the extra field appear.
  
-{{ :gdevelop5:tutorials:geometry-monster:53.png |}}+{{ :gdevelop5:tutorials:geometry-monster:53.png?direct|}}
  
 Drag it at the top of both events. Drag it at the top of both events.
  
-{{ :gdevelop5:tutorials:geometry-monster:54.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54.png?direct|}}
  
 Then enter the label "Monster", so when we have way more events on the list we can clearly see which ones are for which objects. Then enter the label "Monster", so when we have way more events on the list we can clearly see which ones are for which objects.
Line 74: Line 74:
 Now we're going to limit the movement of the Monster to the visible screen, so he won't be moving outside of it when we press the keyboard controls. Now we're going to limit the movement of the Monster to the visible screen, so he won't be moving outside of it when we press the keyboard controls.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_1.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_1.png?direct|}}
  
 Select the Monster. Select the Monster.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_2.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_2.png?direct|}}
  
 Go to Behaviors. Go to Behaviors.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_3.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_3.png?direct|}}
  
 Then "Add a behavior to the object". Then "Add a behavior to the object".
  
-{{ :gdevelop5:tutorials:geometry-monster:54_4.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_4.png?direct|}}
  
 Click on the tab "Search for behaviors". Click on the tab "Search for behaviors".
  
-{{ :gdevelop5:tutorials:geometry-monster:54_5.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_5.png?direct|}}
  
 From the available list chose "screen". From the available list chose "screen".
  
-{{ :gdevelop5:tutorials:geometry-monster:54_6.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_6.png?direct|}}
  
 It's the "Stay On Screen" custom behaviors that we're going to use for the Monster. It's the "Stay On Screen" custom behaviors that we're going to use for the Monster.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_7.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_7.png?direct|}}
  
 Install it in our project, so it will be available to use afterwards. Install it in our project, so it will be available to use afterwards.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_8.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_8.png?direct|}}
  
 Then select it from the list. Then select it from the list.
  
-{{ :gdevelop5:tutorials:geometry-monster:54_9.png |}}+{{ :gdevelop5:tutorials:geometry-monster:54_9.png?direct|}}
  
 Insert `133` as the right margin, since this is the width of the Monster, to limit him going out of the screen to the right (since his origin is in the top left part of the sprite), and then click Apply. Insert `133` as the right margin, since this is the width of the Monster, to limit him going out of the screen to the right (since his origin is in the top left part of the sprite), and then click Apply.
  
-{{ :gdevelop5:tutorials:geometry-monster:55.png |}}+{{ :gdevelop5:tutorials:geometry-monster:55.png?direct|}}
  
 In the top right menu, click on the first item - "Launch a preview of the scene". In the top right menu, click on the first item - "Launch a preview of the scene".
  
-{{ :gdevelop5:tutorials:geometry-monster:56.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56.png?direct|}}
  
 It worked - the preview of Gemoetry Monster game is launched, and you can already control the main character! It worked - the preview of Gemoetry Monster game is launched, and you can already control the main character!
Line 120: Line 120:
 Now when we have desktop controls (moving Monster with the keyboard), it would be great to add mouse and touch support too. The game will be easier to play with the mouse, and it will also be playable on mobile. Now when we have desktop controls (moving Monster with the keyboard), it would be great to add mouse and touch support too. The game will be easier to play with the mouse, and it will also be playable on mobile.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_1.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_1.png?direct|}}
  
 Add new condition. Add new condition.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_2.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_2.png?direct|}}
  
 Look for "Mouse button pressed or touch held" in the "Other conditions", and the button to test will be "Left (primary)". Look for "Mouse button pressed or touch held" in the "Other conditions", and the button to test will be "Left (primary)".
  
-{{ :gdevelop5:tutorials:geometry-monster:56_3.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_3.png?direct|}}
  
 Now add a sub-condition. Now add a sub-condition.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_4.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_4.png?direct|}}
  
 Select Monster, then "Compare X position of an object", and enter `> (greater than)` as the "Sign of the test" and `MouseX() + 5` as the "X position" Select Monster, then "Compare X position of an object", and enter `> (greater than)` as the "Sign of the test" and `MouseX() + 5` as the "X position"
Line 139: Line 139:
 * The `5` is an offset in pixels, so the Monster won't be jumping between both states if it will be clicked or touched in the center (you'll see how it's useful by doing the next event). * The `5` is an offset in pixels, so the Monster won't be jumping between both states if it will be clicked or touched in the center (you'll see how it's useful by doing the next event).
  
-{{ :gdevelop5:tutorials:geometry-monster:56_5.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_5.png?direct|}}
  
 Copy the action taken from the condition responsible for clicking the left button... Copy the action taken from the condition responsible for clicking the left button...
  
-{{ :gdevelop5:tutorials:geometry-monster:56_6.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_6.png?direct|}}
  
 ...and paste it in the condition we created. ...and paste it in the condition we created.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_7.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_7.png?direct|}}
  
 Then create a new sub-condition. Then create a new sub-condition.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_8.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_8.png?direct|}}
  
 Follow the same pattern: Monster, "Compare X position of an object", an then `< (less than)` and `MouseX() - 5` for the offset from the other side. Follow the same pattern: Monster, "Compare X position of an object", an then `< (less than)` and `MouseX() - 5` for the offset from the other side.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_9.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_9.png?direct|}}
  
 Copy and paste the action from the right key press condition and paste it here. Copy and paste the action from the right key press condition and paste it here.
  
-{{ :gdevelop5:tutorials:geometry-monster:56_10.png |}}+{{ :gdevelop5:tutorials:geometry-monster:56_10.png?direct|}}
  
 Excellent! Monster should now be moving with both keyboard and mouse controls! Excellent! Monster should now be moving with both keyboard and mouse controls!