Skip to content

Commit

Permalink
Fix numbered lists in Piskel sprite sheet tutorial. (#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
Silver-Streak authored Apr 10, 2023
1 parent 216b53e commit 1d637d4
Showing 1 changed file with 21 additions and 21 deletions.
42 changes: 21 additions & 21 deletions docs/gdevelop5/tutorials/piskel-sprite-sheets.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@ To complete this method, the following requirements must be met:

## 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.
1. Within the lower right of the Object List, click **Add a new object**. A new window will display.
1. Click **Sprite** from the list of object types. The new sprite window will display.
1. Within the **Object name** field, give the sprite a name.
1. Click **ADD AN ANIMATION**. The first empty frame and more buttons will appear.
1. It is also recommended to give the animation a name within the **Optional animation name** field.

## Step 2 - Import the File into Piskel

- Click **EDIT WITH PISKEL**. The Piskel 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.
1. Click **EDIT WITH PISKEL**. The Piskel editor will display.
1. Within the right panel, click the **Import** button. The panel will pop out with various import options.
1. Under the **IMPORT FROM PICTURE** section, click the **Browse Images** button.
1. Browse to the sprite sheet file.
1. Click the desired file.
1. Click **Open**. The **Import and Merge** window will display.

!!! note

Make sure that the image is not too big, otherwise performance issues could occur.

## 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:
1. Within the **Import and Merge** window, select **Import as Sprite sheet**.
1. The frame size must be defined to match the size of each sprite. Most sprite sheets will have this be an even number.
1. 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.
Expand All @@ -50,10 +50,10 @@ To complete this method, the following requirements must be met:

## 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)
1. Click the **Import** button.
1. A confirmation will display stating this will replace the current animation. Click **OK**.
1. The animation will be imported into split files, and a preview of the animation will play on the upper right.
1. Make any further needed adjustments needed.
1. Click **Save**. The animation will be created for the sprite object.
1. Repeat as needed for each additional animation and sprite sheet.
![](/gdevelop5/tutorials/piksel-sprite-sheets/pasted/20200330-025608.png)

1 comment on commit 1d637d4

@vercel
Copy link

@vercel vercel bot commented on 1d637d4 Apr 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gdevelop-wiki – ./

gdevelop-wiki-gdevelop.vercel.app
gdevelop-wiki-git-main-gdevelop.vercel.app
wiki.gdevelop.io

Please sign in to comment.