当前位置:   article > 正文

【Flutter&Flame游戏 - 拾柒】构件特效 | 了解 Effect 体系

flutter flame effect 完成回调

theme: cyanosis

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 18 天,点击查看活动详情


前言

这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程,发布于掘金社区。如果你在其他平台看到本文,可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正,一切以掘金文章版本为准。本系列源码于 【toly_game】 ,如果本系列对你有所帮助,希望点赞支持,本系列文章一览:

第一季完结,谢谢支持 ~


1. Effect 是什么

比如马里奥吃到蘑菇变大动画;僵尸被寒冰射手击中,整体颜色变成偏蓝色;当主角被击中时闪烁几下,或怪物被消灭时透明渐变消失。这些视觉上的效果处理,会增加游戏的动感,刚好地和用户交互。当你对一个构件进行移动、缩放、旋转、透明度、尺寸、颜色进行换行时,就可以考虑添加 Effect

本质上来说 Effect 是一个 Component ,它往往是被附加在其他构件上,实现功能。也就是说,一般并不单独展示 Effect 构件。另外,Effect 是一个抽象类,不能直接使用,Flame 中提供的 Effect 实现类在 effects 包下,如下所示:


Flame 提供的 Effect 有如下几个,主要分为两类:第一种是进行基本变换操作,及:移动旋转缩放 等;另一种是 ComponentEffect ,为构件添加颜色、透明度、尺寸等变换特效。下面来结合粒子介绍一下。


2. 移动特效:MoveEffect

MoveEffect 支持移动特效,不过它是一个抽象类,不能作为运行时使用。它有两个子类:MoveByEffectMoveToEffect ,分别应用 移动了移动到 某位移。之前点击屏幕,让角色移动到指定位置,用的就是 MoveToEffect 。 下面通过两个一个小例子来介绍它们的使用方式和区别:本文代码均在 【18/01】

当按下数字 1 键时让角色 0.5 秒位移 Vector2(10, -10) 。实现创建 MoveByEffect 对象,设置偏移量和控制器,然后附加在角色构建上面即可。代码如下:

dart void addMoveByEffect(){ Effect effect = MoveByEffect( Vector2(10, -10), EffectController(duration: 0.5), ); player.add(effect); }


当按下数字 2 键时让角色 0.5 秒移动屏幕中心。实现创建 MoveToEffect 对象,设置目标点和控制器,然后附加在角色构建上面即可。代码如下:

dart void addMoveToEffect(){ Effect effect = MoveToEffect( size / 2, EffectController(duration: 0.5), ); player.add(effect); }

另外注意一个小细节,MoveEffect 虽然是抽象类,但定义了 byto 的工厂构造方法,来创建子类对象。本质上和直接使用 MoveByEffectMoveToEffect 没有区别,可以根据自己的喜好来用。我更倾向于用 MoveEffect 的命名构造,感觉语义上好一些。


3. 旋转特效 :RotateEffect

从源码中来看 RotateEffect 也有 byto 两个构造,含义上和移动类似。 by 表示旋转了多少度,to 表示旋转到多少度。


下面通过按下数字键 3 让角色旋转 15° ,通过下面的 addRotateEffectBy 实现;按下数字键 4 让角色旋转到 , 通过下面的 addRotateEffectTo 实现。如下所示:

```dart void addRotateEffectBy(){ Effect effect = RotateEffect.by( 15/180*pi, EffectController(duration: 0.5), ); player.add(effect); }

void addRotateEffectTo(){ Effect effect = RotateEffect.to( 0, EffectController(duration: 0.5), ); player.add(effect); } ```


4. 缩放特效:ScaleEffect

同样 ScaleEffect 也有 byto 两个构造,和前面的也类似。 by 表示缩放了多少,to 表示缩放到多少。


下面通过按下数字键 5 让角色缩放 Vector2(1.2,1.2) ,通过下面的 addScaleEffectBy 实现;按下数字键 6 让角色旋转到 , 通过下面的 addScaleEffectTo 实现。如下所示:

```dart void addScaleEffectBy(){ Effect effect = ScaleEffect.by( Vector2(1.2,1.2), EffectController(duration: 0.5), ); player.add(effect); }

void addScaleEffectTo(){ Effect effect = ScaleEffect.to( Vector2(1,1), EffectController(duration: 0.5), ); player.add(effect); } ```


5. 移除特效: 移除特效

RemoveEffect 的源码中可以看出,这个特效非常简单,甚至连控制器都不需要指定。RemoveEffect 的作用是在 delay 秒后,移除附加的构件。如果时长为 0 ,那这和构件直接触发 removeFromParent 没有什么太大的区别。

如下测试中,点击数字键 7 ,显示边框信息示意,然后在 3 秒后消失。代码如下:

dart void addRemoveEffect(){ Effect effect = RemoveEffect( delay:3 ); player.add(effect); }


6. Effect 的结束回调事件

【第七篇】 人随指动的一文中,使用到了 MoveEffect ,那时有朋友问了一下 Effect 是否有执行完成的回调。这里来解答一下:


其实瞄一眼 Effect 的源码就很容易看到,有个 onFinishCallback 的方法可以监听结束回调:

使用方式也非常简单,直接设置 onFinishCallback 回调即可:

dart void addMoveByEffect(){ Effect effect = MoveByEffect( Vector2(10, -10), EffectController(duration: 0.5), ); effect.onFinishCallback =(){ print('=====onFinishCallback========'); }; player.add(effect); }


另外,注意一点:Effect 中有一个 removeOnFinish 方法,默认为 true ,就表示在特效完成时,会主动从宿主身上移除。如果不想移除可以把该属性设为 false ,可以触发 Effect#reset 方法来让特效在此执行。


本文介绍了 Effect 的体系和基本的用法,写了几个小例子认识变换相关的特效。下一篇我们将继续认识一下 ComponentEffect 系列的特效,特效好有个非常重要的 EffectController 概念,在后面也会逐步介绍。那本文就到这里,明天见 ~

\

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/97756
推荐阅读
相关标签
  

闽ICP备14008679号