particles

HTML5 game development blog

<!-- a HTML5 game development blog -->

Pages

twitter account

Monday, July 22, 2013

Tutorial 3 - Dragon of Bosnia: Classes in JavaScript - Making a Loading Bar Class

So this tutorial is on classes, I guess you know that they are quite important when it comes to programming and i hope you know what they are already, but we will do a little recap, so we can move on confidently to the game programming stuff. We will also make a class out of our loading bar from the previous tutorial so we can change it quickly to our liking.

Short introduction to classes and objects
When i learned about classes in school i remember that in a textbook they where explained with an example using cars. I guess that's good everything explained using cars is quite understandable, we all know cars. But I am bad at drawing cars so I will use trees instead to explain the concept. 

We know what trees are, they are big, they grow, have leafs and we can chop them down and make furniture. So that are the basics of being a tree but there are all sorts of them out there, a tree can be a oak, a pine or a palm tree which are all quite different but have the same basic properties in common like the having leafs thing and being chopped down for furniture. 

So our Tree class would be a basic concept a template of sorts of what a tree is with it's properties and methods, and we can use our Tree class to create specific tree objects (or instances) like a pine tree or a palm tree which are different from one another in some of the properties but both are still trees and inherit from our class.

Trees


That's it for the intro now let's see what a real life class looks like in our favorite programming language JavaScript.

A class in JavaScript
I guess we will stick with the tree example to illustrate what classes look like in JavaScript so let's plant a Tree class.

And voila that's it, we have our Tree class. As you can see a class in JavaScript is just a function and it is called an Object Constructor, which is exactly what it does, it constructs objects from a blueprint. To create an object from our Tree class we use the new keyword as we have done before with the classes from EaselJS.

We can pass arguments to the class as we did here with the type variable so we know if it's a palm or a pine. Maybe you ask yourself what the this keyword in front of the treeType variable is doing and why we did't use var for declaring a variable as before. Basically the this keyword tells us that the variable is an object variable (or instance variable) because it is inside our constructor it refers to our Tree class and it will refer to the objects created with it like our pine. So when we created our pine object and given it a type we can access the variable like this:

That are the basics of what a JavaScript class is but there is one more thing we have to discuss before moving on to our loading bar. And it is adding methods to the class using prototype. Everything you create in JavaScript has a prototype object associated with it. Everything we define inside that prototype applies to all the objects created from our class it is shared not duplicated. We can add to it the method grow() which is a method for trees to grow. We add the method to the prototype of our Tree class like this:

As you can see we add things to the prototype by specifying our class than we say that we want to add something to it's prototype and then we add our variable the usual way in our case the variable is a function called grow(). There is one more thing to do we wrap our class in an anonymous function so we don't pollute the global scope and here it is our very own tree class:

Lines 1, 11 & 12 are our wrapper function everything else we saw earlier.

We will leave it at that now that we know enough about classes in JavaScript to write one for our loading bar. Let's move on to our previous code and change it so our loading bar makes a big step and becomes a class.

Our very own LoadingBar class
We will start with the whole code for the LoadingBar class because most of it we have written in the last tutorial and we will see what had to be changed to make it a class and also see the concepts explained in our tree example at work. So here goes the LoadingBar class and than follows the explanation line by line:

Lines 1, 52 & 53 are again our anonymous wrapper function so we don't pollute the global scope.

Line 3: Here we define our LoadingBar class the usual way we learned before and give it the arguments - width (width of the loading bar), height (height of the loading bar), padding (padding between loading bar and frame), color (color of our loading bar given in any CSS format of our liking), frameColor (the color of the frame).

Lines 6 - 10: This we have't seen before but it's nothing special we just give our arguments some default values so if we create a loading bar without specifying width, height and the other arguments we will just create a default one.

Line 13:  This here is very important we call the initialize method for our class, which handles all the setup for a new object when it is created. We pass it the arguments from our class.

Line 17: We want our class to inherit from the EaselJS Container class, so we setting it's prototype to be a new Container instance.

Line 21: Because we will write our own initialize method for our class we have to save the one of the Container class so it is not overwritten, and we call it later in our own initialize method.

