How to make the animation smoothly

cocos2d-x JavaScript
1

I write a moveTo action like this:

var sprite=cc.Sprite.create(source);
sprite.setPosition(0,0);
this.addChild(sprite);

var action_time=0.2
var action = cc.MoveTo.create(action_time,cc.p(200,200));
sprite.runAction(action);

But I found the animation is not very smoothly when the action_time is very short or when I scale the brower to very large.

2

Hi Jie

We can do a simple calculation:
60 fps * 0.2 = 12 frames for your animation
200 / 12 = 17px per frame
So your sprite moves 17 px each frame, and it’s possible for someone it doesn’t looks smooth. May be you can reduce the movement distance or increase the duration of your animation.
Note that the calculation based on the good condition: your game runs smoothly in 60fps, in some case, if your game contains many animation or sprite or other expensive calculation, your fps can drop down. And then your animation will do even worse, which should be the case when you scale your browser to very large size.

Hope my explanation makes you more clear. Don’t hesitate to post again if you don’t understand

Huabin

3

thank you…….

var c = {
COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
box2d:false,
chipmunk:false,
showFPS:true,
loadExtension:false,
frameRate:120,
renderMode:1, //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
tag:‘gameCanvas’, //the dom element to run cocos2d on
engineDir:‘…/cocos2d/’,
//SingleEngineFile:‘’,
appFiles:[
’src/resource.js’,
‘src/start_scene.js’,//add your own files in order here
‘src/game_scene.js’,
‘src/game0_logic_layer.js’,
‘src/game1_status_layer.js’,
‘src/start0_layer.js’,
‘src/PopSprite.js’
]
};

I try to change cocos2d.js file the frameRate from 60 to 120 but it still doesn’t work.

The animation is still not smoothly. And I check the example it’s animation still not amoothly.

4

It’s basically not possible to increase the frame rate bigger than 60. Firstly, requestAnimationFrame function of HTML5 support at most 60 fps, secondly, no matter what you do, the screen’s refresh frequency is normally at 60 fps, so theoretically it’s not possible.

5

Hi @pandamicro i’m beginner at cocos2d-js html5. How to use requestanimationframe function in scene.
i used requestanimationframe function then error is displayed. HELP ME :smiley:

Uncaught TypeError: Failed to execute ‘requestAnimationFrame’ on ‘Window’: The callback provided as parameter 1 is not a function.GameLayer.js:91 cc.Layer.extend.loop

my code is
var options = {
name : “Маамуу Нааш Ир”,
singer : “Маамуу Нааш Ир”,
genre : “Хүүхдийн дуу”,
level : 0,
data : null,
src : res.music
};

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
return window.setTimeout(callback, 1000 / 60);
};
})();

window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();

var animeLoop;
var music;

var GameLayer = cc.Layer.extend({
ctor:function(){
this._super();
this.init();
},
init:function () {
var sp = new cc.Sprite(res.bgStart);
sp.anchorX = 0;
sp.anchorY = 0;
sp.scale = 1.5;
this.addChild(sp, 0, 1);

    var winsize = cc.director.getWinSize();

    var title = new cc.LabelTTF("POINT : 200", "Arial", 21, cc.size(MW.WIDTH * 0.85, 0), cc.TEXT_ALIGNMENT_CENTER );
    title.attr({
        x: 80,
        y: winsize.height - 50
    });
    title.setColor(cc.color(MW.FONTCOLOR));
    this.addChild(title);

    music = new Music(options);
    music.play();

    var button = new ccui.Button();
    button.setTouchEnabled(true);
    button.setPosition(cc.p(winsize.width - 50, winsize.height - 50));
    button.loadTextures(res.pause_n, res.pause_c, "");
    button.addTouchEventListener(this.onPause ,this);
    button.attr({ scale : 0.5 })
    this.addChild(button);

    var label = new cc.LabelTTF("Буцах", "Arial", 21);
    label.setColor(cc.color(MW.FONTCOLOR));
    var back = new cc.MenuItemLabel(label, this.onBackCallback);
    var menu = new cc.Menu(back);
    menu.x = winsize.width / 2;
    menu.y = 60;
    this.addChild(menu);

    this.loop();

    return true;
},
onBackCallback:function () {
    var scene = new cc.Scene();
    scene.addChild(new SongSelectLayer());
    cc.director.runScene(new cc.TransitionFade(1.2, scene));
},
onPause:function() {
    music.pause();
    cancelAnimationFrame(animeLoop);
},
loop:function () {
    animeLoop = requestAnimFrame(this.loop);
    cc.log("-> loop <-");
}

});