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:basic-game-making-concepts [2021/05/07 00:49]
silver-streak [An advanced notion: the "time elapsed" since last frame (TimeDelta)]
gdevelop5:tutorials:basic-game-making-concepts [2022/01/24 17:54] (current)
helperwesley [Storing any information in memory: Variables]
Line 6: Line 6:
  
 Everything that is *displayed on the screen* is called an **"Object"**. Different kind of objects can be used to display different game elements on the screen. For example, most game graphics are "Sprite" objects, texts can be displayed with "Text" objects and special effects like a fire or sparks can be created with "Particle Emitters". Everything that is *displayed on the screen* is called an **"Object"**. Different kind of objects can be used to display different game elements on the screen. For example, most game graphics are "Sprite" objects, texts can be displayed with "Text" objects and special effects like a fire or sparks can be created with "Particle Emitters".
 +
 +{{ :gdevelop5:tutorials:gifs_for_wiki_showing_objects.gif?nolink |}}
 +
 +The wiki page associated with objects can be found [[https://wiki.gdevelop.io/gdevelop5/objects#objects|here]].
  
 ## Positioning Objects in the world: Coordinates ## Positioning Objects in the world: Coordinates
Line 18: Line 22:
  
 {{ wiki:pres_coord2.png }} {{ wiki:pres_coord2.png }}
 +
 +The below gif shows both of these concepts used within the engine, modifying the X and Y position and rotation of the ship sprite object. Note that the top left corner of your game's default screen, the screen position when no camera movement has been applied, is where X=0 and Y=0.
 +
 +{{ :gdevelop5:gifs_for_wiki_showing_coordinates_and_rotation.gif?nolink |}}
  
 Note that angles can be negative too. For example, -90 degrees is equal to 270 degrees. Note that angles can be negative too. For example, -90 degrees is equal to 270 degrees.
Line 23: Line 31:
 If you use trigonometric functions like the **sine** or the **cosine**,  you will need to express the angles in **radians**. (1 radian = 180/PI degrees and 1 degree = PI/180 radians. PI is the number which is approximately equal to 3.14159). If you use trigonometric functions like the **sine** or the **cosine**,  you will need to express the angles in **radians**. (1 radian = 180/PI degrees and 1 degree = PI/180 radians. PI is the number which is approximately equal to 3.14159).
  
 +## Events
  
-## Events and how objects are selected by these Events +Events, that you use to create the rules of your game, are composed of conditions and actions. Conditions can be thought of as "if" and actions can be thought of as "then", for the purpose of making things happen in your game. "If" the conditions are true/met, "then" the actions will happen. Most conditions and actions refer to objects: 
- +
-Events, that you use to create the rules of your game, are composed of conditions and actions. Most conditions and actions refer to objects: +
  
 * Conditions run a **test** on the objects.  * Conditions run a **test** on the objects. 
 * Actions **manipulate** the object. They can change the object position, appearance, etc... * Actions **manipulate** the object. They can change the object position, appearance, etc...
 +
 +An event, without any conditions, is treated as if its conditions are true. Therefore, in the gif below, the ship object will rotate at the speed given to the rotate action.
 +
 +{{ :gdevelop5:tutorials:gifs_for_wiki_showing_conditionless_event.gif?nolink |}}
 +
 +If this event is given the condition "The cursor/touch is on" and we select the ship object for this event, then the action will only happen "if" the mouse cursor is on the ship object.
 +
 +{{ :gdevelop5:tutorials:gifs_for_wiki_showing_an_event_with_a_condition.gif?nolink |}}
 +
 +The wiki page associated with events can be found [[https://wiki.gdevelop.io/gdevelop5/events#events|here]].
 +
 +## How objects are selected by these Events
  
 An action, without a condition,  refers to all objects. If you use an object for the first time in an event, GDevelop will test or modify **all objects** with this name in the scene. An action, without a condition,  refers to all objects. If you use an object for the first time in an event, GDevelop will test or modify **all objects** with this name in the scene.
 If you use the object in the same event again, GDevelop will test or modify only the objects which have been picked by the previous conditions. If you use the object in the same event again, GDevelop will test or modify only the objects which have been picked by the previous conditions.
  
-For example, this event has no condition. It will delete **all** objects called "Square":+For example, this event has no condition. It will delete **all** objects called "Ship":
  
-{{ :gdevelop5:tutorials:delete-square.png?nolink |}}+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220123-200759.png?nolink |}}
  
-The event below has a condition. It will delete **only** the "Square" objects with an X position that is less than 100 pixels:+The event below has a condition. It will delete **only** the "Ship" objects with an X position that is less than that of the mouse cursor:
  
-{{ :gdevelop5:tutorials:delete-square-condition.png?nolink |}}+{{ :gdevelop5:tutorials:gifs_for_wiki_deleting_ships_by_mouse_position.gif?nolink |}}
  
 <note tip>**See it in action!** 🎮Open this example online: https://editor.gdevelop-app.com/?project=example://object-selection</note> <note tip>**See it in action!** 🎮Open this example online: https://editor.gdevelop-app.com/?project=example://object-selection</note>
  
-[[https://editor.gdevelop-app.com/?project=example://object-selection|{{ :gdevelop5:tutorials:objectselection-pickobject.png |}}]]+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220124-171850.png}} 
 + 
 +The wiki page associated with object picking can be found [[https://wiki.gdevelop.io/gdevelop5/events/object-picking|here]].
  
 ## Events: the order is important ## Events: the order is important
Line 52: Line 73:
 Events at the top are executed first. Events are executed every time your game is displayed. This display is called a frame. It executes about 60 times per second. The following examples are **not** equivalent: Events at the top are executed first. Events are executed every time your game is displayed. This display is called a frame. It executes about 60 times per second. The following examples are **not** equivalent:
  
-{{ :gdevelop5:tutorials:create-then-delete-square.png?nolink |}}+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220123-203732.png}}
  
-{{ :gdevelop5:tutorials:delete-then-create-square.png?nolink |}}+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220123-203822.png}}
  
-The first pair of events actions create a "Square" object at coordinates X: 100. Y: 200 (100;200). Then the event deletes the created square immediately. **No** "Square" is displayed on the screen. It's deleted just after being created. +In the first image above, the first event creates a "Ship" object at coordinates X: 100. Y: 200 (100;200) on the base layer. Then the next event deletes that created ship immediately. This pair of events **Will not** display a ship on the screen. It's deleted just after being created. 
-The second pair of events actions deletes all the "Square" objects from the scene/screen. It then creates one "Square" at the scene/screen coordinates X: 100, Y: 200 (100;200).  This event shows a  square is  **visible** on the scene (before being deleted at the next frame. It will, then, be recreated immediately.+In the second image above, the first event deletes all the "Ship" objects from the scene/screen. It then creates one "Ship" at the scene/screen coordinates X: 100, Y: 200 (100;200) on the base layer.  This pair of events **Will** display a ship on the screen. (before being deleted at the next frame. It will, then, be recreated immediately.)
  
  
Line 69: Line 90:
 * The *Physics* behavior is an example of an advanced behavior which make your objects move in a realistic way, following the laws of physics. * The *Physics* behavior is an example of an advanced behavior which make your objects move in a realistic way, following the laws of physics.
  
-**Objects** and **Behaviors** can be manipulated using events. You can read the pages about [[gdevelop5:objects|Objects]] and [[gdevelop5:behaviors|Behaviors]] to know more about them.+**Behaviors** will often come with their own variables that can be changed to customize the task it performs, but they can also be manipulated using events that are specific to that behavior. 
 + 
 +{{ :gdevelop5:tutorials:gifs_for_wiki_showing_behaviors.gif?nolink |}} 
 + 
 +The wiki page associated with behaviors can be found [[https://wiki.gdevelop.io/gdevelop5/behaviors#behaviors|here]].
  
 <note tip>You can create *custom behaviors* for your objects. We recommend this as your game grows. It allows you to put logic about what your objects are doing in the custom behaviors, rather than bloating the scene's events sheet. You [[gdevelop5:tutorials:how-to-make-behavior|read more in this article]].</note> <note tip>You can create *custom behaviors* for your objects. We recommend this as your game grows. It allows you to put logic about what your objects are doing in the custom behaviors, rather than bloating the scene's events sheet. You [[gdevelop5:tutorials:how-to-make-behavior|read more in this article]].</note>
Line 84: Line 109:
 ### Example ### Example
  
-Say you want to move an object towards the bottom:+Say you want to move an object to the right or left of the screen.
  
-{{ wiki:pres_vector.png }}+You can add a force using X/Y coordinates by specifying 50 for the X coordinate and, say, 0 pixels for the Y coordinate. You can also use polar coordinates and add a force with an angle of 180° and a length of 50 pixels.
  
-You can add a force using X/Y coordinates by specifying 0 for the X coordinate andsay, 150 pixels for the Y coordinateYou can also use polar coordinates and add a force with an angle of 90° and a length of 150 pixels.+In the example below, the position of the ship is used for the conditions to cause it to go in the opposite direction when it passes 200 or 600along the X-axis. 
 + 
 +{{ :gdevelop5:tutorials:gifs_for_wiki_applying_permanent_forces.gif?nolink |}}
  
 ### Other ways of moving objects ### Other ways of moving objects
Line 96: Line 123:
 <note tip>**See it in action!** 🎮Open this example online: https://editor.gdevelop-app.com/?project=example://move-object-with-physics</note> <note tip>**See it in action!** 🎮Open this example online: https://editor.gdevelop-app.com/?project=example://move-object-with-physics</note>
  
-[[https://editor.gdevelop-app.com/?project=example://move-object-with-physics|{{ :gdevelop5:tutorials:moveobjectwithphysics.png |}}]]+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220124-153533.png}}
  
 <note>These other ways of moving objects are explained in [[gdevelop5:tutorials:how-to-move-objects|this how-to page]].</note> <note>These other ways of moving objects are explained in [[gdevelop5:tutorials:how-to-move-objects|this how-to page]].</note>
Line 116: Line 143:
 * **Object** variables only concern one object. For example, a hero can have a "Health" or "Ammo" variable. * **Object** variables only concern one object. For example, a hero can have a "Health" or "Ammo" variable.
  
-<note>Read more about variables on the [[gdevelop5:all-features:variables|Variables]] page. Variables are used a lot in games: most examples use them and tutorials will make use of them too.</note> 
  
-<note tip>Want to see how variables are used in a video tutorial? Check this tutorial:  [[https://www.youtube.com/watch?v=SRfpBTgx-PY|Variables explained for Non-programmers]].</note>+{{ :gdevelop5:tutorials:gif_for_wiki_showing_where_the_variables_are.gif?nolink |}} 
 + 
 +The wiki page associated with variables can be found [[https://wiki.gdevelop.io/gdevelop5/all-features/variables|here]]. 
 + 
 +To further expand on how variables can be used in a game, see [[https://wiki.gdevelop.io/gdevelop5/all-features/expressions#expressions|expressions]].
  
 ## An advanced notion: the "time elapsed" since last frame (TimeDelta) ## An advanced notion: the "time elapsed" since last frame (TimeDelta)
Line 127: Line 157:
 For example, don't do this: For example, don't do this:
  
-{{ :gdevelop5:tutorials:update-life-no-timedelta.png?nolink |}}+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220124-172740.png}}
  
 But do this instead: But do this instead:
  
-{{ :gdevelop5:tutorials:update-life-timedelta.png?nolink |}}+{{:gdevelop5:tutorials:basic-game-making-concepts:pasted:20220124-172830.png}}
  
 * The first event is adding 20 to the variable every time the game is refreshed (i.e. as much as possible, up to 60 times per second). It's **not correct** to use such event as the speed of the increase of the variable will not be the same from computer to computer: we cannot predict the value of the variable after 10 seconds for example - as it depends on the number of frames of the game painted. * The first event is adding 20 to the variable every time the game is refreshed (i.e. as much as possible, up to 60 times per second). It's **not correct** to use such event as the speed of the increase of the variable will not be the same from computer to computer: we cannot predict the value of the variable after 10 seconds for example - as it depends on the number of frames of the game painted.