了不起的LayaBox:HTML5游戏开发指南
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.2 新建项目

首先,打开LayaAir IDE(以下简称IDE),单击【新建项目】按钮,在新建项目面板中进行下列设置。

• 项目类型:LayaAir空项目。

• 项目名称:myArrow。

• 项目路径:D:\layabox2x\laya2project\chapter2。

• 编程语言:JavaScript。

然后,单击【创建】按钮完成项目创建,如图2.2所示。

项目创建完成后,首先切换到编辑模式,然后单击【菜单按钮】→【文件】→【项目设置】选项,打开项目设置面板(快捷键是【F9】,项目设置面板只能在编辑模式下打开)。

在项目设置面板中选择【预览设置】选项,然后设置下列属性,如图2.3所示。

• 场景适配模式:showall。

• 水平对齐模式:center。

• 设计宽度:720。

• 设计高度:1280。

图2.2 新建项目

图2.3 项目设置

单击【确定】按钮,保存设置。此时,如果运行或调试项目,得到的是一个竖屏的空界面,背景默认为黑色。

切换到代码模式,展开资源管理器中的src目录,单击src/GameConfig.js文件,在编辑器中查看代码,可以发现之前在项目设置面板中设置的属性已经保存在代码中了,具体如下。

注意:src/GameConfig.js文件是IDE自动生成的,手动修改无效。参数设置只能在项目设置面板中修改。

单击资源管理器中的src/main.js文件,查看代码。src/main.js是项目的主入口文件,是一个符合ECMAScript 6(以下简称ES6)标准的JavaScript文件,在创建项目时IDE会自动生成这个文件,具体代码解读如下。

首先,完成了对项目设置参数的加载。随后,定义了一个Main类,并在构造方法constructor中完成了引擎的初始化设置。最后,新建一个Main实例来实现项目的入口功能。代码如下。

Laya.ResourceVersion.enable及方法onVersionLoaded()、onConfigLoaded()实现了资源加载和场景加载的功能。为了更好地了解LayaAir的工作原理,在本章中,不使用场景(Laya.Scene),删除Laya.ResourceVersion.enable及方法onVersionLoaded()、onConfigLoaded(),添加一个新定义的全局方法init()来承载需要实现的功能。修改后的src/main.js文件的完整代码如下。

完成代码修改后,在LayaAir调试模式下调试项目(快捷键【F5】),将得到如图2.4所示的调试结果。可以看到,界面上显示性能统计信息,并在调试控制台输出“Hello World!”。

图2.4 调试结果

注意:在LayaAir调试模式下,console.log是在调试控制台输出的。如果希望在IDE中查看console.log的输出结果,则只能使用调试模式。

至此,我们已经做好了开发项目的准备,是时候了解代码的编译细节了。在代码模式下,在资源管理器中展开bin目录。bin目录是项目编译目录,bin/index.html是整个项目运行的基础文件,其中包含index.js文件,代码如下。

在index.html文件中定义一个loadLib方法,加载模块,代码如下。

打开index.js文件后,会看到下面的语句。js/bundle.js是项目的业务逻辑代码编译后获得的脚本文件,能在其他类库文件的配合下实现项目的功能。打开js/bundle.js文件,可以找到与src/main.js文件相同的代码片段。

由此可见,在IDE中调试或运行项目时,文件调用顺序是bin/index.html→bin/index.js→bin/js/bundle.js。