Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:tutorials:piksel-sprite-sheets [2020/03/30 02:59]
silver-streak
gdevelop5:tutorials:piksel-sprite-sheets [2020/05/11 22:04]
silver-streak
Line 1: Line 1:
-# How to Import a Sprite Sheet using Piskel +Moved to [[gdevelop5:​tutorials:​piskel-sprite-sheets|]]
-When working with art assets, there may be times when an asset file has numerous sprites on a single image. This can mean there will be a need to manually slice the file up into multiple images, or isolate each frame of the animation separately. +
- +
-However, GDevelop has the Piskel sprite editor built in to the editor, which can help avoid this manual effort. Piskel natively supports importing sprite sheets and can simplify this process. +
-<note tip>This process will split the sprite sheet into separate images automatically. It //will not// keep the sprite sheet as a single image +
-</​note>​ +
-### Requirements +
-To complete this method, the following requirements must be met: +
-  * The sprite sheet file must be in jpg, gif, or png format. +
-  * The sprite sheet must be for a //single// animation. +
-  * The sprite sheet must have the sprites evenly spread apart. +
- +
-## Step 1 - Create the Sprite Object and Animation +
-  - Within the lower right of the Object List, click **Add a new object**. A new window will display. +
-  - Click **Sprite** from the list of object types. The new sprite window will display. +
-  - Within the **Object name** field, give the sprite a name. +
-  - Click **ADD AN ANIMATION**. The first empty frame and more buttons will appear. +
-  - It is also recommended to give the animation a name within the **Optional animation name** field. +
- +
-## Step 2 - Import the File into Piksel +
-  - Click **EDIT WITH PISKEL**. The Piksel editor will display. +
-  - Within the right panel, click the **Import** button. The panel will pop out with various import options. +
-  - Under the **IMPORT FROM PICTURE** section, click the **Browse Images** button. +
-  - Browse to the sprite sheet file. +
-  - Click the desired file. +
-  - Click **Open**. The **Import and Merge** window will display. +
- +
-## Step 3 - Complete the Sprite sheet Properties. +
-  - Within the **Import and Merge** window, select **Import as Sprite sheet**. +
-  - The frame size must be defined to match the size of each sprite. Most sprite sheets will have this be an even number. +
-  - Adjust the frame size to properly match the size of each animation frame. +
-    * Example -  +
-       - This example sprite sheet imports as 512 pixels wide x 96 pixels high. +
-       - There are four frames, and the sheet is set up to have even distance. This means the frame size needs to be adjusted to 1/4th 512 pixels wide, or 128 pixels. +
-       - After adjusting the frame size, the boxes evenly split up each frame of animation. +
- +
-{{:gdevelop5:​tutorials:​piksel-sprite-sheets:​pasted:​20200330-024341.png}} +
- +
-## Import the Sprite sheet +
-  - Click the **Import** button. +
-  - A confirmation will display stating this will replace the current animation. Click **OK**. +
-  - The animation will be imported into split files, and a preview of the animation will play on the upper right. +
-  - Make any further needed adjustments needed. +
-  - Click **Save**. The animation will be created for the sprite object. +
-  - Repeat as needed for each additional animation and sprite sheet. +
-{{:​gdevelop5:​tutorials:​piksel-sprite-sheets:​pasted:​20200330-025608.png}} +