Performance, Call Function with array, or with object prototype ?

[Jonforum]

Hi guy what is more performance ?
Is those can be have a very good performance difference ?
 


Call X1000 time example This.


// Example with use Array for ref the showPicture animation
function ShowBigAvatar() {
$gameScreen.showPicture(BigAvatar[1][0], BigAvatar[1][1] + BigAvatar[1][2], 1, BigAvatar[1][3], BigAvatar[1][4], 100, 100, 255, 0);
}




Or this


// Eample use the info with Prototype from the objet.
function ShowBigAvatar() {
$gameScreen.showPicture(BigAvatar[1].ID, BigAvatar[1].Prname + BigAvatar[1].ActionName, 1, BigAvatar[1].X, BigAvatar[1].Y, 100, 100, 255, 0);
}






Is for create animation with the 

setInterval(function() { }, 60); //60ms

 

[Hudell]

The difference is too small, even if you execute it a lot, it will never make a noticeable difference on your game's perfomance. But my guess would be that arrays are faster.

 

[Jonforum]

The difference is too small, even if you execute it a lot, it will never make a noticeable difference on your game's perfomance. But my guess would be that arrays are faster.

i juste foudn this, am not shure if my test are ok but.


http://jsben.ch/#/qveAS


I get 


1141 ms for Array


839 ms for objet prototype


i do for incrementation x 10000

 

[Hudell]

The thing with objects is that they are slower when you have many properties, but faster if you have just a few.


But I might be wrong, this changes all the time.

 

[Willrune]

As far as I can tell, RPGMaker doesn't use any variation of `seconds` for duration or animation. It uses frames. I believe it runs at 60 frames/second (updates about every 16.667 ms). Depending on how well your code is written or how much you have going on, it may take longer than this to completely render a single frame.


I don't know if they use Fast DOM, but I think they are at least taking advantage of requestAnimationFrame. I'd avoid using setInterval or setTimeout, as you will probably unsync from the way the rest of the game animates and may even introduce layout thrashing (not sure if it works the same way with the canvas element). Try to find the appropriate Scene_* class and hook your changes into it. The update method is triggered every frame, so you will want some condition in place to prevent your code from running when it isn't needed.


Don't edit the core files directly, or you will lose all your code in an update. Your plugin code might contain something like this:

var originalUpdate = Scene_???.prototype.update;
Scene_???.prototype.update = function() {
    originalUpdate.apply(this, arguments);
    // ...Your animation update here
};

 

[Jonforum]

As far as I can tell, RPGMaker doesn't use any variation of `seconds` for duration or animation. It uses frames. I believe it runs at 60 frames/second (updates about every 16.667 ms). Depending on how well your code is written or how much you have going on, it may take longer than this to completely render a single frame.


I don't know if they use Fast DOM, but I think they are at least taking advantage of requestAnimationFrame. I'd avoid using setInterval or setTimeout, as you will probably unsync from the way the rest of the game animates and may even introduce layout thrashing (not sure if it works the same way with the canvas element). Try to find the appropriate Scene_* class and hook your changes into it. The update method is triggered every frame, so you will want some condition in place to prevent your code from running when it isn't needed.


Don't edit the core files directly, or you will lose all your code in an update. Your plugin code might contain something like this:



var originalUpdate = Scene_???.prototype.update;
Scene_???.prototype.update = function() {
originalUpdate.apply(this, arguments);
// ...Your animation update here
};

