Unityアセット真夏のアドカレ2019 8/17 担当の mewlist (twitter) といいます。普段はゲーム会社でエンジニアをやりつつ,個人開発でも Unity Asset Store にて Massive Clouds というアセットを販売しています。 本記事では,拙作のアセット Massive Clouds を使った雲の作り方についてご紹介させていただき … この記事があなたのゲームづくりのお役に立てれば幸いです。, nn_hokusonさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog 第3回 隕石を落下させよう 様々な解像度のデバイスで同じような見た目にするためには、CanvasにアタッチされているCanvas Scalerコンポーネントを修正します。, ヒエラルキービューから「Canvas」を選択した状態で、インスペクタの「Canvas Scalerコンポーネント→UI Scale Mode」を「Scale With Screen Size」に設定し、「Screen Match Mode」を「Expand」に設定します。, 上記の設定をしたことで、フォントがものすごく小さく表示されていると思います。 プロジェクトビューの「BackgroundController」をヒエラルキービューの「background」にドラッグ&ドロップしてください。, ゲームを実行した状態でUnityエディタを拡大縮小してみてください。 プロジェクトビューから「background」をシーンビューに配置して、インスペクタからPositionを(0, 4.8, 0) に設定して下さい。, また、ロケットや隕石、爆発エフェクトが背景よりも手前に表示されるように、背景のスプライトの「Order in Layer」を「-1」に設定します。, 次に、プロジェクトビューで右クリックし「Create」→「C# Script」を選択します。 作成したファイル名を「BackgroundController」に変更して次のプログラムを入力してください。, このプログラムでは、毎フレーム背景を下方向に0.02ずつ移動しています。 第5回 ゲームオーバを判定しよう Unityのパーティクルには、テクスチャだけでなく3Dモデルも指定できるようになっています。tsubakit1.hateblo.jp3Dモデルであれば、1つのParticle Systemで複数種類のパーティクルを発生させる事ができますが、テクスチャの場合は基本的に1種類しか指定できないようになっています。 2点念のための確認になります。 ヒエラルキービューから「Canvas/Score」を選択し、Rect TransformのPositionを(-200, -60, 0) に、WidthとHeightを(400, 120) に修正し、フォントサイズを「80」に設定します。, 同様にGameOverのラベルもサイズを再調整しておきましょう。 背景をスクロールを使って星が流れるようにしましょう。背景をスクロールするには次の2つを繰り返します。, 背景スクロールについてはこちらの記事でも説明しているので合わせてどうぞ! ヒエラルキービューから「Canvas/GameOver」を選択し、Rect TransformのWidthとHeightを(450, 120) に、フォントサイズを「80」に設定します。, 最後に、発射した弾が尾を引くようなエフェクトを付け加えましょう。 第6回 お化粧をしよう, 背景が青色1色なのは地味で寂しいです。 根拠としてはこちらの公式の見解が参考になると思います!, Massive Clouds をUnity AssetStoreから購入しようと思います。 先日も紹介したフリーのエフェクトアニメ制作ソフトProminenceの操作確認がてらに簡単なエフェクトを作ったので、アップしておきます。Prominence -2Dエフェクトアニメーション-こんなかんじでProminenceで編集。作ったもの。星が放射状に飛んでく簡単なの。素材はこちら。1コマ120×120のも … 2. Unity・アセット・おすすめ・Hololens・MagicLeapOne・LookingGlassな事, Unity の人気アセットの Post Processing Stack を紹介させていただきます。なんとRatingが★5の 1615もあるという超人気のアセットになります。, まずは何ができるのか画像で確認してみます。画面全体に(Bloom: 高輝度部分をぼかす)処理を、「Post Processing Stack」を使って適用した前後の絵を切り替えています。, Unityの公式ドキュメントを見てみましょう。簡単に言うと、カメラで取得した画像に対してエフェクト効果などを与えて実際に画面に描画を行います。, ポストプロセスは、レンダリングされた既存のシーンに基づくレンダリングエフェクトです。これは、通常、シーンビューに依存し、最終レンダリングを行う前に、レンダリングされたシーンの上にレイヤー化されます。この機能の利点は、既存のコンテンツに変更を加えることなく、シーンの見た目を劇的に向上できるということです。, 「Post Processing Stack」は Unity 2017.3位以降では、「Package Manager」 からインストール可能となっているので、Unityのメニューから起動しましょう。, 左上のパッケージ一覧を「All packeages」を選択して、「Post Processing」を選択、右上の「Install」を選択しましょう。, 続いては、画面全体に適用するエフェクトを追加します。今回はサンプルで「 Bloom: 高輝度部分をぼかす 」処理を追加します。, カメラの設定、エフェクトの設定の2つの設定を行う事により、簡単に画面全体にエフェクト効果を与える事ができました。, Unity+AssetStore 専門情報発信 / アセットで生産性3倍 / DirectXは難しくて挫折, Unityのおすすめアセット 50選 ゲームジャム(GameJam) ハッカソン(Hackathon), 「Everything」はすべてのレイヤーに適用します、個別レイヤーに適用したい場合は変更してください。, ここで様々なエフェクトを追加できます、他のエフェクトを試したい方はここで変更してみてください。. Unity の人気アセットの Post Processing Stack を紹介させていただきます。なんとRatingが★5の 1615もあるという超人気のアセットになります。 本アセットの使い道としては、 画面全体に演出・効果を適用する事ができます。 プロジェクトビューで右クリック→「Material」を選択し「trail_mat」という名前で保存して下さい。, このtrail_matを選択した状態で、インスペクタからシェーダを「Particle/Additive(soft)」に変更し、Textureの欄にプロジェクトビューの「trail」をセットします。, 続いて、弾に「Trail Rendererコンポーネント」をアタッチします。プロジェクトビューで「bulletPrefab」を選択した状態で、インスペクタから「Add Component」→「Effects」→「Trail Renderer」を選択してください。, 「Trail Rendererコンポーネント」の「Materials/Element0」の欄に、いま作成した「trail_mat」をドラッグ&ドロップします。また、「Time」を「0.3」に、「Start Width」を「0.2」に、「End Width」を「0.1」に設定してください。, 6回に渡ってシューティングゲームの作り方を紹介してきましたが、ようやく完成までたどり着きました〜!! | 右上に表示しているスコアの文字サイズは変化していません。, このように、UIに関しては画面サイズによらずに決まったピクセル数で描画されてしまいます。 第2回 弾を発射しよう 第4回 当たり判定をしよう 背景をスクロールを使って星が流れるようにしましょう。背景をスクロールするには次の2つを繰り返します。 少しずつ背景を移動 一定量スクロールしたら元の場所に戻す 背景スクロールに… おもちゃラボ Unityで遊びを作っていきます. Massive Clouds にはオープンソース由来のコードもありませんので安心してお使いください。 Aiming Inc. Lead Software Engineer / Manager - Manager, Lightweight Render Pipeline(LWRP) のパイプラインを拡張する, Massive Clouds - Screen Space Volumetric Clouds, Aiming Inc. Lead Software Engineer / Manager, はい,どちらも問題ありません! 以上ご確認よろしくお願いいたします。, Massive Clouds というアセットで「実際どうやって雲を作るのか」をご紹介します, ※本記事は Unityアセット真夏のアドカレ2019 Summer 8/17 の記事です, こんにちは。 Unityアセット真夏のアドカレ2019 8/17 担当の mewlist (twitter) といいます。普段はゲーム会社でエンジニアをやりつつ,個人開発でも Unity Asset Store にて Massive Clouds というアセットを販売しています。, Massive Clouds を使った雲の作り方についてご紹介させていただきます!, Massive Clouds は雲を描くための Unity アセットです。 2018年11月に最初のバージョンをリリースし,その後も継続的にアップデートを重ね,, をシーンに追加することができ,ノイズをもとにプロシージャルなアプローチで生成された雲は,高度,濃度,雲の形状などを, ボリュームレンダリングは GPU にとって負荷の高い部類の処理とはなりますが,最適化のためのパラメータも用意しており,リアルなフライト・ゲームや雲海表現といった,テクスチャのスカイボックスでは実現の出来なかった表現を可能とします。, 雲海や霧の表現,最新の Version4 からはゴッドレイといった表現までもができるようになっています。, 本記事では,リリースされたばかりの Version4 を使い,セットアップ手順,パラメータをピックアップした動画解説,雲の調整 How To を TIPS 形式でお伝えしようと思います!, では,早速 Massive Clouds をプロジェクトに導入していきます。ここでは,Unity の 3D テンプレート(Standard RP) を使っかプロジェクトを想定して解説していきます。, MassiveClouds は Unity2019.1以降の Lightweight RP(Universal RP) ,VR にも対応しています, Asset Store から Massive Clouds をインポートすると,MassiveClouds フォルダが作成され,雲を描画するために必要なシェーダー類,スクリプト,テクスチャデータなどが作成されます。, Document_jp.pdf というファイルが説明書になっていますので,最初にごらんください, また, SampleScene フォルダには様々なデモシーンがありますので,Massive Clouds を使ってどんなことができるか感覚を掴んでいただくためにエディタ上で再生してみてくださいね!, Massive Clouds はカメラのシーン描画結果に,後処理となるイメージエフェクトとして雲を描画します。 ですので,撮影するカメラごとに設定を施していきます。, を Add Component します。すると以下のようなコンポーネント UI が表示されます。, Massive Clouds コンポーネントは,どんな雲をどのように描画するかについての情報を保持します, 。リアルタイムにパラメータを調整して見た目を確認するといった雲エディタの役割も果たします。, このコンポーネントは 3Dテンプレート (Standard RP) でセットアップされたプロジェクトの, Massive Clouds コンポーネントの Layers にある + ボタンをクリックして Layer を追加し,次に Layer 1 の右にある◎ ボタンをクリックします。プロファイルと呼ばれる雲の定義データが選択できるので,適当なプロファイルを選んでください。, 以上でセットアップは完了です。Game View に雲が表示されますので,先程の手順でプロファイルを切り替えて様々な雲の様子を確認してみましょう!, Massive Clouds はボリュームレンダリングという手法を使って雲を描画しています。カメラが撮影したシーンの画像からシェーダー内で空間を復元して一枚の画として立体物を描いています。この手法は GPU にとってコストの高い処理となる傾向がありますが,昨今ではゲームでもボリュームレンダリングを用いた表現が一般的に見受けられます。, Post Processing Stack v2 のカスタムエフェクト,もしくは,LWRP の Renderer Feature を利用した場合は,シーンビューにも雲が描かれます。, Massive Clouds には,4つのレンダリングエンジンがあり,切り替えて設定することが出来ます, 。それぞれの特徴を理解して,作りたい雲にあったレンダリングエンジンを決められるようにしましょう。, 半透明演算を基本としたボリュームレンダリングエンジンです。光が透過したような透明感のある表現を得意とします。サブサーフェススキャッタリングのような表面での散乱光があるようなルックを特徴とします。, 雲の陰影のコントラストを表現するのが得意です。流体のような見た目を特徴としますが,以下の例に示すように,ライト方向次第では雲らしくない見た目になってしまうことも…, 濃度の濃い雲をリアルに表現することが得意なエンジンです。透明感は Lucid や Solid よりもなくなりますが,シルエットと雲底の陰影をしっかりと出すことができます。, 物理的な光の表現をもっともリアルに再現することができるエンジンです。また,雲の中に潜るようなシチュエーションにおいても,遠景までしっかりとアーティファクトを抑えて描画することができます。これまで紹介した3つのエンジンとは異なり,最低限要求する GPU の性能が高くなりますが,高い描画品質を求めるケースではこのエンジンのほうが GPU 負荷が軽くなることがあります。ハイエンドな表現向けのエンジンです。, パラメータの調整次第で様々な表現ができるので一概には言えないのですが,それぞれの特徴を活かしてどんな場面でどのエンジンを選んだら良いかをまとめてみました。, リアルな表現からスタイライズドな表現まで,どんなゲームの世界にも対応できるアセットを作りたいという思いから,バージョンを追うごとにレンダリングエンジンを改良,追加してきました。最新の Authentic エンジンはフライト・ゲームといったジャンルにも耐えうるものにしたいという目標で開発をしました。 VR 環境でのさらなる負荷軽減や雲の大域表現など,まだまだできないこともあります。今後も開発をつづけていきますので是非フィードバックをいただけると嬉しいです。, 最初は雲の編集をするのに,付属する CloudsDemo シーンをそのまま利用するのがおすすめです, 。 CloudsDemo シーンには簡易的な環境エンジンが実装されているため,時刻を変化させることで,太陽の位置やライトの色と強さといった環境パラメータを自動的に切り替えてくれます。この機能を使うとライティングを変化させたときの見た目の変化を確認できます。, MassiveClouds コンポーネント上ですべてのパラメータが編集できるようになっています, 。プロジェクト内の Profile というフォルダに雲の種類ごとに大まかに分類してありますが最初は目的のプリセットになかなかたどり着けないかもしれません。, Ctrl + D で複製して自由な名前を付けて,適当な場所に移動させておきましょう, (右の例では MyMassiveCloudsPreset というフォルダを作成しました)。この新しい雲プリセットファイルを編集していくことになります。, カメラにくっつけた MassiveClouds コンポーネントを開きます。 Layer 1 のプリセット選択ボタンを押して先程作成したプリセットをロードします。 即座に Game View へ雲プリセットが反映されていることを確認できるはずです。, 次に, Layer 1 と書かれている部分をクリックして選択状態になると,その下にプリセットのパラメータエディタが表示されます。, パラメータが多く大変そうに見えますが,形状・ライティング・アニメーション・影…といったトピックで分類されています。, 最後に,パラメータを調整が終わったら, Save to Profile ボタンを押すことで,パラメータを保存することができます。逆に,, 雲の形は Shape Parameters で決まります。以下の画像にざっくりと各パラメータがどのような役割を持っているかを示します。, 雲頂と雲底の形を調整したいときは,SoftnessTop / Bottom パラメータを変更します, 。値が大きくなるにつれて雲頂・雲底が削り取られていくような変化をします。 Figure パラメータを大きくすることで雲頂が残りやすくなるように削れ具合が変わっていくので Figure 値を変えて削れ方の違いを見てみると良いでしょう。, 雲のディテールを調整したい・ちぎれ雲を作りたい - Octave / Sculpture, 雲のディテールを調整したいときは, Octave / Sculpture パラメータを使用します, 。Octave を上げることで,雲のノイズが細かく描かれるようになります。 Sculpture パラメータを高くすることでより入り組んだ形に変化していきます。ふんわりと柔らかな雲は,Octave や Sculpture を低めに設定し,散乱したごちゃごちゃ感のある雲は高めの値を設定してみるのが良いでしょう。, Detail Distance に距離を設定することで,カメラから数百メートルの至近距離に雲が描かれるシチュエーションのときに,近いところに描かれる雲のディテールを足すことが出来ます。雲の中に潜るようなシーンではよりリアルな表現をすることができます。, 霧のように柔らかく透明感のある雲や,ソリッドな雲を作りたいときには,Softness パラメータを調整します, 。パラメータを変化させて,シルエットのしっかりした固形の雲から,どんどん霧状に薄くなっていく様子を確認してみましょう。このパラメータが小さすぎるとアーティファクトが出やすくなるため,大きめの値を設定することをおすすめします。, ここまで Shape Parameters による形の変化を解説してきました。