EN中文
开发者社区 > 程序

(二)Cocos2d-html5制作一款横版动作游戏——攻击与特效攻击

发表于2015-08-24
评论0 596浏览

攻击与特效攻击

在这个游戏中，有一个普通攻击和两个特效攻击，这两个不同，但很显然，他们都是攻击，却又相同，先看看他们的共同点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// ActionButton.js
 
var ActionButton = cc.Node.extend({
    _sprite: null,
    _rect: null,
    _delegate: null,
    _attackType: null,
 
    _childObj: null,
    rect:function(){
        var size = this._sprite.getContentSize();
        return cc.rect(-size.width / 2, -size.height / 2, size.width, size.height);
    },
    setChindObj:function(obj){
        this._childObj = obj;
    },
    init:function(image){
        this._super();
 
        this._sprite = cc.Sprite.create(image);
        this.addChild(this._sprite);
        return true;
    },
    setDelegate:function(delegate){
        this._delegate = delegate;
    },
    setAttackType:function(at){
        this._attackType = at;
    },
    getAttackType:function(){
        return this._attackType;
    },
    onEnter:function(){
        this._super();
        // cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this, 0, false);
        // 2.1.5 to 2.1.6       
        cc.registerTargetedDelegate(0, true, this);
    },
    onExit:function(){
        this._super();
        // cc.Director.getInstance().getTouchDispatcher().removeDelegate(this);
        cc.unregisterTouchDelegate(this);
    },
    containsTouchLocation:function(touch){
        return cc.rectContainsPoint(this.rect(), this.convertTouchToNodeSpace(touch));
    },
    onTouchBegan:function(touch, event){
        // 区域判断
        if (!this.containsTouchLocation(touch))
            return false;
        this.click();
        // 播放点击动画
        return true;
    },
    click:function(){
        if(this._delegate && this._childObj.isCanClick()){
            this._delegate.attackButtonClick(this.getAttackType());
            this.beganAnimation();           
        }
    },
    onTouchEnded:function(touch, event){
        this.endedAnimation();
    },
    beganAnimation:function(){
    },
    endedAnimation:function(){
    },
    isCanClick:function(){
        return true;
    }
});

定义了一个 ActionButton 攻击按钮类型，它实现了 onTouchBegan 作为按钮点击的触发场所，触发了 click事件，再由 click 处理调用代理的事件，传出一个参数，以标示攻击的类型 AttackType , 在判断点击的时候还需要检测点击区域是否在按钮的可点击范围之内,当然再触发攻击动作之时，按钮本身也实现了一些动画特效，如点击效果，技能冷却效果，它由beganAnimation 方法实现。

但我们看见在 ActionButton 并没有实现 beganAnimation ，在方法里面并没有实现任何代码，这因为 ActionButton 只是作为 攻击按钮 的抽象，它只定义了攻击按钮具体由那些功能，能做哪些事情，如可以播放点击时的动画，但具体的动画内容，需要根据具体的攻击按钮有着不同的实现。 图4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var AttackButton = ActionButton.extend({
    _pt: null,
    _ac: null,
 
    _defaultScale: 0.35,
    _maxScale: 0.5,
 
    _inAction: null,
    _outAction: null,
 
    _timestamp: null,
    ctor:function(){
        this._super();
        this._pt= cc.Sprite.create(s_AttackO);
        this._pt.setScale(this._maxScale);
        this.setChindObj(this);
 
        // this.addChild(this._pt);
 
        var aScale = cc.ScaleTo.create(0.1, this._defaultScale);
        var aFadein = cc.FadeIn.create(0.1);
        this._inAction = cc.Spawn.create(aScale, aFadein);
 
        var oScale = cc.ScaleTo.create(.2, this._maxScale);
        var oFade = cc.FadeOut.create(0.2);
        this._outAction = cc.Spawn.create(oScale, oFade);
    },
    beganAnimation:function(){
        var timestamp = (new Date()).valueOf();       
        this._timestamp = timestamp;
 
        this.removeChild(this._pt);
        this.addChild(this._pt);
        this._pt.runAction(this._inAction);
 
    },   
    endedAnimation:function(){
        this._pt.stopAllActions();
        this._pt.runAction(this._outAction);
    },
    clickUp:function(){
        this.endedAnimation();
    },
    isCanClick:function(){
        var timestamp = (new Date()).valueOf();       
        return timestamp - this._timestamp > 600;
    }
});

普通攻击按钮的效果，初始化设置图片素材，播放动画为一个光圈放大缩小显示，它 继承 自 ActionButton ，同样实现了 beganAnimation 方法。另外一种是特效攻击的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var AttackEffect = ActionButton.extend({
    _pt: null,
    _ac: null,
    _isCanClick: true,
    ctor:function(){
        this._super();
        var h = cc.Sprite.create(s_AttackFreeze);
        this._pt = cc.ProgressTimer.create(h);
        this._pt.setType(cc.PROGRESS_TIMER_TYPE_RADIAL);
        this._pt.setReverseDirection(true);
        this._pt.setScale(0.43);
 
        var to = cc.ProgressTo.create(0, 99.999);
        var to1 = cc.ProgressTo.create(2, 0);
        var ac2 = cc.CallFunc.create(this.callBack, this);
        this._ac = cc.Sequence.create(to, to1, ac2);
        this.setChindObj(this);
    },
    beganAnimation:function(){
        this.removeChild(this._pt);
        this.addChild(this._pt);
        this._pt.runAction(this._ac);
        this._isCanClick = false;
    },
    endedAnimation:function(){
    },
    callBack:function(){
        // cc.log("call back");
        this._isCanClick = true;
    },
    isCanClick:function(){
        return this._isCanClick;
    }
});

特效攻击有个冷却效果，不能在一定时间范围内连续攻击，使用一个 旋转的 Progress 来达到这样的效果。 
图5

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

动作游戏游戏开发Cocos2dxtouchMono素材
0

0个评论