Tuesday, March 26, 2024

Animating the sprite part1

 This entry uses the pixel art setup from the previous one, and again uses help from https://youtu.be/wX145eoLFSM?si=VXPIxsxfap8fprIX
We'll be using the resources from the video, so be sure to have them imported in your project.

Create a new scene (Player.tscn), add a KinematicBody2D root node with: a Sprite and a CollisionShape2D subnode. Like this:


Once you have done that, we can select our sprite subnode and add a new texture (created with animation in mind).

- Drag and drop your texture on the Texture cell:


As a result, you'll have something like this:


This is a full sprite sheet that contains all the animations for our player character, However we want it to only show a single image. In order to do that, we need to:

- (Still on your sprite) Go to Animation


- Select the number of frames for your texture, in our case is 60, and voilà!


Note: If we update the "Frame" parameter below, we can see it cycle through the frames (and see it animated).

Since we want the game's camera to focus and move with our character, add a camera2d node and be sure the "current" property is checked. [This camera part is not from the video]

After that, we can attach a script to our character so we can move it around the screen. We'll be updating it later, but for now (to test the basis) this will do:
[I'm just writing down the code from the video, because it will be edited to control the animations]
```
extends KinematicBody2D

const ACCELERATION = 500
const MAX_SPEED = 80
const FRICTION = 500

var velocity = Vector2.ZERO

func _physics_process(delta):
    var input_vector = Vector2.ZERO
    input_vector.x = Input.get_action_strength("ui_right") - Input.get_action_strength("ui_left")
    input_vector.y = Input.get_action_strength("ui_down") - Input.get_action_strength("ui_up")
    input_vector = input_vector.normalized()

    if input_vector != Vector2.ZERO:
        velocity = velocity.move_toward(input_vector * MAX_SPEED, ACCELERATION * delta)
    else:
        velocity = velocity.move_toward(Vector2.ZERO, FRICTION * delta)
    
    velocity = move_and_slide(velocity)
```


Now we can finally start animating our character, https://youtu.be/wX145eoLFSM?si=wVja37tuGZ-nE8VD

Start by adding a new AnimationPlayer subnode to your Player.tscn

This node basically lets you key any property in frames and have it animate. To do that, go to the animation section, below in your window and click on Animation:

A new menu will drop, click on new, and give your animation a name:

Since we are following the video, we named it "RunRight", and we have 6 frames (length = 0.6)

Now we have to select the property we want to animate, which is in the sprite, the frame property.

- Start with frame 1, and click on the key

- A pop-up will appear, deselect the checks and click on create

- A new frame will be added to your animation panel

- Go to the animation panel and move to the next frame, then add the new key

- Continue until you have added all the 6 frames in that animation, and save your scene.

- Repeat with any animation you want to add.

After creating your animations, go to the player script and update it to make them run in your game.
```
extends KinematicBody2D

const ACCELERATION = 500
const MAX_SPEED = 80
const FRICTION = 500

var velocity = Vector2.ZERO

onready var animationPlayer = $AnimationPlayer

func _physics_process(delta):
    var input_vector = Vector2.ZERO
    input_vector.x = Input.get_action_strength("ui_right") - Input.get_action_strength("ui_left")
    input_vector.y = Input.get_action_strength("ui_down") - Input.get_action_strength("ui_up")
    input_vector = input_vector.normalized()

    if input_vector != Vector2.ZERO:
        if input_vector.x > 0:
            animationPlayer.play("RunRight")
        else:
            animationPlayer.play("RunLeft")
        velocity = velocity.move_toward(input_vector * MAX_SPEED, ACCELERATION * delta)
    else:
        animationPlayer.play("IddleRight")
        velocity = velocity.move_toward(Vector2.ZERO, FRICTION * delta)
    
    velocity = move_and_slide(velocity)
```


You can now execute your game and try your animated sprite. There is still another thing to add, the state machines to clean the code and add different actions like an attack. That will be done in the next entry.

No comments:

Post a Comment