I especially wondered whether it was better to realize my animation with prototype object or array.
I have chosen array, because very more easy for me.
I do not understand why not use setInterval(function() or setTimeout(function()??
I do not notice any disinconization of my 2 AVATAR animations.
My avatar have13 Frames in IDLE and TALKING, setup to 58 MS eatch frame.


Here my plugin am try making.
 

Spoiler

/*:
*
*@plugindesc Gestion des menue
*
*
@author Djmisterjon
*§
*@help
*Lorsque click sur menue mais aussi le menue des dées
*
*
*/

//0:ID,1:'File-name',2:Frames,3:IntervalStored?,4:x,5:y,6:ScaleX,7:LastID
BigAvatar = [
[8,'H1-IDLE-',0,0,100,650,100,0],
[9,'H2-IDLE-',0,0,220,765,100,0]
];

// BigAvatar[0] = H1, BigAvatar[1] = H2
function SetupBigAvatars(WhatToDo,WhatAvatar,Value) {
// renitialise le avatar selectionné ou le crée
if (WhatToDo == 'Reset') {
BigAvatar[WhatAvatar][0] = (WhatAvatar+8); // renitialise au id de base du jeux (AVATAR1= 8, avatar2 = 9)
BigAvatar[WhatAvatar][1] = 'H'+ (WhatAvatar+1) + '-IDLE-' ; // renitialise le file name
BigAvatar[WhatAvatar][2] = 0 ; // renitialise le frames actuel
}
else if (WhatToDo == 'ChangeID') {
return Value;
}
else if (WhatToDo == 'SHOW') {
// initialise et affiche horsframe les avatar
$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-0', 1, -250, 650, 100, 100, 255, 0);
}
}



// Call pour animéles avatar en IDLE
function AnimationBigAvatars(WhatAvatar) {
// animation sur le Avatar sois 0 ou 1
if (WhatAvatar==0) { // animé le avatar 0 (AvtarH1)
BigAvatar[0][3] = setInterval(function() {
if (BigAvatar[0][2]>12) {BigAvatar[0][2]=0;}; // reset si superieur au frames 12
$gameScreen.showPicture(BigAvatar[0][0], BigAvatar[0][1]+BigAvatar[0][2], 1, BigAvatar[0][4], BigAvatar[0][5], BigAvatar[0][6], 100, 255, 0);
BigAvatar[0][2]++;
}, 58);
}
else if (WhatAvatar==1) { // animé le avatar 1 (AvtarH2)
BigAvatar[1][3] = setInterval(function() {
if (BigAvatar[1][2]>12) {BigAvatar[1][2]=0;}; // reset si superieur au frames 12
$gameScreen.showPicture(BigAvatar[1][0], BigAvatar[1][1]+BigAvatar[1][2], 1, BigAvatar[1][4], BigAvatar[1][5], BigAvatar[0][6], 100, 255, 0);
BigAvatar[1][2]++;
}, 58);
};
}


// Call Pour le Move des Avatars
function MoveBigAvatars(WhatAvatar,ax,ay,Time,ScalX) {
//clear animation actuel, avant de bougé

clearInterval(BigAvatar[WhatAvatar][3]);
//Check si lavatar a bougé existe, sinon faut le créer ( antibug Bougé un avatar exist pas)
//if (!($gameScreen.picture(BigAvatar[WhatAvatar][0]))) {$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-talking-happy-10', 1, -250, 650, 100, 100, 255, 0)}
// affiche picture bour le move ( utilise temporairement les animation talk, on va devoir créer les animation -move-)
$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-talking-happy-'+BigAvatar[WhatAvatar][2], 1, BigAvatar[WhatAvatar][4], BigAvatar[WhatAvatar][5], BigAvatar[WhatAvatar][6], 100, 255, 0);
//Bouge vers la bonne endroit
BigAvatar[WhatAvatar][4] = ax;
BigAvatar[WhatAvatar][5] = ay;
BigAvatar[WhatAvatar][6] = ScalX;
new IAVRA.ANIMATE.Tween($gameScreen.picture(BigAvatar[WhatAvatar][0]), { _x: BigAvatar[WhatAvatar][4],_y: BigAvatar[WhatAvatar][5] ,_scaleX:BigAvatar[WhatAvatar][6] }).easing(IAVRA.EASING.quart.out).duration(Time).start();
BigAvatar[WhatAvatar][3] = setTimeout(function(){ AnimationBigAvatars(WhatAvatar); }, (Time/60)*1000); //reprend animation auto apret deplacement
}

//0:ID,1:'File-name',2:Frames,3:IntervalStored?,4:x,5:y,6:ScaleX
//Choix des TalkType = 'happy-', 'hangry-', 'confu-'
function TalkBigAvatars(WhatAvatar,TalkType,Time) {
if (WhatAvatar == 0) { //Avatar1
BigAvatar[WhatAvatar][1] = 'H1-IDLE-talking-' + TalkType;
var AH1 = setTimeout(function(){ BigAvatar[WhatAvatar][1] = 'H1-IDLE-'; }, (Time/60)*1000);
}
else if (WhatAvatar == 1) {
BigAvatar[WhatAvatar][1] = 'H2-IDLE-talking-' + TalkType;
var AH2 = setTimeout(function(){ BigAvatar[WhatAvatar][1] = 'H2-IDLE-'; }, (Time/60)*1000);
}
}


// OLD BAD CODE OLD BAD CODE OLD BAD CODE DELETTE THIS
/*
// trick
//SceneManager.preferableRendererType = function() { return 'canvas'; }; Change perfec blend mode ( affiche les bon mode blend)

AvatarFrame = [];
AvatarFrame[1] = 0; // frame toujours en evolution pour avatar 0 a 12
AvatarFrame[2] = 0; // frame toujours en evolution pour avatar 0 a 12
timerAvatar = [];
AvatarInterval = [];
oldAvatarID = [];
oldAvatarID[1] = 8; // default picture id avatar 1
oldAvatarID[2] = 9; // default picture id avatar 2
AvatarDefXy = [];
AvatarDefXy[1] = [100,650];
AvatarDefXy[2] = [220,765];

//=============================================================================

// ID 0 = same,
function AvatarAnim(Avatar, ID, WhatToDo, Ax, Ay, TalkingType) {
clearInterval(AvatarInterval[Avatar]);
AvatarInterval[Avatar] = 0;
clearTimeout(timerAvatar[Avatar]);
timerAvatar[Avatar] = 0;
//Si dans le call function utilise 0 affiche au meme ID que avant ex: AvatarAnim(1,0,'Talk');
if (ID == 0) {
ID = oldAvatarID[Avatar];
}
// Si acient id nest pas egal ces que on a changer le ID Donc supprimer ancient ID
else if (oldAvatarID[Avatar] !== ID) {
var OldX = $gameScreen.picture(oldAvatarID[Avatar])._x; // utile permet de faire un MoveTo en changean de ID
var OldY = $gameScreen.picture(oldAvatarID[Avatar])._y;
$gameScreen.erasePicture(oldAvatarID[Avatar]);
$gameScreen.showPicture(ID, 'H' + Avatar + '-IDLE-' + AvatarFrame[Avatar], 1, OldX, OldY, 100, 100, 255, 0);
}
oldAvatarID[Avatar] = ID;

// a faire une foi au début du jeux ou apret avoir supprimer les avatars
if (WhatToDo == 'SHOW') {
$gameScreen.showPicture(ID, 'H' + Avatar + '-IDLE-talking-happy-6', 1, Ax - 280, Ay, 100, 100, 255, 0);
$gameScreen.picture(ID)._angle = -50;
new IAVRA.ANIMATE.Tween($gameScreen.picture(ID), { _x: Ax,_angle: 0 }).easing(IAVRA.EASING.back.out).duration(25).start();
$gameScreen.setPictureCallCommon(ID, 2, 1); // lorsque click sur image call BAG
timerAvatar[Avatar] = setTimeout(function() {
$gameScreen.showPicture(ID, 'H' + Avatar + '-IDLE-0', 1, $gameScreen.picture(ID)._x, $gameScreen.picture(ID)._y, 100, 100, 255, 0);
AvatarAnim(Avatar, ID, 'ANIM', Ax, Ay); // appelel function on anime en boucle les avatar
}, 420);
} else if (WhatToDo == 'ANIM') {
AvatarInterval[Avatar] = setInterval(function() {
if (AvatarFrame[Avatar] > 12) {
AvatarFrame[Avatar] = 0;
}
$gameScreen.showPicture(ID, 'H' + Avatar + '-IDLE-' + AvatarFrame[Avatar], 1, $gameScreen.picture(ID)._x, $gameScreen.picture(ID)._y, $gameScreen.picture(ID)._scaleX, 100, 255, 0);
AvatarFrame[Avatar]++;
}, 58);
} else if (WhatToDo == 'Talk') {
// liste des type expresions parlotes
if (TalkingType == 0 || TalkingType == null) {
TalkingType = 'happy-';
}
// jouer expression
AvatarInterval[Avatar] = setInterval(function() {
if (AvatarFrame[Avatar] > 12) {
AvatarFrame[Avatar] = 0;
}
$gameScreen.showPicture(ID, 'H' + Avatar + '-IDLE-talking-' + TalkingType + AvatarFrame[Avatar], 1, $gameScreen.picture(ID)._x, $gameScreen.picture(ID)._y, 100, 100, 255, 0);
AvatarFrame[Avatar]++;
console.log('Avatar1Interval==== ' + AvatarInterval[Avatar]);
}, 58);
timerAvatar[Avatar] = setTimeout(function() {
AvatarAnim(Avatar, ID, 'ANIM', Ax, Ay);
}, 2350);

}
else if (WhatToDo == 'MoveTo') {
if (Ax == null) {Ax = $gameScreen.picture(ID)._x;} // si rien entré ces que on bouge pas X
if (Ay == null) {Ay = $gameScreen.picture(ID)._y;}// si rien entré ces que on bouge pas Y
if (Ay == null) {Ay = $gameScreen.picture(ID)._y;}// si rien entré ces que on bouge pas Y
new IAVRA.ANIMATE.Tween($gameScreen.picture(ID), { _x: Ax,_y: Ay ,_scaleX:TalkingType }).easing(IAVRA.EASING.quart.out).duration(50).start();
timerAvatar[Avatar] = setTimeout(function() {
AvatarAnim(Avatar, ID, 'ANIM', Ax, Ay);
}, 800);
}
}
*/

Am not understand why creat new alias ?
My game run only with picture am not using RPGmaker (Menu,Battle,Map,Animation).
I build all engine by myself


View attachment 52434   

 

[Hudell]

There's no harm in using setInterval as long as you don't use them on sprites or things like that. If you use a showPicture command out of sync with the rest of the game (inside a setTimeout / setInterval), it's sprite will only be updated in the next frame.


Having said that, it would still be better to handle the code without those methods, in sync with the game loop.

 

[Jonforum]

There's no harm in using setInterval as long as you usem them on sprites or things like that. If you use a showPicture command out of sync with the rest of the game (inside a setTimeout / setInterval), it's sprite will only be updated in the next frame.


Having said that, it would still be better to handle the code without those methods, in sync with the game loop.

It seems a complicate for my level of JavaScript


How can I check if my setInterval(function() is synchronized?


Example for this

BigAvatar[0][3] = setInterval(function() {
		if (BigAvatar[0][2]>12) {BigAvatar[0][2]=0;}; // reset if frame > 12
		$gameScreen.showPicture(BigAvatar[0][0], BigAvatar[0][1]+BigAvatar[0][2], 1, BigAvatar[0][4], BigAvatar[0][5], BigAvatar[0][6], 100, 255, 0);
		BigAvatar[0][2]++;
	}, 58);

 

[Hudell]

setInterval will never be in sync with the game loop, but in your previous code it doesn't matter.


When you use $gameScreen.showPicture, you're not actually showing the picture, you're basically saying: "hey game, when you get the chance, display this picture in this position". Since you're not directly showing the picture, there's no harm in being out of sync.


In the next regular game frame (in sync), the core code will see that you've request a picture and will display it in the position you asked it for.

 

[Jonforum]

setInterval will never be in sync with the game loop, but in your previous code it doesn't matter.


When you use $gameScreen.showPicture, you're not actually showing the picture, you're basically saying: "hey game, when you get the chance, display this picture in this position". Since you're not directly showing the picture, there's no harm in being out of sync.


In the next regular game frame (in sync), the core code will see that you've request a picture and will display it in the position you asked it for.

Your explanations are very interesting.
Thank you