egret白鹭学习之路(一)---从hello word开始

楼主^#

更多发布于：2019-09-26 18:33

   今天翻招聘信息发现，现在许多公司要求有白鹭H5开发经验，所以有了加入学习计划的想法，现在就让我们从hello word开始白鹭学习之路！
   首先需要搭建白鹭开发环境，前往官网传送门下载白鹭最新版的就好，傻瓜式操作下载安装，不多做描述。
   下载完成之后打开egret launcher，登陆，没有账号注册一个就好，登陆完成点“引擎”，下载你需要的版本，这里我就下载最近的版本5.2.28.下载完成。继续下载工具中的egret wing 3安装完成！
   到这里环境基本搭建好了，开始创建我们的项目，项目 - 新建项目

图片：cjxm.png

项目类型更改为egret游戏项目，选择创建。

图片：sz1.png

图片：sz2.png

继续设置，选择需要开发的游戏类型，有些类型需要特定插件支持，选择下载安装即可，这里我们选择默认的H5游戏

图片：ljjg.png

打开后文件路径结构如图，
各文件夹功能说明

.wing：包括 Egret 项目的任务配置文件和启动配置文件。
wingProperties.json：Egret Wing 项目配置文件。
bin-debug：项目调试时，所产生的文件存放于此目录。
libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。
resource：项目资源文件存放于此目录。
scripts：项目构建和发布时需要用到的脚本文件存放在此目录。
src：项目代码文件存放于此目录。
template：项目模板文件存放于此目录。
egretProperties.json：项目的配置文件。
index.html：入口文件。
manifest.json：网页清单文件。
tsconfig.json：typescript 编译配置文件。

我们需要注意了解的是index.html和src文件夹以及resource文件夹
首先index.html

&lt;div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="30"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"&gt;
    &lt;/div&gt;

data-entry-class：文件类名称。
data-orientation：旋转模式。
data-scale-mode：适配模式。
data-frame-rate：帧频数。
data-content-width：游戏内舞台的宽。
data-content-height：游戏内舞台的高。
data-multi-fingered：多指最大数量。
data-show-fps：是否显示 fps 帧频信息。
data-show-log：是否显示 egret.log 的输出信息。
data-show-fps-style：fps面板的样式。支持5种属性，x:0, y:0, size:30, textColor:0xffffff, bgAlpha:0.9

div上面定义了很多自定义属性，每个自定义属性都关乎我们项目的配置，script标签内提供项目大的启动参数。
启动参数为一个对象，对象包含

“renderMode”: 引擎渲染模式，”canvas” 或者 “webgl”
“audioType”: 使用的音频类型，0:默认，2:web audio，3:audio 默认即可
“calculateCanvasScaleFactor”：屏幕的物理像素适配方法，使用默认的即可

打开resource-assets文件夹，这里是我们存放静态资源的，例如图片，音频，打开default.res.json，如图

图片：config.png

每一个静态资源需要重新配置一个名称，后续main.ts使用会用到。

然后打开我们的src文件夹 - main.ts，这就是我们项目的入口文件了，也是我们的代码所在，相信有TS基础的小伙伴已经对这段代码并不陌生，话不多说，看代码

private createBitmapByName(name: string) {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }

创建游戏场景

private createGameScene() {
       let sky = this.createBitmapByName("bg_jpg"); //
       this.addChild(sky);
       let stageW = this.stage.stageWidth;
       let stageH = this.stage.stageHeight;
       sky.width = stageW; // 宽度
       sky.height = stageH; // 高度
       sky.alpha = .6; //透明度
   }

前面封装了一个函数，根据名称来创建Bitap节点。这里使用的名称就是我们再resource文件夹default.res.json所配置的名称哦

进行到这一步，我们基本对整个项目有了一个初步了解，可以开始运行了F5开始编译，然后就会弹出我们的游戏主界面查看效果哦。

喜欢0

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

egret白鹭学习之路(一)---从hello word开始

最新喜欢：