YOUR GUIDE TO

Images, Sounds and Sprites on the Canvas

We call these assets! If you are giggling, good on ya!

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

Image for post
Image for post

Dr Abstract tends to work a lot with geometric shapes but of course, any image can be used on the canvas including animated images called Sprites. Sounds and fonts are loaded the same way and we call all these things assets. Let’s take a look!

In the above Pen, we bring in the car asset and four different sounds: two wild beasts and two roaring car engines. You get to adjust the mix with the ZIM dials in this fun interactive soundscape.

How to Load Assets onto the Canvas

We are using the ZIM JavaScript Canvas Framework. For alternatives, please see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

In ZIM, we have a template with a Frame that sets up the canvas and our stage. See ◎ Your Guide to Setting up an Editor and Template to Code on the Canvas. The template looks something like this:

// TRADITIONAL TEMPLATEconst frame = new Frame();
frame.on("ready", ()=>{
// put your code here state.update();
});

We can load assets right into the Frame() and then use the global asset() function to receive them (or use the frame.asset() method):

const frame = new Frame({assets:"pic.jpg"});
frame.on("ready", ()=>{
asset("pic.jpg").center(); state.update();
});
// -----------------
// you can also specify multiple assets in an array
// and use the the path parameter to specify a path
// -----------------
const frame = new Frame({
assets:["pic.jpg", "sound.mp3"],
path:"assets/"
});
frame.on("ready", ()=>{
asset("pic.jpg").center();
asset("sound.mp3").play();
state.update();
});

WARNING: if working locally on your desktop, Browsers will give a security error when interacting with images or sound on the canvas. This can be solved by following the simple instructions at ZIM Tips for IMAGES. Also, sound cannot play until the user interacts with the app. See ZIM Tips for SOUND.

LET THERE BE SPACE!

Why don’t you code along with us using this Online Editor. The editor already has the Frame built in so we will use the loadAssets() method which works the same way but has a complete event. Copy or type the following code into the editor and press TEST:

The editor we are using happens to be part of the ZIM Kids site. Rest assured, ZIM is used for complex and professional applications as well. Also, when exploring new things, it does not hurt to think like a kid again!

const assets = "space.jpg";
const path = "assets/";
frame.loadAssets(assets, path);
frame.on("complete", ()=>{
asset("space.jpg").addTo();
stage.update();
});
Image for post
Image for post

ANIMATING AN ASTEROID

We have space! So, obviously, we should add an asteroid and blow it up! We add multiple assets and animate the asteroid. If you want, you can check out ◎ Your Guide to Animation on the Canvas with JavaScript. Note that we do not need the stage.update() because we are animating. Adjust your code as follows:

const assets = ["space.jpg", "a0.png", "boom.mp3"];
const path = "assets/";
frame.loadAssets(assets, path);
frame.on("complete", ()=>{
asset("space.jpg").addTo();
const asteroid = asset("a0.png")
.centerReg()
.animate({
props:{rotation:360},
time:10,
ease:"linear",
loop:true
});
});
Image for post
Image for post

THE BOOM SOUND! (in space?)

Let’s add interactivity. Adjust the code so that when we mousedown on the asteroid we make it disappear and play the explode sound. Note that we added a cur() to the asteroid to show a finger when we rollover. Adjust your code to the following and TEST. Press on the asteroid to make it disappear.

const assets = ["space.jpg", "a0.png", "boom.mp3"];
const path = "assets/";
frame.loadAssets(assets, path);
frame.on("complete", ()=>{
asset("space.jpg").addTo();
const asteroid = asset("a0.png")
.centerReg()
.cur()
.animate({
props:{rotation:360},
time:10,
ease:"linear",
loop:true
});
asteroid.on("mousedown", ()=>{
asset("boom.mp3").play();
asteroid.removeFrom();
stage.update();
});
});
Image for post
Image for post

SPRITE EXPLOSION!

Finally, we will add a Sprite to animate an explosion. You have seen sprites, for example, in games to make the animated characters. Sprites use what is called a SpriteSheet which is an image with multiple pictures that when played in sequence, form an animation — like how a movie works. Here is what the sprite sheet for our explosion looks like:

Image for post
Image for post

This sprite sheet has eight columns and six rows that are all divided equally. Often, the sprite sheet is packed in with a tool such as TexturePacker to save space. In this case, an additional data file is needed often in the form of a JSON file. We can load this in ZIM in the same way as the other assets. Please see the ZIM Docs for Sprite.

Add the SpriteSheet to the assets array and create the Sprite object with 8 columns and 6 rows, when we click on the asteroid. We also have to run() the sprite. The run() method is like animate() with many parameters such as time (duration) and looping. The default run time is one second which is good for our explosion.

const assets = ["space.jpg", "a0.png", "boom.mp3", "boom.png"];
const path = "assets/";
frame.loadAssets(assets, path);
frame.on("complete", ()=>{
asset("space.jpg").addTo();
const asteroid = asset("a0.png")
.centerReg()
.cur()
.animate({
props:{rotation:360},
time:10,
ease:"linear",
loop:true
});
asteroid.on("mousedown", ()=>{
asset("boom.mp3").play();
asteroid.removeFrom();
new Sprite(asset("boom.png"), 8, 6)
.sca(2)
.centerReg()
.run();
stage.update();
});
});
Image for post
Image for post

You will note that we used centerReg() for our asteroid and explosion. This is looking ahead to when the asteroid might be moving. When that is the case, we would use explosion.loc(asteroid) and the explosion would be placed on the asteroid because their registration points are both in the middle of their shapes. For information on registration points, go to ◎ Your Guide to Coding Concepts with the Colorful Canvas.

CONCLUSION

We have seen how to add images, sounds and sprites to the canvas. There are some handy ZIM Tips on IMAGES and SOUND such as using the ZIM clone() method for more than one copy of the same image. The sound tips show how to set volume, loop, pause and start, etc. There are also AudioSprites which are collections of sound in one file. ZIM Synth lets you originate sounds right in ZIM.

Images are ZIM Bitmap() objects. A Bitmap is a DisplayObject so has all the methods to transform, animate, drag, etc. You can let the user upload images or save images with the ZIM Loader() class.

Image for post
Image for post

Further reading

There are controls in ZIM that work with assets such as a Scroller(), Dynamo() and Accelerator(). These are discussed in ◎ Your Guide to Controlling the Canvas with JavaScript.

Of course, the ZIM site has many examples with images, sound and sprites!

The canvas is a great place to code creativity. Please read ◎ Your Guide to Coding Creativity on the Canvas if you have not yet. This overall guide has links to the individual guides of which this guide is a part.

All the best! Dr Abstract.

Image for post
Image for post

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store