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

satgo1546 · 发表于 2014-3-19 11:53:02

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

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

第一个内容：Layers
使用过图形处理软件（除了MSPaint以外

）的都知道有图层这么一样东西……
不过在Construct 2中，Z坐标与Layers共同完成了这一任务。

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

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

那么今天就来创建它：

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

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

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

关于9-patch的解释：

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

然后继续添加Text：

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

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

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

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

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

并且会实时更新：

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

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

至于为什么要一个用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 · 发表于 2014-3-19 12:17:37

获得成就！负数HP！
（众：还不快去写教程

继续给教程点赞.w.

satgo1546 · 发表于 2014-3-19 12:28:40

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

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

灰太狼Wolffy55 · 发表于 2014-4-7 09:55:37

成果：