Posted Articles

水無川旅館 Jul/15/2024 19:25

【Unity・アセット紹介】Text Animator for Unity を使ってみよう!

 こんにちは! 今日はアセットの紹介記事を書いてみたいと思います!

 今回は、 Asset Store にて有料販売している Text Animator for Unity の紹介です!

 Cult of the Lamb 等でも採用されているらしいです。あの特徴的な会話シーンはこれで実装されていたのですね!

 Hijack でも採用しています。 Text Animator for Unity を使うと、たとえば以下の動画のようなことができます!(5秒くらいからの書簡風の表現です!)

一番簡単な使い方! Text Animator コンポーネント

 Text Animator は、 Text Mesh Pro を拡張するコンポーネントです。まずは GameObject > UI > Text Mesh Pro から Text Mesh Pro オブジェクトをつくって、それに Text Animator コンポーネントを追加する形で使います!

前準備

 とりあえずなにはともあれ Text Mesh Pro を作成。

 Text Animator - Text Mesh Pro を Add Component で追加します。

Web アトモスフィア漂うタグ形式でエフェクトを追加

 Text Mesh Pro のテキストに、 HTML みたいなタグ形式で <shake>~</shake> などと書きます。

 使えるタグ一覧はここにあります:Built-in Effects list

(あとで説明しますが、 BehaviorsAppearances and Disappearances は違うので注意してください。今回使うのは Behaviors です)

 あと、ついでに width / height とかも見やすいよう変更しておいてください。私は 1920x1040 サイズの画面に対して、半分の 960x540 のサイズの Text Mesh Pro を中央に表示することにしました。

 これで Play ボタンを押すか、 Text Animator の Preview in Edit Mode というボタンを押します。

 正常に動作すれば、以下の動画のように表示されるはずです!

テキストを文字ごとに表示しよう! Typewriter - By Character コンポーネント

 Text Animator だけですと、文字を揺らしたりはできるのですが、「文字を1文字ずつ表示する」といったことはできません。それをするためには、 Typewriter - By Character コンポーネントを使います。

再び Web アトモスフィア漂うタグを追加

 Typewriter 用のタグも追加します。ただし今度は {fade}~{/fade} のように {~} で囲うことに注意してください。

