Function Call Order

@Benur21Apr 28.2017

Hello.
I am working on ~~[URL=”http://html-js.comxa.com/TheBallGame.html”]~~a game[/URL], in which there are some shapes that are drawn in the canvas.
I made an object (~~[I]~~GameState[/I]) that acts like a Window, so it has a property that contains all the objects (and functions) it should draw right after drawing itself (so if there are multiple ‘Windows’ it will be like a few pizzas on top of each other, the ingredients/objects that belongs to it will be right on its top).
The problem is that I am not sure how I should make to draw the objects AND call their own specific and needed functions AND call other functions that don’t belongs to any object, in a good order.
Some objects have functions that update their position, check their position, draw them, draw other things that belong to them… Should it first draw, then check, then update? Not all objects have those methods, so it would get every object which came from a class with those functions then call them, but what if I want it to first draw, for example, a ball, then a rectangle, only then update the ball, then update the rectangle, then do all other things that belong to the ball…
Do you think it matters if it first draws everything, then updates/checks everything, or do every object at a time?
I don’t know if I really need to control the order those functions are called, or just make it with a way I wouldn’t have any order problems. This really confuses me a lot, because there are many different functions, so I would need to think in every order to know if it is the best.
Thanks for reading this and for some help ?

to post a comment

JavaScript

3 Comments(s) _↴

@rootApr 28.2017 — #If you require help, I suggest that you post the code that you are having a problem with and remember to use the forum BB Code tags and wrap any code in those tags. People would likely be more willing to help you rather than having to go to a web page, then look at the source, etc...

@Benur21authorApr 29.2017 — #This is what the GameState class includes in its draw method, after drawing itself:

[CODE]
 if (this.visible) {
 var contents = this.container.getAllProperties().sort(function (a, b) {return a.callIndex - b.callIndex});
 
 //Draw everything in its container
 for (i = 0; i < contents.length; i++) {
 switch (typeof(contents[i])) {
 case "object":
 if (contents[i]instanceof TextButton) {
 contents[i].draw();
 contents[i].update();
 } else if (contents[i]instanceof Label) {
 contents[i].draw();
 contents[i].updateLanguage();
 } else if (contents[i]instanceof Ball) {
 contents[i].drawText();
 contents[i].checkPos();
 contents[i].draw();
 contents[i].updatePos();
 contents[i].delayStop();
 } else {
 contents[i].draw();
 }
 break;
 case "function":
 if (!(contents[i].toString().includes("getAllInstances") || contents[i].toString().includes("getAllProperties"))) { //excluding some things...
 contents[i]();
 }
 break;
 }
 }
 }
 [/CODE]

The animation loop (requestAnimationFrame) actually only calls the draw method of the 3 gameStates I made.

GameState explanation:

The 3 gameStates are: [B]mainMenu[/B], [B]game[/B], [B]options[/B]. Each one will be visible in its time. When you enter the page, only [B]mainMenu[/B] is visible, so only the contents in its own [B]container[/B] will be drawn and updated. When you click "Play" (remember you can change the language above in the page) only [B]game[/B] will be visible, and the ball, the lava, etc will be drawn&updated rather than the [B]mainMenu[/B] things. The same for [B]options[/B].

Before I make the GameState class, there existed only the objects in its own: ball, rectangle, a bunch of text buttons like "Play"... They would only be drawn&updated in their time, if the variable [I]gameState[/I] had the word they needed ('game' or 'mainMenu' or 'options'). Here is what it looked like:

[CODE]
 switch (gameState) {
 case 'game':
 lava.draw();
 player.drawText();
 player.checkPos();
 player.draw();
 player.updatePos();
 backToMenu_opt.draw();
 backToMenu_opt.updateEvents();
 backToMenu_opt.text = backToMenu_lang;
 
 player.delayStop();
 break;
 case 'mainMenu':
 rect.color = "#2f538e";
 playGame_opt.draw();
 playGame_opt.updateEvents();
 playGame_opt.text = playGameOption_lang;
 options_opt.draw();
 options_opt.updateEvents();
 options_opt.text = optionsOption_lang;
 download_opt.draw();
 download_opt.updateEvents();
 download_opt.text = downloadOption_lang;
 break;
 case 'options':
 optionsSoon.draw();
 optionsSoon.text = optionsSoon_lang;
 exitOptions_opt.draw();
 exitOptions_opt.updateEvents();
 exitOptions_opt.text = exitOptionsButton_lang;
 break;
 }
 [/CODE]

The GameState.container is an object which contains objects and functions that need to be drawn&updated and called in the order above. When it's going to draw them, it should sort everything so it will be called in order. I was going to make it so every function (not method) I needed to put in the container would have a property "callIndex" with a number in it. But the container also includes objects, with methods which should also have their own "callIndex" so I could make it, for example, draw the ball (player), then draw the lava, then check ball pos, etc. Not the objects need the "callIndex".

Upon this I wonder if I really need to control the order every function or method is called, or it can be done automatically with an order that will work 4everything I put in the container. Here is where I need help.

@xenoraphorzeApr 30.2017 — #Typically I wouldn't handle a full object's life cycle in a turn pass like this. Usually I would

check actions

update physics

draw updates

So the engine would do all of this rather than an object that is also rendered. You are kind of following this paradigm by letting the window's visible property control this. I don't think anything you are doing is WRONG but you may have issues later when:

A handles itself updates position drawns itself

B handles itself colldies with A, updates its position, draws itself.

Now A has been collided with, but you already drew it so do we erase it and rerender? (looks buggy)

Overall if your game is working so far enjoy the process yea it gets hairy eventually trying to handle tons of objects with update methods and draw methods in the long run unity or unreal engine just makes all this pain a breeze.

I recently was working on a web VR project and I think I ended up using a physics manager class and a rendering manager class. Every object that wanted to have its physics checked would register with the physics manager class and be expected to have an update method, and destroy method (for closing the game). The update method would accept an array of objects that were collide able and would only update its internal velocity or object.applyVelocity() to an object it collided with.

The render manager expected every object to have a draw method and would pass the rendering object to it. Every object had a property that the main physics and rendering class would check for to see if it should be processed or ignored (though typically I just removed them from the array if they shouldn't update anymore).

I don't think it was the best approach but it worked. I think with games theres probably 1000 ways to skin a cat and 1 right way, but 99.99% of us don't see the right way so it doesn't matter too much unless you work for a huge gaming company.

Also in #JavaScript _↴

Sorry more form trouble Flash and Dropdown Menu

Success!

Help @Benur21 spread the word by sharing this article on Twitter...

Tweet This

Function Call Order

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Function Call Order

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