ラベル PC の投稿を表示しています。 すべての投稿を表示
ラベル PC の投稿を表示しています。 すべての投稿を表示

2020年3月3日火曜日

[Blender 2.82][EEVEE] Electricity(電気)をつくる ~電流が流れるCG~


はい、こんにちは。
@CortanMathです。




Blenderで電気ショックみたいなCGつくりたいなと思っていたら、このチュートリアル動画を見つけました。



ということで、今回はこの動画通りに電流が流れる表現を作っていこうと思います。







ただ、Blenderのバージョンが違ったり、使用しているレンダラーが違ったりしたために、多少操作を変えているところがあります。

ご了承ください。





僕が使用しているBlenderは、

・Blender 2.82
・レンダラーはEEVEE

です。




もし、Blender 2.7系、Blender Render使用の場合は、チュートリアル動画を直接見た方がいいと思います。




Electricity(電気)をつくる



まず、Blenderを起動したら立方体は消しておきましょう。





Planeを追加します。






Tabキーを押して、編集モードに入ってください。

そこで、Y軸方向の大きさを0にします。

ちなみに現在、ビューは上方向から見ています。







重なっている頂点を削除します。
上の動画のバージョンでは、「Remove Doubles」という項目がありますが、2.82にはないようですね。


ということで、代わりに「Merge By Distance」を実行してください。









編集モードのまま、ある程度拡大します。








ここでオブジェクトモードに戻り、Emptyを追加します。







そうしましたら、Planeの端に移動させます。









Planeを選択し、「Displace」モディファイヤを追加します。








設定はこんな感じです。



Textureは、Newで新しく作成。
「Texture Coodinates」には、「Object」を指定。
「Object」には、先ほど作成したEmptyを指定します。






Planeを選択した状態で、編集モードに入ります。
全選択で、細分化します。




ここで、分割数は16を指定してください。




これと同じことをもう一回やってください。
つまり、256分割されるということです。(たぶん)






Emptyを選択します。
プロパティパネルから座標のところを開き、Z座標のところで右クリックし、「Insert Single Keyframe」を選択してください。


ちなみに、現在のフレームは1に合わせておいてから、実行してください。







グラフエディタを開いてください。
Nキーを押すと、右にパネルが出てきます。



「Generator」モディファイヤを追加してください。



上の画像のように、「0.20」を入力します。







Planeを選択し、編集モードで、Y軸方向に少し押し出します。









テクスチャの設定を開き、Typeは「Clouds」を選択します。





Sizeは2.0にしてください。
(正直、こういった数字は自分の好みで調節すればよいと思いますが)






Displaceモディファイヤの設定画面を開き、右下の数字に3.0を入力してください。








Planeを選択した状態で、ウェイトペイントモードに入ります。






こんな感じに塗ります。
中央は大きく動くので赤く、端はあまり動かないので青にします。







再び、Displaceモディファイヤの設定画面を開き、頂点グループに、今のウェイトペイントのグループを指定します。







そうしましたら、2つ目のDisplaceモディファイヤを追加します。
設定値は画像の通りです。




さっきと一緒ですね。
テクスチャは新規作成してください。






Textureというところの一番右のボタンを押すと、テクスチャの設定に飛べます。


Typeは「Clouds」で、Sizeは0.5にします。








電気の波形を見ながら、Planeの幅を調節します。
サイズを変えるときは、編集モードで行います。









「Subdivision Surface」を追加します。





下図のように、「Simple」を選択してください。







3つ目の「Displace」モディファイヤを追加します。
設定値は以下の通り。

テクスチャは新規作成です。







先ほどと同様に、右端のボタンから、テクスチャの設定に進みます。



Typeは「Clouds」、Sizeは0.10を指定します。






Eeveeの設定をします。




Bloomを有効にしてください。

ここの細かい設定は、後でレンダリング結果を見ながら微調整すればよいと思います。





マテリアルも設定しましょう。

