Sprites in game development are 2D images or animations representing characters, objects, and other in-game elements. They are made up of pixels and can be created using graphic creation and editing software. They are commonly used in retro-style games and 2D platformers but can also be used in modern games to create special effects or elements of the game’s user interface.
What are Pixels?
Before we can create a sprite, we first need to understand what sprites are made up of. Sprites are composed of pixels, the basic building blocks of any digital image. Each pixel is a visible, colored ‘dot’ on a display, combining to form text, lines, pictures, and more.
Creating or Sourcing Game Assets
Creating sprites involves drawing the individual frames that make up a sprite. Sprites can be handcrafted using graphic creation software such as Piskel or AseSprite, drawn frame by frame, or some game development software packages that also offer inbuilt sprite editors such as GameMaker.
For a simple 2D player or enemy sprite design, it is recommended to start by with a 32 x 32-pixel canvas or multiples of this, such as 64 x 64 pixels.
How to create sprites?
You need graphic creation and editing software to create sprites. There are many different software packages such as Photoshop, Paint, Piskel, or Aseprite.
However, my preferred tool for beginners is Piskel. Piskel is beginner-friendly and can be accessed online or downloaded for offline use. Browse https://www.piskelapp.com to either create your game sprites online or download this tool. It is free to use, simplistic, and has a user-friendly interface.
You can watch this short tutorial video on YouTube about creating sprites using Piskel, here:
Or Download the Sprite Assets for the Book, Code, Create, Play: Your 7 Day Guide to Game Development.: www.codecreateplay.com/get-game-assets
Or source sprites from free or paid resources, we’ve listed the best websites to get these from here: https://codecreateplay.com/game-asset-resources/
Sprite Animation Basics
Animating sprites is a fundamental aspect of game development, and it involves cycling through a series of images rapidly to create the illusion of motion, much like how movies work.
To animate a sprite, you start with a static image and break it down into a sequence of frames that simulate movement. This is typically done using sprite sheets, which are special image files containing multiple frames of a sprite arranged in a grid-like pattern. Each frame within the sprite sheet is usually of the same size and organized in rows and columns.
Sprite sheets are a popular choice in 2D game development for several reasons. First, they optimize game performance by reducing the number of individual image files the game engine needs to load. Instead of loading each frame separately, the game engine efficiently loads the entire sprite sheet and accesses the required frame as needed. This optimization can lead to improved game performance.
Additionally, sprite sheets simplify the management of numerous sprites within a game. By placing multiple sprites on a single sheet, it becomes easier to keep track of their positions and animations. As we dive deeper into the world of sprite animation, we’ll explore some essential concepts that will enhance your game’s visual appeal. We’ll be using GameMaker as our primary tool and cover topics like frame indexing, adjusting sprite sizes, and converting sprite sheets into animated sprites.
Here are some key terms you need to understand when animating sprites.
Frame Indexing
Frame indexing is a fundamental concept in sprite animation, akin to the pages of a flipbook representing animation frames. In GameMaker, a sprite’s animation consists of various frames, each assigned a unique index.
In game development toolkits such as GameMaker or Godot, each frame of your sprite animation is associated with an index number, starting from 0. For instance, if your sprite has 10 frames, they are indexed from 0 to 9.
When a sprite comprises multiple images, it’s considered animated, and each image in the sequence is called a “frame” or “sub-image.”
This indexing convention aligns with many programming languages, including GML (GameMaker Language), which use zero-based indexing.
Look at the frame indexing of an animated sprite below.
The choice of starting indexing at 0 has historical roots and practical advantages such as:
Mathematical Simplicity: 0-based indexing simplifies mathematical calculations and algorithms, making them more efficient.
Memory Offset: In lower-level programming, an index is considered an offset from the start of an array. Starting at 0 makes sense as the “zeroth” element has zero offset.
Consistency: Many programming languages adopt 0-based indexing, ensuring consistency across various contexts, including GameMaker.
Therefore, when working with sprite frames in GameMaker, remember that the first frame is 0, the second is 1, and so forth. This knowledge is particularly crucial when controlling sprite animations using properties like image_index.
You can control the current frame index to dictate which frame of the animation is displayed. This control is valuable for creating paused states, slow-motion effects, or dynamically adjusting animation speed.
Adjusting the dimensions of your sprites is essential for various purposes, such as adapting to different screen resolutions or creating specific visual effects.
It’s also important to understand the difference between scaling a sprite (changing its display size) and redrawing it (creating a new version with different dimensions). Scaling can be done in real-time but may result in a loss of quality. When scaling you should always maintain the correct aspect ratio to prevent distorted sprites that could detract from your game’s aesthetics.
However, redrawing different-sized sprites requires a lot more effort but yields better results across different screen resolutions.
Next Steps for Aspiring Game Artists
Understanding sprites is fundamental in game development, especially for aspiring game artists. This guide only touched on the basics. Mastering sprite design can significantly enhance a 2D game’s visual appeal but can also look great on a portfolio of work.
I suggest that if you are creating sprites for the first time start by experimenting with Piskel or another graphic creation tool to design your sprites. Remember, every great game starts with a single pixel, so begin crafting your unique visual story today!
Learn to Code Your First Video Game
What you’ll Learn
- Setting up a game development environment in GameMaker.
- Fundamentals of game design & coding.
- Understanding basics of game graphics.
- Coding essential game mechanics.
- Using GML for enemy dynamics.
- Managing player health and lives.
- Implementing a scoring system.
- Designing a home screen, menu, and end screen.
- Enhancing gameplay with music and sound effects.
- Enhancing gameplay with music and sound effects.
Your 7 Day Guide to Game Development
