Unity

Unity 2Dライト2:ノーマルマップ

自分用のまとめノート。3Dのように見せて、ライトで強調、最後にポストプロセスをするとかの流れ。ライト設定以降の過程。

追記:これ以前(見ている方がおられるなら、過去記事、下から)

Unity 2Dライト基礎の練習メモ – ユニたまご (unitamago.com)

1.画像を準備。凹凸がある画像がよい。(何を3Dに見せたいかまだ考え中。)今回は猫や犬などオブジェクトで練習。

2。画像をフォトショップで開く。3DNomalMapを作成を選択。

3.好きな感じに調整。

4.Unityへ2種類ともインポート。

5.ノーマルマップ画像の項目を、スプライトからノーマルマップに変更する。

6.元の画像を選び、スプライトエディターを開く。左上からSecondary Texturesを選ぶ。

7.Nameはノーマルマップ。Textureは先ほど作った2枚目の画像を選択。

8.ライトのNomalMapの欄にチェックを入れる。(真ん中あたり)

9.一応3Dの感じが出る。(あまり例がよくないけど^^;)

その後

例1:オブジェクトにShadow Caster 2Dをつけて、かげをつける。ライトの方でShadowの設定があるので、そこで調整。

例2:ポストプロセスで何かつけたり^^; Volumeを追加。好きな演出を。

・・・・・・・・・・・・・・・・・

残る疑問と課題:

影をもっと強調したい。何を3Dっぽくしたいのか?実機とかで映るんだろうか?

3つめのシーンでは、適当に木を加えて、ライトにもアニメーションをつけた。

今日はここまで!

Unity

シェーダーって何??

*Unityにおいてシェーダーを全く知らない方、特に2D ゲームを作成している方、対象の記事です。

*後半で、シェーダーグラフの下準備の過程を説明しています。

普段Unityで2Dゲームを作っていたので、シェーダーなんて3Dの世界だから遠い遠いもの、と思っていた私。最近、Post Processing, 2D lightingなど演出に触れることがあり、シェーダー、マテリアル、テクスチャ、ユニバーサルパイプラインなどの、未知なる言葉に出会っていました。素通りせずに、少しでも理解を深めたいと思った、入門以前の記録です。知識ある方には、お役に立てません^^;

そもそもシェーダーとは、影?とか画像のことではなく、3D描画方法を記述したプログラムです。でも2Dだから、関係ない??

Unityの画面、思い出すとZ軸があります。2Dといっても3D空間にいるのです。そこが入門前の気づきかもしれません(笑)

・・・・・・・・・・・・・・・・・・・・・・・

超初心者にもやさしかった、公式の動画を紹介します。

シェーダーを理解しよう!

*ふわっとまとめ

頂点シェーダーとフラグメントシェーダーがあります。

3Dのオブジェクトは、レンダリングパイプラインという所(動画でいう8ステップ)を通り、ディスプレイされます。

このレンダリングパイプラインという過程で、手を加えられるのは、この頂点シェーダーとフラグメントシェーダーの2つです。

動画から抜粋した画像ですが、シェーダーはステップ3と7にあたります。

レンダリングパイプラインの過程

このシェーダーを作ることで表現の幅が広がるということです。アセットでも売っているので、利用するのも大いにありと思います。

*知っておきたいポイント

「シェーダー」+「テクスチャ」=「マテリアル」

シェーダー( 陰影処理)テクスチャ( 画像データ )マテリアル(質感)

・・・・・・・・・・・・・・・・・・・・・・・

さてシェーダーを作るのに、今はシェーダーグラフという、視覚的に作業が出来るものが用意されています。Unityの公式でも紹介されています。

Unity道場2D編 Shader Graph はじめてみよう!基礎編(6月23日号)- Unityステーション – YouTube

シェーダーグラフの様子↓  慣れると面白そうですよね。

シェーダーの理解を少しでも深めるには、真似てさわってみるのが良いかもしれません。

英語になりますが、この動画おすすめです。

「2Dシェーダーグラフを始めよう!」

