Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)006--实现场景切换特效

发表于 更新于 分类于 阅读次数： 评论：

概念

在上节实现了场景切换之后，本节内容就是了解一些场景切换的特效，个人感觉，实际项目中，可能实际用到的特效就那么几个，因为同一款游戏中，为了保持风格一致性，不可能用太多种类的特效，所以特效这块重点还是要了解其使用方法，具体要用的特效可以用的时候再去查。
正常情况下，我们切换场景使用如下语句：

1
cc.director.runScene(newScene);

作业

如果我们要加上特效，只需要将newScene换成我们需要的特效即可，特效太多了，课程中给出了37种转场特效，我将37个特效全部装到一个数组中，转场的时候随机取一个特效播放，具体代码实现如下：

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
//下面再定义一个图层类，
//原则上每个场景每个图层单独应该保存一个文件，然后在project.json中配置加载
//本案例为了说明场景跳转，写在 app.js一个文件里面
var MyLayer = cc.Layer.extend({
    ctor: function () {
        this._super();
        //添加文字标题
        var tit = new cc.LabelTTF("动画转场特效", "", 60);
        tit.setPosition(240, 300);
        this.addChild(tit);
        tit.setTag(1);
        //添加菜单
        // 点击按钮添加文字，来测试runScene的时候，当前场景是否被销毁
        var clickItem = new cc.MenuItemFont("添加文字", this.clickCallback, this);
        // 定义按钮精灵
        var btnnormal = new cc.Sprite(res.btn_a_png);
        var btnselect = new cc.Sprite(res.btn_b_png);
        var btndisable = new cc.Sprite(res.btn_a_png);
        var itemstart = new cc.MenuItemSprite(btnnormal, btnselect,btndisable,this.startScene, this);
        itemstart.setPosition(clickItem.getPositionX(), clickItem.getPositionY() - clickItem.height / 2 - 50);
        var itemhelp = new cc.MenuItemFont("帮助", this.helpScene, this);
        itemhelp.setPosition(itemstart.getPositionX(), itemstart.getPositionY() - itemstart.height / 2 - 50);
        var menu = new cc.Menu(itemstart, itemhelp, clickItem);
        this.addChild(menu);
    },
    startScene: function () {
        //运行失败，原因是cocos 3.x以后都只用runScene了
        //所以我们版本是3.9要用runScene,大功告成
        cc.director.runScene(getRandomTrasition(3, new HelloWorldScene()));
    },
    helpScene: function () {
        cc.director.runScene(getRandomTrasition(3, new HelpScene()));
    },
    clickCallback: function () {
        // 在最上面添加一行文字，如果从第二场景切换回来不见了，说明打开第二场景的时候第一个场景被销毁，切回来又重新初始化了
        var test = new cc.LabelTTF("添加的文字", "", 50);
        var tit = this.getChildByTag(1);
        test.setPosition(tit.getPositionX(), tit.getPositionY() + 100);
        this.addChild(test);
    }
});
//定义一个场景作为入口场景
var MyScene = cc.Scene.extend({
    ctor: function () {
        this._super();
        //定义图层
        var m1 = new MyLayer();
        this.addChild(m1);
    }
});
var HelloWorldLayer = cc.Layer.extend({
    sprite: null,
    ctor: function () {
        this._super();
        var size = cc.winSize;
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
        helloLabel.x = size.width / 2;
        helloLabel.y = size.height / 2 + 200;
        this.addChild(helloLabel, 5);
        this.sprite = new cc.Sprite(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2
        });
        this.addChild(this.sprite, 0);
        var backItem = new cc.MenuItemFont("返回主界面", this.backCallback, this);
        var menu = new cc.Menu(backItem);
        this.addChild(menu);
        return true;
    },
    backCallback: function () {
        cc.director.runScene(getRandomTrasition(3, new MyScene()));
    }
});
var HelloWorldScene = cc.Scene.extend({
    onEnter: function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});
var HelpLayer = cc.Layer.extend({
    ctor: function () {
        this._super();
        var size = cc.winSize;
        var text = new cc.LabelTTF("游戏帮助场景", "", 100);
        text.setPosition(size.width / 2, size.height / 2);
        this.addChild(text);
        var backItem = new cc.MenuItemFont("返回主界面", this.backCallback, this);
        backItem.setPosition(size.width / 2, text.getPositionY() - text.height / 2);
        var menu = new cc.Menu(backItem);
        menu.setPosition(0, 0);
        this.addChild(menu);
        console.log(menu.getAnchorPoint().x, ",", menu.getAnchorPoint().y);
        console.log(menu.getPosition().x, ",", menu.getPosition().y);
        return true;
    },
    backCallback: function () {
        cc.director.runScene(getRandomTrasition(3, new MyScene()));
    }
});

// 帮助场景
var HelpScene = cc.Scene.extend({
    ctor: function () {
        this._super();
        var helpLayer = new HelpLayer();
        this.addChild(helpLayer);
        return true;
    }
});

// 随机获取转场特效
var getRandomTrasition = function (t, s) {
    var index = Math.round(Math.random() * 36);
    return arr[index](t, s);
}

// 本节作业：
// 本节介绍了
// 1.图片按钮
// 2.切换特效
// 以下有更多的切换特效,试着用这些特效晚上上节课的作业

var arr = [];
arr.push(function (t, s) {
    return new cc.TransitionJumpZoom(t, s);
});
arr.push(function (t, s) {
    return new cc.TransitionFade(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionFade(t, s, cc.color(255, 255, 255));
});

arr.push(function (t, s) {
    return new cc.TransitionFlipX(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionFlipX(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionFlipY(t, s, cc.TRANSITION_ORIENTATION_UP_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionFlipY(t, s, cc.TRANSITION_ORIENTATION_DOWN_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionFlipAngular(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionFlipAngular(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipX(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipX(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipY(t, s, cc.TRANSITION_ORIENTATION_UP_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipY(t, s, cc.TRANSITION_ORIENTATION_DOWN_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipAngular(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionZoomFlipAngular(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);
});

arr.push(function (t, s) {
    return new cc.TransitionShrinkGrow(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionRotoZoom(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionMoveInL(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionMoveInR(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionMoveInT(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionMoveInB(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSlideInL(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSlideInR(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSlideInT(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSlideInB(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionCrossFade(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionProgressRadialCCW(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionProgressRadialCW(t, s);
});

arr.push(function (t, s) {
    director.setDepthTest(true);
    return new cc.TransitionPageTurn(t, s, false);
});

arr.push(function (t, s) {
    director.setDepthTest(true);
    return new cc.TransitionPageTurn(t, s, true);
});

arr.push(function (t, s) {
    return new cc.TransitionFadeTR(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionFadeBL(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionFadeUp(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionFadeDown(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionTurnOffTiles(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSplitRows(t, s);
});

arr.push(function (t, s) {
    return new cc.TransitionSplitCols(t, s);
});

运行效果

http://www.cocoscvp.com/usercode/2016_04_10/3f52acf6a69f1b0fa3c08c35f7eb319a87e08d5f

大爷赏点儿呗.

欢迎关注我的其它发布渠道