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

 时间:2026-02-14 13:36:17

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中的定位方式
  • 热门搜索
    3是什么意思 博爱是什么意思 九十岁老人称什么 你也不必牵强再说爱我是什么歌 我学会了什么作文400字 舌头发白什么原因 参数是什么意思 自渡是什么意思 美丽的近义词是什么 粉玫瑰代表什么意思