阅读:4490回复:0
egret白鹭学习之路(一)---从hello word开始
今天翻招聘信息发现,现在许多公司要求有白鹭H5开发经验,所以有了加入学习计划的想法,现在就让我们从hello word开始白鹭学习之路!
首先需要搭建白鹭开发环境,前往官网传送门下载白鹭最新版的就好,傻瓜式操作下载安装,不多做描述。 下载完成之后打开egret launcher,登陆,没有账号注册一个就好,登陆完成点“引擎”,下载你需要的版本,这里我就下载最近的版本5.2.28.下载完成。继续下载 工具中的egret wing 3安装完成! 到这里环境基本搭建好了,开始创建我们的项目,项目 - 新建项目 图片:cjxm.png 项目类型更改为egret游戏项目,选择创建。 图片:sz1.png 图片:sz2.png 继续设置,选择需要开发的游戏类型,有些类型需要特定插件支持,选择下载安装即可,这里我们选择默认的H5游戏 图片:ljjg.png 打开后文件路径结构如图, 各文件夹功能说明
我们需要注意了解的是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>
div上面定义了很多自定义属性,每个自定义属性都关乎我们项目的配置,script标签内提供项目大的启动参数。 启动参数为一个对象,对象包含
打开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开始编译,然后就会弹出我们的游戏主界面查看效果哦。 |
|