Unity5で、ブルームの説明をしているチュートリアル

先日「Unity5.3でネオンのように発光させる(ブルームBloom)方法」を書きましたが、Unity5で、ブルームの説明をしているチュートリアルを見つけました。若干古いので、昨日の記事とUIが違うようですが参考になります。

SpeedTutorさんのサムネイルをみると、Unity5の細かいチュートリアルをいくつもリリースしているようなのでこれらもいろいろ参考になると思われます。

 

 

LineRendererを使うため資料を調べてみました。

Unityで線を引く場合は、長方形のオブジェクトを作るのではなく、LineRendererを使えばよいことがわかりました。そこでいくつか調べた情報をメモとしてのこしておきます。

LineRenderderの基礎

ただ、LineRendererを使うだけでは退屈ですが、GenerativeArtの実装をUnityで召している日本の方がいました。参考にさせていただきましょう。

Unity入門 : UnityでGenerative Artっぽい表現をしてみる。– bluschetta tomoyukim’s blog

 

レーザーを作るYoutube動画チュートリアル

 

 

 

Unity5のStandardAssetで、車を動かしてみよう

UnityはStandardAssetを使えば、C#スクリプトを使わずに車を走らせることができます。アセットの使い方の勉強にもなるので早速やっていましょう。

新規プロジェクト作成

適当に「HelloStandardAsset02」というプロジェクトを作ります。

001

プロジェクトにアセットのImport(インポート・取り込み)

メニューから[Assets]->[Import Package]->[Vehicles]をクリックします。Vehiclesは、ビークルスで乗り物です。

002

Import Unity Packageダイアログが表示されるので、Importをクリック。

003

 

Prototypingの取り込み

坂や階段やフィールドや壁もPrototypingという名前で、スタンダードアセットにあるので、これを使ってみましょう。

メニューから[Assets]->[Import Package]->[Prototyping]をクリックします。

005

以下ダイアログが表示されたときに、CrossPlatformInputのチェックが外れていますが問題ありません。Vehiclesをインポートした時にCrossPlatformInputはプロジェクトに取り込まれたので、今回はUnityが重複の確認をして自動でチェックを外してくれました。Importをクリックです。

006

 

Prototyping(プロトタイピング)を使って適当にフィールドや箱を配置する

A01

Assets/Standard Assets/Prototyping/Prefabsから適当にHierarchyタブにドラッグアンドドロップします。Inspectorタブに形状が表示されるので、とりあえずなんでもよいので配置しましょう。

A01

位置の調整

Scene(しーん)タブで位置調整をします。

A02

微調整は、InspectorタブのTransformコンポーネントのPosition(ぽじしょん・位置)で設定できます。

007

 

車の配置

車は、CarプレハブファイルをHierarchyタブにドラッグアンドドロップして、Main CameraをCarへドラップアンドドロップします。

A03

位置調整

Unityはいろいろ配置などをしていると、全く意図しない位置に配置される場合があります。CarのPosition(ぽじしょん・位置)が、x=0,y=0,z=0であることを確認しましょう。

008

また、Carの子のMain Cameraも調整しておきましょう。以下はとりあえず適当に車の後ろから車が映るようにしました。運転席付近にカメラを配置したりすると臨場感が出ます。

009

 

これで作業は完了です!!驚くべきことにC#スクリプトを書かずに作業がしてしまいました。

テストプレイ

やったー!動いたーー!!

A04

 

まとめ

StandardAssetを使うことで、プロトタイプで、障害物やフィールドを配置し、車を走らせることができました。

補足:重要なこと

まだC#スクリプトを使ってないのですが、私たちはいま、実際に正常に車が動作しているプロジェクトとソースコードを手にしました。Standard Assets/Vehicles/Car/ScriptsにC#スクリプトもあります。

010

自分で車のゲームを作る場合に、このソースコードがどうなっているかを調べていけばよいのです。プログラムがわかってくると、ソースコード上で一時停止して値を確認したり、ソースコードを書き換えることができるようになります。また、簡単なプロジェクトなので、失敗したらもう一度、数分でプロジェクトを作り直せます。複雑なプロジェクトもよいですが、このような小さなプロジェクトで素早くトライ・アンド・エラーを繰り返すことも重要です。

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

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

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

 

 

 

Unity5.3でネオンのように発光させる(ブルームBloom)方法

002 001

Unity5.3で上記のgif画像のように発光させるには、ゲームオブジェクトを発光させるのだけではなく、カメラにブルーム機能を設定します。

Effectsパッケージをプロジェクトにインストール

