31
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[Unity] Unicessingで作った演出をバナー等の背景に使うといい感じになる

Last updated at Posted at 2018-12-13

この記事は Unity Advent Calendar 2018 14日目の記事です。
前の記事は @adarapata さんによる 「Zenject Signals」 でした。
Zenjectを導入するとPub/Subの仕組みが付いてくるの、お得感がありますね!

実行環境

  • Unity 2018.2.16f
  • Unicessing 0.21.1

概要

勉強会を主催したりお手伝いする際にバナーの作成をやらせていただいております。
そのバナーの作成にUnityを使うと、面白い表現が出来ると最近感じています。
例えば、以前 [Unity] ParticleSystemでMeshを描画してバナー等の背景に使うといい感じになる という記事を書きました。
上記では ParticleSystem を利用して Mesh GPU Instancing を有効にする ことで多量のMeshを生成し、それをバナーの背景に利用するということをしました。

今回は Unicessing というアセットを使用して以下のようなバナーを作った事例を紹介します。
立ち位置的には 「Unicessing 入門/触ってみた」 というものになります。
(Unity Network完全に理解した勉強会は12/11に開催され、近日資料も Unity Learning Materials にて公開予定です)

Proccesing について

Processing はJavaを元にしたデジタルアート/ビジュアルデザインの制作に特化したプログラミング言語および統合開発環境です。オープンソースで提供されています。Processing には 関数群 が用意されており、これらの組み合わせにより図形を描画したり入力を受け取ったりすることとなります。2001年に開発がスタートされた言語であり、既に多くの人の手によってチュートリアル/サンプル/書籍が制作されています。

Processing とは - Processing 学習ノート
Processing基礎最速入門 - catch.jp-wiki

Unicessing について

unicessing1.png

Unicessing - Asset Store
Unicessing: 総合概要
Unityで手軽にProcessingっぽく図形を描いて遊べるアセット Unicessing を作ったの巻 - 遊んで航海記

Unicessing は Processing のような記法で図形描画出来るアセットで、@n_ryota さんが2016年にリリースしました。Unity上で Processing を扱える様にしたことで 「xRを含むマルチプラットフォームへの手頃な対応」「ポストエフェクト等の画面効果の適応が容易」という恩恵を得ることが出来ます。

Hello World

AssetStoreから購入/インポート

Unityで新規プロジェクトを立ち上げて、AssetStoreを立ち上げ、Unicessingで検索/購入。

unicessing2.png

インポートを実行するとUnityのバージョンによっては API Update Required が出ますが I Made abackup, Go Ahead! を選択し、Unityの最新のAPIに追従させて問題ありません。

unicessing3.png

UGraphicsを継承したスクリプトの作成

無事にインポート出来たら、次はスクリプトを記載します。新しく C# Scriptを作成し、例えば以下のように記載します。

UnicessingSample.cs
using Unicessing;
using UnityEngine;

public class UnicessingSample : UGraphics
{
    private int lineCount = 10;
    private Vector2[] positions;

    protected override void Setup()
    {
        positions = new Vector2[lineCount];
        for (int i = 0; i < this.lineCount; i++)
        {
            positions[i] = new Vector2(Random.Range(-10f, 10f), Random.Range(-10f, 10f));
        }
    }

    protected override void Draw()
    {
        for (int i = 0; i < this.lineCount; i++)
        {
            this.drawLine(positions[i]);
        }
    }

    private void drawLine(Vector2 position)
    {
        stroke(255, 255, 255); // Color
        line(position.x, position.y, mouseX, mouseY); // Draw Line
    }
}

Setup には初期化時に実行したい挙動を定義します。Draw には描画したい内容を定義します。下記のサンプルでは mouse 値を参照し線を動かしていますが、内部的に Updateで毎フレーム毎に描画を消しつつ描画し直しているような挙動になっています (ただし noloop() 関数を実行することで描画ループを止めることも可能です)

スクリプトを記載したら、任意のGameObjectにアタッチします。

unicessing4.png

この状態で実行すると、線が lineCount の数だけランダムな座標とマウス座標を結ぶように描画されます。

unicessing1.gif

OpenProcessing からコードを移行してみる

上記のようなコードでシンプルな座標を描画/アニメーション出来ることは分かりました。
しかし、知識の引き出しがない状態だと、何をどうしたら良い表現が作れるのか分かりません。
なので、既に作られている Processing のコードをベースに学習してみることにします。

uniccessing5.png

OpenProcessing は Processing で作られたジェネレーティブアートやゲームの投稿サイトです。
試しに Processing で作られた パーティクルの一覧 を見てみると多くの作品が投稿されていることが分かります。

unicessing2.gif

https://www.openprocessing.org/sketch/460479
今回はこのパーリンノイズを用いたTerrainの作品を見てみましょう。
詳細ページからサンプルとコードを見ることが出来ます。
(こちらのコード自体の理解は こちら の動画を参照)

このコードをUnityに移植してみます。
フィールド値 / Setup関数 / Draw関数のそれぞれを先ほど作ったScriptに持って行きます。

unicessing5.png

いくつか例外が出ていますが、クリティカルなものはそこまでありません。

unicessing6.png unicessing7.png

二次元配列の定義を修正し、floatサフィックス 'f' を付けるのみに留まりました。
修正後の全体のコードは こちら から見ることが出来ます。
先ほどと同じ様に、GameObjectにアタッチして実行すると、先ほど OpenProccesing 上で見たサンプルと同等のものが出力されます。

unicessing3.gif

各種ポストエフェクトを適応する

unicessing4.gif

更にカメラに対してポストエフェクトを適応してみましょう。
Post-Processing を使用し、今回はBloom (発光表現) を適応します
Unity2018からはPackageManager経由で最新のバージョンを落とすことが出来ます。

ooah_2.png

ここからは公式ドキュメントに従い作業を進めます。

  • MainCamera に PostProcessLayer をアタッチ
  • 任意のオブジェクトに PostProcessVolume をアタッチ
  • 任意のオブジェクトのレイヤーと PostProcessLayer で指定するレイヤーを合致させる
  • PostProcessVolume にて Profile を新規で追加する (or 指定する)
  • Profile のファイルを選択し、 Bloom にチェックを入れる
  • パラメータを調整する (主にIntensity)
unicessing8.png

上記の設定でBloomを指定することが出来ました。
この他にも Camera Filter PackColorfulFX といったアセットが手頃に雰囲気を出せてオススメです。

最後に

network_kanzenrikai.png

UnityRecorderを使う など、任意の手段で画像を書き出し、Illustrator等の任意のツールで加工してバナーにしました。

...正直 バナー等の静止画に適応するだけであれば Processing で十分では? ということに気付いた方もいらっしゃると思いつつ、Unityの資源を活かし、ゲームと組み合わせて演出を強化したり、各種プラットフォームに書き出したり出来るのは本当に魅力的だと感じています。

明日は @stdmouse さんによる「[Unity] TestMesh Proで作った文字アニメーションをエディタ上でプレビュする」です!楽しみですね!

31
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?