Sprite 对象内的 Cocos2d 动画答案

【问题标题】：Cocos2d Animation inside a Sprite ObjectSprite 对象内的 Cocos2d 动画
【发布时间】：2015-09-23 04:15:13
【问题描述】：

在 Cocos2d-x V 3.81 项目中，我试图在扩展 Sprite 的对象内设置精灵的动画，但它似乎没有做任何事情。甚至可以在这样的节点内有一个动画精灵，还是必须扩展图层才能有动画？

var Player = cc.Sprite.extend ({
ctor: function () {

    this._super(res.Player_png);

    this.UP = false;
    this.DOWN = false;
    this.LEFT = false;
    this.RIGHT = false;
    this.ACTION = false;

    this.speed = 5;

    cc.spriteFrameCache.addSpriteFrame(res.Player_Left_plist);

    var leftFrames = [];
    for(var i = 0; i < 4; i++)
    {
        var str = "Left" + i + ".png";
        var frame = cc.spriteFrameCache.getSpriteFrame(str);
        leftFrames.push(frame);
    }

    this.leftAnim = new cc.Animation(leftFrames, 0.3);
    this.runLeft = new cc.repeatForever(new cc.Animate(this.leftAnim));

    this.state = "nothing";
    this.nothing = "nothing";

    this.scheduleUpdate();

    cc.eventManager.addListener (
        cc.EventListener.create ({
            event: cc.EventListener.KEYBOARD ,
            onKeyPressed: function(key, event)
            {
                if(key == 87) this.UP = true;
                else if(key == 65) this.LEFT = true;
                else if(key == 83) this.DOWN = true;
                else if(key == 68) this.RIGHT = true;
                else if (key == 69 || key == 32) this.ACTION = true;
            }.bind(this),
            onKeyReleased: function(key, event)
            {

                if(key == 87) this.UP = false;
                else if(key == 65) this.LEFT = false;
                else if(key == 83) this.DOWN = false;
                else if(key == 68) this.RIGHT = false;
                else if (key == 69 || key == 32) this.ACTION = false;
            }.bind(this)
        }),this);

    return true;
},

update:function(dt) {
    if(this.UP)
    {
        this.y += this.speed;
        this.runAction(this.runLeft);
    }
    else if(this.DOWN)
    {
        this.y -= this.speed;
    }
    if(this.LEFT)
    {
        this.x -= this.speed;
        this.runAction(this.runLeft);
    }
    else if(this.RIGHT)
    {
        this.x += this.speed;
    }
}
});

【问题讨论】：

你应该将user1615873的答案标记为正确

标签： javascript animation cocos2d-js

【解决方案1】：

我认为问题出在这一行：

cc.spriteFrameCache.addSpriteFrame(res.Player_Left_plist);

它应该是

cc.spriteFrameCache.addSpriteFrames(res.Player_Left_plist);

SpriteFrames 是复数形式。在手动创建 SpriteFrame 之后，末尾没有“s”的方法用于将单个 cc.SpriteFrame 对象加载到缓存中。最后带有's'的方法是使用plist的URL来一次加载整个spritesheet的方法。

http://www.cocos2d-x.org/reference/html5-js/V3.8/symbols/cc.spriteFrameCache.html

【讨论】：

【解决方案2】：

这段代码在 sprite 类之外对你有用吗？例如在常规精灵中？

我认为这是错误的，但我没有测试过：

this.leftAnim = new cc.Animation(leftFrames, 0.3); this.runLeft = new cc.repeatForever(new cc.Animate(this.leftAnim));

用你的代码我会做什么：

var leftAnim = new cc.Animation();
    for(var i = 0; i < 4; i++)
    {
        var str = "Left" + i + ".png";
        var frame = cc.spriteFrameCache.getSpriteFrame(str);
        leftAnim.addSpriteFrame(frame);
    }
leftAnim.setDelayPerUnit(0.08);
this.runAction(cc.animate(leftAnim)); //or this.runAction(cc.animate(leftAnim).repeatForever());

希望对你有帮助

【讨论】：

【解决方案3】：

多元化主要是问题所在。

对于那些好奇的人，这里是功能代码块：

你是对的。非常感谢。对于那些感兴趣的人，这是功能代码块：

    cc.spriteFrameCache.addSpriteFrames(res.playerRun_plist);
    var i,f;
    var frames=[];
    for (i=1; i <= 4; i++) {
        f=cc.spriteFrameCache.getSpriteFrame("playerRun"+i+".png");
        frames.push(f);
    }
    var playerRunAnim = new cc.Animation(frames, 0.1);
    this.playerAction = new cc.RepeatForever(new cc.Animate(playerRunAnim));

    this.runAction(this.playerAction);

【讨论】：