Correct the name of Sprite2D and AnimatedSprite2D on 3.x

This commit is contained in:
Haoyu Qiu
2021-12-18 12:14:55 +08:00
parent 29a13c542c
commit da0be06753
11 changed files with 83 additions and 83 deletions

View File

@@ -53,10 +53,10 @@ or :kbd:`Cmd + S` on macOS.
Sprite animation
~~~~~~~~~~~~~~~~
Click on the ``Player`` node and add an :ref:`AnimatedSprite2D
Click on the ``Player`` node and add an :ref:`AnimatedSprite
<class_AnimatedSprite>` node as a child. The ``AnimatedSprite`` will handle the
appearance and animations for our player. Notice that there is a warning symbol
next to the node. An ``AnimatedSprite2D`` requires a :ref:`SpriteFrames
next to the node. An ``AnimatedSprite`` requires a :ref:`SpriteFrames
<class_SpriteFrames>` resource, which is a list of the animations it can
display. To create one, find the ``Frames`` property in the Inspector and click
"[empty]" -> "New SpriteFrames". Click again to open the "SpriteFrames" panel:
@@ -74,7 +74,7 @@ side of the panel for the corresponding animation:
.. image:: img/spriteframes_panel2.png
The player images are a bit too large for the game window, so we need to scale
them down. Click on the ``AnimatedSprite2D`` node and set the ``Scale`` property
them down. Click on the ``AnimatedSprite`` node and set the ``Scale`` property
to ``(0.5, 0.5)``. You can find it in the Inspector under the ``Node2D``
heading.

View File

