Unity1Week「あける」作品に使った演出とか諸々の紹介
ご！ピクジンです。
今回のunity1week、皆さんどうでしたか？
いろいろハプニングもありましたが、自分としては結構満足しています。
最近2作目の方ばかり贔屓していますが、1作目の方に寄せられた暖かいコメントは励みになっております。
お話で魅せる系のゲームはまたどこかで挑戦したいですね。
今回のu1wでは、ゲーム制作における自分の強みやこだわりを見つけるのが一つの目標でした。
プランナーを目指しているので企画とコンセプトに沿った設計が得意！なんて言えたらいいんですが、「障子にメアリー」が初めて上手くいった作品なのでまだまだこれからです。
無意識にこだわっていたのは演出面、しかも割とどうでもよさそうな部分なんですね。
こういうのを先にやるせいで今まで失敗を繰り返していましたが、あると見栄えがよくなるのでついやってしまいます。
そんなわけで、今回は「Just You were」と「障子にメアリー」で使用した演出どうやって作ってんの？てのを覚えてる限り紹介します。
やっぱ需要あるのってこういうのだよね〜
なお、この記事ではDOTweenを使っています。
無料版
機能がさらに追加された有料版はこちら
隠しルート出現
「Just You were」で使用。
次の動画のように、隠しルートに入ったら偽の壁が消えるやつです。
newマリとかでよくあるやつですね。
隠しルート発見したら消えるやーつhttps://t.co/MkFSioXXHZでTileMapのカラーのα値弄りやした#unity1week pic.twitter.com/XQnSqcoLfh
— ピクジン (@pikuzin24) December 26, 2020
2DスプライトやタイルマップにはDOFadeが使えないので、拡張メソッドで対応します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Tilemaps;
using DG.Tweening;
public class FakeGround : MonoBehaviour
{
[SerializeField]
private Tilemap FakePlatform = null;
float fakeColor = 1;
float FakeColor
{
get { return fakeColor; }
set
{
fakeColor = value;
Color c = FakePlatform.color;
c.a = fakeColor;
FakePlatform.color = c;
}
}
bool flag = false;
[SerializeField]
private AudioSource SE = null;
[SerializeField]
private AudioClip SE_Appear = null;
private void OnTriggerEnter2D(Collider2D collision)
{
if (!collision.CompareTag("Player")) return;
if (flag) return;
Sequence sequence = DOTween.Sequence()
.OnStart(() =>
{
SE.PlayOneShot(SE_Appear);
})
.Append(DOTween.To(() => FakeColor, (x) => FakeColor = x, 0, 0.5f).SetEase(Ease.OutCubic))
.OnComplete(() =>
{
flag = true;
});
sequence.Play();
}
}まず、プロパティを次のように設定します。
setの記述に注目です。
float fakeColor = 1;
float FakeColor
{
get { return fakeColor; }
set
{
fakeColor = value;
Color c = FakePlatform.color;
c.a = fakeColor;
FakePlatform.color = c;
}
}これにより、FakeColorに数値を入れた時にタイルマップのカラーも変わります。
あとはDOTween.ToでFakeColorの数値を徐々に減らせばOKです。
背景画像がフェードインするのも同じ原理です。
画面遷移のフェードイン・フェードアウト
両作品で使用。
これはもう簡単で、DOTweenのDOFadeを使います。
画面一杯に覆うサイズのUI画像(Panelを使うのがいいかも)を用意し、DOFadeでα値を徐々に変化させてあげれば出来上がりです。
他にも様々な機能があるDOTweenですが、自分はDOFadeばっかり使ってます。
派手なアニメーションじゃないけどあると気持ちいいんですよね。
AudioSourceにも使えるのでぜひ。
textの数字が徐々に変化する
「障子にメアリー」で使用。（右上）
ただUpdate内でポイントの数値増やせばいいだけと思うかもしれませんが、増えてる最中に障子の破り方を決めるメニューに遷移すると予期しない挙動になる恐れがあるためよろしくないです。
なので、テキスト更新用の変数を別に用意し次のようにしました。
[SerializeField]
private Text pointText = null;//ポイントの表示
[SerializeField]
private Text addpointText = null;//+10とか出すやつ
int pointNum = 0;
public int PointNum//他のクラスはここからポイント参照
{
get { return pointNum; }
}
int newPoint = 0;//テキスト更新用
int ptUpdateMode = 0;
private void Update()
{
PointUpdate();
}
void PointUpdate()
{
if (ptUpdateMode == 0) return;
newPoint += ptUpdateMode;
pointText.text = newPoint.ToString();
if (pointNum == newPoint) ptUpdateMode = 0;
}
public void PointAdd(int point)
{
pointNum += point;
addpointText.text = "+" + point;
Sequence sequence = DOTween.Sequence()
.Append(addpointText.DOFade(1, 0.5f).SetEase(Ease.OutExpo))
.AppendInterval(0.5f)
.Append(addpointText.DOFade(0, 0.5f).SetEase(Ease.OutCubic))
;
if(point != 0)
{
sequence
.OnComplete(() =>
{
ptUpdateMode = 1;
})
;
}
sequence.Play();
}
public void PointDecrease(int num)
{
pointNum -= num;
addpointText.text = "-" + num;
Sequence sequence = DOTween.Sequence()
.Append(addpointText.DOFade(1, 0.5f).SetEase(Ease.OutExpo))
.AppendInterval(0.5f)
.Append(addpointText.DOFade(0, 0.5f).SetEase(Ease.OutCubic))
;
if (num != 0)
{
sequence
.OnComplete(() =>
{
ptUpdateMode = -1;
})
;
}
sequence.Play();
}終わりに
今回の評価はこんな感じです。
1作目「Just You were」
2作目「壁に耳あり障子にメアリー」
2作目のアップデートがもっと早ければもうちょい評価上がったと思いますね。
こればっかりはタイミングなんでしゃーない。
公式の企画に申し込む記事これにすればよかったなぁ…
あんな投げやりな記事でなく。
まあこれも成長ってことで。
またこんど。
この記事が気に入ったらサポートをしてみませんか？