在Cocos Creator中使用率最高的非精灵(Sprite)莫属了, 在游戏中我们经常会遇到将一张图片替换成另一张图片的情况,或者是在不同状态时来回切换图片。其实这个功能一点都不难,相信大多数人也都会,特别是对程序员同学来说,更是小菜一碟,但是!回头检视一下编写的代码,能让非编程人员使用上吗?如果不能的话,这篇教程对你和你的伙伴就非常有价值了。
1. SpriteIndex组件
我们这里设计一个SpriteIndex组件,使用组件的index属性来控制Sprite组件的spriteFrame属性,从而得到图片变换的能力。
//SpriteIndex.js
cc.Class({
extends: cc.Component,
//编辑器属性,只在编辑状态有效
editor: CC_EDITOR && {
requireComponent: cc.Sprite, //要求节点必须有cc.Sprite组件
},
properties: {
spriteFrames: [cc.SpriteFrame], //定义一个SpriteFrames数组
_index: 0, //以下划线“_”开始的为私用变量
index: { //index属性控制图片切换
type: cc.Integer, //定义属性为整数类型
//这次没使用notify方式实现属性值的变化监听,改用getter/setter方式
get() {
return this._