第三步：项目结构和编译配置

 

Client分为两部分：

Project

逻辑项目Game，使用vscode写代码、编译、调试

素材项目Assets，使用layaair摆界面，制作动画等

Library

Laya引擎

 

这里重点介绍Assets

1、打开layaair

 

2、文件-打开项目

找到Assets文件夹，选择Assets.laya

 

3、切换到编辑模式，可以在这里新建界面、编辑界面

 

 

4、打开文件-项目设置，可以看到我们把资源发布目录设置到了h5mmo

 

UI发布后的ts代码在src/ui

 

5、切换回代码模式可以看到

界面用到的源素材放在assets文件夹

编辑之后的界面放在pages文件夹

 

6、编辑好界面后，F12快捷键导出，可以看到typescript代码放在src/ui目录下

 

我们清楚了Assets项目的结构，发现导出的代码放在了Assets项目中，那么Game项目如何使用呢？

7、打开Assets项目目录，看到两个bat

 

他们的作用就是把生成的ts文件编译为js文件和d.ts声明文件

然后把js文件拷贝到h5mmo目录供运行时加载

把d.ts文件拷贝到Game/libs目录供写代码的时候出现代码提示

每次完成界面编辑后，执行zz_makeJS.bat即可完成上述编译和拷贝操作

第二部分：编译配置

未完待续...

 

 

 

 

 

 

第三部分：自定义组件的使用

把这俩文件夹，checkout到  Laya编辑器   安装目录下面，类似下面这样

http://192.168.8.41:81/project/tools/custom
E:\html5\laya\LayaAirIDE_beta\resources\app\out\vs\layaEditor\renders\custom


http://192.168.8.41:81/project/tools/Custom
E:\html5\laya\LayaAirIDE_beta\resources\app\out\vs\layaEditor\laya\basics\Custom

 

 

Laya刷新编辑器，即可看到组件里面出现了自定义组件