UnityでCreativeCodingをするチュートリアル「Hello Unity – Unity Creative Coding 101」をやってみました。

001 002

Youtubeに公開されているrbarraz.comさんの「Hello Unity – Unity Creative Coding 101」をやってみました。このチュートリアルははじめてUnityを使う人向けで、なおかつ題材にゲームではなく、CreativeCodingを使っているチュートリアル動画でした。

私は英語ができませんが、Unityを操作しながらなので一時停止しながら進めることができました。このチュートリアルは本当のUnity初心者も対象にしているため私のようにブロック崩しや玉転がしを作って、Unityの操作にある程度慣れてきた人にとっては導入部分は、Unityの操作説明なので退屈でした。

全体的には、Unityの基本操作とプログラミング言語の基本部分なので、そこまで難しいものではありません。しかし6番目の動画「Hello Unity 06 : SIN() City」は、はじめて三角関数を使う人には、Unity+CreativeCoding+C#+Math Sinという様に複数の事を同時に学習している状態になるので、何か補足資料を日本語で用意しないと大変だと思います。

最後の2章でLight ProbeとEffects(DOF,Bloom)を使います。ブロック崩しなどの初心者向けチュートリアルにはライティングについて扱っているものがないので非常に参考になりました。やっていることは単純ですが初めのとっかかりとして最適です。

チュートリアルで作成するC#スクリプトは以下になりますが、とてもソースコードの量が少なく、以下のコードになるまでに、何回もUnityで再生を繰り返しながら、ソースコードを修正していくので、初心者の方はどういう風にコードを変更していけばよいかもわかってくると思います。

全体のキューブ生成スクリプト

キューブの回転移動スクリプト

 

UnityでNodeGarden その2

001

前回「UnityでNodeGarden その1」ではとりあえず箱を表示することしかできませんでしたが、LineRendererとカメラのImageEffectsによるBloom、ParticleSystem、オブジェクトの発光で上記の画像のように表示することができました。

まだ問題があって、LineRendererの描画が残ってしまい、ノードが移動すると、どんどん線が増えて行ってしまう状態です。これを解決するにはLineRendererを使っているサンプルなど、他人のプログラムを試す必要がありそうです。

ちなみに最初のコードは以下のような感じでした。我ながらだいぶ成長できたと感じます。

unity01

 

 

ソースコード

元々はLineを生成するためのコードだったのですが、現在はノードを50個生成するソースコードです。これは特に難しいことはしていません。

 

LineRendererで線を描画するスクリプトです。一度引いた線を消すことができていないので実装を修正する必要があります。

 

プロジェクトの配布

このプロジェクトはかなりソースコードが途中ですが配布します。

http://hajimete-program.com/games/LineRendererSandbox.zip

 

 

UnityでCreativeCodingをするための動画チュートリアル

Unityのライティングについて調べていこうとするとやはり公式マニュアルなどをちゃんと見ていないので検索するキーワードが曖昧になってしまい目的の情報にたどり着かない場合があります。

こういう時は、比較的シンプルなプロジェクトを試してみて経験や知識を蓄えて見るのもよいかもしれません。以下は、Unityでプリミティブオブジェクトを使ったクリエイティブ・コーディングのチュートリアルです。

 

 

 

UnityでNodeGarden その1

unity01

UnityでProcessingで作ったのNode Gardenのようなものを作って見ようとしているのですが、いくつか分からないことがあります。

エッジはどうやって作ればよいのでしょう。

ノードをつなげるエッジは、Spring Jointを使って実現できそうですが、プリミティブオブジェクトをコードで伸縮させるのは面倒そうです。それともパーティクルのようなものでエッジを実現すればよいのかわかりません。

レイキャストができるので、それで照射して一定区間なら、その光線に対してパーティクルを設定するなどができそうな気もします。

上記からできる出来ないは別にして、課題ができました。とりあえずパーティクルが面白そうなのでパーティクルを調べてみます。

  • パーティクルを調査
  • レイキャストを調査
  • ジョイントを調査

ひとまず線を引くということでよければ以下が参考になりそうです。

意外と簡単!Node Gardenを作ってみましょう!

 

node_garden

 

Node Gerdenは、白丸を線で繋いだアニメーションです。白丸をTwitterのアイコンにしたり、Youtubeのお気に入り画像を表示すれば、関係性を視覚化できたりします。複雑なようで実は簡単なのでProcessingで作ってみましょう。

以下ソースコードがたくさん書かれているように感じますが、修正前と修正後のソースコードをすべて貼り付けているためです。実際はコメントを含めて100行ぐらいで、簡単なので挑戦してみてください。

 

大まかな作り方を把握

  1. ノード(白丸)をランダムに表示します。
  2. 白丸が移動できるようにします。
  3. すべての白丸を線でつなぎます。
  4. ある一定の距離だけ線でつなぐように修正します。
  5. (応用)線をばね(スプリング)と考え、白丸の速度に変化を加えます。

ノードをランダムに表示します。

 

白丸が移動移動できるようにします。

ノードクラスに速度を表すxv(X座標のVelocity)とyvを用意して、描画毎にxy座標に足すことで移動します。また画面外に移動した場合は、反対側から出てくるようにします。例えば白丸が右側に進んで画面外になったら、左側からでてくるようにします。

 

すべての白丸を線でつなぎます。

node_garden02

ある一定の距離だけ線でつなぐように修正します。

node_garden03

ここまででほぼ完成しました。冷静に考えると2点の丸を好きな場所に表示して、それを移動するようにして、線でつなげるだけです。

(応用)線をばね(スプリング)と考え、白丸の速度に変化を加えます。

node_garden04

線を表示した場合は、少しだけ速度を変化させるようにしました。例えばx座標の距離dxが100ピクセルなら、係数0.0001を掛けて、0.001速度を加えます。値はかなり小さいのですが、1/60秒毎にこのメソッドが呼ばれているためかなりの効果があります。いろいろ係数を調整してみてください。

また、ノード間の距離が長くなると線が薄く表示されるようにアルファチャンネルを修正しました。

 

このコードでは、ばね効果でどんどんノードの速度が速くなってしまいます。vx,vyがある一定速度になったら、0.5に戻すなどの処置をすると綺麗になります。

応用

基礎のため白色の丸でしたが、別に画像ファイルでも問題ありません。そのため、TwitterアイコンやYoutubeのサムネイルでノードを作成して、関連が強いものは引き合うアルゴリズムなどを作ってみるとおもしろそうです。またノードの追加、削除、ノードをクリックしたときのエフェクトや、任意のノード間の最短経路など様々応用が可能です。

まとめ

インターネット上では日本語でもNode Gardenのサンプルはあるのですが解説が少ないので、ProcessingでNode Gardenを作ってその解説をしてみました。作る前はすごく大変そうと思っていたのですが、100行足らずで作成できたので拍子抜けでした。