uProcessingでお手軽プロトタイピング

これは何?

 Unityは、2D、3D、物理、アニメーション、最新の高度な技術も使いやすい、とても便利な統合開発ツールですね。Processingは、MITメディアラボから開発が始まったシンプルな開発環境で、メディアアートや初心者のプログラミング学習によく利用されている、プログラムによる電子スケッチブック的なものです。

 そしてこの記事で紹介するuProcessingはUnityとProcessingを悪魔合体し、Unity上でProcessing的な書き方をできるようにしてみた誰得なアセットです。

 ちなみにこの記事は、Unityのアセットを8月中毎日紹介するという、Unity アセット真夏のアドベントカレンダー 2014 Summer!の8/26の記事です。前日の記事は、カッコイイエフェクトでおなじみaki(frontakk)さんの「購入したパーティクルアセットをカスタマイズしてみよう」という大変為になる記事でした。

なぜUnity上でProcessing的な書き方を?

 Unityはエディター上でオブジェクトを並べたり、コンポーネントを追加したり、パラメータを調整したりするのが便利なのに、何が悲しくてソースコード中心に書かなきゃいかんのだ! とお思いの方もいるでしょう。

 もちろんマウスで配置して、エディターで中身を編集して使うのもいいです。

 でもちょっと実験したいときに、テキストを画面に出したければ

text("メリークリスマス!", 10, 10);

 と書いたり、矩形を画面に出したければ

rect(20, 20, 300, 400);

 と書き、画像を(以下略)

var apple = loadImage("PSamples/apple");
image(apple, 100, 100);

 と書けば済むとしたら、それはそれでお手軽だと思いませんか?

 そんなわけで、特にプログラミングにはじめて触れるとか、各プログラムで位置や大きさをいろいろ変えたいとき、操作手順の説明をしたくない(コードで完結したい)とき……などに便利かもしれません。

 ただ、Processing風に書きたいなら最初からProcessingを使えばよいですよね。しかし、です! uProcessingはUnityのprefabもそのまま扱えたり、Unity機能と共存も一応考えられていて、UnityChanだって制御できるのです! あと、Unityを使ったマルチプラットフォーム出力を行いたいときにもよいでしょう。

 コード中心にプロトタイピング(試作)したいという変な人はこのアセットで遊んでみてください(でもバグや最適化不足にお気をつけください)。

uProcessingとは

 UnityでProcessingっぽく書けるライブラリ(アセット)一式です。 現在移植してある関数は一部で、最適化などはされていません。 LowLevelAPIで描くのではなく、Hierarchyに普通にGameObjectを生成して使う構成なのが特徴です。 Unity 4を対象としています。

 使い方は簡単、PGraphics(MonoBehaviour)を継承したスクリプトをオブジェクトに貼り付け、setup()とdraw()関数をオーバーライドし、Processingに似た形でコードを書くだけです。Unityのコードもそのまま共存して使えます。言語はC#です。

Primitives.cs

using UnityEngine;
using System.Collections;

public class Primitives : PGraphics {

    protected override void setup() {
        size(512, 512, P3D);
        
        stroke(0, 128, 64);
        strokeWeight(20);
        fill(0, 255, 128);
        rect(20, 20, 300, 400);
        
        noStroke();
        fill(255);
        ellipse(350, 350, 300, 300);

        noLoop();
    }

    protected override void draw() {
    }

    protected override void onKeyTyped() {
        if(key == ESC) { loadScene("Menu"); }
    }
}

ダウンロード

 以下のどれかからダウンロードできます。価格は……無料!

 ※AssetStoreの方はあまり更新していないので、GitHubの方を取ってくるのをおすすめします。

サンプルシーン

 Assets/uProcessing/Scenesに各種サンプルシーンが入っています。

 Menuのシーンから各シーンを呼び出せて、各シーンでESCキーを押すとMenuのシーンに戻れます。

HelloWorld サンプル

HelloWorld サンプル

Menu サンプル

Menu サンプル

Primitives サンプル

Primitives サンプル

Images サンプル

Images サンプル

Shapes サンプル

Shapes サンプル

Dialog サンプル

Dialog サンプル

Earth サンプル

Earth サンプル

Performance サンプル

Performance サンプル

Action サンプル

Action サンプル

JsonData サンプル

JsonData サンプル

Tweens サンプル

Tweens サンプル

Sounds サンプル

Sounds サンプル

