Tutorial 2 - Dragon of Bosnia: Preloading Assets and Creating a Loading Screen Using PreloadJS and EaselJS

This tutorial will be on preloading assets as the title already says. If you read the previous one (Tutorial 1 - Basic HTML, Canvas and EaselJS) you have seen that our code is executed faster then the images are downloaded and we end up with a blank canvas until we refresh the page, so we have to make sure all our assets are loaded before we execute any code. To do this we will use the PreloadJS library which has some nice features to help us in our quest. You can find the PreloadJS library here: 

• http://www.createjs.com/#!/PreloadJS

Here is a preview picture of how our loading screen will look like:

Preview picture of our finished loading screen

Fancy ain't it, so now that we know what we will be doing lets get started.

Tutorial 1 - Dragon of Bosnia: Basic HTML, Canvas and EaselJS - Drawing Images to Canvas

So in this first tutorial we will make a html canvas element and draw something in it with the help of the EaselJS library. Nothing interactive right now just the basic stuff so let's get started. And here is a preview picture of what our canvas will look like at the end.

Preview picture of our finished work in tutorial 1.

First we create a simple HTML file in which we load the necessary Javascript and create a canvas element.