Get started with 2D Shader Graph in Unity – Dissolve Tutorial

・・・・・・・・・・・・・・・・・・・・・・・

下準備

まずは準備することがあるので、今回は手順を解説していきます。2D制作向け。

1.インストールします。

ユニバーサルパイプライン(8ステップの過程の部分)

2.パイプラインアセットを作ります。

3.出来上がったうちの、Rendererを削除(3D用なので)します。

これ削除

4.2DRendererを新たに作成します。

こちらを作成

5.PipeLineAssetを選択して、右のエラーが出ているところに、作ったばかりの2D Renderer Dataをドラッグアンドドロップします。

もうちょっと。

うまくいくと、下のようになっています。

5.Edit, Project setting, Graphicsまでいき、、一番上のScriptable Renderer Pipeline Settingsのところに、作ったPipeline Assetをドラッグアンドドロップします。

これで、準備完了!!!

あとは、シェーダーグラフの動画に沿って進められます。興味があったら、進めてみると理解が深まると思います☆

この作業の後で、PostProcessingというカメラにエフェクトつけたりもできます。インスタのようなエフェクトが出来たり、ぼやかせたり、光らせたりもできます。

こちらも、もう少し理解が深まったら、まとめてみようかと思います。

ポストプロセスでピカピカ光ります!!きらーーん

・・・・・・・・・・・・・・・・・・・・・・・

さて、今回はここまでです。

シェーダーを何もわからないところから、ふわっとでも理解できそうな糸口になれれば幸いです。

最後までお付き合いありがとうございました。

・・・・・・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・・・・・・

参考にさせて頂いたサイトなど

【超基礎】ひとことで「シェーダー」とは何なのか?まとめ – 渋谷ほととぎす通信 (shibuya24.info)

Unityのマテリアルとシェーダー【初心者向け】 | ゲームの作り方! (dkrevel.com)

シェーダー | Unity Learning Materials (unity3d.jp)

Game News

Pax West2021レポート

ペニー・アーケード・エキスポ PAX (シアトル)に行ってきました!パンデミックの中ですが、予防接種の証明書を持ち、マスクはしっかり鼻まで装着!

昨年はキャンセルになったので、前回行ったのは2年前になります。

これが入場パス。一日$60です。

まずは、入り口が分かりづらいです。先に歩く友人に付いていく自分。もちろんマスクは皆さん着用しないと入れません。今回は子供が少ない印象。予防接種を受けられるのが12歳からなので、その関係でしょうね。

予防接種の証明書を見せると、リストバントをくれます。これで晴れて会場に入れます。マップを片手に、いざ!ビデオゲームエリアに行きます。さてさて、、、

インディーゲーム、パブリッシャー、大手のゲーム会社が集まります

今回、イチバン目立った展示がバンダイナムコでした。記念撮影できる企画があり、キーチェーンが配布されてました。ここが一番の規模だったのでは?!

Tales of Arise

前回に比べると、特に大きなゲーム会社が参加してませんでした。イベントの規模が小さくなったのは明白でした。イベントのスタッフは「来年は、通年よりも大規模で開催する予定だ。新たに〇〇ビルも借りる予定だから!」と、次回を見据えている様子。前回の、ブースごとの派手な照明や、コスプレイベントなどの印象が残っていたので、やはり残念な感じは否めません。良い意味では、コンパクトで見やすかったですが。

ちなみに、前回2年前の写真を出してみます。こんな大がかりな演出は見られませんでした。

>>>>>>>>>>>>>>>>>>>>>>>>>

さて気を取り直し、、、

お目当てのインディーズエリアへ移動。ブースが区切らて、こじんまりとしてる感じが好きです。

インディーズエリア。色々なゲームが遊べます。

自分の好みのアートスタイルがあると、思わず立ち止まって見ます。スタッフが気軽にゲームについて話してくれます。どこもSteam(プラス他)で出しているのが主流。

さてさて、、White Thorn Gamesというパブリッシャーに目が行きました。6つ
のゲームを展示していて、どれも「やさしい感じのストレスフリー」な雰囲気で、私の好みでした。しばらくここで観察。

