Using external images and sprites

Graphical assets / sprites are very important for any succesful game. At codeguppy.com you have different options for implementing graphics for your game.

  1. Use built-in sprites. This is the recommended method for majority of users. Please refer to the following tutorial on how to use the built-in sprites.

  2. Use in-code defined sprites. This method is recommended for people that like to draw their own sprites on paper. It works great when you design retro looking games. Please refer to this tutorial on how to use in-code defined sprites.

  3. Build sprites from external images.

This article is focusing on the 3rd method. This option is for advanced users but if you are ready for a challenge, please continue to read.

Step 1: Host images on an external server

Start by uploading your images on an external webserver. It is important that each images gets its own unique url that you can use later on.

For hosting images you can use:

  • A regular webserver
  • A github account (like this repository. Make sure you turn on github pages option)
  • An image hosting service (example https://imgbb.com/)

If you are a teacher or educator, please perform this step ahead of time and then provide kids with the url of the images.

Step 2: Load the images in codeguppy.com

codeguppy.com programs can stream and display images from external urls. For this, you need to use the loadImage function:

loadImage(url, onImageLoaded);

This function expects the Url of the image and will trigger the provided onImageLoaded callback when the image finishes loading.

Example:

loadImage("https://codeguppyprograms.github.io/ExternalImages/ninja/run0.png", img => {
    image(img, 10, 10);
});

Example: https://codeguppy.com/code.html?AI2Gs8jAKHRHsVpWWCBl

Step 3: Load multiple images

With the ability to load an image from a remote server, you can move ahead and load a series of images, like the frames of an animated sprite.

This example shows how to load multiple images, and trigger a function when all of them were loaded:

Example: https://codeguppy.com/code.html?5lwOH4VAbjTfTBzEoLbr

Step 4: Loading sprites

You can change the code above slightly to load images and create the sprite in the function itself:

Example: https://codeguppy.com/code.html?TTcoHr5OVqJAAGlWQvV1

Step 5: Loading multiple sprites

You can use the above function to load multiple sprites. Eventually, you can put the sprite loader functions in a “hidden” module:

Example: https://codeguppy.com/code.html?NlZXS33bYvERs8Ry8UXt

Note:

If images are small, you can encode them MIME64 and store them directly in the code (no extra server involved). This is practical only for small size images, otherwise the code will get too big and codeguppy.com server may refuse to store it.

Example: https://codeguppy.com/code.html?e9A7z9A5PsebKlfFSc3I

Credits:

Read more blog articles Browse JavaScript projects

About codeguppy

CodeGuppy is a FREE coding platform for schools and independent learners. If you don't have yet an account with codeguppy.com, you can start by visiting the registration page and sign-up for a free account. Registered users can access tons of fun projects!

Follow @codeguppy on Twitter for coding tips and news about codeguppy platform. For more information, please feel free to contact us.