signals.rst 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. .. Intention: give the user a first taste of signals. We should write more
  2. documentation in the scripting/ section.
  3. .. Note: GDScript snippets use one line return instead of two because they're
  4. really short.
  5. .. meta::
  6. :keywords: Signal
  7. .. _doc_signals:
  8. Using signals
  9. =============
  10. In this lesson, we will look at signals. They are messages that nodes emit when
  11. something specific happens to them, like a button being pressed. Other nodes can
  12. connect to that signal and call a function when the event occurs.
  13. Signals are a delegation mechanism built into Godot that allows one game object to
  14. react to a change in another without them referencing one another. Using signals
  15. limits `coupling
  16. <https://en.wikipedia.org/wiki/Coupling_(computer_programming)>`_ and keeps your
  17. code flexible.
  18. For example, you might have a life bar on the screen that represents the
  19. player's health. When the player takes damage or uses a healing potion, you want
  20. the bar to reflect the change. To do so, in Godot, you would use signals.
  21. .. note:: As mentioned in the introduction, signals are Godot's version of the
  22. observer pattern. You can learn more about it here:
  23. https://gameprogrammingpatterns.com/observer.html
  24. We will now use a signal to make our Godot icon from the previous lesson
  25. (:ref:`doc_scripting_player_input`) move and stop by pressing a button.
  26. .. Example
  27. Scene setup
  28. -----------
  29. To add a button to our game, we will create a new main scene which will include
  30. both a :ref:`Button <class_button>` and the ``sprite_2d.tscn`` scene we created in
  31. the :ref:`doc_scripting_first_script` lesson.
  32. Create a new scene by going to the menu Scene -> New Scene.
  33. .. image:: img/signals_01_new_scene.webp
  34. In the Scene dock, click the 2D Scene button. This will add
  35. a :ref:`Node2D <class_Node2D>` as our root.
  36. .. image:: img/signals_02_2d_scene.webp
  37. In the FileSystem dock, click and drag the ``sprite_2d.tscn`` file you saved
  38. previously onto the Node2D to instantiate it.
  39. .. image:: img/signals_03_dragging_scene.png
  40. We want to add another node as a sibling of the Sprite2D. To do so, right-click
  41. on Node2D and select Add Child Node.
  42. .. image:: img/signals_04_add_child_node.webp
  43. Search for the :ref:`Button <class_button>` node and add it.
  44. .. image:: img/signals_05_add_button.webp
  45. The node is small by default. Click and drag on the bottom-right handle of the
  46. Button in the viewport to resize it.
  47. .. image:: img/signals_06_drag_button.png
  48. If you don't see the handles, ensure the select tool is active in the toolbar.
  49. .. image:: img/signals_07_select_tool.webp
  50. Click and drag on the button itself to move it closer to the sprite.
  51. You can also write a label on the Button by editing its Text property in the
  52. Inspector. Enter ``Toggle motion``.
  53. .. image:: img/signals_08_toggle_motion_text.webp
  54. Your scene tree and viewport should look like this.
  55. .. image:: img/signals_09_scene_setup.png
  56. Save your newly created scene as ``node_2d.tscn``, if you haven't already.
  57. You can then run it with :kbd:`F6` (:kbd:`Cmd + R` on macOS).
  58. At the moment, the button will be visible, but nothing will happen if you
  59. press it.
  60. Connecting a signal in the editor
  61. ---------------------------------
  62. Here, we want to connect the Button's "pressed" signal to our Sprite2D, and we
  63. want to call a new function that will toggle its motion on and off. We need to
  64. have a script attached to the Sprite2D node, which we do from the previous
  65. lesson.
  66. You can connect signals in the Node dock. Select the Button node and, on the
  67. right side of the editor, click on the tab named "Node" next to the Inspector.
  68. .. image:: img/signals_10_node_dock.webp
  69. The dock displays a list of signals available on the selected node.
  70. .. image:: img/signals_11_pressed_signals.webp
  71. Double-click the "pressed" signal to open the node connection window.
  72. .. image:: img/signals_12_node_connection.png
  73. There, you can connect the signal to the Sprite2D node. The node needs a
  74. receiver method, a function that Godot will call when the Button emits the
  75. signal. The editor generates one for you. By convention, we name these callback
  76. methods "_on_node_name_signal_name". Here, it'll be "_on_button_pressed".
  77. .. note::
  78. When connecting signals via the editor's Node dock, you can use two
  79. modes. The simple one only allows you to connect to nodes that have a
  80. script attached to them and creates a new callback function on them.
  81. .. image:: img/signals_advanced_connection_window.png
  82. The advanced view lets you connect to any node and any built-in
  83. function, add arguments to the callback, and set options. You can
  84. toggle the mode in the window's bottom-right by clicking the Advanced
  85. button.
  86. Click the Connect button to complete the signal connection and jump to the
  87. Script workspace. You should see the new method with a connection icon in the
  88. left margin.
  89. .. image:: img/signals_13_signals_connection_icon.webp
  90. If you click the icon, a window pops up and displays information about the
  91. connection. This feature is only available when connecting nodes in the editor.
  92. .. image:: img/signals_14_signals_connection_info.webp
  93. Let's replace the line with the ``pass`` keyword with code that'll toggle the
  94. node's motion.
  95. Our Sprite2D moves thanks to code in the ``_process()`` function. Godot provides
  96. a method to toggle processing on and off: :ref:`Node.set_process()
  97. <class_Node_method_set_process>`. Another method of the Node class,
  98. ``is_processing()``, returns ``true`` if idle processing is active. We can use
  99. the ``not`` keyword to invert the value.
  100. .. tabs::
  101. .. code-tab:: gdscript GDScript
  102. func _on_button_pressed():
  103. set_process(not is_processing())
  104. .. code-tab:: csharp C#
  105. private void OnButtonPressed()
  106. {
  107. SetProcess(!IsProcessing());
  108. }
  109. This function will toggle processing and, in turn, the icon's motion on and off
  110. upon pressing the button.
  111. Before trying the game, we need to simplify our ``_process()`` function to move
  112. the node automatically and not wait for user input. Replace it with the
  113. following code, which we saw two lessons ago:
  114. .. tabs::
  115. .. code-tab:: gdscript GDScript
  116. func _process(delta):
  117. rotation += angular_speed * delta
  118. var velocity = Vector2.UP.rotated(rotation) * speed
  119. position += velocity * delta
  120. .. code-tab:: csharp C#
  121. public override void _Process(double delta)
  122. {
  123. Rotation += _angularSpeed * (float)delta;
  124. var velocity = Vector2.Up.Rotated(Rotation) * _speed;
  125. Position += velocity * (float)delta;
  126. }
  127. Your complete ``sprite_2d.gd`` code should look like the following.
  128. .. tabs::
  129. .. code-tab:: gdscript GDScript
  130. extends Sprite2D
  131. var speed = 400
  132. var angular_speed = PI
  133. func _process(delta):
  134. rotation += angular_speed * delta
  135. var velocity = Vector2.UP.rotated(rotation) * speed
  136. position += velocity * delta
  137. func _on_button_pressed():
  138. set_process(not is_processing())
  139. .. code-tab:: csharp C#
  140. using Godot;
  141. public partial class MySprite2D : Sprite2D
  142. {
  143. private float _speed = 400;
  144. private float _angularSpeed = Mathf.Pi;
  145. public override void _Process(double delta)
  146. {
  147. Rotation += _angularSpeed * (float)delta;
  148. var velocity = Vector2.Up.Rotated(Rotation) * _speed;
  149. Position += velocity * (float)delta;
  150. }
  151. private void OnButtonPressed()
  152. {
  153. SetProcess(!IsProcessing());
  154. }
  155. }
  156. Run the scene now and click the button to see the sprite start and stop.
  157. Connecting a signal via code
  158. ----------------------------
  159. You can connect signals via code instead of using the editor. This is necessary
  160. when you create nodes or instantiate scenes inside of a script.
  161. Let's use a different node here. Godot has a :ref:`Timer <class_Timer>` node
  162. that's useful to implement skill cooldown times, weapon reloading, and more.
  163. Head back to the 2D workspace. You can either click the "2D" text at the top of
  164. the window or press :kbd:`Ctrl + F1` (:kbd:`Alt + 1` on macOS).
  165. In the Scene dock, right-click on the Sprite2D node and add a new child node.
  166. Search for Timer and add the corresponding node. Your scene should now look like
  167. this.
  168. .. image:: img/signals_15_scene_tree.png
  169. With the Timer node selected, go to the Inspector and enable the **Autostart**
  170. property.
  171. .. image:: img/signals_18_timer_autostart.png
  172. Click the script icon next to Sprite2D to jump back to the scripting workspace.
  173. .. image:: img/signals_16_click_script.png
  174. We need to do two operations to connect the nodes via code:
  175. 1. Get a reference to the Timer from the Sprite2D.
  176. 2. Call the ``connect()`` method on the Timer's "timeout" signal.
  177. .. note:: To connect to a signal via code, you need to call the ``connect()``
  178. method of the signal you want to listen to. In this case, we want to
  179. listen to the Timer's "timeout" signal.
  180. We want to connect the signal when the scene is instantiated, and we can do that
  181. using the :ref:`Node._ready() <class_Node_method__ready>` built-in function,
  182. which is called automatically by the engine when a node is fully instantiated.
  183. To get a reference to a node relative to the current one, we use the method
  184. :ref:`Node.get_node() <class_Node_method_get_node>`. We can store the reference
  185. in a variable.
  186. .. tabs::
  187. .. code-tab:: gdscript GDScript
  188. func _ready():
  189. var timer = get_node("Timer")
  190. .. code-tab:: csharp C#
  191. public override void _Ready()
  192. {
  193. var timer = GetNode<Timer>("Timer");
  194. }
  195. The function ``get_node()`` looks at the Sprite2D's children and gets nodes by
  196. their name. For example, if you renamed the Timer node to "BlinkingTimer" in the
  197. editor, you would have to change the call to ``get_node("BlinkingTimer")``.
  198. .. add seealso to a page that explains node features.
  199. We can now connect the Timer to the Sprite2D in the ``_ready()`` function.
  200. .. tabs::
  201. .. code-tab:: gdscript GDScript
  202. func _ready():
  203. var timer = get_node("Timer")
  204. timer.timeout.connect(_on_timer_timeout)
  205. .. code-tab:: csharp C#
  206. public override void _Ready()
  207. {
  208. var timer = GetNode<Timer>("Timer");
  209. timer.Timeout += OnTimerTimeout;
  210. }
  211. The line reads like so: we connect the Timer's "timeout" signal to the node to
  212. which the script is attached. When the Timer emits ``timeout``, we want to call
  213. the function ``_on_timer_timeout()``, that we need to define. Let's add it at the
  214. bottom of our script and use it to toggle our sprite's visibility.
  215. .. note:: By convention, we name these callback methods in GDScript as
  216. "_on_node_name_signal_name" and in C# as "OnNodeNameSignalName".
  217. Here, it'll be "_on_timer_timeout" for GDScript and OnTimerTimeout() for C#.
  218. .. tabs::
  219. .. code-tab:: gdscript GDScript
  220. func _on_timer_timeout():
  221. visible = not visible
  222. .. code-tab:: csharp C#
  223. private void OnTimerTimeout()
  224. {
  225. Visible = !Visible;
  226. }
  227. The ``visible`` property is a boolean that controls the visibility of our node.
  228. The line ``visible = not visible`` toggles the value. If ``visible`` is
  229. ``true``, it becomes ``false``, and vice-versa.
  230. If you run the scene now, you will see that the sprite blinks on and off, at one
  231. second intervals.
  232. Complete script
  233. ---------------
  234. That's it for our little moving and blinking Godot icon demo!
  235. Here is the complete ``sprite_2d.gd`` file for reference.
  236. .. tabs::
  237. .. code-tab:: gdscript GDScript
  238. extends Sprite2D
  239. var speed = 400
  240. var angular_speed = PI
  241. func _ready():
  242. var timer = get_node("Timer")
  243. timer.timeout.connect(_on_timer_timeout)
  244. func _process(delta):
  245. rotation += angular_speed * delta
  246. var velocity = Vector2.UP.rotated(rotation) * speed
  247. position += velocity * delta
  248. func _on_button_pressed():
  249. set_process(not is_processing())
  250. func _on_timer_timeout():
  251. visible = not visible
  252. .. code-tab:: csharp C#
  253. using Godot;
  254. public partial class MySprite2D : Sprite2D
  255. {
  256. private float _speed = 400;
  257. private float _angularSpeed = Mathf.Pi;
  258. public override void _Ready()
  259. {
  260. var timer = GetNode<Timer>("Timer");
  261. timer.Timeout += OnTimerTimeout;
  262. }
  263. public override void _Process(double delta)
  264. {
  265. Rotation += _angularSpeed * (float)delta;
  266. var velocity = Vector2.Up.Rotated(Rotation) * _speed;
  267. Position += velocity * (float)delta;
  268. }
  269. private void OnButtonPressed()
  270. {
  271. SetProcess(!IsProcessing());
  272. }
  273. private void OnTimerTimeout()
  274. {
  275. Visible = !Visible;
  276. }
  277. }
  278. Custom signals
  279. --------------
  280. .. note:: This section is a reference on how to define and use your own signals,
  281. and does not build upon the project created in previous lessons.
  282. You can define custom signals in a script. Say, for example, that you want to
  283. show a game over screen when the player's health reaches zero. To do so, you
  284. could define a signal named "died" or "health_depleted" when their health
  285. reaches 0.
  286. .. tabs::
  287. .. code-tab:: gdscript GDScript
  288. extends Node2D
  289. signal health_depleted
  290. var health = 10
  291. .. code-tab:: csharp C#
  292. using Godot;
  293. public partial class MyNode2D : Node2D
  294. {
  295. [Signal]
  296. public delegate void HealthDepletedEventHandler();
  297. private int _health = 10;
  298. }
  299. .. note:: As signals represent events that just occurred, we generally use an
  300. action verb in the past tense in their names.
  301. Your signals work the same way as built-in ones: they appear in the Node tab and
  302. you can connect to them like any other.
  303. .. image:: img/signals_17_custom_signal.png
  304. To emit a signal in your scripts, call ``emit()`` on the signal.
  305. .. tabs::
  306. .. code-tab:: gdscript GDScript
  307. func take_damage(amount):
  308. health -= amount
  309. if health <= 0:
  310. health_depleted.emit()
  311. .. code-tab:: csharp C#
  312. public void TakeDamage(int amount)
  313. {
  314. _health -= amount;
  315. if (_health <= 0)
  316. {
  317. EmitSignal(SignalName.HealthDepleted);
  318. }
  319. }
  320. A signal can optionally declare one or more arguments. Specify the argument
  321. names between parentheses:
  322. .. tabs::
  323. .. code-tab:: gdscript GDScript
  324. extends Node
  325. signal health_changed(old_value, new_value)
  326. var health = 10
  327. .. code-tab:: csharp C#
  328. using Godot;
  329. public partial class MyNode : Node
  330. {
  331. [Signal]
  332. public delegate void HealthChangedEventHandler(int oldValue, int newValue);
  333. private int _health = 10;
  334. }
  335. .. note::
  336. The signal arguments show up in the editor's node dock, and Godot can use
  337. them to generate callback functions for you. However, you can still emit any
  338. number of arguments when you emit signals. So it's up to you to emit the
  339. correct values.
  340. To emit values along with the signal, add them as extra arguments to the
  341. ``emit()`` function:
  342. .. tabs::
  343. .. code-tab:: gdscript GDScript
  344. func take_damage(amount):
  345. var old_health = health
  346. health -= amount
  347. health_changed.emit(old_health, health)
  348. .. code-tab:: csharp C#
  349. public void TakeDamage(int amount)
  350. {
  351. int oldHealth = _health;
  352. _health -= amount;
  353. EmitSignal(SignalName.HealthChanged, oldHealth, _health);
  354. }
  355. Summary
  356. -------
  357. Any node in Godot emits signals when something specific happens to them, like a
  358. button being pressed. Other nodes can connect to individual signals and react to
  359. selected events.
  360. Signals have many uses. With them, you can react to a node entering or exiting
  361. the game world, to a collision, to a character entering or leaving an area, to
  362. an element of the interface changing size, and much more.
  363. For example, an :ref:`Area2D <class_Area2D>` representing a coin emits a
  364. ``body_entered`` signal whenever the player's physics body enters its collision
  365. shape, allowing you to know when the player collected it.
  366. In the next section, :ref:`doc_your_first_2d_game`, you'll create a complete 2D
  367. game and put everything you learned so far into practice.