All lessons
Lesson 21

How Sprites Work

The warrior you have played since lesson 1 is one frame of a picture file. See how sprites work, then swap in any character you like.

Loading the game engine. This takes a moment the first time.

The warrior you have been playing since lesson 1 is not something Godot draws on its own. It is a picture file, shown by a Sprite2D node in the player scene. This lesson opens that up: how the picture gets on screen, why one file secretly holds eight poses, and how to swap in any character you like without touching a line of code.

THE SWAP, STEP BY STEP

  1. Put a picture file in the lesson folder. Godot imports it by itself the moment the file appears. There is no import button to find.
  2. Select the player's Sprite2D and drag the new picture into its Texture slot in the Inspector.
  3. That is the whole swap. Movement, collisions and every line of code carry on exactly as before. None of them ever cared what the player looked like.

ONE FILE, MANY DRAWINGS

Look at warrior_idle.png in the FileSystem dock: it is 1536 pixels wide, but the warrior is only 192. The file is a spritesheet of eight drawings packed side by side. Setting "hframes" to 8 on the Sprite2D slices it into eight frames, and "frame" picks which one is showing. We sit on frame 0. Playing the frames in order is what Simple Animation is about.

BLURRY OR CRISP

Now look at the two big knights on the right of the game. Same file, same size, but one is smeared and one is sharp. When a picture is drawn bigger than its file really is, Godot has to invent the missing pixels, and the texture filter is HOW it invents them. Linear blends neighbouring pixels together, right for smooth, painted art. Nearest repeats each pixel as a chunky block, right for pixel art. Blow up pixel art with Linear and you get the blurry knight on the left.

Both characters are free-to-use art packs. The warrior is from Tiny Swords and the knight from the Brackeys pack. The website's Assets page has both packs in full, plus plenty more to build with.

The scenes

UI node · 2D node · % unique name · .tscn instanced scene

real_art.tscn
  • RealArt Node2D real_art.gd
  • RealArtPlayer CharacterBody2D player.tscn
  • FilterDemo Node2D
  • Title Label
  • LinearSprite Sprite2D
  • NearestSprite Sprite2D
  • LinearLabel Label
  • NearestLabel Label
player.tscn
  • RealArtPlayer CharacterBody2D player.gd
  • Sprite2D
  • CollisionShape2D
extends Node2D