shuwenkai
新手
新手
  • 最后登录2019-09-27
  • 发帖数4
  • 社区居民
阅读:171回复:0

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
<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">
    </div>

  • 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开始编译,然后就会弹出我们的游戏主界面查看效果哦。
游客


返回顶部