Line 24 - 50: Here we define our initialize method for the loading bar class and adding it to the prototype, also passing the arguments. First thing we do in the initialize method on line 27 is to call the initialize method of the Container class we saved before. All the other code from line 30 until line 49 is the same code for making a loading bar we had in the previous tutorial we just moved it here and added the this keyword in front of the variables so that they apply to our LoadingBar class and give them the values of our passed arguments.

And that's it this is our LoadingBar class. Now we just modify the code in our other functions to accommodate this.

In our init() function we remove all the code that was specific to creating our loading bar and add just this one line:

This creates a instance from our LoadingBar class called bar and gives it some values for our arguments this time we give our loading bar a fancy red color. And we also have to change the line stage.addChild(loadingBarContainer); from before to the line stage.addChild(bar); And with this changes our final init() function will look like this:
There is one last line we have to change in the handleProgress() function. We just change the line loadingBar.scaleX = preload.progress * loadingBarWidth; to bar.loadingBar.scaleX = preload.progress * bar.width; so we access the variables of our bar instance correctly. And now our handleProgress() function will look like this: And this is it we promoted our loading bar to a LoadingBar class and made it with a new fancy red color because we can do it now easily and if we don't like it tomorrow we just change it in a second. And here is how our new loading bar looks like in the real world on our working canvas:

Our working canvas example
alternate content

If we don't like our new bigger, better, more red loading bar we can always create our default one by creating a LoadingBar instance with no arguments passed to it, or we can make a whole new design in size and color. So that's it our tutorial on classes. As always you can find the source code for this example on GitHub:


And next time we start we the real thing (the game programming) by adding our hero and making him move on our command. So be sure to come back. Also if you have questions or find something wrong with this or any other tutorial be sure to tell me. Cheers!

17 comments:

  1. Thank you! I hope you will continue doing these tutotials.

    ReplyDelete
    Replies
    1. thx, sure i will continue soon, I planned to do a small one on variable scope, and than the next one to add the player and move around, also some particle stuff... so be sure to check again in the next weeks

      Delete
  2. Small point. Bamboo is a grass not a tree. Otherwise, keep up the good work!

    ReplyDelete
    Replies
    1. LoL dude thx for the info, i'll correct it immediately. I guess knowledge can come from strange places. :)

      Delete
  3. Hi, would love if you continued this even though its been so long, your tutorials are pretty good :)

    ReplyDelete
  4. Thank you! I hope you will continue doing these tutotials. For more details please visit http://www.appshah.com/

    ReplyDelete
  5. Nice to see more HTML5 game dev info. I like your style. Found your site searching Google for JavaScript, classes and game development :)

    ReplyDelete
    Replies
    1. Thx for the nice comment I'm glad it's helpful. There was not that much around when I wanted to learn about HTML5, so when i got some hangs of it I began to write these articles to help people get a starting point at least, but that changed a bit lately there is more resources now as HTML5 is getting wider use.
      I hope to continue writing more articles, but time is always a problem :(

      Delete
  6. Thank you! i want to put another background in preloading. can you help me?

    ReplyDelete
  7. Hello Amar the explanation is very good, when is the next tut coming out? even thought it is a while ago.
    I am making my own game and you helped me very well!!

    ReplyDelete
  8. HTML5 accessibility is a work in progress. In terms of browser and assistive technology support, it appears the large portion of work is planned in 2013 and 2014 using the HTML5 accessibility mapping guide. I think, many changes and improvements from HTML4 are possible very soon. Well, nice write up you shared.

    ReplyDelete
  9. Pretty sad these tutorials stopped. Quite interesting!

    ReplyDelete
  10. HTML5 Training in Chennai HTML5 Training in Chennai JQuery Training in Chennai JQuery Training in Chennai JavaScript Training in Chennai JavaScript Training in Chennai Full Stack Developer Training in Chennai Full Stack Developer Training in Chennai

    ReplyDelete
  11. AngularJS Training in Chennai AngularJS Training in Chennai Node.js Training in CHennai Angular 2 Training in Chennai Angular 2 Training in Chennai Node.js Training in CHennai Node.js Training in chennai MEAN Developer Training in Chennai

    ReplyDelete
  12. Typically, slashes are placed as first characters on a line. The JavaScript interpreter ignores them and any text after the slashes until it reaches the end of the line.
    learn web design

    ReplyDelete