#unity1week 作品をアセットでクオリティアップ

最初に

unity1weekのテーマ「夏」で作っていたやつ

#unity1week 猶予10F pic.twitter.com/9hcCrRS3Xv

— すし (@mamesiva64) 2017年7月26日

作っていたのですが、他の物作りたくて開発途中で止めていました。

今回、勉強中の

・PostProcess

・TextMeshPro

・TextFx

等を利用してクオリティアップしアップロードしてみました。

クオリティアップ内容

Post Processing Stack

表示される画像にポストエフェクトをかけるアセットです。

Post Processing Stack使ってみた例 pic.twitter.com/RtE2BzZeFQ

— すし (@mamesiva64) 2017年11月30日

このように変わりました。

説明長くなったので別記事

alpacatech.hateblo.jp

タイトルテキスト

TextMeshPro+TextFxによるタイトルの文字演出を行いました。

TextFxアセット。
センスは置いといて、
こんな感じの演出がコーディング不要ですぐに作れた。
TextMeshProにも対応。 pic.twitter.com/v6SUVXBSiR

— すし (@mamesiva64) 2017年12月4日

演出と、表示時間差を指定するだけですぐに作れます。

説明長くなったので別記事

alpacatech.hateblo.jp

スイカ

スイカは自作です。

スイカ〜テクスチャ＆パターン作成

ここを参考にテクスチャを作り

sphereのマテリアルに設定

オンラインランキング

対応しました

使用アセット紹介

画面演出

画面に様々な効果をつけます。

 テキストアニメーションを楽に対応できます。

拡大しても綺麗に描画できるテキスト

  ピクセル風パーティクルエフェクトです。

最初から光っているのでブルームと組み合わせにくい。

キャラクター

SDこはくちゃんズ・小碓学園夏＆冬制服モデル - ダウンロード - UNITY-CHAN! OFFICIAL WEBSITE

おなじみSDユニティちゃん。

 AssetStoreには最適化されたバージョンがあります。 

ポリゴン数は半分以下。 

パンチなどのモーション

背景

 背景に利用

 ランナー系ゲームに使えそう。今回はスカイボックスを利用

その他

  無料の139種のアイコンです。便利！

以上。

作品はこちらで遊べます。 

無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

【Unity】TextFxを使ってテキストアニメーション

アセット説明

テキストの演出を行うアセットです。

↓PV

www.youtube.com

実際に使ってみた。

TextFxアセット。
センスは置いといて、
こんな感じの演出がコーディング不要ですぐに作れた。
TextMeshProにも対応。 pic.twitter.com/v6SUVXBSiR

— すし (@mamesiva64) 2017年12月4日

WebGLのデモ版

Text FX Unity Plugin Documentation

↑クリックでドキュメント＆WebGLデモ

Intro テキストが出現した時の演出

Main 常駐している時の演出

Outro 終了時の演出

使い方

Unity上での設定

 Unity上でのツールもサンプルと同じ感じです

（FullEditorで細かいカスタマイズも可能）

 

PlayOnStart チェックを入れると実行時に再生。

Delay 実行する時間差。

Intro / Main / Outro は演出です。

開始、ループ時、終了時

たくさんあるのでデモページで確認してください。

今回の件だと
UNITYCHAN!の文字 Delay = 0

真拳の文字 Delay = 1.5

すいか割りの文字 Delay = 3.0

クリックで～の文字 Delay = 4
で勝手にポンポンポンと出てくれました。

スクリプト

uGUI版の場合

public TextFX.TextFxUGUI textFx;

 再生

    textFx.AnimationManager.PlayAnimation(); 

再生中か

 if(textFx.AnimationManager.Playing){
// 再生中
}

TextMeshPro/NGUI に対応する

TextMeshProにも対応していると書いてあるのですが

アセットインポート後すぐ使えるのでなく、 

TextMeshProもインポートし、

 TextFx/3rd Party Asset Support 内にpackageがあるので、

それをまたインポート（ダブルクリックでいいと思います）

 

すると、

メニューにTextMeshProのTextFxバージョンが追加されていました。

NGUIは持っていないのですが、同じようにpackageインポートで行けると思います。

最後に

TextFxは、UIだけでなく、

３Dにも対応しているので、

ゲーム内の演出にも利用できそうです。

【Unity】 Post Processing Stackを色々設定してみた

はじめに

今回はこのアセットを利用しました。

画面に効果がかけられます。

Post Processing Stack使ってみた例 pic.twitter.com/RtE2BzZeFQ

— すし (@mamesiva64) 2017年11月30日

適当に設定するだけで、こんなに変わりました。

使い方

docs.unity3d.com

今回の設定はこんな感じ。

 Antialiasing

ジャギジャギ感をなくします。全体の絵がなじみます。

AmbientOcclusion

周辺光が届かないところを暗くする？

Doc:JA/2.6/Manual/Lighting/Ambient Occlusion - BlenderWiki

陰が引き締まる感じです。

Depth Of Field

指定の距離以外をぼかします。カメラのフォーカスみたいな。

手前と奥をぼやけさせる設定です。

Bloom

明るいところを輝かせるような効果です。

ColorGrading 

画面全体の色補正です。

