Stencyl: Creating a walking animation from Piskel

Web Craftie
28 Jul 201606:11

TLDRThis tutorial demonstrates how to create a walking animation for a game character in Stencyl using Piskel, a pixel art tool. The process involves duplicating frames, adjusting pixel sizes, and refining the character's movement to achieve a natural walking cycle. The video also covers exporting the sprite sheet, flipping the animation for a left-walking version, and importing the new graphics into Stencyl for testing. It briefly touches on adjusting collisions and suggests applying similar techniques for other animations like jumping.

Takeaways

  • 🔄 Duplicate frames to create a simple walking animation without redrawing each time.
  • 🎨 Convert the animation to 32 pixels for easier working and editing.
  • 👣 Adjust the leg position to create the illusion of forward and backward movement.
  • 🖌️ Use shading to enhance the appearance of the walking animation.
  • 🔄 Export the sprite sheet in a 2x2 layout to match the number of frames.
  • 🔄 Flip the frames for a 'walk left' animation from a 'walk right' animation.
  • 📁 Save and import the sprite sheets into Stencyl for use in the game.
  • 🔢 Remember to resize and adjust the scale of the images if necessary.
  • 🔄 Correct the collision settings for 'walk left' and 'walk right' animations.
  • 🛠️ Apply the new graphics to the game's behaviors to replace the old ones.
  • 🔄 Understand that changing other graphics, like jumping or running, follows similar steps.

Q & A

  • What is the purpose of duplicating frames in the animation process described in the transcript?

    -Duplicating frames simplifies the animation process by reducing the need to redraw the character for each frame, ensuring consistent timing and making the animation smoother.

  • Why does the speaker decide to convert the animation back to 32 pixels?

    -The speaker prefers working with 32 pixels because it was easier and they liked the results, suggesting a preference for a specific level of detail and control in the animation.

  • How does the speaker approach creating the walking animation for the character?

    -The speaker creates the walking animation by adjusting the character's leg positions to simulate forward and backward movement, and then adjusting the shading to enhance the visual effect of the steps.

  • What is the significance of exporting the animation as a sprite sheet with a specific layout?

    -Exporting as a sprite sheet with a 2x2 layout organizes the animation frames in a grid, which is necessary for the animation to be correctly displayed and looped in the game engine.

  • How does the speaker create a walk left animation from the walk right animation?

    -The speaker creates a walk left animation by flipping all the frames of the walk right animation, which effectively mirrors the movement for a leftward walking motion.

  • What is the importance of resizing the animation frames and why might it be necessary to adjust the size?

    -Resizing the animation frames is important to ensure they fit within the game's design parameters. Adjusting the size might be necessary if the frames were initially too large or too small for the game environment.

  • Why does the speaker mention multiplying everything by ten and what was the consequence of forgetting to do so?

    -Multiplying by ten might be a scaling factor to adjust the size of the animation frames. Forgetting to do so resulted in the need to resize and re-export the frames to correct the issue.

  • What does the speaker mean by 'collisions' in the context of the walk left and walk right animations?

    -In the context of game development, 'collisions' refer to the boundaries or hitboxes of the character that interact with the game world. The speaker forgot to adjust these for the walk left and right animations.

  • How does the speaker suggest changing the jumping or running animations, and why is it similar to the walking animation process?

    -The speaker suggests using the same concepts and ideas from the walking animation to change the jumping or running animations, implying that the process of adjusting frame positions and timings is consistent across different types of movement.

  • What is the final step the speaker describes in integrating the new walk animations into the game?

    -The final step is to go to the game's behaviors section and replace the old walk animations with the new ones, ensuring that both walk right and walk left animations work correctly in the game.

Outlines

00:00

🎨 Animation Frame Duplication and Pixel Art Adjustments

The speaker discusses the process of animating a character by duplicating frames to simplify the animation workflow. They mention converting the animation from 4 frames to a 32-pixel format, which they find more comfortable. The animator then describes adjusting the character's limbs and shading to create a walking motion, emphasizing the importance of timing and simplicity in animation. They also touch on exporting the animation as a sprite sheet in a 2x2 layout and importing it into a software tool called 'stencil' for further use. The process includes flipping the frames for a 'walk left' animation and resizing the images to correct proportions.