(前述した Appearances and Disappearances とはこのことです)

 使えるタグ一覧はここにあります(再掲):Built-in Effects list

 消える場合は {#fade}~{/#fade} のように指定しますが、これはタグを指定しただけでは動作せず、後々説明するプログラムから操作しないと動きません。

ノーコード用の設定 Typewriter Starts Automatically

 後で説明しますが、 Typewriter はプログラムで操作するのが基本です。しかし、とりあえず動かしてみたいという場合には、 Typewriter Starts Automatically という設定が使えます!

 この設定は後でオフにしてください。

 この状態で Play すると、以下のように表示されるはずです!

Typewriter をプログラムから操作してみよう!

 特に「文字が1文字ずつ消える動作」を実現するには、プログラムを書くことが不可欠です!

 だいたいこんな感じのコードになります。

using Febucci.UI;

var typewriter = GetComponent<TypewriterByCharacter>();

// テキストが表示されたら即消す
// 必要なら WaitForSeconds などで待つ
UnityAction onTextShowed = null;
onTextShowed = () => {
  typewriter.onTextShowed.RemoveListener(onTextShowed);
  typewriter.StartDisappearingText();
};
typewriter.onTextShowed.AddListener(onTextShowed);

// テキストを表示する
// 消すタグ {#fade}~{/#fade} も一緒に指定する
var text = "hello world";
typewriter.ShowText($"{{#fade}}{{fade}}{text}{{/fade}}{{/#fade}}");

Hijack 内部でマジで使われている特典コード

 このあたりの処理は汎用的に書けますので、 Hijack 内部のコードを一部抽象化して公開します…!

 なお、著作権は放棄していません。MPL 2.0 というライセンスで提供します。使用する場合は、クレジット表記・ライセンス表記はお願い致します。

 また無保証です(OSSでよくある条件です)。このコードを使うことで起きたいかなる事態にも責任は負いかねますので、ご了承ください。

特典コードの利用規約

 特典コードは Mozilla Public License, version 2.0 (MPL 2.0) で提供されています。 MPL 2.0 の日本語参考訳もあります。

Exclusive to users above "Follower"Free

無料プラン限定特典を受け取ることができます

Free

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.

水無川旅館 Jul/15/2024 06:52

【Unity】ポストプロセスの設定を実行時に変更する方法

 こんにちは! 今日は Unity 技術記事を書いてみたいと思います。

 今回のお題はポストプロセスの設定を実行時に変更することです!

 今回の環境は

 前提です!

ポストプロセスって?

 まず大前提として、ポストプロセスというのは以下のように、画作りの最終工程で見映えを良くするシステムです。

ポストプロセスあり

ポストプロセスなし

 ポストプロセスなしというのも、これはこれでありな気がしてきたな((

 とはいえ基本的には、ありのほうがモダンな感じになると思います。

ポストプロセスのエフェクトはどう定義されているの?

 PostProcessing Stack v2 では、 PostProcessEffectSettings というクラスを継承して、エフェクトは作られています。

 もしエフェクトを自作したい場合、このクラスを継承すればOKです!

エフェクトをスクリプトから取得するには?

 このエフェクトをスクリプトから取得するには、 PostProcessProfile クラスの GetSetting または TryGetSettings メソッドを使います。

 また、 PostProcessProfile のインスタンスは、 PostProcessVolume クラスの profile プロパティから取得することができます。

 そして、 PostProcessVolume クラスのインスタンスは、おなじみ GameObjectMonoBehaviourGetComponent 関数を使えば取得できます!

 そこで、仮に PostProcessProfile を継承したエフェクトのクラスを T とすると、以下の形式で設定を変更することができます!

using UnityEngine.Rendering.PostProcessing;

var volume = GetComponent<PostProcessVolume>();
var effect = volume.profile.GetSetting<T>();

// FloatParameter なので .value が必要
// effect.foo.value = 0.5f;

(注意:パラメタは FloatParameter 等で定義されていることが多いです!)

つまり…どういうことだってばよ?

 仮に Unity 標準の Vignette の Intensity を変更したいとすると、以下のようにすればいいのです!

using UnityEngine.Rendering.PostProcessing;

var volume = GetComponent<PostProcessVolume>();
var vignette = volume.profile.GetSetting<Vignette>();

// FloatParameter なので .value が必要
// vignette.intensity.value = 0.5f;

 注意点としては、予め Vignette の intensity のチェックマークをつけておく必要がある、というものがあります。これをつけないと、数値を変更しても反映されません。


↑!!intensity にチェックしておく!!

他のエフェクトのサンプルコードもほしいんですけどーー!!

 さすがにそこまで列挙するのは無理です(w

 他のエフェクトの場合、Unity 標準のエフェクトなら、PostProcessEffectEffectSettings のドキュメント を読んで、必要なクラスやプロパティを見つけます。

 アセットの場合、ドキュメントやコードがついていることが多いと思いますので、そのドキュメントやコードを読みながらって感じです。

 どっちもなかったら……。さすがにそんなことはないと思いたいですねw

 このあたりは、各々アセットごとに対応するしかなさそうです。

DOTween との合わせ技も可能!

 実際には、ポストプロセスをアニメーションさせたいことも多いんじゃないかと思います。 DOTween との併用ももちろん可能です!

 そういうのを駆使すると、このような表現ができるようになります。

おまけ:DOTweenで設定変更するサンプルコード RPGのエンカウント風表現

 フォロワー限定で、 DOTween でポストプロセスの設定を変更するサンプルコードを公開したいと思います…!

 参考にするもよし、そのまま使うもよしです。そのまま使っても、下記のように、RPGで敵にエンカウントした時のような「ズーム」する感じの表現ができます。


↑車の横あたりにエンカウント判定があります

特典コードの利用規約

 特典コードは Mozilla Public License, version 2.0 (MPL 2.0) で提供されています。 MPL 2.0 の日本語参考訳もあります。

 なお、著作権は放棄していません。MPL 2.0 というライセンスで提供します。使用する場合は、クレジット表記・ライセンス表記はお願い致します。

 また無保証です(OSSでよくある条件です)。このコードを使うことで起きたいかなる事態にも責任は負いかねますので、ご了承ください。

Exclusive to users above "Follower"Free

無料プラン限定特典を受け取ることができます

Free

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.

水無川旅館 Jul/14/2024 20:18

Hijack テンシノコクハク プロローグ演出

 こんばんは! 今日の進捗を報告します。

招待状のプロローグ演出を実装!

 タイトル画面からスタートすると、プロローグの演出として短いですが招待状的なテキストが表示されるようにしました。

 あと、細かくて伝わりにくいと思いますが、セピア色→フルカラーの変化をフェードインにして、「回想シーン→現在」のような変化を演出しています!

 この演出があることで、プロローグは短いながらも「テーリがここまでに来るまでの経緯」「ここから向かう先・目的」が想像できるようになったのではないかと思います。

 ストーリーの冒頭として最低限必要な表現をしつつ、アクションゲームですので、早くプレイヤーがアクションできるようになるという、うまい表現ができたのではないかと思います!

他のオプションについて

 タイトル画面でボタンを押すと、いきなりゲームが始まります。コンフィグといったものもなしです。

 これについてなんですが、最近のゲームは、タイトル画面でコンフィグだとかをさせてからゲームを開始するよりも、できるだけ早い段階でゲームを始めさせて、ゲーム内でコンフィグを設定できる方式が多いように思います。

 タイトル画面すらなくて、起動即ゲームが始まって、ゲーム内の特定の場所まで進行するとタイトルが出現する方式もありますね(映画っぽい感じ)。これも憧れです。

 こういった UI 面では、モダンなゲームにあわせたほうがいい、と私は思っています。ですので、コンフィグはゲーム開始後にすることにしました。

環境設定 等

 ただ、ゲーム内の設定ではなくゲーム外の環境設定的なもの……。たとえば画面サイズだとかは、起動時に選べたほうがいいですね。言語設定とかもそうかもしれません。

 PCゲームでは、プレイヤーが遊ぶ環境は非常に多様なので、そこは設定できるようにするつもりです!

サウンドルーム等

 前作まではサウンドルーム等があります。今作でも実装しようと思っているのですが、今回はタイトル画面ではなく、テーリを操作して街の施設に行くことで音楽が聴ける、という方式にしようと思っています。

 こういった UI 自体がゲームになっている、という方式、すごい憧れですので!

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.

水無川旅館 Jul/14/2024 00:45

Hijack 新作進捗 タイトル画面&タイトル初公開!

 こんばんは! 今日の進捗を報告します。

タイトル画面のデザイン

 今日はタイトル画面のデザインをしていました。なかなかレトロでかっこいい感じになったと思います!

Hijack のテーマは「レトロでサイバー」

 レトロな雰囲気なんですが、背景をよく見るとサイバー系の模様になっています。これは、 Hijack というのが近未来(2070年代)を舞台としつつ、レトロな世界観(1970年代)のイメージだからです。レトロフューチャーというやつです。

 スチームパンクはジャンルとして近い気もしますが、蒸気系ではなく、がっつり電子系の世界です。しかし、世界観は「1週回って」1970年代に回帰しているのです。

 世界は螺旋状に発展していて、100年も経てば技術はそのままに、文化・世界情勢は過去の世界に回帰します。そういうイメージで、「50年後の未来には、50年前の世界がある」というのが、 Hijack が描きたい世界なのです。

 そこでタイトル画面はそういう雰囲気の画面にしてみました!

タイトル初公開!

 こんな形になりますが(?)、 Hijack 新作のタイトルを初公開します。新作のタイトルは……「Hijack テンシノコクハク」です!!

 テンシノコクハクの意味は、ぜひ本編を遊んでみてください。完成したら、ぜひぜひよろしくお願いします~~~!!!

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.

水無川旅館 Jul/12/2024 20:18

Hijack 新作進捗 ボス体力ゲージ&星出現

 こんばんは! 今日の進捗を報告します。

ボス体力ゲージ&倒したら星出現→クリア

 ボスの体力ゲージを表示し、倒したら星が出現してクリアできるようになりました!

 これで1面のひと通りの機能が実装できたことになります!

ボスの難易度調整・倒し方色々

 ボスの難易度を調整して、だいぶ簡単になりました。

 大きな変化として、星が出現する足場に立ってテーザーを撃てば、地道に少しずつですがダメージを与えられるようになりました! テーザーを撃ちまくれば2分程度で倒せます。これでさすがにどんな初心者でもクリアできないということはなくなったと思います。


↑長いですが、一応倒すまで検証してます。

難易度調整の方針


 前回の記事で、「ボスは倒さなくても素通りできるようにする」みたいなことを書いたばかりなんですが……。スマン、ありゃウソだった。

 ボス撃破はストーリー上必須にしようと思っています。これは、初心者向けの難易度調整で、いい案が浮かんだことが理由です。

  • 初心者は簡単な方法で、地道にだがダメージを与えて倒せる
  • 上級者は凝った方法でDPSをあげて、あっという間に倒せる

 という感じにしようと思っています。

 たとえば動画では、一瞬で 800 ものダメージを与えて倒しています。ドローンを8体もハイジャックしているのですから、これはこれでいいと思うのです。

 ただ、ドローンをハイジャックして連れていくという発想が初心者にはないこともあると思います。そこで、全くハイジャックせずともクリアできる方法は用意したい。そこで足場を用意し、テーザーだけで倒せるようにしました。

 基本的にはこの方針で、初心者でも地道にやれば最低限クリアできる方法は用意しつつ、もっと難しい方法でスピーディにクリアする方法も提供する、という感じにしようと思っています。「RTAが楽しいゲームにしたい」という Hijack の当初の方針ともあっていると思います!

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.

« 1 2 3 4 5 6 7

Monthly Archive

Search by Exclusive Perks

Search Articles