Fight Rhythm2制作流程(2)

2016. 10. 23

FR优化记录。

这不是教程


Day 3

热情褪去后想要再拾回真的很难,明明接下来该优化的点都确定了,却提不起劲,甚至不停的自我怀疑……

重新搞两套指示物

按钮样式

FR

效果:

FR

自定义图形

FR

效果:

FR

按钮样式有点意义不明,果然还是要一个比较精确的指示物才行,目前这样还是不行,但比之前好一点点了……

也许和指示物的大小有关,但是手机上进行游戏时,指示物太小的话会被手指挡住,为了画面而缩小指示物的话就本末倒置了。

添加镜头

因为canvas的position被锁定了,所以需要一个新的节点去来控制整体位置。

正常情况下制作镜头是需要设置镜头大小的,但是cocos creator貌似没有镜头这个概念,因为镜头的实现完全由canvas完成了,但是canvas的可编辑性又被锁死,所以自己实现的话,只能做个伪镜头。

为镜头的话基本只用控制整体画面位置就行了,因此在canvas下面建个空的节点。

FR

接着把之前挂在canvas下的组件都移到camera下就好了。

FR

预制资源也要挂到camera下。

另外要特别注意的地方是touch的位置判断,需要计算camera的偏移量。

Xtouch = touch.getLocationX() - cc.winSize.width / 2 - self.game.camera.position.x;
Ytouch = touch.getLocationY() - cc.winSize.height / 2 - self.game.camera.position.y;

加上镜头后的效果

FR

镜头的控制还需要写不少条件。另外,后来才注意到ui不能一起放到镜头了,否则就跟着跑了……

暂时先写到game.js里了,判断两个角色的中心位置,并限制一下镜头的边界。

        if(Math.abs(this.player.position.x + this.enemy.position.x) < 200 ) {
            this.camera.setPosition((this.player.position.x + this.enemy.position.x) * -0.5, 0);
        }

调了一晚上镜头和指示物,最后效果:

FR

意外的帅啊!

不过因为之前我一直用active来清除预制资源,这样是不行的,之后还是要改成对象池。

Day 4

整理对象池,忽然发现我之前的效果节点都没有回收……

之前是把特效和角色分开了,现在看来还是应该放在一起……不论是每个角色都有独特的效果,还是从资源生成与回收的角度来说,两者还是放在一起比较方便……

cocos creator又崩了

我总觉得我很容易玩坏东西……

试了下

FR

原来之前分开是有原因的,因为绑在角色上的话,就变成每个角色只能固定一个效果了,就像一次只能打一发子弹的枪……


FR

为对象池独立一个模块变量,一开始打算把指示物和效果分开的,但是不知道为啥效果的对象池回收提取总是有问题……

所以只把指示物放在对象池里了。

        for (var i = signArr.length - 1; i >= 0; i--) {
            this.animControl({
                anim: signArr[i],
                play: function() {
                    self.node.active = true;
                },
                stop: function() {
                    if(self.node) {
                        self.node.active = false;
                        pool.sign.put(self.node);
                    }
                },
                finished: function() {
                    if(self.node) {
                        self.node.active = false;
                    }
                }
            });
        }

        for (var i = effectArr.length - 1; i >= 0; i--) {
            this.animControl({
                anim: effectArr[i],
                play: function() {
                    self.node.active = true;
                },
                stop: function() {
                    if(self.node) {
                        self.node.active = false;
                        self.node.parent.removeChild(self.node);
                    }
                },
                finished: function() {
                    if(self.node) {
                        self.node.active = false;
                    }
                }
            });
        }

动画游戏 web前端