Unity5.3では、[Assets]->[Import Package]->[Effects]を選択するとインストールするものを選択するダイアログが出てくるので全部選択してプロジェクトにインストールします。これで、Assets\Standard Assetsフォルダーが作成されて必要なものがそこに設定されます。特にこれを修正することはありません。

003

カメラへの割り当て

上記パッケージの追加が完了すると、メニューのComponentに”Image Effects”が表示されるようになりそこからBloom(ぶるーむ)を指定することができます。HierarchyViewからメインカメラを選択し、メニュー->[Component]->[Image Effects]->[Bloom and Grow]->[Bloom]を選択します。

004

ブルームはIntensityかThresholdを修正するだけである程度の効果を得られます。

005

まとめ

Unity5.3でブルームを使う方法を説明しました。昔はProfessional版でしか使えなかったようですので良い時代になりました。ブルームはネオンゲームのような場合や、夢をさまよう、白色にぼかしていくなどの効果に使えます。またプログラミング初心者向けのブロック崩しなどにブルームを使うと劇的な効果があります。

 

Unityで車を動かしたい その1

001

素直にGoogleでチュートリアルを探そう。

Unityの公式マニュアル内に「WheelCollider チュートリアル」があります。ページもソースコードの少ないのでWheelColliderを使えば簡単に実装できるのかと思い、安易にこのチュートリアルを試してみましたがこの資料だけではUnity初心者が車を動かすのは無理でした。そもそもこのソースコードは動作しません。Youtubeなどでチュートリアルを探したほうがよさそうです。

以下は私が試行錯誤したソースコードです。

  • addForce,addTorqueなど変なことをやっています。
  • Quaternion.Euler (0f, 0f, 90f);など変なことをやっています。

初心者の質問は、間違えている場合が多い

初心者の質問というのは、世界で考えるとほぼ誰かがすでに解決した問題で、英語も含めればどこかに解決方法が書かれています。なので検索して情報がなかなか見つからないという場合は、そもそもやり方が間違っている場合が多いです。

今回の私も素直に”Unity Car Tutorial”などで調べればよかったものの公式マニュアルで安易に始めたため無駄に苦労して結果的にまだちゃんと車を動かせていません。

私に合ってそうなチュートリアル

Youtubeで検索するとすぐに見つかりました。素人レベルのモデリングでチョロQのような車を走らせる場合は上記などのチュートリアルがヒントになりそうです。

まとめ

失敗も経験ですが、まずはチュートリアルの候補をいくつかリストアップして、概要と所要時間を確認してから作業に取り掛かればよかったと痛切に感じます。数時間作業して結局まともに動かなかったのでは意味ないですからね。ちょっとレーザー光線など別の作業で息抜きをして、再度車の実装に挑戦します。

Unity5でつやつやでメタリックな光沢のある金の玉を作る方法

001

メタリックな球をつくろう!

Unity5をはじめて使ったときに、パラメータが英語でよく分からず光沢のある球を作る方法がわかりませんでした。実はすごく簡単なのでやってみましょう。

球の作成とマテリアルの設定

1.Hierarchyビューで、右クリックして、[3D Object]->[Sphere]で球を作成

002

2.Projectビューで、右クリックして、[Create]->[Materials]でマテリアルを作成。名前はなんでもいいです。私は、とりあえずGoldBallMatにしました。

003

3.スフィアに、2で作ったマテリアルを追加します。

004

 

補足:albedo(アルベド、基本色)をスポイトで設定する方法

ゴールドボールや、シルバーボールを正確に作るのは色の指定が面倒ですが、簡単な方法があります。先ほど作成したマテリアルを選択して、インスペクタータブで表示します。albedo(アルベド、基本色)は、スポイトで色を設定できます。使い方は、一回スポイトをクリックして、デスクトップ上で好きな色の箇所をクリックして決定になります。

005

 

カラーチャートで、Albedoを設定

公式サイトで、シルバーやプラチナやゴールドの色一覧があるので、これを使います。公式サイトに配布されている マテリアルチャート をブラウザーで開いて、先ほどのスポイトでGoldを選択してください。

006

あとは、MetalicとSmoothnessを設定するだけです。Metalicは金属か非金属を表すパラメータで、Smoothnessは光沢感です。Smoothnessは1.0にすると鏡のようになります。以下はgif画像で256色表示なので、綺麗なゴールドボールではないですが、MetallicとSmoothnessの設定方法は伝わると思います。

008

まとめ

きれいなゴールドボールを作ることができました。私の最初の画像のように、光沢のあるボールやシルバーやプラチナも試してみるとよいです。またキューブなどでもやってみましょう。

 

 

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行足らずで作成できたので拍子抜けでした。