IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> Unity3D 2D设计小游戏移动幻影的实现 -> 正文阅读

[游戏开发]Unity3D 2D设计小游戏移动幻影的实现

0. 前言

本片文章是对https://www.bilibili.com/video/bv1sY411V7tx视频中移动幻影是如何实现的一个讲解教程,欢迎大家去B站给我一键三连鸭!

这个项目的整个代码和资源已经上传到了GitHub,大家可以去看一下
链接:https://github.com/MycroftCooper/TigerShooting2DGame

1. 效果分析

在这里插入图片描述
在这里插入图片描述

根据上图的移动幻影效果,我们可以分析出,它应该具有以下几个功能:

  1. 在小老虎冲刺的时候,产生幻影
  2. 幻影的精灵图片应该是那一帧小老虎的动作
  3. 幻影要能定时消失
  4. 幻影的透明度要低于正常的精灵

2. 素材准备

根据以上的四个功能,我们可以知道,实际上幻影的效果可以直接用精灵去实现。

首先我们需要准备好小老虎翻滚的帧动画,并且实现翻滚的功能(此处略过)
在这里插入图片描述
然后我们创建一个幻影的预制体,并为它加上精灵渲染器组件,如下图所示(想要有几个幻影就复制几个预制体)

在这里插入图片描述
在这里插入图片描述

其中精灵是哪张图片无所谓,反正最后要用代码去动态的控制,其中的材质也是精灵图片的默认材质,如下图所示:

在这里插入图片描述

2. 功能实现

2.1 产生幻影

这个功能很简单,就是把预制体移动到小老虎的位置坐标,然后让材质的透明度提升到半透明状态即可:

// 小老虎的动画控制器
private PlayerAnimaController anim;    

public void AddGhost(SpriteRenderer sr) {
  // 把幻影位置设置为小老虎的位置坐标
  sr.transform.position = anim.transform.position;
  // 通过材质的颜色设置,使幻影半透明(更改透明度alpha值)
  sr.material.color = new Color(sr.color.r, sr.color.g, sr.color.b, 0.6f);
  // 使幻影的反转与小老虎一样
  sr.flipX = anim.IsFlip;
  // 使幻影的精灵图片与当前小老虎的一致
  sr.sprite = anim.sr.sprite;
}

2.2 按时间产生与消失

想要让三个幻影从小老虎翻滚开始,按照固定的时间间隔产生,再按照相同的时间间隔消失,这个有很多种方法可以做到。
能立马想到的有:协程,计时器(Timer)等等。
但实际上,我使用的是DoTween里的动画队列Sequence。

代码如下:

using DG.Tweening;

public float ghostInterval;// 幻影出现的时间间隙
public float fadeTime;// 幻影消失的时间间隙

public void ShowGhost() {
  // 初始化一个动画队列
	Sequence s = DOTween.Sequence();
  
  // 产生幻影的动画队列
	for (int i = 0; i < transform.childCount; i++) {
		Transform currentGhost = transform.GetChild(i);
    SpriteRenderer sr = currentGhost.GetComponent<SpriteRenderer>();
    s.AppendCallback(() => AddGhost(sr));
    s.AppendInterval(ghostInterval);
  }
  
  // 幻影消失的动画队列
  for (int i = 0; i < transform.childCount; i++) {
    Transform currentGhost = transform.GetChild(i);
    SpriteRenderer sr = currentGhost.GetComponent<SpriteRenderer>();
    s.AppendCallback(() => sr.material.DOColor(new Color(sr.color.r, sr.color.g, sr.color.b, 0), fadeTime));
    s.AppendInterval(fadeTime);
  }
}

DoTween是一个非常好用且免费的Unity插件,它一般用于解决补间动画的程序控制,在Unity资源商店就可以获得,后面我也会出一期对应的教程!

3. 源代码

using DG.Tweening;
using UnityEngine;

public class GhostTrail : MonoBehaviour {
    private PlayerAnimaController anim;
    public float ghostInterval;
    public float fadeTime;

    private void Start() {
        for (int i = 0; i < transform.childCount; i++) {
            Transform currentGhost = transform.GetChild(i);
            SpriteRenderer sr = currentGhost.GetComponent<SpriteRenderer>();
            sr.color = new Color(sr.color.r, sr.color.g, sr.color.b, 1f);
            sr.material.color = new Color(sr.color.r, sr.color.g, sr.color.b, 0f);
        }
        anim = FindObjectOfType<PlayerAnimaController>();
    }

    public void ShowGhost() {
        Sequence s = DOTween.Sequence();
        for (int i = 0; i < transform.childCount; i++) {
            Transform currentGhost = transform.GetChild(i);
            SpriteRenderer sr = currentGhost.GetComponent<SpriteRenderer>();
            s.AppendCallback(() => AddGhost(sr));
            s.AppendInterval(ghostInterval);
        }
        for (int i = 0; i < transform.childCount; i++) {
            Transform currentGhost = transform.GetChild(i);
            SpriteRenderer sr = currentGhost.GetComponent<SpriteRenderer>();
            s.AppendCallback(() => sr.material.DOColor(new Color(sr.color.r, sr.color.g, sr.color.b, 0), fadeTime));
            s.AppendInterval(fadeTime);
        }
    }
  
    public void AddGhost(SpriteRenderer sr) {
        sr.transform.position = anim.transform.position;
        sr.material.color = new Color(sr.color.r, sr.color.g, sr.color.b, 0.6f);
        sr.flipX = anim.IsFlip;
        sr.sprite = anim.sr.sprite;
    }

5. 后语

这个小项目还有其它很多小技术点,感觉后面可以再跟大家分享一下!你们有说明想要交流的也可以直接跟我留言鸭!
B站账号:https://space.bilibili.com/172549987?spm_id_from=333.1007.0.0
CSDN账号:https://blog.csdn.net/qq_44705559?spm=1001.2101.3001.5343
GitHub账号:https://github.com/MycroftCooper
个人博客:https://mycroftcooper.github.io/

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-08 22:54:07  更:2022-03-08 22:55:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/27 17:42:24-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码