如何在玩家点击屏幕时做到强反馈？

今天小雨转甜 · 发表于 2023-12-29 10:33:54

问题描述及使用流程：想在玩家点击屏幕时做一个反馈效果，这个效果就是表现在2D屏幕上的。例如在屏幕上播放一个水圈扩散的效果；但是好像不支持播放2D特效，这种有什么思路吗？

逝水无痕 · 发表于 2023-12-29 11:23:35

可以用图片帧动画，或者3d特效。来实现。
3d特效的话也可以找面片的，保持和摄像机平行即可。
或者也可尝试用gameobject自己写tween动画（会比较耗性能）

山山山 · 发表于 2023-12-29 19:01:50

可以先定义一下想要的点击特效是什么样的，然后看看使用UI是否可以实现。

例如，点击按钮时，会有一个蓝色的光圈从按钮的大小，迅速逐渐扩大并消失。这个效果再细致的描述一下就是：按钮点击时，在0.3秒内，蓝色光圈的图片从按钮大小，变化到按钮大小的2.5倍。蓝色光圈的透明度从0变化到1。
这样，就达到了下面的这个效果。

那么这个效果怎样用代码来实现呢？

可以使用tween动画来对蓝色光圈的变化进行插值，从而连续的设置蓝色光圈图片的属性。例如下面这一段代码：



/**

 * 按钮点击特效

 * @param btn 

 */

    public clickEffect(btn: Button | MaskButton | StaleButton) {

        if (!mw.UIService.getUI(FlyView).visible) {

            mw.UIService.show(FlyView);

        }

        // 初始化位置

        let startPos = new mw.Vector2();

        mw.localToViewport(btn.tickSpaceGeometry, mw.Vector2.zero, mw.Vector2.zero, startPos);



        // 开始动画

        let view = mw.UIService.getUI(FlyView).rootCanvas;

        let go = this.flyUiPool.get();

        go.rootCanvas.visibility = SlateVisibility.SelfHitTestInvisible;

        const startSize = btn.size.clone();

        go.init("181559", 1);

        view.addChild(go.uiObject);

        let animWidget = go.uiObject;

        animWidget.position = startPos.clone();

        go.mIcon.size = startSize;

        const endSize = startSize.clone().multiply(2.2);

        const offsetX = (endSize.x - startSize.x) / 2;

        const offsetY = (endSize.y - startSize.y) / 2;

        const endPos = startPos.clone().add(new mw.Vector2(-offsetX, -offsetY));

        let tween = new Tween({ pos: startPos, size: startSize, tp: 1 }).to({ pos: endPos, size: endSize, tp: 0 }, 300)

            .onUpdate((data: { pos: mw.Vector2, size: mw.Vector2, tp: number }) => {

                animWidget.position = data.pos;

                go.mIcon.size = data.size;

                go.mIcon.renderOpacity = data.tp;

            }).onComplete(() => {

                go.mIcon.renderOpacity = 1;

                this.flyUiPool.hide(go);

            }).easing(mw.TweenUtil.Easing.Sinusoidal.InOut).start();

    }