|
@@ -37,7 +37,7 @@ OK, how?
|
|
|
|
|
|
Add a script to any :ref:`CanvasItem <class_CanvasItem>`
|
|
|
derived node, like :ref:`Control <class_Control>` or
|
|
|
-:ref:`Node2D <class_Node2D>`. Then override the _draw() function.
|
|
|
+:ref:`Node2D <class_Node2D>`. Then override the ``_draw()`` function.
|
|
|
|
|
|
.. tabs::
|
|
|
.. code-tab:: gdscript GDScript
|
|
@@ -61,12 +61,12 @@ class reference. There are plenty of them.
|
|
|
Updating
|
|
|
--------
|
|
|
|
|
|
-The _draw() function is only called once, and then the draw commands
|
|
|
+The ``_draw()`` function is only called once, and then the draw commands
|
|
|
are cached and remembered, so further calls are unnecessary.
|
|
|
|
|
|
If re-drawing is required because a state or something else changed,
|
|
|
simply call :ref:`CanvasItem.update() <class_CanvasItem_update>`
|
|
|
-in that same node and a new _draw() call will happen.
|
|
|
+in that same node and a new ``_draw()`` call will happen.
|
|
|
|
|
|
Here is a little more complex example, a texture variable that will be
|
|
|
redrawn if modified:
|
|
@@ -113,7 +113,7 @@ redrawn if modified:
|
|
|
}
|
|
|
|
|
|
In some cases, it may be desired to draw every frame. For this, just
|
|
|
-call update() from the _process() callback, like this:
|
|
|
+call ``update()`` from the ``_process()`` callback, like this:
|
|
|
|
|
|
.. tabs::
|
|
|
.. code-tab:: gdscript GDScript
|
|
@@ -148,7 +148,7 @@ An example: drawing circular arcs
|
|
|
|
|
|
We will now use the custom drawing functionality of the Godot Engine to draw
|
|
|
something that Godot doesn't provide functions for. As an example, Godot provides
|
|
|
-a draw_circle() function that draws a whole circle. However, what about drawing a
|
|
|
+a ``draw_circle()`` function that draws a whole circle. However, what about drawing a
|
|
|
portion of a circle? You will have to code a function to perform this and draw it yourself.
|
|
|
|
|
|
Arc function
|
|
@@ -201,7 +201,7 @@ In our example, we will simply use a fixed number of points, no matter the radiu
|
|
|
|
|
|
Remember the number of points our shape has to be decomposed into? We fixed this
|
|
|
number in the ``nb_points`` variable to a value of ``32``. Then, we initialize an empty
|
|
|
-``PoolVector2Array``, which is simply an array of ``Vector2``s.
|
|
|
+``PoolVector2Array``, which is simply an array of ``Vector2``\ s.
|
|
|
|
|
|
The next step consists of computing the actual positions of these 32 points that
|
|
|
compose an arc. This is done in the first for-loop: we iterate over the number of
|
|
@@ -210,17 +210,17 @@ We first determine the angle of each point, between the starting and ending angl
|
|
|
|
|
|
The reason why each angle is decreased by 90° is that we will compute 2D positions
|
|
|
out of each angle using trigonometry (you know, cosine and sine stuff...). However,
|
|
|
-to be simple, cos() and sin() use radians, not degrees. The angle of 0° (0 radian)
|
|
|
+to be simple, ``cos()`` and ``sin()`` use radians, not degrees. The angle of 0° (0 radian)
|
|
|
starts at 3 o'clock, although we want to start counting at 12 o'clock. So we decrease
|
|
|
each angle by 90° in order to start counting from 12 o'clock.
|
|
|
|
|
|
-The actual position of a point located on a circle at angle 'angle' (in radians)
|
|
|
-is given by Vector2(cos(angle), sin(angle)). Since cos() and sin() return values
|
|
|
+The actual position of a point located on a circle at angle ``angle`` (in radians)
|
|
|
+is given by ``Vector2(cos(angle), sin(angle))``. Since ``cos()`` and ``sin()`` return values
|
|
|
between -1 and 1, the position is located on a circle of radius 1. To have this
|
|
|
-position on our support circle, which has a radius of 'radius', we simply need to
|
|
|
-multiply the position by 'radius'. Finally, we need to position our support circle
|
|
|
-at the 'center' position, which is performed by adding it to our Vector2 value.
|
|
|
-Finally, we insert the point in the PoolVector2Array which was previously defined.
|
|
|
+position on our support circle, which has a radius of ``radius``, we simply need to
|
|
|
+multiply the position by ``radius``. Finally, we need to position our support circle
|
|
|
+at the ``center`` position, which is performed by adding it to our ``Vector2`` value.
|
|
|
+Finally, we insert the point in the ``PoolVector2Array`` which was previously defined.
|
|
|
|
|
|
Now, we need to actually draw our points. As you can imagine, we will not simply
|
|
|
draw our 32 points: we need to draw everything that is between each of them.
|
|
@@ -235,7 +235,7 @@ Draw the arc on the screen
|
|
|
^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
|
|
|
|
We now have a function that draws stuff on the screen;
|
|
|
-it is time to call it inside the _draw() function:
|
|
|
+it is time to call it inside the ``_draw()`` function:
|
|
|
|
|
|
.. tabs::
|
|
|
|
|
@@ -318,7 +318,7 @@ constant or else the rotation speed will change accordingly.
|
|
|
|
|
|
First, we have to make both angle_from and angle_to variables global at the top
|
|
|
of our script. Also note that you can store them in other nodes and access them
|
|
|
-using get_node().
|
|
|
+using ``get_node()``.
|
|
|
|
|
|
.. tabs::
|
|
|
.. code-tab:: gdscript GDScript
|
|
@@ -341,16 +341,16 @@ using get_node().
|
|
|
We make these values change in the _process(delta) function.
|
|
|
|
|
|
We also increment our angle_from and angle_to values here. However, we must not
|
|
|
-forget to wrap() the resulting values between 0 and 360°! That is, if the angle
|
|
|
+forget to ``wrap()`` the resulting values between 0 and 360°! That is, if the angle
|
|
|
is 361°, then it is actually 1°. If you don't wrap these values, the script will
|
|
|
work correctly, but the angle values will grow bigger and bigger over time until
|
|
|
-they reach the maximum integer value Godot can manage (2^31 - 1).
|
|
|
+they reach the maximum integer value Godot can manage (``2^31 - 1``).
|
|
|
When this happens, Godot may crash or produce unexpected behavior.
|
|
|
-Since Godot doesn't provide a wrap() function, we'll create it here, as
|
|
|
+Since Godot doesn't provide a ``wrap()`` function, we'll create it here, as
|
|
|
it is relatively simple.
|
|
|
|
|
|
-Finally, we must not forget to call the update() function, which automatically
|
|
|
-calls _draw(). This way, you can control when you want to refresh the frame.
|
|
|
+Finally, we must not forget to call the ``update()`` function, which automatically
|
|
|
+calls ``_draw()``. This way, you can control when you want to refresh the frame.
|
|
|
|
|
|
.. tabs::
|
|
|
.. code-tab:: gdscript GDScript
|
|
@@ -394,7 +394,7 @@ calls _draw(). This way, you can control when you want to refresh the frame.
|
|
|
}
|
|
|
|
|
|
|
|
|
-Also, don't forget to modify the _draw() function to make use of these variables:
|
|
|
+Also, don't forget to modify the ``_draw()`` function to make use of these variables:
|
|
|
|
|
|
.. tabs::
|
|
|
.. code-tab:: gdscript GDScript
|
|
@@ -423,14 +423,14 @@ It works, but the arc is rotating insanely fast! What's wrong?
|
|
|
|
|
|
The reason is that your GPU is actually displaying the frames as fast as it can.
|
|
|
We need to "normalize" the drawing by this speed; to achieve that, we have to make
|
|
|
-use of the 'delta' parameter of the _process() function. 'delta' contains the
|
|
|
+use of the ``delta`` parameter of the ``_process()`` function. ``delta`` contains the
|
|
|
time elapsed between the two last rendered frames. It is generally small
|
|
|
-(about 0.0003 seconds, but this depends on your hardware), so using 'delta' to
|
|
|
+(about 0.0003 seconds, but this depends on your hardware), so using ``delta`` to
|
|
|
control your drawing ensures that your program runs at the same speed on
|
|
|
everybody's hardware.
|
|
|
|
|
|
-In our case, we simply need to multiply our 'rotation_angle' variable by 'delta'
|
|
|
-in the _process() function. This way, our 2 angles will be increased by a much
|
|
|
+In our case, we simply need to multiply our ``rotation_angle`` variable by ``delta``
|
|
|
+in the ``_process()`` function. This way, our 2 angles will be increased by a much
|
|
|
smaller value, which directly depends on the rendering speed.
|
|
|
|
|
|
.. tabs::
|