Construct 2 从零学起 / 基础第3课：HUD+数值条
偷懒了好久= =（好像索尼子也偷懒了那么长时间的样子0A0于是各位有没有觉得上节课内容很复杂？不过这节课会shāowēi简单！
第一个内容：Layers
使用过图形处理软件（除了MSPaint以外{:nm39:}）的都知道有图层这么一样东西……
不过在Construct 2中，Z坐标与Layers共同完成了这一任务。
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/1.png
因此我们会看到，各种乱七八糟的角色与敌人全部糅合在一个图层里[?]，它们的层叠关系是用Z坐标[?]控制的。（不要吐槽帮助的内容
第二个内容：制作HUD
那么HUD是处在一个独立的图层上（因为它不滚动）
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/2.png
那么今天就来创建它：
[*]看到右边的Layers栏（默认的是和Projects栏合并的）
[*]点击加号
[*]选择新的Layer 1
[*]点击铅笔（重命名）
[*]输入HUD
顺便把Layer 0的名字改成Game。
选中HUD图层后，左侧的属性栏里会出现图层的属性。
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/3.png
把Parallax属性改成0, 0（不滚动）。
然后这就是新的HUD了……
不过现在什么都没有，那么加一些东西进去：
[*]确保在Layers栏中选择了HUD层，双击空白处
[*]选择9-patch，名字为“WindowBG”
[*]插入时注意鼠标光标处有个“HUD”
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/4.png
[*]导入图像：这是一个窗口（这是我用1分钟不到坑出来的一张图
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/5.png
[*]不要问我图片为什么这么小——当你关闭了导入图片窗口后，这图片就变得巨大了！
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/6.png
[*]改改大小什么的，我做成了在窗口顶部显示的HUD。
注意在整个Layout的左上角有一块虚线划出的矩形，意为窗口大小，做HUD时十分有用。
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/7.png
于是现在角色不管怎么动都不会影响到HUD了：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/8.png
关于9-patch的解释：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/9.png
那么为什么是16px呢？因为9-patch默认是16px……可以在属性栏里调整，功能还是很全的。
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/10.png
然后继续添加Text：
[*]确保在Layers栏中选择了HUD层，双击空白处
[*]选择“Text”，名字为“HUD_HP”
[*]放下后，调整位置大小与字体
这里在32×32的格子下编辑不太方便，调整到16px：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/11.png
然后把Font和V-align属性改掉：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/12.png
Font不用说，V-align就是Vertical alignment，表示纵向对齐方式。
（Text不用改，因为这个数值是实时更新的，需要在事件页里改动）
之后进入事件页，新建事件：
[*]System→Every tick
[*]HUD_HP→Set text
[*]Text→"HP: " & Player.hp
这边Text写好后就红一片绿一片的：语法高亮。
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/13.png
字符串使用双引号括住，“&”符号为字符串连接符，并会自动将两边内容转为字符串（与VB的&相似）。
事件中的Every tick表示“总是”，就是游戏运行时不停地执行这个事件，达到实时更新的效果（不要把播放声音什么的塞到这个事件里，会很恐怖的……
之后运行，可以看到HP显示出来了：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/14.png
并且会实时更新：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/15.png
于是这个HUD就弄好了（哪个游戏的HUD这么简单……
第三个内容：制作玩家的HP条
血槽的制作……由于C2没有直接的进度条元素所以只能通过组合其他元素来达到效果。这里的一个思路是：
[*]将一个Tiled Background放在一个Sprite上面
[*]把这个Sprite固定在敌人的上方即可
至于为什么要一个用Tiled Background一个要用Sprite，看图示：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/16.png
Tiled Background是直接截取图片的左上角部分，而Sprite是压缩图片。对于纯色的进度条当然看不出什么差异，但我由于一个莫名其妙的理由喜欢使用Tiled Background……
接下来是进度条的实现：
[*]确保在Layers栏中选择了HUD层，双击空白处
[*]选择“Sprite”，名字为PlayerHP_BG
[*]图片大小为64×8，自行制作一个外框
[*]放进HUD里
[*]再建立一个Tiled Background，名为PlayerHP_FG
[*]图片使用类似下图的内容
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/17.png
[*]将Size属性改为62, 6
[*]使用上下左右键将此对象塞入边框中
[*]现在差不多是这样：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/18.png
[*]进入事件页，在Every tick事件下加入动作：
[*]PlayerHP_FG→Set width→62 * Player.hp / 15
62是整个条的宽度，15是玩家的最大HP值。也就是
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/19.png
[*]完毕~
效果：
http://satgo1546.ftp.urpgs.com/contents/URsC2Tutorial/img/3/20.png
于是这节课就完毕了~
然后是这节课的作业，和这节课无关……
目标研究一下Sprite Font
难度V/X
提交方法将你的成果直接写在帖子中，或者使用附件提交capx文件
奖励45银币
感谢收看{:nm06:}这里是本课的范例：测试运行/下载
获得成就！负数HP！
（众：还不快去写教程{:nm01:}
继续给教程点赞.w. Sonic1997 发表于 2014-3-19 12:17 static/image/common/back.gif
获得成就！负数HP！
（众：还不快去写教程
继续给教程点赞.w.
C2里负数宽度也会被绘制，而且还真的会反转过来……
于是下下节课做Game over…… 成果：
页:
[1]