Learning Outcomes

Learning intention: how to create pixel characters (sprites) for digital outcomes.

  1. To understand images can be made from pixels.
  2. To convert a design into a graphical image.
  3. To use drawing software to create sprites.
  4. To import graphical images into a program.


Speech Pixel - tongi


Speech Data - raraunga



Data representation

Edit Kōrero Mai

Recap - How are sprites created on a computer?

A pixel is one of the many small squares that make up an image on a computer screen.

Edit

The more pixels there are, the more the image looks realistic or accurate.

Any digital image is made up of pixels, and when someone talks about the resolution of a computer monitor or TV screen, they’re referring to the number of pixels.



Now it’s your turn!

Remember the ideas behind Design Thinking?

Edit

You are now going to use your pixel sprite design from the previous lesson to make a prototype for your educational game!

Edit



Creating a sprite in PixilArt

Edit Head to Pixilart: https://www.pixilart.com

Edit When you first open up PixilArt, you will see this box pop up:

Edit

Edit You need to change the sizes of the grid to match your pixel design:

  • Change width from 100 to 30
  • Change height from 100 to 30

Edit You can select a colour palette if you wish, or just leave the standard one.

Edit Now click the new drawing button.



The PixilArt work space

Here is the work space in PixilArt:

Edit



How can we make an emoji?

Watch this video to see how to create an emoji sprite:



Let’s download our art!

Edit Click on File in the menu bar…

Edit Click on Export/Download:

Edit

Edit Now click on Download .png:

Edit

Edit Go find where you downloaded your drawing.

Edit Rename it to something like: myface.png



Time to upload our art into Repl!

Edit Click on these 3 dots:

Edit

Edit Click on Upload file:

Edit

Edit Select the image you downloaded from PixilArt.

Edit Check it’s there:

Edit



Tell our program to use our new image!

Edit Add the following code to your program, by specifying the name of the file representing your sprite. For example:

set_character("myface.png")

Edit

Edit Run your program again, and check your character is moving!

Edit



Edit Kua mutu? Finished?

Creating sprites

Can you create another pixel character for your educational game?

This way the user can choose their sprite!

Or, have a go at animating your sprite in PixilArt :)

Edit