Emissionを選択し、強さは10ぐらいが良いでしょう。



色は何でもいいですが、僕は定番(?)の青にしました。







これで一通りの作業が終わりました。



でも、まだ一本の電気です。


複製して増やしましょう。





複製するときは、PlaneとEmptyを同時に選択し、Shift + Dで増やせます。




複製後は、Planeを回転させたり、Emptyの位置をずらしたりすることで、動きのパターンが変わります。








以上です。




これは僕が最初に作ったやつです。



で、こっちは修正したやつです。
色や、形を変えて、自分好みに調整しました。






色を変えたり、動かしたりすると、より楽しいと思います。





ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。


https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。


お そらくいつでも使えるLINEスタンプ集


2020年2月24日月曜日

[Unity]ゲームを作ったらunityroomで公開してみよう ~WebGLで手軽にブラウザで~


はい、こんにちは。
@CortanMathです。




今回は、「unityroom」について書きたいと思います。


「unityroom」って何かといいますと、UnityでWebGL向けに書き出したゲームを公開できるサービスになります。





通常、Unityで作成したゲームを公開しようと思ったら、Apple StoreやGoogle Playに申請したり、自分のサイトとかでexeを配布したり、サーバーを契約してWebGL出力のものをアップデートしたり、

などといった手段があります。


しかし、いずれもお金がかかったり、手間がかかったりして大変です。





そこで、便利なのがこの「unityroom」です。





Twitterアカウントさえあれば簡単に登録でき、無料でゲームを公開することができます。





それに加えて、ゲームの評価機能、コメント機能などもあったりして、プレイヤーやほかのクリエイターと交流できる点も魅力的ですね。






Twitterアカウント自体簡単に取得できますから、いまTwitterアカウントを持っていない方でも手軽に始められます。





では、やってみましょう。

簡単に大まかな流れを書いておきます。

とはいっても、登録後は画面の設定項目に従うだけなので、あまり詳しくは書きません。




unityroomを使ってみる



まずは、unityroomに登録します。



こちらがそのサイトです。

https://unityroom.com/


登録ボタンを開くと、こんな感じの画面になると思います。



そうしたらTwitterでログインをクリックします。

アプリ認証しておいてください。





するとプロフィールの設定画面になります。



基本的には、Twitterに登録してあるプロフィールが表示されます。


変更したい部分は、ここで変更しておいてください。






プロフィールの登録が終わったら、早速ゲームを登録していきます。



あらかじめUnityの方から、WebGLで出力しておいてください。



出力方法ではないですけど、出力時の注意点についてはこちらに書きましたので、よければご覧ください。

[Unity]WebGL で出力する際の注意点 ~テキストが表示されない、画面サイズが合わないなど~




ゲームを登録するというボタンをクリックすると、このような画面が開きます。



タイトルや紹介文などを入力してください。



ゲームidというのは、そのゲームのURLに使われます。





設定が終わったら、その都度保存しておきましょう。



ゲームのアイコン画像などを設定します。





あとは左下にある、各設定項目を設定していってください。
画面の通りにやればすぐ終わると思います。



いろいろ設定がありますけど、基本設定と、WebGL設定、WebGLアップロードをやってお けば基本大丈夫です。




一通り終わったら、下の方にある公開設定から、自分の好きなものを選んでください。

多くの人に見てもらいたければ、一般公開にしておきましょう。







以上です。

おそらく簡単にゲームの公開ができたと思います。




自分がゲームをアップロードするだけでなく、他人のゲームをプレイするのも面白いですし、参考にもなると思いますので、積極的に使っていきましょう。



ちなみに僕が最初に作った作品は下の脱出ゲームになります。

https://unityroom.com/games/escape_from_storageroom





ということでこの記事を終わります。




ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。


https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。


お そらくいつでも使えるLINEスタンプ集


[Unity]WebGLで出力する際の注意点 ~テキストが表示されない、画面サイズが合わないなど~


はい、こんにちは。
@CortanMathです。



