1.3.3 LayaAir IDE 2.0的下载和使用
LayaAir IDE是LayaAir引擎的集成开发环境。LayaAir IDE在发展过程中先后借鉴了Flash和Unity的设计。为了更好地同时适应2D和3D游戏制作，LayaAir IDE 2.0采用类似于Unity的集成开发环境，主要特点是使用场景、预制体、脚本的拖曳绑定等。在文件结构上，LayaAir IDE 2.0与1.x相比也有较大的调整，虽然使用LayaAir IDE 1.x创建的工程可以在LayaAir IDE 2.0中运行，但不建议使用LayaAir IDE 2.0来维护LayaAir IDE 1.x项目。
考虑LayaAir IDE的版本更新和向后兼容性，本书仅介绍LayaAir IDE 2.0的使用。
LayaBox的官网地址见链接1-5。进入官网后，单击【LayaAir2.0下载】选项，将跳转至LayaAir IDE 2.0的下载页面。可以选择最新的版本进行下载（本书使用的版本是LayaAir IDE 2.0.2 beta），下载后得到一个Zip压缩文件。
为了便于后续的讲解及文件管理，约定如下。
（1）总路径为D:\layabox2x。
（2）LayaAir IDE解压后的路径为D:\layabox2x\LayaAirIDE。
（3）项目路径为D:\layabox2x\laya2project。
（4）各章所用的外部资源文件，存储路径为D:\layabox2x\res。
完成下载和解压后，运行D:\layabox2x\LayaAirIDE下的LayaAir.exe文件，LayaAir 2.0的起始页面如图1.8所示。
图1.8 LayaAir 2.0的起始页面
接下来，新建一个LayaAir 2D示例项目来初步了解LayaAir IDE的使用。单击【新建】按钮，弹出新建项目对话框，如图1.9所示。
图1.9 新建项目对话框
在对话框的左侧有多种项目类型可以选择，在此选择默认的“LayaAir 2D示例项目”，其他项目设置如下。
• 项目名称：firstTest。
• 项目路径：D:\layabox2x\laya2project\chapter1。
• 编程语言：JavaScript。
• 微信/百度小游戏bin目录快速调试：勾选。
完成设置后，单击【创建】按钮，稍等片刻将完成项目的创建工作。
项目创建完成后，页面将自动切换至可编辑状态。通用工具栏位于页面的顶端和左侧边栏内。如图1.10所示，左侧边栏内的【代码模式】和【编辑模式】图标按钮用于切换项目的显示模式，顶部的调试方式可以根据喜好进行选择。
LayaAir IDE的菜单在默认情况下是折叠的，单击如图1.10所示通用工具栏顶部的菜单按钮，将弹出如图1.11所示的功能菜单。
注意：在代码模式和编辑模式下，菜单的功能会有不同。
图1.10 通用工具栏
图1.11 功能菜单
集成开发环境（IDE）的完整页面如图1.12所示，默认打开的是代码模式页面，在页面左侧的资源管理器中列出了项目的目录结构。
• laya目录：包含项目的配置文件。
• bin目录：项目编译目录。
• laya目录：包含原始的美术、音频资源，以及可视化场景的配置文件。
• libs目录：包含LayaAir引擎的功能类库。
• src目录：代码目录。
• firstTest.laya：工程配置文件。
• jsconfig.json：工程的JavaScript参数设置。
图1.12 集成开发环境的完整页面
资源管理器可以通过【Ctrl+B】组合键来显示或隐藏。单击资源管理器中的文件，将在界面右侧的编辑器页面中显示内容并可对其进行编辑。请注意src目录下的GameConfig.js文件，在编辑器页面中可以看见GameConfig.js的第一行内容，具体如下。
GameConfig.js是LayaAir IDE自动生成的文件，不需要做任何修改。事实上，即使修改了这个文件，在项目编译时系统也会自动将其覆盖。这个文件的修改需要在编辑模式下完成。单击界面左侧的【编辑模式】图标，切换至编辑模式页面，如图1.13所示。
编辑模式比较特殊，必须打开一个场景才能显示资源的详细内容。如图1.13所示的编辑模式页面是在工程面板中选择test目录下的TestScence.scene场景后的情景。TestScence.scene是LayaAir 2D示例项目创建的场景，居中显示的是场景的可视化页面，可以滚动鼠标滚轮进行缩放，按住鼠标右键进行平移。页面右侧显示的是场景的属性，场景中的内容是一个树状结构，它的层级关系显示在工程面板的下方。
图1.13 编辑模式页面
工程面板的结构分为如下几个相对独立的部分。
• Scenes：存放场景和预制体。预制体是各种构成场景元素的零件或组件。
• Assets：工程目录下的laya\assets\文件夹，用于存储原始的资源。
• Scripts：存放项目中的代码，可以挂载到预制体或场景中。
• Basics：LayaAir IDE提供的一些标准组件。
编辑模式下的操作将在后续章节中进行详细介绍，本章打开编辑模式页面的目的是完成对页面自适应功能的设置。如果此时按【F6】快捷键或单击页面上方工具栏的【运行】按钮，将看到一个一片漆黑的场景，这是因为尚未正确设置项目的场景适配模式。
确保当前LayaAir IDE在编辑模式下，按【F9】快捷键，将弹出项目设置面板，如图1.14所示。将场景适配模式设置为showall，将水平对齐模式设置为center，单击【确定】按钮关闭项目设置面板，完成设置。
图1.14 项目设置面板
按【F6】快捷键运行项目，效果如图1.15所示，玩法如下。
（1）屏幕顶端不断有盒子落下。如果盒子落到地面，则游戏结束。
（2）单击鼠标，将在屏幕上生成向上运动的小球。
（3）盒子碰到小球后会停止下落。如果盒子被小球击中的次数足够多，则盒子将被击毁。
图1.15 示例项目的运行效果
我们已经对LayaAir 2D示例项目有了大致的了解，接下来将分别把示例项目发布成可以独立运行的Web版本和微信小游戏版本。发布项目的操作和在LayaAir IDE中的步骤相同。单击顶部工具栏中的【发布】图标按钮，将弹出如图1.16所示的发布项目对话框。在发布平台中，可以根据需要选择Web/Native、微信小游戏、QQ玩一玩等发布类型，其他选项可以保持默认设置。设置完成后，单击【发布】按钮，等待片刻，将在项目的目录下自动生成release目录，在发布项目对话框中将显示“发布完成”的提示信息和【打开发布文件夹】按钮。Web/Native项目的发布文件夹是release\web，微信小游戏的发布文件夹是release\wxgame。
图1.16 发布项目对话框
现在，可以尝试发布Web/Native项目和微信小游戏项目了。按照本书的约定，Web/Native项目发布的完整路径是D:\layabox2x\laya2project\chapter1\firstTest\release\web。
将Web/Native项目部署到腾讯COS上的步骤如下。
（1）将示例项目的Web发布文件夹，即D:\layabox2x\laya2project\chapter1\firstTest\release\目录下的Web文件夹，改名为firsttest。
（2）在浏览器中登录腾讯COS。
（3）打开如图1.5所示的存储桶实例详情页面，单击【上传文件】按钮，在上传文件页面将光标移动到【选择文件】按钮上停留片刻，页面会如图1.17所示，弹出一个【选择文件夹】按钮。单击该按钮，然后上传文件夹D:\layabox2x\laya2project\chapter1\firstTest\release\firsttest\。
图1.17 上传文件夹
（4）在Chrome浏览器中打开腾讯COS的访问节点，即链接1-6，在其后加上“firsttest”，就可以访问上传的Web文件了。如图1.18所示，运行效果与在LayaAir IDE中完全相同。微信小游戏版本的发布将在1.3.4节讲解。
图1.18 已发布Web版本的部署效果