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:events:js-code [2018/10/14 00:30]
valiant_curiosity [Examples]
gdevelop5:events:js-code [2020/07/24 17:34] (current)
the_gem_tutorials [JavaScript Code events]
Line 1: Line 1:
 # JavaScript Code events # JavaScript Code events
  
-This event allows you to add custom JavaScript code in your game!+This event allows you to add custom ​**JavaScript code** in your game. It's only meant to be used by advanced users who are familiar with JavaScript programming.
  
-It's only meant to be used by advanced users who are familiar with JavaScript ​programming.+To add a JavaScript ​event, click on the {{:​gdevelop5:​events:​chooseaddeventiconnew.png?​|}} ​  ​button in the Events Sheet toolbar, and select JavaScript code: 
 + 
 +{{ :​gdevelop5:​events:​insert-javascript-code-eventnew.png?​nolink |}}
  
 When added, click on the code to edit it. The code will be executed each time the event is reached by GDevelop. When added, click on the code to edit it. The code will be executed each time the event is reached by GDevelop.
  
-Note that in the code, you have access to a variable named //​runtimeScene//​. The variable, "​runtimeScene",​ represents the scene being played. Below is an example of an standard GDevelop event and an equivalent event that uses a JavaScript:+Note that in the code, you are in strict mode, but you have access to a variable named //​runtimeScene//​. The variable, "​runtimeScene",​ represents the scene being played. Below is an example of standard GDevelop eventand an equivalent event that uses a JavaScript:
  
 {{ :​gdevelop5:​events:​javascript-code-example.png?​nolink |}} {{ :​gdevelop5:​events:​javascript-code-example.png?​nolink |}}
  
-If you click on "Click here to choose objects to pass to Javascript"​ next to the runtimeScene parameter, an array variable called "​objects"​ will be available to use. A menu of your game objects will popup. You can select the game object of our choice. That object will be added to your javascript object array.+If you click on "Click here to choose objects to pass to Javascript"​ next to the runtimeScene parameter, an array variable called "​objects"​ will be available to use. A menu of your game objects will pop up. You can select the game object of our choice. That object will be added to your javascript object array.
  
-{{:​gdevelop5:​events:​jsruntimeclickevent.png?600|}}+{{:​gdevelop5:​events:​jsruntimeclickeventnew.png?|}}
  
-"​objects"​ is  an array that contains the selected instances of the object that you choose. It is exactly like what an action or a condition would use). For example, the illustration below is an event using a JavaScript event as a sub-event. The javascript event will manipulate the enemies that are colliding with the player:+"​objects"​ is an array that contains the selected instances of the object that you choose. It is exactly like what an action or a condition would use). For example, the illustration below is an event using a JavaScript event as a sub-event. The javascript event will manipulate the enemies that are colliding with the player:
  
 {{ :​gdevelop5:​events:​javascript-code-with-objects-example.png?​nolink |}} {{ :​gdevelop5:​events:​javascript-code-with-objects-example.png?​nolink |}}
Line 22: Line 24:
  
 <note tip>​**See it in action!** 🎮\\ <note tip>​**See it in action!** 🎮\\