TeaCupというポイントアンドクリック、アドベンチャーゲーム。まぁアートスタイルがかわいいこと♡Twitterで探し出すと、3人のチームでした。

個人的には、今回のインディーズでイチバンの好み♡

Tea Cup by Smarto Club: 9月23日にSteamでデモ配信!(ファンになったので喜んで宣伝☆)

このゲームは混んでいて遊べなかったのですが、、お隣のLakeというゲームを友人がプレイしました。こちらもアドベンチャーゲーム。ちなみに、日本語があちらこちら、見ることができます。

最長30分。

遊ぶと、バッジがもらえます♪

そんな感じで、インディーズを探索して、しばしの休憩!!

バッグの中には、ブースでもらったカードがいくつかありました。(下)

真ん中下のチームは、ゾンビだった人間のアクションゲームでした。ゾンビ騒動が一段落したあとの世界を舞台にしたゲームだそう。

緑のカード↑

調べてみました。Human Apocalypse(Steamで配信予定)アートスタイルが好きでした。デベロッパーの方が、まだ若い印象で、話した方は学生さん?とも思っちゃいました。すごい!

前はゾンビでしたという、人間のお話しです。

>>>>>>>>>>>>>>>>>>>>>>>>>

休憩した後は、残りのエリアも探索。このPAXはゲームと言ってもビデオゲームだけでなく、ボードゲームや、ゲームのトーナメント、PCエリアもあります。

ボードゲームは、ライブラリーがあって、好き勝手にボードゲームを、ずーーーーーっと遊べます。今回はカード等を触ることがあるので遠慮しました。また次回!

こういったテーブルでゲームし放題。

LFGテーブルも見えますね。Looking for group 遊ぶグループを探しています。一人だとボードゲームできないので、だれか探さないと遊べませんよね。

>>>>>>>>>>>>>>>>>>>>>>>>>

PCエリアも広い。写真のようなエリアがいくつか。会場に自分のPCを持ってきて遊ぶ方も。

もうずっといるんだろうなぁーと思いながら歩く

会場をうろうろ、買い物を少しして、、

この辺りで、私たちは疲れを感じ帰ることに。ちなみに会場は0時まで開いています。

なんだかかっこいいので撮りました。

>>>>>>>>>>>>>>>>>>>>>>>>>

最後に

大きなゲーム会社の参加が少なく、中小規模のゲームブースが多い印象でした 。インディーズに目が行きやすい分、ディベロッパーは嬉しかったかもしれません。また前回のように来場者も多くはなかったので、デモゲームは遊びやすかったです。

でもイベントと言えば、きらめく照明や、派手な演出!ですから、次回を期待している自分はいます。ゲーム好きのためのゲームイベントPAX。とっても個人的なレポートでした!

最後まで、お付き合いありがとうございました。

Unity

ゲームリリースまでの軌跡と裏話

未経験から10か月、ほっこり脱出ゲーム[Pam’s House: An Escape Game]をAppストア,  Google Play, itch ioでリリースしました!数学苦手で「絵筆と紙」を信仰していた専業主婦が、どうやってゲームを作っていったのか?回想して、まとめてみます。

前半

2020年10月

udemyで、しまづさんの脱出ゲーム講座を受講しました。

きっかけ?youtubeでホリエモンさんが「プログラミング」について語ってたのを、真に受けて「できるかも」と思ってしまったからです(笑)。それまでイラストや絵画を描いていたので、ゲームにできたらいいなと思いました。軽い気持ちでした^^;

2020年11月

迷ったけどオンラインサロン「スタジオしまづ」に入りました!ここで初めてDiscord やslackを使うことに。しまづさんの講座を続けます。

2020年12月

脱出ゲームの講座を、イラストを自分のものに、パズルも変えたものを作りました。はじめてサロンで公開しました。

当時の絵。なつかしいです。

2021年1月

