Egret白鹭H5小游戏开发入门（二）

前言：

　　昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题，今天着重介绍H5小游戏开发的起步阶段，如Wing面板的使用，素材的处理，类的说明，开始布局等等。

整体概况：

　　　　根据上一篇文章的提示，我们找到index.html，将帧率data-frame-rate修改成60。根据设计图宽高，我将data-content-width设成640，data-content-height设成1038；

　　就是下图不包括微信工具栏的高度。至于适配模式我先设成exactFit，以canvas的渲染模式运行，这些可根据实际需求设定。

　　保存设置后我们可以关闭index.html了，然后点击Wing面板工具栏中的“构建并运行”按钮，或者点击“项目”—“运行”。

　　如图所示：

　　运行后，Wing会启动你的默认浏览器并以服务器环境方式打开该项目的index页面，为了显示和调试方便，我直接用F12以手机模式浏览。

　　如果编译和运行成功，你会看到如下的Egret的默认页：

　　接下来我们找到项目中的SRC目录，并打开LoadingUI.ts，这是官方预设的loading页面的LoadingUI类。

　　它的效果如图所示，我们可以在chrome控制台中降低网速来查看loading页的效果。

处理代码：

　　接下来我们就要开始操作代码了，我们找到项目src目录下的“主类”，但是Main并非是真正的主类，它跟C等其他的语言的主类不同，不过基本功能是一样的，就是进入主程。

　　由于官方给我们提供了一个案例，所以我打开Main.ts并把预设的一些效果和注释删除。

　　但是Main类下的createBitmapByName()方法，以及前面的加载资源以及配置都要留下来，这部分是我们需要复用的。

　　把没有用的代码删去之后，我们就要写自己的代码了。摁ctrl+s保存代码，点击“项目”并勾选“自动构建”可以在保存后自动编译，然后我们打开浏览器并刷新，我们现在可以看到什么都没有。

 处理资源：

　　当我们把冗余的代码删去之后，同时我们也要把预置的资源素材删去，首先我们进入resource目录下，把asset和config文件夹下的所有素材删掉。

　　删除完之后就把自己需要的素材，例如图片和音频等放置于asset目录下，而配置文件json之类的则放置于config目录下。

　　注意，default.res.json这个资源配置文件不可删除哦，但可以修改名字和路径，一般减少出错我们就让它保持原样就好。

　　当我们把自己使用到的资源放置于asset目录下后，我们再回到wing面板，点击default.res.json进入资源管理界面并刷新，假如你在resource目录下新增了素材，就会弹出以下窗口。

　　点击“是”，则自动添加所有资源到json资源配置文件default.res.json中。

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Egret白鹭H5小游戏开发入门（二）

关键词：H5