-Open these examples online.</​note>​+Open these examples online. You can do this with the links given below. There is a number of more examples available when you ask GDevelop to create a new project, then click the examples button.</​note>​
  
 [[https://​editor.gdevelop-app.com/?​project=example://​text-to-speech|{{:​ gdevelop5:​events:​javascripttexttospeechexample.png |400}}]] [[https://​editor.gdevelop-app.com/?​project=example://​text-to-speech|{{:​ gdevelop5:​events:​javascripttexttospeechexample.png |400}}]]
  
-* https://​editor.gdevelop-app.com/?​project=example://​text-to-speech+[[https://​editor.gdevelop-app.com/?​project=example://​text-to-speech| Text to Speech Example]]
  
 [[https://​editor.gdevelop-app.com/?​project=example://​javascript-blocks-in-platformer|{{ :​gdevelop5:​events:​platformerjavascriptblocksexample.png |400}}]] [[https://​editor.gdevelop-app.com/?​project=example://​javascript-blocks-in-platformer|{{ :​gdevelop5:​events:​platformerjavascriptblocksexample.png |400}}]]
  
-* https://​editor.gdevelop-app.com/?​project=example://​javascript-blocks-in-platformer+[[https://​editor.gdevelop-app.com/?​project=example://​javascript-blocks-in-platformer| Javascript Blocks in Platformer Example]]
  
-## Documentation+## Documentation ​📚
  
-  * Read **[the game engine documentation](http://4ian.github.io/​GD-Documentation/​GDJS%20Runtime%20Documentation/​)** to get started. ​+  * Read **[the game engine documentation](https://docs.gdevelop-app.com/​GDJS%20Runtime%20Documentation/​)** to get started. ​
   * You can also browse directly the **[GDJS game engine source code](https://​github.com/​4ian/​GD/​tree/​master/​GDJS/​Runtime)**.   * You can also browse directly the **[GDJS game engine source code](https://​github.com/​4ian/​GD/​tree/​master/​GDJS/​Runtime)**.
  
Line 52: Line 54:
 </​code>​ </​code>​
  
-See the documentation of [[http://4ian.github.io/​GD-Documentation/​GDJS%20Runtime%20Documentation/classes/​gdjs.Variable.html|gdjs.Variable]] and [[http://4ian.github.io/​GD-Documentation/​GDJS%20Runtime%20Documentation/classes/​gdjs.VariablesContainer.html|gdjs.VariablesContainer]].+See the documentation of [[https://docs.gdevelop-app.com/​GDJS%20Runtime%20Documentation/​gdjs.Variable.html|gdjs.Variable]] and [[https://docs.gdevelop-app.com/​GDJS%20Runtime%20Documentation/​gdjs.VariablesContainer.html|gdjs.VariablesContainer]].
  
 ### Move object at the position of another, check if the game is rendering the first frame ### Move object at the position of another, check if the game is rendering the first frame
Line 59: Line 61:
 const players = runtimeScene.getObjects("​Player"​);​ const players = runtimeScene.getObjects("​Player"​);​
 const playerHitBoxes = runtimeScene.getObjects("​PlayerHitBox"​);​ const playerHitBoxes = runtimeScene.getObjects("​PlayerHitBox"​);​
 +//Check if one instance of objects exist, here if scene haven'​t one
 +//of the two object on scene we avoid to compute rest of code.
 if (playerHitBoxes.length === 0 || players.length === 0) return; if (playerHitBoxes.length === 0 || players.length === 0) return;
  
 +//At the first frame
 if (runtimeScene.getTimeManager().isFirstFrame()) { if (runtimeScene.getTimeManager().isFirstFrame()) {
 +//Hide the first instance of playerHitBoxes
   playerHitBoxes[0].hide();​   playerHitBoxes[0].hide();​
 } }
  
 +//Set the positions
 players[0].setX(playerHitBoxes[0].getX() - 12); players[0].setX(playerHitBoxes[0].getX() - 12);
 players[0].setY(playerHitBoxes[0].getY());​ players[0].setY(playerHitBoxes[0].getY());​
Line 72: Line 79:
 {{ :​gdevelop5:​events:​hide-and-set-position-player-hitbox.png?​nolink |}} {{ :​gdevelop5:​events:​hide-and-set-position-player-hitbox.png?​nolink |}}
  
-### Change animation according to some conditions on behavior of an object+### Change animation according to some conditions on the behavior of an object
  
 <note tip>In the code below, we use a comment which is called an annotation.</​note>​ <note tip>In the code below, we use a comment which is called an annotation.</​note>​
  
-By writing the **annotation** `/** @type {gdjs.XXX} */` just before the declaration of a variable in JavaScript, you let the code editor know that the variable has the type gdjs.XXX. The editor will be able to assist you by providing **autocompletion** while you type (or when you hover a word).+By writing the **annotation** `/** @type {gdjs.XXX} */` just before the declaration of a variable in JavaScript, you let the code editor know that the variable has the type gdjs.XXX. The editor will be able to assist you by providing **autocompletion** while you type (or when you hover over a word).
  
-Most of the time annotations are not needed. The methods that you are using are already [[http://​4ian.github.io/​GD-Documentation/​GDJS%20Runtime%20Documentation/​|documented]] with type annotations. But when you use a list of objects, you may want to access ​to this object specific method (for example, methods to modify the animation of a sprite object). In this case, you could write `/** @type {gdjs.SpriteRuntimeObject} */`. +Most of the time annotations are not needed. The methods that you are using are already [[http://​4ian.github.io/​GD-Documentation/​GDJS%20Runtime%20Documentation/​|documented]] with type annotations. But when you use a list of objects, you may want to access this object specific method (for example, methods to modify the animation of a sprite object). In this case, you could write `/** @type {gdjs.SpriteRuntimeObject} */`. 
  
 If you don't do this, the code will still work, but the editor will only be able to provide you with the methods of `gdjs.RuntimeObject` (the base class). If you don't do this, the code will still work, but the editor will only be able to provide you with the methods of `gdjs.RuntimeObject` (the base class).
  
-When you get behavior from an object, you also know what kind of behavior you're getting. Let the editor know this using an annotation (otherwise, you'll only get autocompletion for the base class, `gdjs.RuntimeBehavior`).+When you get the behavior from an object, you also know what kind of behavior you're getting. Let the editor know this using an annotation (otherwise, you'll only get autocompletion for the base class, `gdjs.RuntimeBehavior`).
  
 <code javascript>​ <code javascript>​
Line 130: Line 137:
 {{ :​gdevelop5:​events:​set-camera-x-position-x.png?​nolink |}} {{ :​gdevelop5:​events:​set-camera-x-position-x.png?​nolink |}}
  
-### Fade out a sprite object after it is on floor (using the Platformer Object behavior)+### Fade out a sprite object after it is on the floor (using the Platformer Object behavior)
  
 <code javascript>​ <code javascript>​