三分钟教你调试白鹭引擎Egret Runtime 游戏

 时间:2024-11-02 09:08:01

1、当然更好的体验是提供加载进度,不过我们首先从单独的图片做起。首先,我们有一个现成的 Egret 2.5.3 项目。准备这样一张有动画效果的 loading 图片:

三分钟教你调试白鹭引擎Egret Runtime 游戏

2、放到项目的 resource/assets 目录中在项目的 index.html 文件中加入一个div标签,用来显示这个图片:

三分钟教你调试白鹭引擎Egret Runtime 游戏

3、需要注意的一点,就是这个div元素的位置。考虑到这个图片在页面中的作用,应该尽可能早的显示这张图片。所以这个包含preloading的div元素要放到其他的script元素之前,这样整个页面就将首先加载preloading图片。考虑布局,为了使preloading图片显示在正中位置,我们给其设定一些简单的 CSS 样式:

三分钟教你调试白鹭引擎Egret Runtime 游戏

4、注意,样式设置中包含一个z-index属性,该项设置保证了 Egret程序本身所在的egret-player元素出现在页面后不会将preloading元素遮挡。因为即便egret-player元素已经呈现出 Canvas 元素,也不能保证 Egret 程序的内容就能立即呈现。并且基于这个原因,我们将在整个HTML页面的所有其他脚本执行完毕后再隐藏preloading图片。也就是添加到index.html最底部的 script 元素中原有代码的后边,成为:

三分钟教你调试白鹭引擎Egret Runtime 游戏

5、至此,编译运行 Egret 项目,就可以看到在Egret程序内容显示之前会 preloading 图片在转动了。

  • html转chm方法指南
  • 如何获取easyui datagrid的某个属性的值
  • 易语言内存不能为read解决方法
  • ubuntu18.04把左边的dock面板放到底部或者右边
  • C#如何设置图片在PictureBox中的定位方式
  • 热门搜索
    胎记怎么去除 煎蛋怎么做 绿化率怎么算 豌豆怎么吃 雌激素高怎么办 怎么去黑眼圈 怎么怀孕 小猫不吃东西怎么办 包子馅怎么做好吃 胸部疼怎么回事