DinS Written on 2016/4/21
第四话 友伴
“她的嘴唇是荷花的蓓蕾，她的乳房是曼德拉草的果实，她的玉臂是葡萄的滕蔓，她的眼睛如果仁般宁静，她的眉毛如柳条般缠绕。”
——《罗塞塔石碑》
上一话我们制作了一个新场景并实现了场景之间的转化，现在我们来尝试更加高效的场景制作方式，在本话中我们要制作一个选关场景。
为了更加高效地开发我们需要一个辅助软件，有请cocosstudio。Cocosstudio是一个跟cocos2d-x配套的软件，注意是软件不是引擎，单独使用studio不能完成游戏开发，正确的使用方法是在studio中完成直观的设计，然后生成一个文件并导入你的项目，从而提高开发效率。
本教程将使用cocosstudio1.6作为范例，这个版本已经过时了，但是核心功能都有，依然可以完成制作任务。
首先打开studio，选择UI editor：
进入界面后选择文件->新建项目，在弹出的对话框中输入项目名称和位置，并确认。位置一定要记住，因为sutdio导出的文件要手动拷贝到程序项目的resource中。
建好项目后出现如下界面：
具体的各个控件功能请查阅帮助，这里只介绍本教程需要使用到的控件（最常用的也就是这些 ）。以下将使用序号表明操作步骤。
1.咱们在AppDelegate中指定了分辨率为960X640，所以这里将分辨率（即画布大小）改为这个数值，保持统一。
2.点击资源卡左上角的标志添加必要的文件，在本教程中一律添加图片，然后会看到图片显示在资源区。
3.点住图片控件图标，然后将其拖动到画布上任意位置。（改变分辨率后界面会显示不下整个画布，需要使用鼠标滚轮调整视角。根据鼠标位置视角调整会很飘，多练练掌握） 完成这3步后如下图所示：
这里要详细解说一下。先来看左下的对象结构，studio中的控件全部依附于层（layout），我们添加的控件都是添加到层上，这里的Panel_14就是最底层。另外层也是控件，也可以不断增加层。为了表示谁依附于谁，系统就在名称前面空格区分。接下来看右侧的控件属性，大小不用解释，我都是自己指定大小。常规里面主要看3个东西，名称很重要，一定要改为一个有意义的名字，因为后面我们导入到程序后要根据控件名称获取控件，渲染层级就是谁在谁上面，要注意这里的层级是相对于一个固定的layout里面的层级。如果layout1层级是2，layout2层级是3，那么不管你把layout1里面的控件层级调成多大，还是layout2在上面，layout2里面的控件即使层级是0也会出现在上面。交互是控件是否能相应交互，如果没有勾选即使在程序中绑定了相关函数也不能响应点击之类的操作。位置中主要看坐标，因为我们固定了分辨率所以直接调整xy的数值即可。控件特性因控件而异，在这里图片的特性就是填入哪张图片。
4.将控件名称改为background，大小设置为960X640，位置为480，320，然后将背景图直接从资源区拖动到特性的那张图片里。然后界面就变成这样了：
So easy! 确实就是这么简单。
接下来开始正式制作选关界面，既然是选关，那么这里应该有一些按钮，点击按钮后弹出一个对话框显示关卡信息，在对话框中有两个按钮，一个是返回，一个是进入关卡。这里暂时设计5关，也就要有5个按钮。如果要完成上述UI布局，直接使用上一话的程序代码布局直接就累死了， 但是正如你将看到的，在studio中不费吹灰之力。Let’s go!
1.将background锁定，点击眼睛右边的按钮，锁定后会看到一把小锁。为什么要做这一步？因为如果不锁定，从控件栏拖按钮过来，这个按钮会依附于background图片，而不是Panel_14，我们希望按钮和背景图都依附于Panel_14。
2.拖动一个按钮到画布中，然后摆放到合适的地方。之后重命名为btn_lv1，改大小，增加渲染层级，填入图片等等。重复5次。（这个过程可以直接在对象结构复制控件）全部完成后得到以下界面：
知道按钮图片来自哪里的我给满分。
这里有两个地方需要留意，一是按钮的交互自动为勾选状态，这是十分自然的，按钮就是为了交互而存在的。另外按钮控件的图片有三个栏位，这是该按钮三种状态分别显示什么图片。从左到右依次是正常、按下、不可用。如果只设定了正常状态则按下时默认的效果是按钮放大一下，不可用时依然显示正常状态的图。这里我们将正常和按钮设为一样，不可用为空。
接下来制作按钮按下后的弹窗。实际上当初我琢磨如何做弹窗想了好久。 当时被网上教程误导了，以为要做一个临时场景，切换到临时场景时当前场景不销毁，退出临时场景时返回当前场景（cocos提供了这个功能），后来倒腾了半天，突然焕然大悟：
佛说实相，即非实相，是名实相
所谓弹窗并不是点击按钮后立刻生成一个东西，而是本来就有这个东西，点击按钮后显示出来而已（至少我们目前的制作复杂度可以简化为如此）。于是接下来的任务就是制作5个layout，写上文字和布上按钮，再让其不可见即可。
1.在控件栏中找到层容器控件，然后拖出来。你会发现该控件跟之前的有些不同。最直观的是有颜色，锚点在左下（不记得锚点是什么的请补习前面的教程 ）。其他的差不多。这里先把大小改为960X640，我们希望其铺满整个屏幕，这样后面布局控件比较方便，不然还得换算。坐标改为（0,0），去掉颜色（特性->填充颜色->无颜色）。渲染层级改到2，我们希望这个层在最上面，覆盖住背景图和按钮。名称改为Panel_lv1。得到结果如下：
你会发现交互是钩上的，这里还需要解释一下cocos的触碰监听机制。对于触屏操作，只监听渲染层级最高的的交互层。我要是这么说肯定不懂 。就以目前的状态而论，Panel_lv1是一个交互层，渲染层级在Panel_14之上。如果此时发生触屏操作，那么该操作会被Panel_lv1截获，而不会传达到Panel_14，于是点击在Panel_14上的5个按钮不会有任何反应。如果把Panel_lv1的交互勾掉，则Panel_14可以成功捕获触屏操作。那么现在的问题是应该把Panel_lv1勾上交互吗？当对话框弹出时我们希望玩家只与对话框上的按钮交互，而不是与底层按钮交互，于是答案很明显，应该勾上。但这样不就无法点击底层的按钮了吗？留个悬念，下文揭晓。
2.在Panel_lv1上继续布局控件，拉出一个图片做对话框底纹，拉出两个按钮做进入和返回。注意命名和层级。要加入文字我们使用文本框控件，跟其他控件一样使用。注意文本框没有自动换行功能，于是只能拖入若干个文本框，手动排齐。 不过好消息是因为我们没有操作文本框的需要，所以不需要在程序中一一获取，命名也可以偷个懒了。你可能会想改字体，去网上搜有教程。工作完成后如下所示：
这里补充一个小知识：如何在游戏中显示中文？你可能认为这不是个问题，但如果仔细想想的话没那么简单，实际上这是一个很大的本地化问题。Cocos2d-x提供了label用以显示文字，但是只能显示英文。那有什么途径呢？加载带有文字的图片确实可以，但这样相当于把文字转变为图片，占用空间且不易操作。一种答案其实已经在这里了：使用studio的文本框（text），像上述这样输入的文字可以在手机上正常显示。所以虽然拉多个控件很烦人，但却绕过了一个大问题。当文字过多时这种方法不太好，过于繁琐，但是我们这个示例中足够了。
3.直接复制Panel_lv1，把其他4个关卡的对话框做出来，记得改控件名称。
4.最后一步，将Panel_lv1-5全部设置为不可见，具体做法点击右侧的眼睛标志，我们会发现该Panel上的所有控件也同时看不见了，这应该很容易理解。最后得到如下的对象结构：
回到刚才留的悬念，交互怎么处理？答案：直接设置为不可见即可。这里的不可见并非仅仅指视觉上的不可见，包括功能等都暂时“封印”。 可以简单理解为这个控件在不可见时消失了，例如当按钮不可见时无法响应点击，layout不可见时也不会捕捉操作信号，当我们把Panel_lv1-5全部设为不可见后，我们点击底层的按钮可以正常响应，而按钮的作用把某个Panle_lv设置为可见后，该Panel会拦截所有触屏操作，底层变为不能响应，点击该层的返回按钮后再次将该层设置为不可见，就回到了最初状态。
至此我们完成了studio中的选关界面制作，接下来的问题就是将其导入到程序中并赋予相应的功能，见《cocos2d-x萌新指南（五）——导入cocosstudio文件、获取控件》。