Hello. I don't understand how to use the png sprite sheets (or at least the "run" one). They seem to have extra transparent space on the ends and inconsistent spacing between the images. But maybe I'm doing something wrong? What is the height and width supposed to be?
NOTE: I managed to get the run version working but I had to edit the sprite sheet.
Hi 👋
Edit & Extract:
How to open sprite sheets in Illustrator, Photoshop, or Photopea for game engine design, you can follow these steps:
1. Illustrator:
- Open Adobe Illustrator.
- Go to "File" and select "Open".
- Locate the sprite sheet file on your computer and click "Open".
- In the Import options dialog box, make sure to select "Images" under "Files of type".
- Adjust the settings as needed, such as selecting the artboard size, and click "OK".
- The sprite sheet will open in Illustrator, and you can edit or extract individual sprites as required.
2. Photoshop:
- Open Adobe Photoshop.
- Go to "File" and select "Open".
- Locate the sprite sheet file on your computer and click "Open".
- The sprite sheet will open as a new document in Photoshop.
- To extract individual sprites, you can use the "Slice" tool or the "Crop" tool to select and save each sprite separately.
3. Photopea:
- Open Photopea in your web browser (www.photopea.com).
- Go to "File" and select "Open".
- Locate the sprite sheet file on your computer and click "Open".
- The sprite sheet will open in Photopea.
- To extract individual sprites, you can use the "Crop" tool or the "Marquee" tool to select and copy each sprite to a new layer or document.
Remember to save your work in the appropriate file format for your game engine (e.g., PNG, JPEG) before using the sprites in your game.
How to use a sprite sheet in a game engine, follow these steps:
1. Create or obtain a sprite sheet: A sprite sheet is a single image file that contains multiple frames or images of a character or object. You can create a sprite sheet using graphic design software or find pre-made sprite sheets online.
2. Import the sprite sheet into your game engine: Open your game engine and import the sprite sheet file into your project. Most game engines have a specific folder or asset manager to handle image assets.
3. Define the sprite sheet dimensions: Determine the number of rows and columns in your sprite sheet. Each row and column represents a different animation or frame of the character/object. Note 📝 the dimensions of each frame in pixels.
4. Set up the sprite sheet in the game engine: In the game engine, create a sprite or animation component that will handle the sprite sheet. Set the dimensions of each frame and the total number of frames in the sprite sheet.
5. Access individual frames: Use the sprite component or script to access individual frames from the sprite sheet. You can specify the row and column number of a frame to display the desired animation.
6. Implement animations: Use the frame access functionality to create animations. Define the sequence of frames to play in a specific order and set the timing for each frame. This will create smooth animations using the frames from the sprite sheet.
7. Integrate the sprite sheet in the game: Attach the sprite component to the character or object in your game. Set up the animations and trigger them based on game events or user input.
8. Test and iterate: Run the game and test the sprite sheet animations. Make adjustments to the frame sequence, timing, or dimensions if needed. Iterate until you achieve the desired look and feel for your game.
How to define the dimensions of a sprite sheet in a game engine, follow these steps:
1. Open the sprite sheet image: Use image editing software to open the sprite sheet file. This software could be Photoshop, GIMP, or any other program that allows you to view and edit images.
2. Determine the frame size: Examine the sprite sheet and decide on the dimensions of each individual frame. Each frame represents a specific animation or pose of the character or object. Measure the width and height of a single frame in pixels.
3. Count the number of frames: Count the total number of frames horizontally (number of columns) and vertically (number of rows) in the sprite sheet. This will help determine the overall dimensions of the sprite sheet.
4. Calculate the sprite sheet dimensions: Multiply the width of a single frame by the number of columns and the height of a single frame by the number of rows. This will give you the width and height of the entire sprite sheet in pixels.
5. 📝Write down the dimensions of the sprite sheet, specifying the width and height in pixels. This information will be used when setting up the sprite sheet in the game engine.
6. Set up the sprite sheet in the game engine: Open your game engine and import the sprite sheet file into your project. Create a sprite or animation component and specify the dimensions of each frame and the total number of frames using the dimensions you noted down.
How to determine the overall dimensions of a sprite sheet, you need to consider the number of frames and the size of each frame. Follow these steps:
1. Count the number of frames: Examine the sprite sheet and count the total number of frames horizontally (number of columns) and vertically (number of rows). Each frame represents a specific animation or pose of the character or object.
2. Measure the frame size: Measure the width and height of a single frame in pixels. This is the size of each individual animation or pose within the sprite sheet.
3. Calculate the sprite sheet dimensions: Multiply the width of a single frame by the number of columns and the height of a single frame by the number of rows. This will give you the overall width and height of the sprite sheet in pixels.
For example, if you have a sprite sheet with 8 frames arranged in 2 columns and 4 rows, and each frame is 64 pixels wide and 64 pixels high, the overall dimensions of the sprite sheet would be:
Width = 64 pixels (frame width) * 2 (number of columns) = 128 pixels
Height = 64 pixels (frame height) * 4 (number of rows) = 256 pixels
So, the overall dimensions of the sprite sheet would be 128 pixels in width and 256 pixels in height.
Thank you for helping. I'm using these in a game engine. Following the last section you pasted in above will not work. The problem is that in the Run sprite sheet (specifically Unicorn_Run.png), there more transparent area on the right and left edges of the sprite sheet than 1/2 the area between images. The left and right have to be 1/2 the spacing that is between the images. Also, I'm not certain if all the images are spaced equally or not but they need to be. In the game engine, you can only tell it the width of the image and how many images are in the sheet. It starts at the left and cuts it into an equal number of images as it goes to the right.
Thanks,
Brian
