Construct 2 从零学起 / 基础第3课：HUD+数值条

satgo1546

偷懒了好久= =（好像索尼子也偷懒了那么长时间的样子0A0

---

于是各位有没有觉得上节课内容很复杂？不过这节课会十(shāo)分(wēi)简单！

第一个内容：Layers
使用过图形处理软件（除了MSPaint以外）的都知道有图层这么一样东西……
不过在Construct 2中，Z坐标与Layers共同完成了这一任务。

因此我们会看到，各种乱七八糟的角色与敌人全部糅合在一个图层里[?]，它们的层叠关系是用Z坐标[?]控制的。（不要吐槽帮助的内容

第二个内容：制作HUD
那么HUD是处在一个独立的图层上（因为它不滚动）

那么今天就来创建它：

• 看到右边的Layers栏（默认的是和Projects栏合并的）
• 点击加号
• 选择新的Layer 1
• 点击铅笔（重命名）
• 输入HUD
  

顺便把Layer 0的名字改成Game。
选中HUD图层后，左侧的属性栏里会出现图层的属性。

把Parallax属性改成0, 0（不滚动）。
然后这就是新的HUD了……
不过现在什么都没有，那么加一些东西进去：

• 确保在Layers栏中选择了HUD层，双击空白处
• 选择9-patch，名字为“WindowBG”
• 插入时注意鼠标光标处有个“HUD”
  
• 导入图像：这是一个窗口（这是我用1分钟不到坑出来的一张图
  
• 不要问我图片为什么这么小——当你关闭了导入图片窗口后，这图片就变得巨大了！
  
• 改改大小什么的，我做成了在窗口顶部显示的HUD。
  注意在整个Layout的左上角有一块虚线划出的矩形，意为窗口大小，做HUD时十分有用。
  
  

于是现在角色不管怎么动都不会影响到HUD了：

关于9-patch的解释：

那么为什么是16px呢？因为9-patch默认是16px……可以在属性栏里调整，功能还是很全的。

然后继续添加Text：

• 确保在Layers栏中选择了HUD层，双击空白处
• 选择“Text”，名字为“HUD_HP”
• 放下后，调整位置大小与字体
  

这里在32×32的格子下编辑不太方便，调整到16px：

然后把Font和V-align属性改掉：

Font不用说，V-align就是Vertical alignment，表示纵向对齐方式。
（Text不用改，因为这个数值是实时更新的，需要在事件页里改动）
之后进入事件页，新建事件：

• System→Every tick
  • HUD_HP→Set text
    • Text→"HP: " & Player.hp
      

这边Text写好后就红一片绿一片的：语法高亮。

字符串使用双引号括住，“&”符号为字符串连接符，并会自动将两边内容转为字符串（与VB的&相似）。
事件中的Every tick表示“总是”，就是游戏运行时不停地执行这个事件，达到实时更新的效果（不要把播放声音什么的塞到这个事件里，会很恐怖的……
之后运行，可以看到HP显示出来了：

并且会实时更新：

于是这个HUD就弄好了（哪个游戏的HUD这么简单……

第三个内容：制作玩家的HP条
血槽的制作……由于C2没有直接的进度条元素所以只能通过组合其他元素来达到效果。这里的一个思路是：

• 将一个Tiled Background放在一个Sprite上面
• 把这个Sprite固定在敌人的上方即可
  

至于为什么要一个用Tiled Background一个要用Sprite，看图示：

Tiled Background是直接截取图片的左上角部分，而Sprite是压缩图片。对于纯色的进度条当然看不出什么差异，但我由于一个莫名其妙的理由喜欢使用Tiled Background……
接下来是进度条的实现：

• 确保在Layers栏中选择了HUD层，双击空白处
• 选择“Sprite”，名字为PlayerHP_BG
• 图片大小为64×8，自行制作一个外框
• 放进HUD里
• 再建立一个Tiled Background，名为PlayerHP_FG
• 图片使用类似下图的内容
  
• 将Size属性改为62, 6
• 使用上下左右键将此对象塞入边框中
• 现在差不多是这样：
  
• 进入事件页，在Every tick事件下加入动作：
  • PlayerHP_FG→Set width→62 * Player.hp / 15
    
  62是整个条的宽度，15是玩家的最大HP值。也就是
  
• 完毕~
  

效果：


于是这节课就完毕了~
然后是这节课的作业，和这节课无关……

目标	研究一下Sprite Font
难度	V/X
提交方法	将你的成果直接写在帖子中，或者使用附件提交capx文件
奖励	45银币

感谢收看这里是本课的范例：测试运行/下载

Sonic1997

获得成就！负数HP！
（众：还不快去写教程
继续给教程点赞.w.

satgo1546

Sonic1997 发表于 2014-3-19 12:17
获得成就！负数HP！
（众：还不快去写教程
继续给教程点赞.w.

C2里负数宽度也会被绘制，而且还真的会反转过来……
于是下下节课做Game over……

灰太狼Wolffy55

成果：