はじめて1weekに参加。共同で、うっちーさん(Unity#学習チャンネル)と組まさせて頂きました。さくさくとゲームを作っていく、うっちーさんに感動しました。

このころ「コルーチン」を知りました(笑)。便利で衝撃を受けました。

youtubeユニたまごチャンネルを開設。気晴らしに動画を投稿するようになりました→頻度は低め^^;

タイムラインアニメーションを発表したり、もう雑多な内容です。

2021年2月

脱出ゲームのイラストを描きなおしてリリースしようと決意!アニメーションの練習を始めました。Spineやunity2dなど、触り始めました。

2021年3月

TimeLineを使い始めたのは、このあたり。1weekも一人で参加しました。Git Hubを使い始めました。

後半

2021年4月ー5月

ゲーム、楽しい制作期間。音楽も作るようになりました♪

2021年6月

リリース作業開始。ここから8月まで辛い期間。ゲームのレターボックス(帯)や、サイズのこと、広告のこと、アイコン、スクショ、リリース準備の諸々。リリース関連は、このブログにも記事が色々とあります。

できた!と感じGoogle Playへ提出、結果、リジェクト( ;∀;)

リリース審査の申し込み時、「子供向けではない」という項目にチェックし忘れ、、つまり、子供向けゲームで提出となってしまい、だったらファミリープログラムに入ってねというリジェクト返信でした。詳しくは過去記事に。

結局は13歳以上に設定し直し、アイコンも子供向けにならないように変更しました。

最初のアイコン

そしてこの時点で「ボーナスステージ」を加えたいと気持ちになり、前作ったミニ脱出ステージを加えました。この行き当たりばったり感(笑)。

2021年7月

実機テスト開始。設定の諸々につまづきました。まさかこの私がAndroid studioを使うようになるとは思いませんでした。Git hubのコンフリクトでデータがおかしくなり、この辺りから気持ちも沈むことに。のちに解決しましたが^^;

広告の設定のエラーが続き、広告なしにしようかと思いました。が、、、サロンの皆さん、特に Maruさん(Udemyユニティスマホアプリ開発コース)、みっちぇるさん(脱出ゲーム 猫とフルーツルーム)、もちろん、しまづさんに支えられ、どうにか乗り越えました。

2021年8月

ゲームの最終チェックを進めました。テストしていくと、修正箇所がどんどん出てきました。遊び方のアニメーションもこの辺りで追加しました。

8月最後に再提出!!

審査通過!だけど修正箇所があり、アップロード数回を重ねました。

リリース発表!

以後、App Storeとitch ioもリリース続けました。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

以上、これまでの軌跡をまとめました。

Pam’s House: An Escape Game by slimomo (itch.io)

上のリンクからゲーム遊べます。webで無料です!

つぶやき「現在、コロナで在宅の方もまだ多く、itch ioやsteamなどWebで遊ぶ方が多いような気がします。」

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

リリースして思うこと

よく見ますが「未経験からアプリ、ゲームで収入を!」とか。

ゲームは作れるようになりますが、収入は別です^^; ゲームを作るときに、どのくらい広告を入れるとか、課金させるとかの計画をしていくものと思います。

ただ私のような未経験の主婦でも、学んでリリースは可能です!1年未満で私も達成できました。

勉強を始めてから、週末以外は、ほぼデスクにいるようになりました。楽しいからです。ゲーム開発は、プログラミングだけでなく、イラスト、音楽、アニメーションなど、、私が興味を持っていた要素があり、色々と作って組み合わせられるが楽しいです。

その楽しいゲーム制作と比べ、リリース作業にまつわる、特に広告の設定は、技術面に疎い私にはつらかったです。エラーがあっても解決方法が調べてもわかないこともありました。幸い、サロンに入っていたので、アドバイスを頂いて進められました。

また、色々な方のブログや記事を参考に解決したことも、大多数です。大変、感謝しています!!私もそんな輪に少しでもなれるよう、これからもブログに何か残していこうと思っています。たいした情報ではないかもですが^^;

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

最後に、この講座から、色々と加えリリースしていきました!しまづさんの脱出ゲーム講座です。これは2Dですが3D講座もおすすめです。データーベースも勉強できちゃいます!わかりやすい解説で、初心者に優しいです☆

それでは、今回は以上です!最後までお付き合い、ありがとうございました!!

Unity

Unityデバイスシュミレーターが優秀だった

リリース前、いや、その前でも、自分のゲームやアプリが、実機でどんな風に映るか知りたいですよね。私は有料のアセットのシュミレーターを利用してましたが、使いづらいなと思ってました。

そしてUnityで無料で使えるDevice Simulatorを試し、簡単でサクサクと使えることに感動しました。まだお使いでない方、是非いかがですか(笑)?すでに知ってるよ!の方はスルーで。

完全に無料ですよ。いいね!

インストール後、ここで起動します。

すると出てくるウインドウ。いろんなデバイスを選べます。

ipadもあるし、最近の細長い実機もあります。もちろん、それぞれの実機のシュミレーターの中で、ゲームをプレイできます。

その細長い実機では、なんと上下の余白が足りないことが判明しました。この画面のまま、確認しながら作業できます。最近の実機は長いですよね、これが確認できるのは、非常に嬉しい!!

ただ一つ気になったのは、色が変わるボタンがシュミレーターでは確認できなかったことです。実機では作動していました。修正されるのでしょうか?

ちなみにセーフエリアも確認できます。ボタンがかぶさってないか、確認。リリース前じゃなくても、開発中に便利な機能と思いました。

画面は、現在開発中のゲーム「Pam’s House」です。

ほんわか不思議な手描きの世界を、まったりオリジナルBGMを聞きながら、脱出していくゲームです。近日Google Playでリリース予定!ではいます。

Unity

Unity 2Dライト基礎の練習メモ

2Dでも素敵なライティングを使いたいと思い、練習したので、自分用に記録。

準備したもの:キャラクター。NPC。適当にな照明画像。

1.まずはUniversal Pipeline 入っていなかったらインストールする。

2.Pipneline Asset, 2D Renderer を作成。

3.Render Pipelineの以下の項目を選択。この後、真っ暗になるかもだけど、焦らない。

4.Render Pipeline Assetの黄色いところに、先ほど作った2D RendererをD&D。

5.あとは、ライトの2Dから、色々とライトをつけてみる。

Global lightを選ぶと全体が明るくなるけど、明るさも選べる。

6.影をつけたいときは、オブジェクトにShadow Caster 2Dをつける。

7.あとは調整していく、、出来あがり!

プレイヤーのコライダーが機能していないのが、気になる^^;

以上、今日の学習メモ。

基本の一連の流れを練習した。これもまた、使いこなせるといいね!

///////////

///////////

参考にさせて頂いた動画

Unity

Unity ブレンドツリー8方向アニメーション練習メモ

キャラクターをspineで作り、Unityのブレンドツリーを使って動かす演習をした。自分用に記録を残す。

準備したもの:spine 8方向アニメーション

1.開いているスペースでクリックしてblend treeを選択。Movementとした。(のちにWalkに変更)

2.パラメーターを以下のようにセット。Has Exit Timeなど外しておく。

Speed は Idle <> Movement のtransitionに。greater, less than をそれぞれ0.01に。

Horizontal ,Vertical はブレンドツリーで使用。

Movementをクリックしてブレンドツリーへ進む

3.パラメーターにHorizontal, Vertical と書く。8方向のアニメーションをドラッグアンドドロップ。方向も設定。1とー1で、8方向に設定。

spineのコピペ反転で作成

4.プレイヤーコントローラのスクリプトはこのような感じ。この辺りは参考の動画の通り実施。

5.テスト!

アニメーションの質はおいといて^^;目標は達成☆

感想

ブレンドツリーが難しいものと思ってたけど、なんとか動かせてよかった。使いこなせるかな?キャラクターじゃなくてもいいのかな?他のブレンドツリーの演習もしてみたいと思う。

////////////

///////////

参考にした動画

Spine

Spine キャラクター4方向アニメーションの練習メモ

4方向のキャラクターアニメーション制作を、時短で出来ないかと練習した自分用の記録。

まずはフォトショップでパーツ分けしたキャラクターを用意。

4方向それぞれのフォルダを準備したけど、そこまでいらなかった?!

[slot]とつけると違うパターンの画像をインポートできる、口とか顔とか。
(例)
[skin] girl
[folder] S
[folder] N
[folder] E
[slot] mouth
E-mouth-smile
E-mouth_close

[ignore] 背景などインポートしたくないとき

[merge] いくつかの画像を一つのレイヤーとしたいとき

[bone] 一番近い画像の真ん中にボーンが入る。slotのように目とか画像をいくつか用意したいときに便利そう

後から思えば、似たようなパーツがたくさんあって、ここまで分けなくても良かった感じたけど^^; (特に今回はfolderの部分がいらない?)

フォルダを整理するのに、時間かかります。時短じゃないぞ。

注意:Ignore hidden layers を外さないと、例えば、いくつか口のパターンがあり非表示にしてた時、エクスポートされない。

これ以降スパインへ。

ボーンいれたりセットアップが終わる。。。

左向きアニメーション終わったら、アニメーションフォルダをコピーする。

コピーするボタンはここです!分かりずらいですか?

さて、反対向きのアニメーションは、昨日学習した通り、スケールをー1にする。これで反対向き歩きも完成。

慣れると、時間短縮になりそう。まだ慣れませんが^^;

これと同じことを、前と後ろ向きでもする。

注意:目や口などのパーツを変えたいとき、画像のレイヤーを変えたいときは、アニメーションモードの時に行う。セットアップモードですると、ごちゃごちゃになる。

練習した記録の映像。アニメーションは雑でカクカクしてるけど^^; やりたかったことは出来たのでOK!

今日の目的は達成された☆
さて、次はこれをUnityに持っていく。。。

///////////////////

//////////////////

参考資料:

Spine公式のエリカさんのフォルダーを拝見。参考に。

エリカさんの声がかわいい。コメントでもそんな意見多いのが、ほほえましい。

Spine

Spineイメージを左右反転にする方法

Spineアニメーションを使っている中で、キャラクターを反転させたい!時がありました。

公式サイトのフォーラムを見ると、 「ー1」にすればいい!といくつかのスレッドで発見。でもどこでー1にするとか、そんなことは書いてません^^;

そこで見つけたスレッド。「アニメーションでー1にすればいい」とコメントが。あ、アニメーションのところね(笑)という気づきになりした。

そう、そこです

Scaleをー1にするのですよね、Unityでもやっているはずでした。それをパッ気づけず少々悩みました。

大正解!

ちなみにroot boneを選択しています。

簡単なことでしたが、記録として残します。

Unity

Unity テキストをスクロールさせた

開発中のゲームのプライバシーポリシーを、スクロールさせて見せようと思った。その作業記録を残す。自分用の覚え書き。

/////

1.パネルを置く。

2.テキストを、そのパネルの子として配置。ピボットは下のように変更。また、最後までテキストが見えるように、ボックスを下に広げる。

3.テキストを選んだ状態で、Add ComponentからLayout > Content Size Fitterを追加。Vertical FitをPreferred Sizeにする。

4.パネルを選択して、マスクをつける。Imageのアルファを変えると、文字が見えるので焦らない。

5.パネルの子にUI > Scrollbarをつける。ScrollbarのDirectionはBottom To Top、今回はPanelの右側につけた。

6.Scroll RectのVertical Scrollbarに、上記のScrollbarをドラッグアンドペースト。

7.あとはスクロールバーの調整を。

ということで、スクロールテキスト設置!

できあがったもの

あとがき:

なんだか眠気がすごくって、今日は作業があまり進まなかった。でもこのスクロールテキストだけでも出来たので、終わり良し!

///////////

//////////

参考にさせて頂いた記事:

【Unity開発】uGUIのScrollbarの使い方【ひよこエッセンス】 – Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご (hatenablog.com)