Embedded Files
1. Sprites
1. Sprites
Sprites are 2D images in games. In the case of a 2D game these might make up everything from characters to backgrounds to pickups, but they are still integral elements in many 3D games being used extensively in particle effects and user interfaces. Because game elements need to be reactive and efficient, there are various ways that sprites can be utilised and set up.
Sprite Sheets are a form of atlas, wherein multiple sprites are cut from a single texture. In this way, the GPU only needs to load one image into memory and cycle through it rather than loading and unloading different images, which is a huge performance drain. This is most common for animations, level tilesets, and user interfaces, but it's worthwhile putting any sprites likely to always be loaded together in a sprite sheet.
https://graphicriver.net/item/vector-cute-cartoon-game-kit-sprites-backgrounds-ui-more/19090105
https://developer.playcanvas.com/en/user-manual/assets/texture-atlas/
Sprite Sheets need to be cut up into separate sprites to suit their purpose, for most this is a matter of cutting out the image or cutting the sheet by a fixed columns and rows, but another technique which is very useful for UI is 9 Slicing. Cutting a sprite's edges, corners, and body into different sprites to enable better resizing, generally used for UI boxes and windows.
2. Raster vs Vector
2. Raster vs Vector
Photoshop and Illustrator are industry standard image editing tools. The main difference between Photoshop and Illustrator is that the former is raster-based and the latter is vector-based. Raster images are made up of individual pixels, each with its own colour information, while vector-based images are a mathematical rendering of paths and points.
With raster-based programs like Photoshop, you individually edit each pixel, but with vector-based images like Illustrator you edit the points and path parameters (e.g. thickness) that describe how the mathematically constructed curve is drawn.
If you zoom into a raster image it will end up looking blocky, whereas a vector-image is infinitely scalable, because the software will redraw the image at the screen resolution (see below). Text is the best example of vector images: if you zoom into this page you will find that the text remains crisp, but the images will become pixelated.
For this reason, raster-images tend to be used on screens, especially for photographs and paintings, while vector images are commonly used for printing, especially for text, logos and illustrations.
3. Bit Depth and Colour Spaces
3. Bit Depth and Colour Spaces
Bit Depth refers to the amount of information which can be stored in a given pixel, and thus the possible colour range. This will also result in a larger file size as bit depth increases.
Colour Space can refer to a great deal of possible colour formats but most broadly refers to RGB (Additive) and CMYK (Subtractive) colour. RGB is the optimal space for media designed to be viewed on a screen as creating light uses additive colour (Red + Green + Blue = White) and CMYK is the optimal space for media designed to be printed as in the physical world colour is based on subtracting from the light that is bounced to our eyes (Cyan + Magenta + Yellow = Black).
https://www.youtube.com/watch?v=6yXYxp0UiVg
https://www.pinterest.com.au/pin/97179304432758395/
4. Photoshop Basics
4. Photoshop Basics
Adobe Photoshop is the premiere professional image editing tool. If you don't have it, GIMP, Krita, and Adobe Photoshop Express are free substitutes with similar functionality, but you should have access to Photoshop under a student license.
Photoshop has a range of features, so it's best to just watch some tutorials and jump in. Here's a few intro video tutorials that should help you with your first brief:
Introduction to Photoshop (video below)
Here are a few website tutorials:
The following videos are more for designing characters and textures:
Though it lends itself more to painted higher resolution designs, Photoshop is still a powerful tool for generating more traditional pixel art sprites, so you are encouraged to look through the following introductions to 2D pixel art and Sprite sheets in Photoshop:
5. Illustrator Basics
5. Illustrator Basics
As with Photoshop, Illustrator is the professional standard for vector editing. If you don't have it, Inkscape, SVG-Edit, Affinity Designer and GIMP are other free vector editing tools.
While most games tend to use raster-art, some games deliberately use vector-based images as part of their style. This is common in games that try to evoke a cartoon aesthetic. The links below should serve to introduce you to the basic functions required for your briefs:
6. Sprite Creation Basics
6. Sprite Creation Basics
Sprite creation for games either involves creating individual images (usually of low resolution) or a 'sprite sheet', i.e. series of sprites (e.g. sprites of different map elements, or frames from animated sequences).
Photoshop is a useful tool for generating sprites, although not so useful if you want to test animations you are working on, because it doesn't offer an easy way to 'play' animations (you can use the Timeline tool, but it's a little fiddly). You also can use Photoshop to turn quality images into low res pixel art, by simply changing the resolution and tweaking some other settings.
As Photoshop can be a little difficult with some sprite pipelines, you may want to use specific sprite editors like Piskel and Aseprite
Piskel (top image right) is a free pixel-editing tool that can let you test sprite animations and export sprite sheets
Aseprite (bottom image right) has more features than Piskel, but you have to buy it (only $14.99, so worth it).
Asesprite video tutorial (second video below)
When you technically know how to make sprites, you need to attend more closely to the design principles that govern GOOD sprite art and animation. Attached below is a file with a series of .gif files (examples below), each exploring design principles of pixel art.
Pixel art guide (zip file containing 75 gifs)
7. Extra Resources
7. Extra Resources
Report abuse