Laya2.x游戏引擎入门系列（一）：Hello World

Laya环境搭建

本次引擎入门咱们全部示例所有基于目前Laya发布的最新稳定版引擎（Laya2.1.1），编程语言选择TypeScript。

这里咱们不去赘述为何编程语言要选择TypeScript了，你们能够自行百度“TypeScript的优点”，我只能说“一入TypeScript深似海，今后JS是路人”。

如今咱们开始搭建Laya游戏开发环境，简单的来讲，咱们只须要准备2个东西: 一个是LayaIDE、一个是TypeScript。

LayaIDE自己是基于vscode改版的，同时增长了拖拽生成界面的“设计模式”，IDE自己也会自带最新版本的引擎文件，只须要在官网下载IDE便可直接开始Laya游戏开发。

而咱们的TypeScript则更容易安装，直接经过npm安装便可。

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目录的结构去引用的，例如
    ```javascript
    // 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() {
        // 一、初始化舞台，默认背景色为黑色
        Laya.init(800, 600, Laya['WebGL']);
        // 二、建立文本对象
        let txt = new Laya.Text();
        // 三、设置文本对象
        txt.text = 'Hello World';
        // 四、设置文本其余属性
        txt.color = '#fff';      // 文本颜色
        txt.fontSize = 48;       // 字号
        txt.stroke = 3;          // 描边宽度
        txt.strokeColor = 'red'; // 描边颜色
        txt.bold = true;         // 加粗
        txt.italic = true;       // 斜体
        txt.pos(280, 250);       // 位置
        // 五、添加到舞台中
        Laya.stage.addChild(txt);
    }
}

//激活启动类
new Main();

按照图片中的操做顺序编译代码以后在本地浏览器查看效果：

代码效果以下：

好啦，咱们的第一个laya程序“Hello World”完成啦！想要再看看Laya.Text还有什么能够玩的，给你一个连接本身体会吧【连接】

Laya2.x游戏引擎入门系列介绍

笔者19年5月开始深度参与了一个OPPO快游戏项目（相似微信小游戏），从零开始折腾到如今,终于算是入了H5游戏开发的门。目前关于Laya引擎开发快游戏的教程还很少，因而笔者决定把这几个月踩过的坑、解决的问题、总结的经验都记录下来，方便其余准备入坑的同窗提早规避。

Laya2.x游戏引擎入门系列预计会写如下文章，记录如何从零开始完成一个快游戏的开发和上架：

• Laya2.x游戏引擎入门系列（一）：Hello World
• Laya2.x游戏引擎入门系列（二）：UI界面开发
• Laya2.x游戏引擎入门系列（三）：经常使用的动画开发
• Laya2.x游戏引擎入门系列（四）：像素级还原文字【写做中】
• Laya2.x游戏引擎入门系列（五）：数据通讯【构思中】
• Laya2.x游戏引擎入门系列（六）：2D物理世界【构思中】
• Laya2.x游戏引擎入门系列（七）：游戏调试【构思中】
• Laya2.x游戏引擎入门系列（八）：项目工程化【构思中】
• Laya2.x游戏引擎入门系列（九）：上架前最后一步准备【构思中】
• Laya2.x游戏引擎入门系列（十）：常见问题汇总【构思中】
• 未完待续。。。

同时，Laya2目前将引擎代码经过TypeScript进行了重构，你们若是在写代码中遇到什么疑问均可以直接在GitHub源码中找到答案，后续笔者也会写一些关于Laya2源码解析的文章，有兴趣的朋友能够关注。

第一次尝试写完整的教学文章，若有错误或不严谨的地方，请务必给予指正，十分感谢！

关于我

我是一个莫得感情的代码搬运工，每周会更新1至2篇前端相关的文章，有兴趣的老铁能够扫描下面的二维码关注或者直接微信搜索前端补习班关注。

精通前端很难，让咱们来一块儿补补课吧！