@@ -55,7 +55,7 @@ Start by declaring the member variables this object will need:
#ifndef PLAYER_H
#define PLAYER_H
#include <AnimatedSprite2D.hpp>
#include <AnimatedSprite.hpp>
#include <Area2D.hpp>
#include <CollisionShape2D.hpp>
#include <Godot.hpp>
@@ -64,7 +64,7 @@ Start by declaring the member variables this object will need:
class Player : public godot::Area2D {
GODOT_CLASS(Player, godot::Area2D)
godot::AnimatedSprite2D *_animated_sprite;
godot::AnimatedSprite *_animated_sprite;
godot::CollisionShape2D *_collision_shape;
godot::Input *_input;
godot::Vector2 _screen_size; // Size of the game window.
@@ -120,7 +120,7 @@ a good time to find the size of the game window:
#include "player.hpp"
void Player::_ready() {
_animated_sprite = get_node<godot::AnimatedSprite2D>("AnimatedSprite2D");
_animated_sprite = get_node<godot::AnimatedSprite>("AnimatedSprite");
_collision_shape = get_node<godot::CollisionShape2D>("CollisionShape2D");
_input = godot::Input::get_singleton();
_screen_size = get_viewport_rect().size;
@@ -161,9 +161,9 @@ which returns ``true`` if it's pressed or ``false`` if it isn't.
if velocity.length() > 0:
velocity = velocity.normalized() * speed
$AnimatedSprite2D.play()
$AnimatedSprite.play()
else:
$AnimatedSprite2D.stop()
$AnimatedSprite.stop()
.. code-tab:: csharp
@@ -191,7 +191,7 @@ which returns ``true`` if it's pressed or ``false`` if it isn't.
velocity.y -= 1;
}
var animatedSprite = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
var animatedSprite = GetNode<AnimatedSprite>("AnimatedSprite");
if (velocity.Length() > 0)
{
@@ -237,16 +237,16 @@ diagonal movement.
It's good to know but won't be necessary for the rest of this tutorial.
We also check whether the player is moving so we can call ``play()`` or
``stop()`` on the AnimatedSprite2D.
``stop()`` on the AnimatedSprite.
``$`` is shorthand for ``get_node()``. So in the code above,
``$AnimatedSprite2D.play()`` is the same as
``get_node("AnimatedSprite2D").play()``.
``$AnimatedSprite.play()`` is the same as
``get_node("AnimatedSprite").play()``.
.. tip:: In GDScript, ``$`` returns the node at the relative path from the
current node, or returns ``null`` if the node is not found. Since
AnimatedSprite2D is a child of the current node, we can use
``$AnimatedSprite2D``.
AnimatedSprite is a child of the current node, we can use
``$AnimatedSprite``.
Now that we have a movement direction, we can update the player's position. We
can also use ``clamp()`` to prevent it from leaving the screen. *Clamping* a
@@ -289,7 +289,7 @@ the player around the screen in all directions.
``Attempt to call function 'play' in base 'null instance' on a null
instance``
this likely means you spelled the name of the AnimatedSprite2D node
this likely means you spelled the name of the AnimatedSprite node
wrong. Node names are case-sensitive and ``$NodeName`` must match
the name you see in the scene tree.
@@ -297,7 +297,7 @@ Choosing animations
~~~~~~~~~~~~~~~~~~~
Now that the player can move, we need to change which animation the
AnimatedSprite2D is playing based on its direction. We have the "walk" animation,
AnimatedSprite is playing based on its direction. We have the "walk" animation,
which shows the player walking to the right. This animation should be flipped
horizontally using the ``flip_h`` property for left movement. We also have the
"up" animation, which should be flipped vertically with ``flip_v`` for downward
@@ -307,27 +307,27 @@ movement. Let's place this code at the end of the ``_process()`` function:
.. code-tab:: gdscript GDScript
if velocity.x != 0:
$AnimatedSprite2D.animation = "walk"
$AnimatedSprite2D.flip_v = false
$AnimatedSprite.animation = "walk"
$AnimatedSprite.flip_v = false
# See the note below about boolean assignment.
$AnimatedSprite2D.flip_h = velocity.x < 0
$AnimatedSprite.flip_h = velocity.x < 0
elif velocity.y != 0:
$AnimatedSprite2D.animation = "up"
$AnimatedSprite2D.flip_v = velocity.y > 0
$AnimatedSprite.animation = "up"
$AnimatedSprite.flip_v = velocity.y > 0
.. code-tab:: csharp
if (velocity.x != 0)
{
animatedSprite2D.Animation = "walk";
animatedSprite2D.FlipV = false;
animatedSprite.Animation = "walk";
animatedSprite.FlipV = false;
// See the note below about boolean assignment.
animatedSprite2D.FlipH = velocity.x < 0;
animatedSprite.FlipH = velocity.x < 0;
}
else if (velocity.y != 0)
{
animatedSprite2D.Animation = "up";
animatedSprite2D.FlipV = velocity.y > 0;
animatedSprite.Animation = "up";
animatedSprite.FlipV = velocity.y > 0;
}
.. code-tab:: cpp
@@ -351,19 +351,19 @@ movement. Let's place this code at the end of the ``_process()`` function:
.. code-tab :: gdscript GDScript
if velocity.x < 0:
$AnimatedSprite2D.flip_h = true
$AnimatedSprite.flip_h = true
else:
$AnimatedSprite2D.flip_h = false
$AnimatedSprite.flip_h = false
.. code-tab:: csharp
if (velocity.x < 0)
{
animatedSprite2D.FlipH = true;
animatedSprite.FlipH = true;
}
else
{
animatedSprite2D.FlipH = false;
animatedSprite.FlipH = false;
}
Play the scene again and check that the animations are correct in each of the

View File

@@ -45,7 +45,7 @@ We'll select one of these animations randomly so that the mobs will have some
variety.
Like the player images, these mob images need to be scaled down. Set the
``AnimatedSprite2D``'s ``Scale`` property to ``(0.75, 0.75)``.
``AnimatedSprite``'s ``Scale`` property to ``(0.75, 0.75)``.
As in the ``Player`` scene, add a ``CapsuleShape2D`` for the collision. To align
the shape with the image, you'll need to set the ``Rotation Degrees`` property
@@ -80,14 +80,14 @@ Add a script to the ``Mob`` like this:
#ifndef MOB_H
#define MOB_H
#include <AnimatedSprite2D.hpp>
#include <AnimatedSprite.hpp>
#include <Godot.hpp>
#include <RigidBody2D.hpp>
class Mob : public godot::RigidBody2D {
GODOT_CLASS(Mob, godot::RigidBody2D)
godot::AnimatedSprite2D *_animated_sprite;
godot::AnimatedSprite *_animated_sprite;
public:
void _init() {}
@@ -106,18 +106,18 @@ and randomly choose one of the three animation types:
.. code-tab:: gdscript GDScript
func _ready():
$AnimatedSprite2D.playing = true
var mob_types = $AnimatedSprite2D.frames.get_animation_names()
$AnimatedSprite2D.animation = mob_types[randi() % mob_types.size()]
$AnimatedSprite.playing = true
var mob_types = $AnimatedSprite.frames.get_animation_names()
$AnimatedSprite.animation = mob_types[randi() % mob_types.size()]
.. code-tab:: csharp
public override void _Ready()
{
var animSprite2D = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
animSprite2D.Playing = true;
string[] mobTypes = animSprite2D.Frames.GetAnimationNames();
animSprite2D.Animation = mobTypes[GD.Randi() % mobTypes.Length];
var animSprite = GetNode<AnimatedSprite>("AnimatedSprite");
animSprite.Playing = true;
string[] mobTypes = animSprite.Frames.GetAnimationNames();
animSprite.Animation = mobTypes[GD.Randi() % mobTypes.Length];
}
.. code-tab:: cpp
@@ -131,13 +131,13 @@ and randomly choose one of the three animation types:
void Mob::_ready() {
godot::Ref<godot::RandomNumberGenerator> random = godot::RandomNumberGenerator::_new();
random->randomize();
_animated_sprite = get_node<godot::AnimatedSprite2D>("AnimatedSprite2D");
_animated_sprite = get_node<godot::AnimatedSprite>("AnimatedSprite");
_animated_sprite->_set_playing(true);
godot::PoolStringArray mob_types = _animated_sprite->get_sprite_frames()->get_animation_names();
_animated_sprite->set_animation(mob_types[random->randi() % mob_types.size()]);
}
First, we get the list of animation names from the AnimatedSprite2D's ``frames``
First, we get the list of animation names from the AnimatedSprite's ``frames``
property. This returns an Array containing all three animation names: ``["walk",
"swim", "fly"]``.

View File

@@ -60,7 +60,7 @@ other game engines.
|image1|
Sprite2D is a Node2D, a CanvasItem and a Node. It has all the properties
Sprite is a Node2D, a CanvasItem and a Node. It has all the properties
and features of its three parent classes, like transforms or the ability
to draw custom shapes and render with a custom shader.

View File

@@ -40,7 +40,7 @@ nodes.
.. image:: img/key_concepts_character_nodes.png
It is made of a ``KinematicBody2D`` node named "Character", a ``Sprite2D``, a
It is made of a ``KinematicBody2D`` node named "Character", a ``Sprite``, a
``Camera2D``, and a ``CollisionShape2D``.
.. note:: The node names end with "2D" because this is a 2D scene. Their 3D

View File

@@ -15,7 +15,7 @@ pack information about your scene's content.
Here's the example of a ball. It's composed of a :ref:`RigidBody2D
<class_RigidBody2D>` node as its root named Ball, which allows the ball to fall
and bounce on walls, a :ref:`Sprite2D <class_Sprite>` node, and a
and bounce on walls, a :ref:`Sprite <class_Sprite>` node, and a
:ref:`CollisionShape2D <class_CollisionShape2D>`.
.. image:: img/instancing_ball_scene.png

View File

@@ -36,21 +36,21 @@ community.
.. Godot icon
We need to create a Sprite2D node to display it in the game. In the Scene dock,
We need to create a Sprite node to display it in the game. In the Scene dock,
click the Other Node button.
.. image:: img/scripting_first_script_click_other_node.png
Type "Sprite2D" in the search bar to filter nodes and double-click on Sprite2D to
Type "Sprite" in the search bar to filter nodes and double-click on Sprite to
create the node.
.. image:: img/scripting_first_script_add_sprite_node.png
Your Scene tab should now only have a Sprite2D node.
Your Scene tab should now only have a Sprite node.
.. image:: img/scripting_first_script_scene_tree.png
A Sprite2D node needs a texture to display. In the Inspector on the right, you can
A Sprite node needs a texture to display. In the Inspector on the right, you can
see that the Texture property says "[empty]". To display the Godot icon, click
and drag the file ``icon.png`` from the FileSystem dock onto the Texture slot.
@@ -58,7 +58,7 @@ and drag the file ``icon.png`` from the FileSystem dock onto the Texture slot.
.. note::
You can create Sprite2D nodes automatically by dragging and dropping images on
You can create Sprite nodes automatically by dragging and dropping images on
the viewport.
.. image:: img/scripting_first_script_dragging_sprite.png
@@ -70,7 +70,7 @@ Then, click and drag the icon in the viewport to center it in the game view.
Creating a new script
---------------------
To create and attach a new script to our node, right-click on Sprite2D in the
To create and attach a new script to our node, right-click on Sprite in the
scene dock and select "Attach Script".
.. image:: img/scripting_first_script_attach_script.png
@@ -89,11 +89,11 @@ line of code:
.. tabs::
.. code-tab:: gdscript GDScript
extends Sprite2D
extends Sprite
Every GDScript file is implicitly a class. The ``extends`` keyword defines the
class this script inherits or extends. In this case, it's ``Sprite2D``, meaning
our script will get access to all the properties and functions of the Sprite2D
class this script inherits or extends. In this case, it's ``Sprite``, meaning
our script will get access to all the properties and functions of the Sprite
node, including classes it extends, like ``Node2D``, ``CanvasItem``, and
``Node``.
@@ -143,7 +143,7 @@ the Output bottom panel that expands. It should display "Hello, world!"
.. image:: img/scripting_first_script_print_hello_world.png
Delete the ``_init()`` function, so you're only left with the line ``extends
Sprite2D``.
Sprite``.
Turning around
--------------
@@ -155,7 +155,7 @@ angular speed in radians per second.
.. tabs::
.. code-tab:: gdscript GDScript
extends Sprite2D
extends Sprite
var speed = 400
var angular_speed = PI
@@ -170,7 +170,7 @@ and ``angular_speed`` properties.
To move our icon, we need to update its position and rotation every frame in the
game loop. We can use the ``_process()`` virtual function of the ``Node`` class.
If you define it in any class that extends the Node class, like Sprite2D, Godot
If you define it in any class that extends the Node class, like Sprite, Godot
will call the function every frame and pass it an argument named ``delta``, the
time elapsed since the last frame.
@@ -207,7 +207,7 @@ instructions.
The line inside the function, ``rotation += angular_speed * delta``, increments
our sprite's rotation every frame. Here, ``rotation`` is a property inherited
from the class ``Node2D``, which ``Sprite2D`` extends. It controls the rotation of
from the class ``Node2D``, which ``Sprite`` extends. It controls the rotation of
our node and works with radians.
.. tip:: In the code editor, you can ctrl-click on any built-in property or

View File

@@ -89,12 +89,12 @@ constant of the built-in ``Vector`` type representing a 2D vector of length 0.
If the player presses the "ui_up" action, we then update the velocity's value,
causing the sprite to move forward.
Here is the complete ``Sprite2D.gd`` file for reference.
Here is the complete ``Sprite.gd`` file for reference.
.. tabs::
.. code-tab:: gdscript GDScript
extends Sprite2D
extends Sprite
var speed = 400
var angular_speed = PI

View File

@@ -47,12 +47,12 @@ root.
.. image:: img/signals_02_2d_scene.png
In the FileSystem dock, click and drag the ``Sprite2D.tscn`` file you saved
In the FileSystem dock, click and drag the ``Sprite.tscn`` file you saved
previously onto the Node2D to instantiate it.
.. image:: img/signals_03_dragging_scene.png
We want to add another node as a sibling of the Sprite2D. To do so, right-click on
We want to add another node as a sibling of the Sprite. To do so, right-click on
Node2D and select Add Child Node.
.. image:: img/signals_04_add_child_node.png
@@ -84,9 +84,9 @@ Your scene tree and viewport should look like this.
Connecting a signal in the editor
---------------------------------
Here, we want to connect the Button's "pressed" signal to our Sprite2D, and we
Here, we want to connect the Button's "pressed" signal to our Sprite, and we
want to call a new function that will toggle its motion on and off. We need to
have a script attached to the Sprite2D node, which we do from the previous lesson.
have a script attached to the Sprite node, which we do from the previous lesson.
You can connect signals in the Node dock. Select the Button node and, on the
right side of the editor, click on the tab named "Node" next to the Inspector.
@@ -101,7 +101,7 @@ Double-click the "pressed" signal to open the node connection window.
.. image:: img/signals_12_node_connection.png
There, you can connect the signal to the Sprite2D node. The node needs a receiver
There, you can connect the signal to the Sprite node. The node needs a receiver
method, a function that Godot will call when the Button emits the signal. The
editor generates one for you. By convention, we name these callback methods
"_on_NodeName_signal_name". Here, it'll be "_on_Button_pressed".
@@ -133,7 +133,7 @@ connection. This feature is only available when connecting nodes in the editor.
Let's replace the line with the ``pass`` keyword with code that'll toggle the
node's motion.
Our Sprite2D moves thanks to code in the ``_process()`` function. Godot provides a
Our Sprite moves thanks to code in the ``_process()`` function. Godot provides a
method to toggle processing on and off: :ref:`Node.set_process()
<class_Node_method_set_process>`. Another method of the Node class,
``is_processing()``, returns ``true`` if idle processing is active. We can use
@@ -160,12 +160,12 @@ following code, which we saw two lessons ago:
var velocity = Vector2.UP.rotated(rotation) * speed
position += velocity * delta
Your complete ``Sprite2D.gd`` code should look like the following.
Your complete ``Sprite.gd`` code should look like the following.
.. tabs::
.. code-tab:: gdscript GDScript
extends Sprite2D
extends Sprite
var speed = 400
var angular_speed = PI
@@ -192,7 +192,7 @@ that's useful to implement skill cooldown times, weapon reloading, and more.
Head back to the 2D workspace. You can either click the "2D" text at the top of
the window or press :kbd:`Ctrl + F2` (:kbd:`Alt + 2` on macOS).
In the Scene dock, right-click on the Sprite2D node and add a new node. Search for
In the Scene dock, right-click on the Sprite node and add a new node. Search for
Timer and add the corresponding node. Your scene should now look like this.
.. image:: img/signals_15_scene_tree.png
@@ -201,13 +201,13 @@ With the Timer node selected, go to the Inspector and check the **Autostart** pr
.. image:: img/signals_18_timer_autostart.png
Click the script icon next to Sprite2D to jump back to the scripting workspace.
Click the script icon next to Sprite to jump back to the scripting workspace.
.. image:: img/signals_16_click_script.png
We need to do two operations to connect the nodes via code:
1. Get a reference to the Timer from the Sprite2D.
1. Get a reference to the Timer from the Sprite.
2. Call the Timer's ``connect()`` method.
.. note:: To connect to a signal via code, you need to call the ``connect()``
@@ -221,20 +221,20 @@ in a variable.
.. tabs::
.. code-tab:: gdscript GDScript
extends Sprite2D
extends Sprite
#...
func _ready():
var timer = get_node("Timer")
The function ``get_node()`` looks at the Sprite2D's children and gets nodes by
The function ``get_node()`` looks at the Sprite's children and gets nodes by
their name. For example, if you renamed the Timer node to "BlinkingTimer" in the
editor, you would have to change the call to ``get_node("BlinkingTimer")``.
.. add seealso to a page that explains node features.
We can now connect the Timer to the Sprite2D in the ``_ready()`` function.
We can now connect the Timer to the Sprite in the ``_ready()`` function.
.. tabs::
.. code-tab:: gdscript GDScript