Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
223 lines (143 sloc) 7.36 KB

Step 2: Adding The Player Sprite


We made a blank canvas in Step 1:                                                   

Eventually in step 3, we want to add a player sprite that follows the mouse:
But for now (step 2) we are just adding a sprite that does not move:                 

Outcome of This Step

After you finish this step, you will learn how to add the player sprite. Here is the code you will end up with (the new code is highlighted in gray):

Choose Your Own Path

Walk Through of the Code Step-By-Step

Creating the Actual Sprite

We can create a sprite by writing the code:


Because we only want to create the sprite once, we want to write this in the setup function because the setup function is only run once.

  • Go ahead and createSprite(); at the bottom of the setup function:

Do you see the sprite created above on the top left hand side of the canvas?

Over the sections below, we're going to slowly add to the createSprite() function

Centering the Sprite Horizontally

Let's center the sprite horizontally. Since our canvas is 250 pixels wide, the center of it is 125.

To set the x coordinate of our sprite to 125 we can change our code to the following:

              └ sets the *x* coordinate of sprite to 125
  • Update your createSprite function to createSprite(125);.

Centering the Sprite Vertically

Let's center the sprite vertically too. Since the canvas is 500 pixels in height, the center is 250.

Let's set the center of the sprite to 250

createSprite(125, 250);
                   └ sets the *x* coordinate of sprite to 250

Understanding the Coordinate System

Here is how the coordinate system is laid out:

And this is what means for our sprite to have it's coordinates set to x = 125 and y = 250

Shrinking the Width

I want to make the width of the sprite a bit smaller. The width is by default 100. Let's make the width 50 instead.

createSprite(125, 250, 50);
                       └ sets the *width* of the sprite to 50 pixels.
  • Modify your code so that it reflects the above:

Shrinking the Height

Let's make the height 50 pixels instead of the default 100 as well.

createSprite(125, 250, 50, 50);
                           └ sets the *height* of the sprite to 50 pixels

  • Modify your code so that it reflects the above:

Recap of createSprite

createSprite(150, 100, 50, 50);
              ^    ^    ^   ^
              |    |    |   └ height
              |    |    |
              |    |    └ width
              |    |
              |    └ y-coordinate
              └ x-coordinate

Remembering the Sprite

In order for a computer program to remember something exists, it needs to store it in a variable.

So although, we have already created the sprite, the program will not remember it unless you store it in a variable.

Let's create a variable named player:

var player;
  • Go ahead and add this line to the top of your code:

Now that the variable is created, we can assign the output of the createSprite function to player.

player = createSprite(125, 250, 50, 50);
  • Go ahead and update your code with this change:

And that's a wrap!

The section immediately below is the "Give me a brief overview of this code". You already did the "Walk me through this code step-by-step" section so there's no need to do it.

Click here to skip to the next section.

Brief Overview of the Code

Reproduced below is the code that adds the new sprites:

New lines marked with // <-- NEW LINE.

var player;                                 // <-- NEW LINE

function setup() {
  createCanvas(250, 500);

  player = createSprite(125, 250, 50, 50);  // <-- NEW LINE

function draw() {
  background(255, 240, 220);
  • Go ahead and add the NEW LINES to your code:

Brief Explanation

player = createSprite(150, 100, 50, 50);
      ^                  ^    ^    ^   ^
      |                  |    |    |   └ sprite height
      |                  |    |    |
      |                  |    |    └ sprite width
      |                  |    |
      |                  |    └ sprite y-coordinate
      |                  |
      |                  └ sprite x-coordinate
      └ the variable where
        the new sprite being
        created is stored

Next Up

3. Mouse Movement


1. Initial Setup] (
2. Add Player Sprite] (

3. Mouse Movement

4. Dribble Ball

5. Add Goal

Back to the