05:02

🔄 Implementing New Graphics and Adjusting Collisions

In this paragraph, the focus shifts to integrating the newly created walk animations into a game or software. The speaker explains how to replace existing graphics with the new 'walk right' and 'walk left' animations within the software's behaviors. They also mention testing the animations to ensure they work correctly, including the idle states. However, they realize that they forgot to adjust the collision settings for the new walk left and right animations, which is a necessary step. The speaker suggests that the audience should apply the same principles used in previous animations to make these adjustments, also hinting at the need to adjust jumping or running animations with similar techniques.

Mindmap

Keywords

💡Piskel

Piskel is an online pixel art editor used for creating animations and sprites. In the context of the video, it is the tool used to create the walking animation for a character in a game development process. The script mentions duplicating frames and adjusting pixel sizes, which are common tasks in Piskel when creating animations.

💡Animation

Animation refers to the process of creating the illusion of motion in a sequence of images. In the video, the creator discusses making a walking animation by duplicating and adjusting frames in Piskel, which is a fundamental aspect of animating a character's movement in game design.

💡Sprite

A sprite is a two-dimensional bitmap that is integrated into a video game as a character, object, or scenery. The script describes creating a sprite sheet for a character's walking animation, which is a collection of images that represent different frames of the animation.

💡Frame

A frame in animation is a single image in a sequence that, when displayed in rapid succession, creates the illusion of movement. The video script talks about duplicating frames and adjusting them to create a smooth walking animation, emphasizing the importance of frame manipulation in animation.

💡Pixel Art

Pixel art is a form of digital art where images are created on the pixel level. The video script mentions working with pixels, indicating that the animation is being created in a style that emphasizes individual pixels, which is common in retro video games and modern indie games.

💡Sprite Sheet

A sprite sheet is a larger image containing several smaller images in a grid, where each small image represents a frame of an animation. The script describes exporting the walking animation as a sprite sheet with two columns and two rows, which is then used in the game engine Stencyl.

💡Stencyl

Stencyl is a game development platform that allows users to create games without writing code. In the video, Stencyl is used to import the sprite sheet created in Piskel and to set up the walking animation for a game character.

💡Duplicate

In the context of the video, duplicating refers to creating copies of an existing frame in the animation to simplify the animation process. The script mentions duplicating frames to maintain consistency in the timing of the walking animation.

💡Collision

In game development, collision refers to the interaction between objects in the game world. The script briefly mentions changing collisions for the walk left and right animations, which is important for ensuring that the character interacts correctly with the game environment.

💡Behavior

In Stencyl, a behavior is a set of instructions that define how an actor in the game should act. The video script discusses replacing the default behaviors with new ones that incorporate the custom walking animations created in Piskel.

💡Export

Exporting in the context of the video means saving the animation or sprite sheet in a format that can be used in another program, such as Stencyl. The script describes exporting the walking animation as a sprite sheet from Piskel to be imported into Stencyl.

Highlights

Creating a walking animation by duplicating frames for simplicity.

Choosing a frame count for the animation, opting for four frames for ease.

Converting the animation to a 32x32 pixel size for easier manipulation.

Recreating the character's step with a specific shade to maintain consistency.

Adjusting the leg position to create the illusion of forward movement.

Using previous shades to enhance the visual appeal of the walking animation.

Creating a backward leg movement to complement the forward motion.

Switching colors to erase and refine the animation details.

Exporting the animation as a sprite sheet with a 2x2 layout.

Downloading and importing the sprite sheet into Stencyl for further use.

Creating walk left animation by flipping the walk right frames.

Adjusting the character's height in frames to add a bouncing effect.

Importing and setting up the walk left and walk right animations in Stencyl.

Multiplying the size of the animation to fit the game's scale.

Resizing and re-exporting the animations to correct the scale issue.

Adding the walk animations to the character's behaviors in Stencyl.

Testing the new walk animations to ensure they work correctly.

Adjusting collision settings for walk left and right animations.

Encouraging users to apply similar concepts to other animations like jumping or running.