ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

【Unityで2DRPG】会話中のNPCから感情のアイコンがでる機能を実装(猫の冒険)

Unity で 2DRPG を作っているのですが、NPC(村猫)との会話をもう少し盛り上げてみたくなったので、NPCの頭上に感情のアイコンが出る機能を追加してみました。
今回は"DOTween"というものを使ってみます。

 

プレイ動画(できたこと)

会話中にNPC(村猫)の頭上に「クエッションマーク」や「ハートマーク」が出てきます。
www.youtube.com

DOTween とは

DOTween は移動系のアニメーションが実装できるアセットです。

やりたいこと

会話中にNPC(村猫)の頭上に感情のアイコンを表示する。

  • 会話の中に[{sign-surprised}]という文字列があった場合NPCの頭上に[びっくりマーク]を表示させる。
  • 会話の中に[{sign-question}]という文字列があった場合NPCの頭上に[はてなマーク]を表示させる。
  • 会話の中に[{sign-love}]という文字列があった場合NPCの頭上に[ハートマーク]を表示させる。

実装したこと

DOTween を使って感情アイコンを一時的に表示

DOTweenインストール

以下のサイトからUnityの「PackageManager」に登録します。
assetstore.unity.com
「マイアセットに追加する」ボタンをクリックします。
f:id:a1026302:20201113132349p:plain
[Package Manager]から[DOTween]を選択して右下の[Download]ボタンをクリックします。
f:id:a1026302:20201113132434p:plain
「Import Unity Package」ウィンドウの右下の「import」ボタンをクリックします。

設定

import処理が完了すると以下のウィンドウが開くので、「Open DOTween Utility Panel」ボタンをクリックします。

「DOTweenUtilityPanel」ウィンドウが表示されます。とりあえずセットアップボタンをクリックしてください。

Unityのメニューより設定を開くことができます。

Tools > Demigiant > DOTween Utility Panel > Preferences

「DOTween Utility Panel」ウィンドウが表示されるので、[Apply]ボタンをクリックします。

使い方

スクリプト冒頭でDG.Tweeningをusing指定します。(5行目に追加してます)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
アイコン表示部分

びっくりマークを表示する部分のスクリプトです。

    public void checkIfSuprised(){
        
        if(dialogLines[currentLine].StartsWith("{sign-surprised}"))
        {
            dialogText.text = dialogLines[currentLine].Replace("{sign-surprised}","");
            DOTween.Sequence()
                .AppendCallback(() => surprised.SetActive(true))
                .AppendInterval(1.5f)
                .AppendCallback(() => surprised.SetActive(false)).
                SetLink(surprised).Play();
        }
    }
登録したアイコン

感情アイコンをPrefabAssetで作成しておきます。
f:id:a1026302:20201112174806j:plain
素材は以下からお借りしました。
http://sozairosa.blog.fc2.com/sozairosa.blog.fc2.com

アイコンの位置指定について

NPCの頭上に表示できるように「Position」と「Scale」を調整しておきます。

NPCにPrefabAssetを追加しておきます。

会話にエフェクト追加
  • 会話の設定に[{effect-shake}]を追加
n-白猫
何もないところだけど、ゆっくりしていってね。
n-白猫
{sign-question}。。。?
n-白猫
{sign-surprised}おっ!これは。。。
n-白猫
{sign-love}チャオチュールじゃん!ありがと~

f:id:a1026302:20201112175050j:plain