Create Spritesheets in Photoshop

How to create spritesheets for a Street Fighter type game.

You can view the game live at https://danewatkins.github.io/

and you can download the code from https://github.com/i3games/coc

You will need to create 8 spritesheets to represent 8 different fighting moves

Each movement will have 

• at least two frames, 
• it can be no more than 30 frames (7680 pixels wide)
• a starting point and an endpoint.

The starting point for movement is the same for every movement. 

You can view these sprites in the DLE

attack.png

defense.png

gothit.png

idle.png

lose.png

walk.png

win.png

special.png

Designing images for screen based media such as websites and games require all measurements to be done in pixels and the resolution set to 72dpi (dots per inch, which is the same as pixels per inch)

Open up photoshop and change the units of measurement to pixels

Create a new photoshop file for each movement

Place each frame on a new layer

Open time line palette Window > Timeline

Click Create Frame Animation button

Click hamburger, top right in palette and choose Make Frames From Layers

Shift select the frames and 0.1seconds

You can now test your animation to see if it works.

Download the Sprite sheet generator

https://github.com/i3games/coc_spritesheet

This script generates a single row spritesheet for Conflict of Character used for the ILLGA400 Illustration module.

Unzip the the zipped folder

Load the script into photoshop

Specify the height and number of frames

Save the file as a png