Shawn前段时间尝试用Cocos Creator做了一个PPT，发现还挺好玩的，有很多东西值得去研究，这里给大家分享一点使用Creator制作PPT的一些思路和方法。
1. 页面切换
相信大多数人都知道，PPT是由一页页顺序组成的幻灯片所构成，在Creator中直接使用场景来充当灯片页面是最简单的方式，看下图：
页面之间的衔接有两种方式，一种是使用我们之前讲在过的场景切换组件LoadScene，将组件挂载到一个节点上，点击即可切换，看下图：
这种方式就像做超链接，用起来是简单，但需要一页页地去配置。Shawn这里还尝试了一种方式，编写一个导航组件，解析所有场景文件名并做一个排序，提供向前翻页、向后翻页的接口函数，可以提供Button组件调用，看下面代码：
//Navigation.js
cc.Class({
extends: cc.Component,
onLoad () {
this.pageIndex = 0;
//获取所有场景并排序
this._sceneArray = cc.game._sceneInfos.sort((info1, info2) => {
let num1 = parseFloat(cc.path.basename(info1.url, '.fire').split('-')[1]);
let num2 = parseFloat(cc.path.basename(info2.url, '.fire').split('-')[1]);
return num1 - num2;
});
//设置为常驻节点
cc.game.addPersistRootNode(this.node);
this.node.on(cc.Node.EventType.TOUCH_END, () => {
this.loadScene();
});
},
//根据pageIndex变量加载场景
loadScene() {
let info = this._sceneArray[this.pageIndex];
if (info) {
cc.director._loadSceneByUuid(info.uuid);
}
},
//修改pageIndex
next() {
this.pageIndex++;
this.loadScene();
},
//修改pageIndex
back() {
this.pageIndex--;
this.loadScene();
},
});
将上面这个组件挂载到首场景的一个节点上，在内部放入两个按钮，一个调用组件的next方法,一个调用back方法，看下图：
有了这个导航组件，只需要注意场景命名就行了，场景中的内容尽量使用Widget组件做好相对布局与自适应。
2. 内容逐一显示
在PPT中加入一些互动操作，比如点击屏幕时让文字或内容逐一显示，比如像下面演示一样：
这个操作实现的方法有很多，我在这里写了一个组件脚本，将要控制的节点收集起来，在组件start运行时将节点全部隐藏。
老方法使用Button去调用ActiveNode.setActive函数：
利用这个组件不管是显示图片和文字都可以，现在来看它还有些缺点，如果我们有几十个节点需要逐一显示，要拖动几十次，很是麻烦，如何解决这个问题，大家可以想一下。
在这个组件上还可以做一些扩展，一种是点击显示，一种是由时间间隔显示，可以让我们这个PPT的表现更丰富一点。
3. 点击切换图片
点击图片，切换下一张，可以使用之前讲过的SpriteIndex搞定，不过这里为了让组件少一点，使用起来简单一些，我是从cc.Sprite上继承的，看下代码：
let SpriteEx = cc.Class({
extends: cc.Sprite,
properties: {
spriteFrames: [cc.SpriteFrame],
_index: 0,
index: {
type: cc.Integer,
range: [0, 100],
set(value) {
this._index = value % this.spriteFrames.length;
this.spriteFrame = this.spriteFrames[this._index];
},
get() {
return this._index;
}
}
},
next() {
this.index++;
},
});
//屏蔽一些cc.Sprite不需要的属性
cc.Class.Attr.setClassAttr(SpriteEx, 'spriteFrame', 'visible', false);
cc.Class.Attr.setClassAttr(SpriteEx, '_atlas', 'visible', false);
//条件显示cc.Sprite上的一些属性
cc.Class.Attr.setClassAttr(SpriteEx, 'fillType', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillCenter', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillStart', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillEnd', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'fillRange', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'srcBlendFactor', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
cc.Class.Attr.setClassAttr(SpriteEx, 'dstBlendFactor', 'visible', function() {
return this._type === cc.Sprite.Type.FILLED;
});
module.exports = SpriteEx;
上面代码有点多，主要是继承cc.Sprite后会有一大堆属性会显示到属性面板上，会对组件的使用者产生不好的体验，使用可以cc.Class.Attr.setClassAttr来控制组件属性的显示。
