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

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/ 页游

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

Godot3游戏引擎入门之四：给主角添加动画（上）
一.前言说明:我目前使用的 Godot 3.1 预览版,所以会与 Godot 3 的版本有一些区别,界面影响不大,如果要使用我上传的 Github Demo 代码,记得去官网下载 3.1 预览版(或 ...
Godot3游戏引擎入门之十二：Godot碰撞理论以及KinematicBody2D的两个方法
一.前言这篇文章是为后续小游戏的开发做理论铺垫的.嗯,我们前面已经陆陆续续讨论了很多 Godot 中的一些基础元素.基本功能,最后也顺理成章地完成了两个小 Demo : 金币收集小游戏太空射击小游 ...
Godot3游戏引擎入门之十四：RigidBody2D刚体节点的应用以及简单的FSM状态机介绍
一.前言时间飞逝,距离上次更新已经有半年之久!这几个月里我只有三分之一的时间很忙,相反其他时间是比较闲的,但是由于空闲时间非常"碎片化",导致我一直没有集中精力搞自己喜欢的&qu ...
html5游戏制作入门系列教程（八）
今天,我已经准备了一个新的游戏 – SkyWalker.基本上 – 这是用飞飞行模拟射击类游戏.我们的目标到达终点线.这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动 ...
html5游戏制作入门系列教程（七）
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块.所以,现在我们的 ...
html5游戏制作入门系列教程（六）
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.今天,我们将创建我们的第一个完整的游戏 – 打砖块.在这一课中,我会告诉你如何检测基本的碰撞和HTML5的本地存储.您可以使用鼠标和 ...
html5游戏制作入门系列教程（五）
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.今天,这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战.我会教你使用阵列地图并教你如何检测活动对象(坦克)与环境( ...
html5游戏制作入门系列教程（四）
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.今天我们要学习下元素:声音控制与动画.在我们的演示中,你会看到一个飞龙.我们会听到持续的翅膀拍打的声音(我们将循环这个声音), ...
html5游戏制作入门系列教程（三）
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.接下来,我们将开始学习如何添加动画以及一些更有趣的功能.我们的演示将包括一艘太空船飞越时空,并使用一个新的游戏元素 – 对话框 ...

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

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

最新文章

热门文章