cocos2d-js 开发基础练习代码(2)——使用事件管理器创建用户交互以及cocos精灵帧动画的js使用

cocos2d-js 开发基础练习代码(2)

首先通过使用cc.EventListener.create创建了一个Touch事件监听器touchListener，然后，通过cc.eventManager.addListener注册监听器到事件管理器。cc.EventListener.create扩展出一个用户监听器。event属性，定义这个监听器监听的类型。swallowTouches属性设置是否吃掉事件，事件被吃掉后不会递给下一层监听器。 onTouchBegan方法处理触摸点击按下事件，我们在这里可以获取到触摸点的坐标pos。event.getCurrentTarget()获取当前事件的接受者，并判断当前的是否点击到了SushiSprite。 在touch事件中，我们还可以添加onTouchMoved/onTouchEnded方法监听touch移动和结束的回调。如果onTouchBegan返回false后onTouchMoved/onTouchEnded不会执行。

在onTouchBegan方法中获取点击点的坐标pos,然后通过cc.rectContainsPoint(target.getBoundingBox(),pos)判断点击的点是否在SushiSprite上。

如果我们一张张的从磁盘读取加载，那会非常的慢，还浪费内存资源。还好Cocos2d-JS支持精灵表单(Spritesheet),使用TexturePacker工具,将多张帧图片打包成一张大图和一个.plist文件，通过加载大图可以提高读取速度，并减少内存消耗。Cocos2d-JS中提供了cc.spriteFrameCache管理精灵缓存，通过cc.spriteFrameCache可以方便的读取打包好的大图到内存，根据.plist文件中的信息可以方便获取到各帧图片。 cc.spriteFrameCache.getSpriteFrame(str)方法可以获取到各个精灵帧。

EnemyPlane.js:

/* 创建一个精灵 带有消失动画 ：需要为该精灵添加一个属性disappearAction保存消失动画：
    Cocos2d-JS遵循Cocos2d-x的内存管理机制。创建的disappearAction是自动释放的，需要为它
    增加一次引用this.disappearAction.retain(),以避免它被回收，在我们不需要的时候对它执行
    release()方法，释放对它的引用，避免内存泄漏。在使用Cocos2d-JS的jsb模式时，部分情况是需要
    我们手动管理内存的。

    onEnter方法添加：retain();
    onExit方法添加：release();

*/

var SushiSprite = cc.Sprite.extend({
    disappearAction: null,
    onEnter:function() {
        this._super();

        /* 注册响应事件 */
        this.addTouchEventListener();

        /* 保存动画 */
        this.disappearAction = this.createDisapperAction();
        this.disappearAction.retain();
    },

    onExit:function() {

        /* 释放引用一次 */
        this.disappearAction.release();

        this._super();
    },

    /* 添加sprite响应事件 */
    addTouchEventListener:function() {
        this.touchListener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            //是否吞噬事件
            swallowTouches: true,
            //onTouchBegan event callback function
            onTouchBegan: function(touch, event){

                cc.log("Z.x: Enemy onTouchBegan");

                var pos = touch.getLocation();
                var target = event.getCurrentTarget();

                if(cc.rectContainsPoint(target.getBoundingBox(),pos)){
                    cc.log("Z.x: Enemy is clicked");

                    /*点中后处理逻辑B*/
                    //避免重复点击
                    target.removeTouchEventListenser;

                    target.stopAllActions();

                    var action = target.disappearAction;
                    var seqaction = cc.Sequence.create(action, cc.CallFunc.create(function(){
                        target.removeFromParent();
                    },target));

                    target.runAction(seqaction);

                    /*点中后处理逻辑E*/

                    return true;
                }
                //注意 onTouchBegan有返回值 和 c++类似
                return false;
            }
        });

        cc.eventManager.addListener(this.touchListener,this);
    },

    /* 消失动画 */
    createDisapperAction:function() {
        var frames = [];

        for(var i = 0; i < 6; i++){
            var frameStr = "enemy3_down"+(i+1)+".png";
            var frame = cc.spriteFrameCache.getSpriteFrame(frameStr);

            frames.push(frame);
        }

        var animation = new cc.Animation(frames,0.02);
        var action = new cc.Animate(animation);

        return action;
    }
});

使用如下：基础练习(1)中方法调用

addSushi: function() {

       // var sushi = new cc.Sprite(images_res.GameFlyBody_Image);
       var sushi = new SushiSprite(images_res.GameFlyBody_Image);

        var size = cc.winSize;

        var posX = sushi.width/2 + size.width/2*cc.random0To1();

        sushi.attr({
            x: posX,
            y: size.height - 30
        });

        this .addChild(sushi, 5);
        this.SushiSpritesMgr.push(sushi);

        /* action */
        var dorpAction = cc.MoveTo.create(4,cc.p(sushi.x, -30));
        sushi.runAction(dorpAction);
    },