Cocos2d-js 开发记录：Loading载入界面自定义

小灰灰 2022-08-04 15:56 70阅读 0赞

Loading界面是一个cc.Scene具体请看：

http://blog.csdn.net/jonahzheng/article/details/38348255

如果仅仅是想把图片（cocos logo）换掉的话可以修改（frameworks/cocos2d-html5/Base64Images.js）中

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid silver; width:752.727px; word-break:break-word; margin:0px!important; padding:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:12px!important; min-height:auto!important; background:none!important"> 
 <tbody style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
  <tr style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
   <td style="padding:3px; border:1px solid silver; border-collapse:collapse; margin:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; background:none!important"> 
    <div style="margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none rgb(244,244,244)!important"> 
      <code style="white-space:pre-wrap; margin:0px!important; padding:0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; background:none!important">cc._loaderImage</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

变量的值，该值为base64编码的图片数据，在css3中用这个字符串可以直接作为背景，图片到base64编码的转换可以通过这个网站(http://tool.css-js.com/base64.html)进行，效果如下：

![121308112963235.png][]

随便说一下这个文件中另外两个变量：

*  cc.\_loadingImage，是一个gif图，就是等待的动态图
 *  cc.\_fpsImage，大概是使用WebGL显示fps用的数字贴图，图片里面都是重复的数字，如果不用WebGL纯粹用canvas的话，可以把这个字符清空，这样文件也小不少

源引：http://www.cnblogs.com/lailailai/p/4020422.html

[121308112963235.png]: /images/20220731/e0244ee04cdc4a70a84b062e6a003c69.png