Laya环境搭建
本次引擎入门我们所有示例全部基于目前Laya发布的最新稳定版引擎(Laya2.1.1),编程语言选择TypeScript。
这里我们不去赘述为什么编程语言要选择TypeScript了,大家可以自行百度“TypeScript的优势”,我只能说“一入TypeScript深似海,从此JS是路人”。
现在我们开始搭建Laya游戏开发环境,简单的来说,我们只需要准备2个东西: 一个是LayaIDE、一个是TypeScript。
LayaIDE本身是基于vscode改版的,同时增加了拖拽生成界面的“设计模式”,IDE本身也会自带最新版本的引擎文件,只需要在官网下载IDE即可直接开始Laya游戏开发。
npm i -g typescript
安装完成后,通过命令tsc -v检查,展示当前的TypeScript版本号即表示安装成功。
有很多同学在初次使用TypeScript的时候,会把他简单的当作一个增加类型限制的JavaScript,在刚开始使用中并没有啥大毛病,因为TypeScript本身是JavaScript的超集,你在JavaScript想干的事情在这里都是没问题,但是,为了充分利用好TypeScript,建议大家抽空阅读一下《深入理解 TypeScript》这篇教程。
目录介绍
环境搭建好之后,就可以开始我们的第一个项目了,新建项目 -> 选择“2d示例项目” -> 选择"2.1.1"版本的引擎 -> 点击创建即可。
项目建好之后,我们先来介绍一下他的目录:
.laya:
存放了项目的配置文件、编译&发布脚本(Laya2.2之前编译脚本compile.js通过browserify编译,Laya2.2之后通过rollup编译);
这个目录中的脚本建议新手不要修改避免整个脚本无法正常运行,在熟悉编译脚本之后,如果有特殊编译需求(例如增加代码混淆强度)可以针对compile.js、publish.js做修改;
另外目录中会有chrome的临时文件,建议加到gitignore文件中;
bin:
该目录主要存放编译后的代码文件(业务逻辑代码,在js目录下)、“设计模式”下导出的资源文件(图片、字体、音频、场景等)、引擎代码(在libs目录下)、入口文件(index.html、index.js);
index.js为js的入口文件,可以根据修改需要引入的js库,最终编译工具将会把他们打包成一个文件;
后续在业务代码中如果需要引用各类资源文件,他们的路径全部是根据导出后bin目录的结构去引用的,例如
// destroy.wav在bin/sound目录下 Laya.SoundManager.playSound("sound/destroy.wav");
建议将除了bin/libs之外的全部目录加到gitignore中;
laya
该目录主要用于存放编译前的资源文件(assets目录)、UI配置文件(.laya)、场景文件(pages目录);
libs
该目录存放laya引擎和小游戏引擎的ts类型定义文件;
src
该目录存放业务逻辑代码,官方并没有给出参考的目录结构划分,具体结构划分可以自行决定(我们当前项目的目录划分是按照功能模块进行划分);
GameConfig.ts和ui/layaMaxUI.ts这两个文件是IDE自动生成的,需要添加到gitignore文件中,且src/ui目录一定不要放自己的代码,会被IDE清除;
release(目前没有,发布成功后会生成)
该目录主要存放发布之后的文件,会根据你选择的发布类型做区分web、微信小游戏、oppo快游戏放到不同的目录下;
Hello World
介绍完整个项目的目录结构之后,我们直接上手写我们的第一个laya小游戏“Hello World”。在新建的项目中,将src/Main.ts的内容替换成如下代码:
class Main { constructor() { // 1、初始化舞台,默认背景色为黑色 Laya.init(800, 600, Laya['WebGL']); // 2、创建文本对象 let txt = new Laya.Text(); // 3、设置文本对象 txt.text = 'Hello World'; // 4、设置文本其他属性 txt.color = '#fff'; // 文本颜色 txt.fontSize = 48; // 字号 txt.stroke = 3; // 描边宽度 txt.strokeColor = 'red'; // 描边颜色 txt.bold = true; // 加粗 txt.italic = true; // 斜体 txt.pos(280, 250); // 位置 // 5、添加到舞台中 Laya.stage.addChild(txt); } } //激活启动类 new Main();
按照图片中的操作顺序编译代码之后在本地浏览器查看效果:
代码效果如下:
好啦,我们的第一个laya程序“Hello World”完成啦!
图片来源:http://www.laoshoucun.com/ 页游