Construct2/3

创建于:2017-02-24

创建人: iconboy

103 信息 417 成员
Construct2/3 引擎开发专题

超炫!C2下制作角色的围巾拖尾效果

potion 2017-07-07

很多游戏的主角都有围巾,比如风之旅人,比如魔界战记


围巾在角色移动的时候可以有漂亮的拖尾效果,正巧这两天在制作新案的角色,就打算制作一个可以飘起来的围巾

(只讲思路,具体功能如何是用请自行查找手册或案例)

先上角色:

Image title

首先你需要有一个主角,并且在脖子的地方最好有围巾。我们的目标是,在角色背后添加一条围巾,围巾的连接点在角色背后,只要角色移动就会被带动起来。


方案1物理系统

C2的物理没有柔体,所以只能尝试是用连接obj的方法(joint)来制作:

首先制作6个连接obj,最后一节添加个破损,效果如下:


为每一段obj修改imagepoint,为了能够将他们连接起来,每个obj都需要有0和1两端的imagepoint


接下来给obj添加物理行为,将第一节set postion在角色身上:

接下来在事件里连接每节obj:


这里我尝试是用的是limit revolute joint的连接方式,可以限制每节的旋转角度,防止围巾乱甩:

Image title

看起来效果还行,不过群里有人吐槽说围巾显得太沉了,我自己也觉得效果不太满意,尤其是跳起来的时候甩动的效果不是很理想。

给说这话的人打个码:


所以我决定尝试其他方法


方案2:拖尾效果

所谓拖尾效果就是移动物体产生轨迹拖尾的效果,常见的就是水果忍者那种滑屏效果。

在3D游戏里,拖尾通常用mesh连接的方法做,通过创建边连接的一堆mesh创建轨迹,再给这个mesh赋予一张完整的贴图。但这在C2里行不通,C2里只能依靠创建大量obj来制作,每个obj贴图独立,然后通过fadelitetween等方法,实现尾巴的缩小和消失。

下面来说说如何实现这个效果,首先你需要有一个obj精灵,用于大量创建的元素就是他了。因为我的美术风格是像素的,所以创建一个像素的球:


给予这个精灵fade行为,并在角色移动的时候不断在角色围巾的位置不断创建即可,别忘了给角色加imagepoint


事件表:


效果:

Image title

注意:为了实现拖尾的上下摆动,可以在跑步的不同帧将imagepoint设置为不同的高度位置,这样创建出来的拖尾就会有起伏。

因为精灵在fade后会自动销毁,所以可以做出还效果不错的拖尾效果。但这个效果还不够好,看起来像一堆球连起来,移动速度快的时候中间还有空隙。

为了解决这个问题,需要在两个球之间增加插值补间。即,当发现下个点过远的时候,在两点之间再补差几个球填充中间的空隙。


方案3:拖尾效果+补间插值方案


为了创建插值,我们需要整理一下思路:

    1 需要知道两个坐标,即当两个球过远的时候,这两个球的坐标

    2 通过坐标可以获得两者的距离

    3 通过距离判断往两者之间插入多沙个部件

所以新变量创建:


pos_xy1记录当前的坐标,pos_xy2记录上一个坐标,dis记录两者之间的距离,balance控制补间数量。

首先在开始时记录一次坐标,初始化一下位置赋予相同坐标,防止一开始坐标为0导致出现第一次的拉扯效果:


pos_xy采用 "," 分割记录,获得坐标格式为 “x,y",稍后通过tokenat再拆回来


设置档角色在移动,跳跃,下落的时候,将pos2的值给pos1,再由pos1获取新的位置,由此可以得到前后两帧的位置。

将两帧的距离计算出来,赋予dis


继续写子事件。For语句重复次数由disbalance两个值决定,这个值可以通过设置balance控制,我这里写得值是5。即当两者距离为50像素时,中间插值10个补间。

在循环内开始创建,这里使用了lerp —— 通过lerp计算出两点之间的补间位置。lerp的最后一个值可以填写0-1之间的浮点数,通过改变这个值就可以每次创建不同补间位置。这个值因为知道补间数量就很好获取了。


最后设置其他一些事件,控制角色在非移动状态下不会创建拖尾。得到最终的结果(拖尾使用litetween逐渐缩小),非常流畅,而实际大约也只有60个左右的精灵被创建:

Image title

方案3:持续的效果优化

接下来就是优化效果了,我需要一个逐渐变宽,最后再收小的围巾效果,用litetween不太容易做出来,所以我改用了sine:


同时尝试修改了资源,让其不再平整:


运行看看效果:

Image title

一边调整一边测试效果,最终让我发现了奥义:


将精灵改为多帧的动画,调整speed并改为循环。将前后2帧改为不同的颜色。奇迹出现了:

Image title

最后的步骤,将精灵修改为platform,去掉默认操作,这样拖尾精灵也会被重力影响,出现微量的下坠,完成撒花。

Image title




近期喜欢的会员

 
辣鸡Larj 2017-07-07

我试了下围巾段受到重力掉下去了怎么把它固定上去啊

 
potion 2017-07-07

辣鸡Larj 把第一段set postion给角色

 
辣鸡Larj 2017-07-07

potion 好的 我试试!

 
辣鸡Larj 2017-07-07

成功了!3Q!

 
辣鸡Larj 2017-07-07

但是一直横着,我的imagepoint是左右2头的,怎么让他收到重力作用下垂啊

 
Landily 2017-07-07

很不错,赞 666666

 
辣鸡Larj 2017-07-07

第一个例子那个围巾部分前面的事件是什么啊,我的是不是错了

 
枕头 2017-07-08

牛逼了potion叔!不过这个角色是猫吧,如果我没看错

 
totoyan 2017-07-10

毕竟药水大佬!!!

 
CrapTears 2017-07-11

厉害了我的哥

 
Oncle 2017-07-12

厉害了我的哥

 
potion 2017-07-14

H+ Studio 总有人说是狸猫狐狸和狗……好失败

 

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册