🌟 What is a Sprite?
Definition
A sprite is a graphical object with properties we can change to alter or animate it on the canvas.
In Games
Everything in a game - characters, platforms, floating boxes - are all sprites with properties for size, position, and color.
Organization
Sprites help organize all the variables needed to define how objects look, where they are, and how they move.
P5.play
P5.play creates sprite objects that make game programming much easier and less confusing.
🎬 Creating Your First Sprite
2 var ball = new Sprite();
3
5 ball.diameter = 75;
6 ball.color = "yellow";
🔗 Understanding Dot Notation
Dot notation allows us to assign values to sprite properties
spriteName.propertyName = value;
Example: ball.diameter = 75;
How it works:
- Take the sprite variable name (ball)
- Connect it with a DOT (.)
- Add the property name (diameter)
- Use = to assign a value (75)
🎯 Sprite Properties
diameter
Defines a circle sprite's size
1 ball.diameter = 100;
width & height
Define a rectangle sprite's shape
1 box.width = 120;
2 box.height = 75;
color
Defines the sprite's fill color
1 ball.color = "yellow";
stroke
Defines the outline of the sprite
1 ball.stroke = "white";
x & y
Define sprite's position on axes
1 ball.x = 300;
2 ball.y = 350;
rotationSpeed
Makes sprite continuously rotate
1 box.rotationSpeed = 1;
🎥 Key Ideas from Video 3.4.1
- Sprites are objects that organize all the variables needed for game elements
- Create a sprite using:
var name = new Sprite();
- Dot notation connects sprite names to their properties with a dot
- P5.play sprites automatically position themselves in the center when X and Y are not defined
- The diameter property defines a circle's size (in pixels)
- Width and height properties define rectangle shapes
- The color property sets the sprite's fill color
- The stroke property defines the outline color of a sprite
- X property measures pixels from the LEFT edge of the canvas
- Y property measures pixels from the TOP edge of the canvas
- The draw function automatically redraws sprites on the canvas each frame
- Rotation speed makes sprites spin - higher values = faster rotation
📐 Understanding Coordinates
The Canvas Coordinate System
(0, 0) is at the TOP LEFT corner
X increases as you move RIGHT → (from left edge)
Y increases as you move DOWN ↓ (from top edge)
Video Example: The ball at position x=300 and y=350 means it is 300 pixels from the left edge and 350 pixels from the top edge of the canvas.
📺 Examples from the Video
Example 1: Yellow Ball on Pink Canvas
Setup: Ball sprite created with diameter of 75 and color yellow
Result: Ball appears in center because no X and Y were defined
Key Point: P5.play automatically centers sprites when position isn't specified
Example 2: Positioned Ball
Setup: ball.x = 300; and ball.y = 350;
Result: Ball drawn at specific location (300 pixels from left, 350 from top)
Key Point: X and Y properties control exact sprite positioning
Example 3: White Outlined Ball on Purple Canvas
Setup: stroke property set to white, color set to same purple as canvas
Result: Ball appears transparent with white outline
Key Point: Matching fill color to canvas makes sprites look transparent
Example 4: Rotating Pink Box on Black Canvas
Setup: box.width = 120; box.height = 75; box.rotationSpeed = 1;
Result: Pink rectangle rotates continuously in center
Key Point: Higher rotation speed values make sprites spin faster
💡 Pro Tips for Creating Sprites
Always Use Dot Notation: Connect sprite names to properties with a dot (.)
Circle vs Rectangle: Use diameter for circles, width and height for rectangles
Center Position: When you don't set X and Y, sprites appear in the canvas center
Coordinate System: X measures from left, Y measures from top - both start at 0
Test Frequently: Run your code after adding each property to see immediate results
Variable Names: Choose clear sprite names like 'ball', 'box', 'player' for easy understanding
🎯 Today's Activities
Activity 1
Sprite Face
Create a face using circle sprites with dot notation
Activity 2
Shapeshifter
Explore transforming sprites by changing properties
Activity 3
Downhill Delights
Build a winter scene with multiple positioned sprites
Challenge
Block Mario
Create a game character using advanced sprite techniques
