CH. 03 Game Objects (PT. I) [JS Game Dev Tutorial]

Object

What is an object?

An object is an instance of a class. No more details since we are all, I assume, intermediate programmers here and understand that quite well!
How useful are objects in games?

Extremely!

If you did the assignment in the previous chapter (making more squares), you noticed you had to rewrite the object, though many properties were similar.

Complete games don't just have 1 to 10 objects, they could have thousands in just the first level! Map tiles, interactive objects, enemies, NPCs, player(s), UI, weapons, pickups, doors, buildings, etc. are all objects in themselves. Imagine having to manually write each of those by hand... not fun! That is where classes come in.
Let's make our own!

Disclaimer: this is a very basic class so that you can get an idea of how to write your own. Depending on the game and/or theme there could be significant changes!

Try to note what do all game objects have in common... answer in next paragraph.

For certain, every object will have to have an x and y placement, draw and update methods (even if not used), spritesheet or image/texture properties, and at least a reference to the width and height.

In JavaScript (pre-ES6) we don't exactly have class implementations like in C++ or Java, so we use either JS object notation or functions. I will be using functions throughout the tutorial, but will show JSON style (in part II), since I started that way.

Note: I would put classes like this in a seperate file ([superClassName.js]), but since SoloLearn does not support multiple files, I will put it in the same file. The script tag to load the file would be above the main game file.

First we write a very generic function with an abstract name. I call it a sprite, since visually everything is a sprite.
```
function Sprite(){
}
                            
```
Second, add the properties mentioned above.
```
function Sprite(x, y, width, height){
}
                            
```
Now we must use the keyword this to refer to the object in context and set their properties, not the class itself.
```
function Sprite(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
                            
```
Now, to set the functions, we use prototypes so they can be shared amongst all objects.
```
function Sprite(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
Sprite.prototype.update = function(){}
Sprite.prototype.draw = function(){}
                            
```
Finally, we fill the draw method.
```
function Sprite(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
Sprite.prototype.update = function(){}
Sprite.prototype.draw = function(){
    // Assuming ctx is global
    ctx.strokeRect(this.x, this.y, this.width, this.height);
}
                            
```
The update method will act as an abstract method due to the fact that not all objects will behave the same. More on this in a future chapter!

PS: an example can be found in the JS tab
Implementation

Okay we made our class, how do we use it? Just make a new object of said class!
```
// In our init function
squareOne = new Sprite(45, 45, 16, 16);
squareTwo = new Sprite(34, 100, 8, 8);

// In the update method
squareOne.update();
squareTwo.update();

// In the render method
squareOne.draw();
squareTwo.draw();
                            
```
That is about it! But there is one problem...

See how every square requires their own update and draw to be called ONE-BY-ONE; AND even require their own variables? If only there was a way to contain these and be able to iterate through that container and call each method individually...

Oh yeah, arrays!

See if you can implement arrays to contain and iterate through the objects. I will give a solution in part 2 of this chapter.
Thanks for reading! This chapter was getting lengthy and there is a bit more to talk about, so a part 2 is coming!

Expect JSON classes, class inherits class, and the use of arrays for cleaner code. See you next time!

CH. 03 Game Objects [PT. I]

Object

What is an object?

How useful are objects in games?

Let's make our own!

Implementation

CH 03 Game Objects [PT. I] [JS Game Dev Tutorial]