如何自定义 Cocos2d-html5 Loading 界面

html-css09

如何自定义 Cocos2d-html5 Loading 界面,第1张

自定义 Cocos2d-html5 Loading 界面的方法:

自定义一个 Loader.js 文件,实现 Loader 类,完成自定义Loading 界面的具体实现,可以参考LoaderScene 的实现,在其上修改扩充,它完成了修改 Logo 图片,并添加了一个简单的精度条,是加载过程更为一目了然,这里并没有多么炫的效果,只是自定义一个 Loading 界面源码如下:

Loading = cc.Scene.extend(

   _logo: null,

   _logoTexture: null,

   _texture2d: null,

   _bgLayer: null,

   _label: null,

   _winSize:null,

   _processLayer: null,    // 相比 LoaderScene  的实现,添加了两个属性,标示进度条层和进度条长度

   _processLayerLength: null,

   // 构造函数

   ctor: function () {

       this._super()

       this._winSize = cc.Director.getInstance().getWinSize()

   },

   init:function(){

       cc.Scene.prototype.init.call(this)

       // logo 图片和 label 的添加 .. 这里省略,于 LoaderScene 同样

       // 设置进度条层,它就是一个红色颜色层,通过长度来标示加载的进度

       this._processLayerLength = 500

       this._processLayer = cc.LayerColor.create(cc.c4b(255, 100, 100, 128), 1, 30)

       this._processLayer.setPosition(cc.pAdd(centerPos, cc.p(- this._processLayerLength / 2, -logoHeight / 2 - 50)))

       // 可以启用锚点,并设置以满足自己的需要

       // this._processLayer.ignoreAnchorPointForPosition(false)

       // this._processLayer.setAnchorPoint(cc.p(0, 0))

       this._bgLayer.addChild(this._processLayer)

   }

实现LoaderScene方法:

Loading.preload = function (resources, selector, target) {

   if (!this._instance) {

       // 创建一个 Loading

       this._instance = new Loading()

       this._instance.init()

   }

   // ...

   return this._instance

}

运行效果:

cocos2d html中设置sprite 的userData属性的方法是:

由于设置属性的第一个方法没有外部参数依赖,所以写法如下:

p.userData?.setValue("Hello", forKey: "c")

由于userData 是NSMutableDictionary对象,更好的写法是:

p.userData = NSMutableDictionary()

p.userData?.setObject("Hello", forKey: "c")