Arcade Village Blog

this.onTip();
It calls an onTip () function which asks the sprites to perform their operations. Before the sprites, an onBeforeSprite () function is called. She manages general operations. It is empty in the class and must be redefined according to the game. We would see an example of the use of this function with Sokoban.

 if ( !this.ae_paint ) 

   {

     if ( window.requestAnimationFrame  )

       {

       requestAnimationFrame (()=>{this.repaint()});

       }

    else

      this.repaint();

   }

Here we are close to the system. For simplicity, this code redraws the game screen if it is not already doing so. This is something I have never seen in other javascript game programming courses. I assume that some displays can be slow and that this should not change the flow of the game. I therefore decouple the intelligence part from the display part.

this.ae_l2 = Date.now();

 this.ae_lw = this.ae_l2 - this.ae_l1;

 if ( this.ae_lw > this.ae_wait ) // On a mis plus de temps que demander

   this.ae_lw = 1;

 else 

   this.ae_lw = this.ae_wait - this.ae_lw;



 setTimeout(()=>{this.run()}, this.ae_lw);

}

In this last part, we calculate the total duration of the process.

This javascript code setTimeout (() => {this.run ()}, this.ae_lw); allows you to restart the CCAnimeEngine.prototype.run function while respecting the this.ae_wait duration defined by the game creator.

If I want each loop in my game to last 25ms.
If the process that ends has lasted 10ms
I wait 25-10 = 15ms (in the variable this.ae_lw)
I restart CCAnimeEngine.prototype.run.

if the process lasted more than 25ms, I restart immediately.

CCAnimeEngine.prototype.onTip

Second important function. She is the intelligence of the class.

this.onBeforeSprites ();
Calls the function that manages the general game data

 for (this.ae_is = 0 ; this.ae_is < this.ae_sprites.length ; this.ae_is++ )

    {

     this.ae_st = this.ae_sprites[this.ae_is];

     this.ae_st.prepareMove();

     this.ae_st.think();

    }

For each sprite, a prepareMove () function is called. Then, a think() function, empty by default, in which the sprite interacts with the game.

 for (this.ae_is = 0 ; this.ae_is < this.ae_sprites.length ; this.ae_is++ )

    {

     this.ae_st = this.ae_sprites[this.ae_is];

     this.ae_st.move();

    }

Once all the sprites have thought through, this function applies their movements.

CCAnimeEngine.prototype.repaint

This function just checks that a drawing of the game is not already in progress. It calls the function
CCAnimeEngine.prototype.drawOff

This calls a drawBackOff() function which can be modified to draw a background. Then, she asks each of the sprites to draw themselves.

CCAnimeEngine.prototype.defineCanvas

Defines the canvas that will be used for all drawings. This function creates a CCGraphics object.

The other groups of functions

The class also offers some functions allowing to manage sprites (addition, deletion), as well as functions allowing to manage events. The systems are so different that I preferred to write my own class of events. The most common events are the click of a mouse, the pressing of a key on the keyboard or on the screen, but they can also be triggered by clicks on buttons or menus.

The CCGameEvent class

It is located in the cc_gameevnt.js file

function CCGameEvent(event_type)

{

 this.etype = event_type;

 this.ip = 0;

 this.str = "";

 this.x = 0;

 this.y = 0;

}



CCGameEvent.prototype.getType = function()

{

 return this.etype;

}



CCGameEvent.prototype.setIntParam = function( ip )

{

 this.ip = ip;

}



CCGameEvent.prototype.setStringParam = function( str )

{

 this.str = str;

}



GameEvent.prototype.setCoord = function( x, y )

{

 this.x = x;

 this.y = y;

}



CCGameEvent.prototype.toString = function()

{

 return "GameEvent "+this.etype+" "+this.ip+" "+this.str+" ["+this.x+","+this.y+"]";

}

We will see how to use it in practice. The process will always be the same: the application creates a CCGameEvent object and uses CCAnimeEngine.prototype.addEvent() to add it to the CCAnimeEngine events queue.

In the CCAnimeEngine.prototype.onBeforeSprites() function, we add the code used to manage the events of the queue.


Next time, I will introduce you to the Sprite2D class.