Create A Running Man Animation in Pygame¶
Lesson 4: Designing Game Characters
Objective: Create characters and sprites for the game.
Activities:
Discuss character design principles.
Create and animate a character sprite.
Interdisciplinary Links: Art (character design, animation).
第 4 课：设计游戏角色
目标：为游戏创建角色和精灵。
活动：
讨论角色设计原则。
创建并制作角色精灵的动画。
跨学科链接：艺术（角色设计、动画）。
import pygame
import os
# Initialize Pygame
pygame.init()
# Constants
WIDTH, HEIGHT = 800, 400
FPS = 10 # Frame rate for animation
frame_count = 5
# Load images
frames = []
for i in range(1, frame_count + 1):
image_path = os.path.join("path_to_your_images", f"picture{i}.png") # Change this to your image path
frames.append(pygame.image.load(image_path))
# Setup the display
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Running Man Animation")
clock = pygame.time.Clock()
# Main loop
running = True
current_frame = 0
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Clear the screen
screen.fill((255, 255, 255)) # Fill with white background
# Draw the current frame
screen.blit(frames[current_frame], (WIDTH // 2 - frames[current_frame].get_width() // 2, HEIGHT // 2 - frames[current_frame].get_height() // 2))
# Update the frame for the next loop
current_frame = (current_frame + 1) % frame_count
# Update the display
pygame.display.flip()
clock.tick(FPS)
pygame.quit()
“path_to_your_images” should be either an absolute path or a relative path to the directory where your images are stored.
Absolute Path: This includes the full path from the root of your file system (e.g., C:\Users\YourName\Documents\YourImages on Windows or /home/username/images on Linux/Mac).
Relative Path: This is relative to the location of your Python script (e.g., images/picture1.png if the images are in a folder named “images” within the same directory as your script).
Make sure the path correctly points to your image files for the program to load them successfully.
Principles of Character Design¶
Silhouette: A strong silhouette makes a character easily recognizable. The shape should convey the character’s personality or role.
Proportions: Different proportions (e.g., large head vs. small body) can suggest age or character traits. Exaggeration can enhance expressiveness.
Color Scheme: Use colors that reflect the character’s personality. Bright colors can indicate playfulness, while darker tones may suggest mystery or danger.
Facial Expressions: The face should convey emotions clearly. Consider how facial features can change to express happiness, anger, surprise, etc.
Costume Design: Clothing can tell a lot about a character’s background, personality, and role. Consider textures and colors that match the character’s traits.
Backstory: A well-defined backstory can influence design choices, giving depth to the character.
Consistency: Ensure that the character maintains consistent features across different poses and animations.
Design a Walking/Running Cycle¶
Key Frames: A typical walking cycle has four key poses:
Contact (one foot touches the ground)
Recoil (the body lowers slightly as the weight shifts)
Passing (one leg moves forward past the standing leg)
High Point (the body rises again)
For running, the key poses are similar but more exaggerated.
The walk cycle is built from four poses; the contact, the low pose, the passing pose and the high pose, after which we walk back into the contact pose. In the contact pose, the tip of the front heel contacts the ground.
Frame Count:
Walking Cycle: Usually 8–12 frames. Running Cycle: Usually 6–10 frames, as the movement is faster. In-Betweens: Fill in between the key frames to create smooth transitions.
Motion: Consider how the character’s body moves as a whole. Arms and legs should have a counter-motion (e.g., when the right leg moves forward, the left arm does too).
Examples:
Designing a Running Character Using Pixilart¶
Create a New Project:
Open Pixilart and start a new canvas (consider a size like 64x64 pixels for a small character). Sketch the Character:
Use a pencil tool to sketch the basic shape of your character in a neutral pose. Focus on silhouette and proportions. Define Key Frames:
Draw the key frames for the running cycle based on the principles mentioned. Start with the contact pose, then draw the recoil, passing, and high point poses. Add Details:
Once you have the key frames, add details like facial features, clothing, and colors. Ensure that the design is consistent across frames. Create In-Betweens:
Draw the in-between frames to smooth out the motion. Focus on making the transitions fluid. Animate:
Use the animation feature in Pixilart to test your running cycle. Adjust timing and spacing to ensure the motion feels natural. Export Your Animation:
Once satisfied with the animation, export it as a GIF or PNG sequence.
Draw frames for animation in Pixilart¶
Recommended Actions for Running Animation: To depict a running character effectively, consider these key actions for your frames:
Starting Pose: The character in a neutral position before starting to run.
First Step: One leg forward, arms in motion.
Mid-Stride: The character in the middle of a stride, with arms and legs extended.
Second Step: The opposite leg forward, with a different arm position.
Full Stride: The character fully extended, representing maximum reach.
Landing Pose: Character preparing to land with one leg down.
Recovery Pose: The character regaining balance before the next step.
Repeat Cycle: Return to the starting pose.
Using these poses will help create a smooth running cycle. You can also use onion skinning features in Pixilart to see the previous frames as you draw, which can help with consistency between frames.
Useful Links¶
How to Animate the PERFECT Walk Cycle for Beginners in Krita
12 Principles of Animation Flipbook Set by Flipboku