デモ

 WebPlayerによるデモはこちら(微妙にMenu内容、挙動が異なります)

拡張の解説

画面モード

 size()で指定する画面モードはProcessing用の座標系であるP2D、P3Dの他、Unity用のU2D、U3Dを用意しています。P系はY軸とZ軸の向きがUnityと逆方向で、オブジェクトを内部的に縮小スケールしてシーンに配置しています(座標指定時の座標がピクセル単位なのでそのまま配置すると大きすぎるので)。

PGameObject

 box()やrect()などもすべて個別のGameObjectとなっています。戻り値でPGameObject型のデータを取得できます。

PGameObejct obj = box(100);

 PGameObjectはMonoBehaviourを継承したコンポーネントなので、obj.gameObjectのような形で通常のゲームオブジェクトにもアクセスできます。

 ちなみにpusMatrix()~popMatrix()を名前付きで呼ぶと、その名前のゲームオブジェクトを作成できます。囲んだ中で呼んだbox()やrect()などは、その名前のゲームオブジェクトの子供になります。

PGameObejct obj = pushMatrix("hoge");
box(100);
popMatrix("hoge");

GameObjectのリサイクル

 box()やrect()などもすべて個別のGameObjectとなっています。毎回消して生成するのが無駄だと感じる場合は、recycle()という関数を呼ぶことで、それ以降同じ順番で呼ばれたGameObjectを消さずに使いまわすようになります。 ただし、完全に呼び出し順依存なので、途中に一時的なGameObjectを生成する場合はnoRecycle()を直前に呼んで、GameObjectを使いまわさないようにしてください。

 beginRecycle()〜endRecycle()やbeginNoRecycle()〜endRecycle()も使えます。なお、beginRecycle(番号)〜endRecycle()で囲ったものはその番号のグループとしてIDが割り振られ、clearRecycle(番号)で破棄できます。

GameObjectのキープ

 recycle()の場合、GameObjectは消さずに使いまわすとはいえ、毎回draw()内で描画指示する必要があります。もっとUnity的に一度生成したら放っておいてもオブジェクトが描画されるような形で使いたい場合、keep()、noKeep()またはbeginKeep()〜endKeep()を使うと実現できます。

 このkeep()を使うとパフォーマンスが劇的によくなります。

便利な拡張関数

 その他、prefab()でPrefabから生成できたり、loadScene()でシーンをロードできたり、raycast()でヒットチェックしたりといったUnity的な便利関数も一部追加しています。

 PGameObjectのメンバーにもanimState、animStateInfo、raycastScreen()、addRigid()とか、いくつかショートカット的メンバーを用意してあります。

 PGraphicsを継承したuProcessingクラスには音、補間、UI関係の便利な関数があります。たとえば、playBGM()、playSE()でサウンドを鳴らしたり、tween()で数値、座標、色などを補間したり、button()やdialog()で簡易的なユーザーインターフェイスを表示したりもできます。補間処理の例をあげるとこんな感じです。

// int型の数値で255から0の値に1秒かけて補間する
PTween t = tween(255, 0, 1.0f, PEase.InCubic);
//int value = (int)t.Value;

// メンバ変数のColor colを灰色から緑に0.5秒かけて補間して
tween(this, "col", Color.gray, Color.green, 0.5f, PEase.OutQuad)
    .wait(1.0f) // 1秒待って
    .to(Color.red, 1.0f, PEase.Linear) // さらに赤に1秒で補間し
    .reverse()  // これまでの補間の流れを逆にして最初に戻る
    .loop();    // それを繰り返す

 詳しくは各サンプルをご覧ください。なお、内部で使われているサウンド用のPSoundや、補間用のPTweenerはuProcessingとは独立して使うこともできます。

ご注意

 Processingにある関数でも、uProcessingには未定義のものや仕様が異なるものがあります。 テストなど不十分のα版ですので、ご注意ください。また今後予告なく仕様を変更することがあります。

 最新版では、stroke()系の描画順など変なところがあるのですが、いまは放置しています。PWireFrameでだけGLを使ってるせいなのかな。

ライセンス

uProcessing

Copyright © 2014 NISHIDA Ryota http://dev.eyln.com Distributed under the ZLIB License.

UnityChan

UnityChanLicenseLogo

UnityChanLicenseLogo

 サンプルで使用しているUnityChanのデータ一式については別途UnityChanのライセンス/利用規約に従う必要があります。