今回は暗いところと明るいところをくっきりさせました。

Vignette

 画面の周りを暗くする

Bloomが人気ですが、

それ以外にも雰囲気出せるものがいっぱいありました。

Unity Gameウィンドウの中央に線が出る

結論から先に言うとGizmosが有効になっているだけでした。

経緯

線を描くオブジェクトなんて置いていないのに、

気が付いたらGameウィンドウ中央に線が出てました。

Canvasを非アクティブにすると消えたりする。

バグ？

よく見るとGameウィンドウのGizmosが有効になってました。

いつの間に押されたのか分からない。

十数分時間取られたよ。

つらい

UnityのUI周りのアセット調べてみた

UI関連のアセットをあんまり持っていなかったので調べました。

UI(レイアウトサンプル付き)

UI-Builder 

www.youtube.com

UNITY AWARDS2015 FINALISTのアセット。

 UIパーツを組み合わせて作成するアセットです。

豊富なサンプルがあります。

 サンプルは、一枚絵でなく配置されているので

よくあるアイコンアセットと違い配置する手間も省けます。

 Gamestrap UI

www.youtube.com

こちらも、組み合わせてUI作成するアセットです。

評価は★5で高いです。

 

このようなレイアウトサンプルは13種類ありました（2018/08/16現在）

このアセットは素材だけでなく、

ボタンにグラデーションつけたり、

パレット管理で一括で色変更等ができるスクリプトもあるようです。

実際に使ってみました。

alpacatech.hateblo.jp

アニメーションエフェクト

TextFx 

www.youtube.com

テキストを色々なアニメーションで出したり下げたりするアセット。

タイトルや、ステージスタート、レザルト画面の文字が躍ると楽しいですよね。

DOTween等で実装するのもアリですが、

最初から数パターン用意されているのを選んで使える状態にあると楽ですね。

uGUI/NGUIはもちろんTextureMeshProにも対応しているみたいです。

※2017/12/06 追記。購入して試してみました↓

alpacatech.hateblo.jp

UI品質向上

TextMeshPro

www.youtube.com

通常のuGUIのTextを利用する場合、

拡大するとボケた画像になりますが、

TextMeshProの場合は距離情報に置き換えているので拡大してもぼけません。

また事前に準備している画像を利用しているので、通常のフォント描画より高速です。

 SDF Toolkit

www.youtube.com

自作の画像でSDFする場合は、こちら。

アイコン等の画像を拡大してもボケなしで描画できるようになります。

有料と無料があります。

無料は飾りなし、有料はメタリックなどの装飾が付けられます。

ゲージ

 Energy Bar Toolkit

www.youtube.com

 体力ゲージなどのグラフ形式を作成するキットです。

横だけでなく円等の他の形にも対応しています。

配置

Curvy Text

www.youtube.com

こちらは、テキストを曲線の上に配置するアセットです。

曲線なので、円状もできそうです

UI素材（FREE）

無料素材も最近増えてきたのでピックアップ（2018/08/16現在無料）

Asset Store GUI(FREE)

Modern UI Pack(Free) 

 www.youtube.com

  

無料でシンプルでかっこいいUI素材やサンプルがいろいろあります。

2018/4/24現在 namespaceが無いので他のUIとぶつかる可能性があるのが難点

参考

www.asset-sale.net

 139 Vector Icons 

無料で139種類のアイコンがあります。

デフォルトのボタンにこれを乗せるだけでも見栄えが違います。

アイコンは、文字と違い、世界共通情報なので

アイコンに差し替えるだけでもターゲット層が広がります

 SimpleVectorIcons

 こちらは200個

 白い素材はColorを変更して別の色に変更可能です。

  RPG Unitframes(ゲーム用ライフバー)

 

３種類の外枠。

Healthbar等のFillAmountを0.0~1.0に変更するとゲージが操作できます。

ゲーム用ウィンドウ 

宝の地図みたいな紙の素材ウィンドウ

アイコン

Modern & Clean GUI

 

かっこいい。シンプル、SF的な 

Clean & Minimalist GUI Pack

 

かっこいい。スタイリッシュ、フラット

Match 3 Candies Icon Pack

 

かわいい。ポップ。

4500 GUI Elements Pack

 

 かわいい。ファンシー

TextMeshPro - Font Atlasが作成されない

TextMeshProのFont Asset Creatorで

「Generate Font Atlas」を押しても何も反応がなかったので、

いろいろ試したところ、

フォント名が日本語だと発生する模様。

フォント名を英語名に変更したら無事出力されました。

利用したバージョン

・UnityVersion 2017.2.0f3

・Windows10 64bit

・TextMeshPro Beta 0.1.44

利用したフォント

www.fontna.com

UnityCloudBuildが始まらない

Beta期間が終わって、

Unity Collaborate の容量に制限が出来たみたいです。

容量に空きができないとCloudBuildは動作しないみたいです。

Personal(無料)ユーザーは1GBです。

Personalユーザーで今後も多めの容量を使いたい場合は、

月額 $9 のUnity Teamsに入ると利用できます。

 Unity - Unity Teams

Plus/Proユーザーの場合は無料で使えるようです（2017/11/22）現在