この間、UnityでWebGL出力しようと思って、いくつかつまずいた点があったのでここに記録しておきます。

同じ症状で悩んでいる方のお役に立てれば、幸いです。






具体的に困った点は主に2つあります。


まず、「Unity上では動作していたのに、WebGLに持って行った際、日本語のテキストが表示されなかった」ということ。


そして、もう一つは、「WebGLとしてブラウザで動かしたとき、画面サイズの調節がうまくいかなかった」ということ。

画面のUIが崩れたり、あるいは、画面サイズが大きすぎて、スクロールしないと見れない状態に陥ったりしていました。




では、実際にそれぞれの解決策を見ていきましょう。



WebGLで日本語フォントが表示されない



まずは、テキストが表示されないという問題です。



Unityでは、テキストボックスを作成した際、標準で「Arial」というフォントを使用しています。

エディタ上で動かしている分にはこれで問題なく動くのですが、WebGLに書き出すと日本語が表示されなくなってしまいます。




これを防ぐためには、日本語対応のフォントを使うようにしましょう。


調べると無料のフォントもたくさんあります。



僕はこの「源流明朝」という無料のフォントを使用させていただきました。

https://github.com/ButTaiwan/genryu-font



ただ、著作権には気をつけてください。

2次作品に使用した場合、配布物に同梱してはいけないフォントなどもあります。



「配布可能か」、「商用利用はできるのか」、などのライセンスは良く確認しておいてください。


ちなみに先ほど僕が紹介したフォントは、「フォントを使用した制作物を有償・無償を問わず自由 に公開・配布」可能と書いてありました。




フォントが用意できたら、テキストボックスのフォントを変更します。

非常に簡単です。



TextコンポーネントのFontというところに、ダウントードしたttfファイルを設定して やるだけです。




フォントの変更はいつでもできますが、早めに済ませておいた方が良いでしょう。


同じフォントサイズに設定していても、フォントの種類によって微妙に大きさが異なったりします。



場合によっては、フォントを変えたことにより、後から微調整が必要になることもあります。
(実際、僕がそうでした。)




画面サイズがうまく合わない



続きまして、画面サイズの問題です。


最初にも書きましたが、WebGLで出力すると(WebGLに限った話ではないかもしれませんが)画面のUIが崩れたり、あるいは、画面サイズが大き すぎて、スクロールしないと見れないことがあります。




それぞれ解決していきましょう。


まず、uGUIの方です。


Canvasを選択し、「Canvas Scaler」という項目を見てください。



UI Scale Modeを「Scale With Screen Size」というのにしてください。

これにより、UIはスクリーンサイズに合わせてレイアウトを維持してくれます。



そして、その下の部分で、基本となる画面の解像度を設定してきましょう。
僕は、Unityにおける「Srandalone」のサイズにしています。




この部分をしっかり設定しないと、画面全体が表示されず、一部だけ拡大されて表示されるということが起こる可能性があります。


Screen Match Modeは「Expand」にしました。




これで、UIのレイアウトが崩れたり、画面の一部だけが表示される、なんてことは起こらなくなると思います。




そうしたら次に、ブラウザのサイズにゲーム画面サイズを合わせるということをやっていきましょう。




こちらも簡単です。
ある無料アセットを導入し、ビルド時のテンプレートにそれを選択すればいいのです。


まず、Asset Store で、「responsive」と検索しましょう。



そうしましたら、この「Responsive WebGL Template」というのをダウンロード、インポートし、プロジェクトに導入してください。




ビルドセッティングから「Player Settings」を開きます。



WebGLテンプレートで、先ほどインポートした「Responsive」を選択します。




これで、一通りの設定が終わりました。


後は、WebGLで出力するだけです。

ブラウザのサイズを変更すると、縦横比を保ったまま、ゲーム画面のサイズも変わります。




お疲れさまでした。




ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。


https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。


お そらくいつでも使えるLINEスタンプ集


人気の記事