今回の内容は、初心者であるオジサンが、Unityをはじめるとどうなるか、東パソで紹介されたUnityでアニメの基本や音楽を加えたサンプルプログラムを作れるかを検証する動画です。（4-004）
恐縮ですが、テレビ東京放送制作の「東京パソコンクラブ」のunityのパートについての考察をはじめました。非公式であります。
1. 第36回 アニメ初歩編
第36回22分6秒で、PiSKELという、アニメーションスプライトとピクセルアート用の無料オンラインエディターであるツールを使って、「パラパラアニメ」を作ろう、という話をしていますね。
Piskel – 無料のオンラインスプライトエディター
これは、オフラインでダウンロードしてもいいですが、そうすると全部英語になってしまいますので、躊躇せず子供用を使いましょう。子供用といっても内容や性能は一般のものとおそらく変わらないので、うｐ主はこれで絵を描きました。Piskelで作成したものはドット絵で非常に小さいです。タテ32ピクセル×ヨコ32ピクセルで、反転したものをタテに並べたタテ64ピクセル×ヨコ32ピクセルのものを作成します。
それで、このままですと背景が透明にならないので、「ペイント」でやったところで・・・「ペイント」にも「背景の削除」というのがありますが・・・これはあんまりうまくいかない・・・そのようですね。それで確実に背景を消すために「PhotoSpaceX」を用意します。あの・・・うｐ主さんの用意するツールはほとんど無料で、手軽に安心して扱えるものばかりです。うｐ主さん本人がですね、無料で扱えて安心して長く利用できるものが大好きですからね。長く愛用しているおすすめのツールですね。この「PhotoSpaceX」の機能の一つであるカットアウトで背景を削除できます。
もう一度ペイントでタテ64ピクセル×ヨコ32ピクセルに位置の調整などをして、整えましょう。
この画像をAssetsフォルダにおいて、Unityで「Open Sprite Editor」をクリックして中身を確認できる、Sprite Editorが開きます。
第36回23分9秒、Sprite Modeのマルチプルの設定・・・・こちらはマルチプルになっていますね。
第36回23分26秒で、Sliceの話がありますが・・・・Sliceというのは、簡単な初歩的なアニメでは１枚の画像の中で分割してアニメで見えるようにするということで、その分割作業を行おう・・・ということですね。
Sliceが見えませんが・・・
動画の8分29秒
ここをドラッグすると・・・見えました！素人泣かせですね。よくこうやって隠れているんですね。Sliceで分割して・・・
第36回24分2秒「Pixel per Unitを32に」でサイズ指定ですね。
それで・・・本編ではこれでできましたという話になっていますが、前回からの内容を踏まえて話しますと、前回ではAnimation Controllerとかありましたね。今回は簡単な方法で、AssetsからHierarchyにドラッグするだけでAnimation Controllerも自動生成する方法です。
AssetsからHierarchyにドラッグすると「Animationファイルを保存するから名前を決めてくれ」となりますね。ここではWalkAnimation.animとしています。
画像のファイル名と同じwalk0-cutout_０という名前のAnimation Controllerと、できたばかりのWalkAnimation.animファイルの様子がみえますね。UnityではAnimationファイルとAnimation Controllerファイルの両方によってアニメができるということです。
この2つがあれば、アニメができるということですね。
動画の10分4秒
アニメが動き始めました。Transformで位置やサイズ指定を指定してください。
それで、これだけでは味気ないので、B子ちゃんのアニメ・・・これは「補講3 プチコン4のサンプルRPGの難易度を下げてみた」で登場していたこのアニメですね。
ちなみにPixVerseについて、少し脱線しますが話させてください。
PixVerse
うｐ主は完全に無料で気楽に始められるのが好きですので、こちらもアカウントをGoogle連携にして、すぐ「動画作成」から「トランジション」、ここの2枚の静止画の間を埋めてくれるもの、これがとても楽で、完成度も高く、しかも早いところがおすすめですね。一例としてこういう・・・B子ちゃんの・・・ここで、以前の画像生成AIなら難しい専門的なプロンプトを入力することも多かったのですが、普通の日本語で、例えば「笑っておしゃべりしている」これでうまくいくかな？というところですね。これ、特に倍速もせず、等速ですが早いですね。それで・・・できたのが・・・あとは好みの問題で使うかボツにするか・・・ちょっと抑え気味がいいですかね・・・「おとなしく微笑む」にしてみましょう・・・まあ、少しはマシになりましたかね？気に入らないものも出てくるかもしれませんが、試行回数も気楽に増やせるのもいいですね。だいぶ使いやすくなりました。この・・・なんかトンプソンズの様な、海外アニメのような感じですけれども、うp主としては、例えばここの・・・ちょっとした表情だけを使うとか・・・利用者のセンスで利用できるかどうかという・・・まあ、アニメの作成について、だいぶ楽になっているのがわかっていただけると思います。
こうして作成されたB子ちゃんが走っているアニメを分割してみようと思います。
こちらでは6枚の画像からアニメにしてみることにしてみました。
同様に、「AssetsからHierarchyにドラッグしてAnimationファイルを保存」ですね。うまくいきました。
動画の13分12秒
2. 第37回 エフェクター 「エフェクトで炎を作る！」
第37回17分50秒から「エフェクト」の解説がされています。
ここのUnityで言うところのエフェクトとは「炎や雪、雨、風など映像を加工して演出するプログラミング」とナレーションの佐藤璃果さんも言っていますね。本編のタイトルも「エフェクトで炎を作る！」となっています。
第37回18分27秒から講師の生髙橋さんが、「プログラムで実際に絵を作る技術がある、それを「パーティクル」という。」とおっしゃっています。
particle(パーティクル)は粒子という意味でもあります。粒子一つ一つを動かして一つ一つ色を変えたり、動きを変えたり、大きさを変えたりすることで、炎とか雲とか雨とかを作れるということを、今回行うということです。ただし、大量に項目があるので全部話をすると時間がいくらでも足りないということで、本編で紹介された花火みたいなやつだけに今回はとどめておきます。
第37回19分48秒の場面では、Hierarchy＞Effect＞Particle Systemで項目がたくさんありますね。
第37回21分1秒で、紹介された順番は①形を決定②色を決定③出し方を決定、です。
①形を決定で、一番下の項目（Rendererにチェックを入れて）で、材質（マテリアル）を変更。
第37回21分11秒で、②色の変更。しかも単なる色指定だけでなく、アニメ風にグラデーションなどの色の変化の時間経過の具合をLife time（粒一つ一つが生存（表示）している時間）による時間設定をしながら変更可能です。
（Color over Lifetimeにチェックを入れて）Life Time、つまり表示の時間設定。
第37回23分29秒で、ColorをクリックするとGardenｔ Editorと呼ばれるウインドウが開く。ここで全過程の色指定をできます。最後の方を変更（下の最後のバーをクリックすると青くなる）すると、間の部分がグラデーションになって変化していきます。下のバーで途中変更も可能です。白→赤→オレンジ→黄色→灰色→黒とかにしていくと炎っぽく見える、ということです。
第37回26分46秒で、③出し方の変更。Shape（シェイプ）で粒の発生の仕方を変更できます。
第37回27分10秒で発生の範囲を確認できる。青い線の逆台形の変更の様子がうかがえます。
第37回27分27秒で、Radius（半径）を0.5に設定。これで台形の横の広がりを狭くしていく変更の説明があります。
Transform のRotationのX軸の値の変更で花火の方向が変わるという実験、ということで、RotationのXは現在-90になっていて、これを０にすると全体に広がる花火になります。
Xが－９０のとき
Xが０のとき
3. 第41回 サウンド
次に音についてということですが、この動画では一旦第41回に話を飛ばせていただきます。本編の第41回で音の解説がされています。
講師は生高橋先生から小林先生に変わりました。この回のタイトルも「ゲームに「音」を付ける」ということです。
第41回19分16秒で、この回の手順が話されます。（１）音のファイルを用意する。（２）音を出すプログラミングという２つの手順です。
それで、一気に本編の様な作られたゲームに音を出すのではなく、まずは「ボタンを押したらお音が鳴る」という実験を進めながら解説しようと思います。
（１）音のファイルを用意する。
それで、音のファイルを用意するということですが、
効果音ラボ（https://soundeffect-lab.info/）で好きな音を探すのもよいでしょう。音のファイルの種類はMP3でＯＫです。
本編ではスマホで直に（じかに）録音をしていたが、MP3ファイルであれば手法は他の方法でもいくつもありますね。用途にもよりますが、著作権に関わるようなものは取り扱いを注意すべきです。
それで、今回採用した音は、間抜け７.ｍp3（ぽわん）です。
（２）音を出すプログラミング
第41回20分24秒の場面です。ProjectウインドウからCreate＞MonoBehaviour Scriptこれで、プログラミング開始です。ここでは名前をSoundTEST.csとしておきます。
第41回20分50秒の場面です。Audio Sourceは音を鳴らす仕組みと本編では解説されていたが、まあ、単に「音源」（英訳ではsound source又はaudio sourceでもOKです。）という理解でよいでしょう。
オブジェクトでSOUNDというのを作り、その中でComponent SoundTEST.csを加えてボタンを設定します。
本編では第41回22分19秒の内容にあたります。Audio SourceをAdd Componentで追加します。
第41回23分8秒、Audio SourceのAudioClipに間抜け７.ｍp3をアタッチしておきます。
Add ComponentからSoundTESTを加えて、SoundTESTで、関数SeFireとAudio Sourceへの連携としてアタッチをおこないます。本編では第41回21分57秒の内容にあたります。
第41回22分32秒、「Play on Awake」という無条件で音を鳴らすという設定を外します。（ボタンを押したら音が鳴る、という設定にするため。）
このコーナーではボタンを押したら鳴るような仕様にしています。押したら起動する関数をPlay()にすることで完成しました。
4. 完成までの補足作業
まずは、これまでのPlayer.csを壊すともったいないので、ジャンプする仕様に変更するため、ここをジャンプするプレイヤーとしてJplayer.csという名前でPlayer.csを複製しました。Duplicateとか、複製の方法はありますが、今回は強引にフォルダからコピーしていますね。
前回の盆場マンと同様の環境にするため、Sprite Rendererの追加します。またRigidbody2Dも追加します。
コピーしたので、名前をJplayerに変更（csファイルの名前を一致させる必要があるんです。一致していないと通常のコンポーネントとして認識されないので、AddCompornentで加えようとしても検索されないし、強引にInspectorにドラッグしても「加えられないよ」とエラーがでます。）
そして、ここから爆風やタイマー、上下の移動は不要となるので、・・・タテの移動はジャンプのXキーを押したときに登場するので・・・不要なところは消して・・・
前回の盆場マンと同様の環境にするため、RbにRigidbody2Dをアタッチします。
とりあえず、まるいキャラクターで左右のカーソルキーでヨコ移動できるものを追加できました。
前回の盆場マンでも使ったWallのプレハブを使って地面を作ります。
前回の盆場マンと同様の環境にするため、Box Collider2Dの追加。これは当たり判定で使うコンポーネントでしたね。JUMPMANと壁・・今回は地面として使いますが、JUMPMANと地面をこっつんこさせて落ちないようにします！
ここではじめて重力を設定させてみます。Rigidbody2DのGravity Scareを10にして、重量表現ができるか確かめてみます！→うまくいきましたね！
動画の28分34秒
次に他のキー操作も追加していきます。本編では第41回18分35秒でキー操作の話がされています。左右の矢印キーで左右に移動、Xキーでジャンプ。Zキーでファイヤー。Cキーでダッシュです。
この時点ではXキーであるジャンプは上に向かう様に指定しています。Zキーでファイヤーであるところをジャンプと同じにしています。Cキーはspeed変数を増やして加速させています。そしてそれぞれに音を演奏するように指定しています。
それぞれ効果音ラボからmp3ファイルで用意したものです。
ここまで上手くいったので、実験用だったボタンとSOUNDオブジェクトをDeleteで削除します。
ここで、仮に設定していた丸のスクリプトをアニメのキャラに置き換える作業をしていきます。Sprite RendererのSpriteところ、ここは前回の話ではアニメの最初の画像を設置する、という話でしたね。
Animatorコンポーネントのコントローラーに該当するアニメーションコントローラーをアタッチします。JUMPMANに設定していきます。そして、Sprite RendererのSpriteところにアニメの最初の画像を設置します。
うまくいきました！シンクロしている様で、仲良さそうですね。
動画の31分9秒
それでは、今度はB子ちゃんで試してみます！まずは、B子ちゃん用のアニメーションコントローラーで置き換えします。普通に上からアタッチすると上書きされます。サイズをいい具合に変更していきます。
アニメーションはいい具合ですが、Box Collider2Dのサイズを変更した方がよさそうですね。このままでは地面にのめりこんでいます。Yの値を変えると・・・６がいい感じですね。
ああああ！転倒だよお！
今度はRigidbody2Dの方ですね。Freeze Rotation、もうわかりますね。Zのところにチェックすると回転がフリーズ、つまり回転しなくなります。
はい。うまくいきましたね。
それで・・・次は背景を追加します！
それで、TOWNというオブジェクトを作って、その中でSprite Rendererを追加して、希望の背景の画像をSpriteにアタッチすればOK！ただ、ちょっとトラブルが起きました。背景とキャラのZ軸が全部０だったので、時々消えたりしました。
ここは３次元をイメージして、
一番後ろのTOWN（背景）のZ軸を５０
二人のキャラクターは両方ともZ軸を０
花火は一番手前にしたいのでZ軸を－２
さて、ここまできたら、今まで棚上げしていたファイアの部分ですね。現在はジャンプと同じような設定になっています。
まず、プレハブ化が思い浮かびますね。FIREというオブジェクトを作って、その中で今までの花火をDuplicateでコピーして作りました。
Transform のRotationのX軸の値を０にして広がる花火にしています。位置とかサイズとかをTransformのSizeの方で変更していきます。
このFIREを操作したいので、Jplayer.csの中で、public GameObject fireball;・・・ええと後で右むきと左むきの２つを作りたかったので、後にこのfireballの変数名はfblとfbrになるのですが、とにかく花火用のGameObject型の変数を作る、ということです。これは前回のおさらいになりますが、Instantiate命令でプレハブ化したGameObjectを複製させましたね。Instantiate命令の最初の引数で指定するGameObject型の変数のことです。
それで、細かいことはとばしていくことになったのですが、ここから２つの花火を同時にだすことはできるようになりました。この段階では花火の右はFBR、左はFBLとなっています。
それで、ここまでくると少しお手上げのところがありますね。B子ちゃんの座標をFBLやFBRのファイアたちが正確に受け継いでいないことがわかります。あと、Destroy命令を作っていないので、Hierarchyのところで、いつまでも増え続いていることがわかりますね。
動画の35分39秒
FBL に花火が左に進行しつづけるFireBall_l.csを作成します。
FBRに花火が右に進行しつづけるFireBall_r.csを作成します。
public Transform firePointLeftとpublic Transform firePointRighetを追加して、それぞれのTransformの位置情報をJplayer.csにアタッチします。
主役であるB子ちゃんはJUMPMANというオブジェクトで動かしています。その中にJplayer.csがあります。また、Transformの位置情報を明確に示すため、丸いSpriteを重ねて表示することをSpriteRendererに追加しました。
Jplayer.csのソースですね。
ジャンプとダッシュは従来と変わらない位置にありますが、ファイアについては、B子ちゃんを描いた後になっていますね。これは描画処理をジャンプやダッシュ、矢印キーで移動後のB子ちゃんを描くのを完了させてから、次にファイアを描くことに集中させるためですね。描画処理の位置情報がB子ちゃんとファイアで混ざらない様にしているということです。ファイアを描くには、B子ちゃんを描くのとは関係が無いので、命令が一番最後になった、とも言えます。ファイアのキー管理もGetKeyDownですね。キーを押した瞬間のみ判定になるので、連続押し防止ですね。Getkeyのままですと長押ししたときには連続押しになるので、GetKeyDownを使用してファイアの暴発を防止しています。
5. 第40回 for命令(有限の繰り返しの実行)
これでかなりいい感じにはなっていますが、最後に星を5つ並べて本当の完成です。
本編は少し戻って第40回の内容、for文の内容です。この本編の第40回の内容ではfor文を使って敵を複製させていますが、この動画では星を並べてfor文の解説とします。
星を表示させるためのオブジェクト、名前はStarとしました。場所は２枚の画像キャラのオブジェクト（walk0-cutout_0）の下に作っていますね。これは他の場所でもかまわないと思います。うp主さんがたまたま思いついた場所ですね。それとそれを表示させるスクリプトであるコンポーネント、Star.csを作ります。
星の表示に、starobというオブジェクト型の変数を宣言しました。
Instantiate命令で指定する変数用ですね。
まだこの時点では座標の場所の指定の記述が確定できていませんね。
星の画像がまだできていません！うp主さんが丸みたいにUnityにあるだろうと先にStar.csを描き始めたのですが、いざ探すとありませんでした。それで、星をペイントで作ってPhotoScapeXで背景をカットして・・・できました！
StarObという星の複製元のオブジェクトを作って、その中で、SpriteRendererでこの星の画像をアタッチ。サイズと位置を決定します。
Star.csの中のstarobの参照をStarObオブジェクトにアタッチで連携させます。
それで、このまま実行しても、位置が同じなので Star.csの中を見ます。
第40回21分15秒、本編では敵キャラを5体出しているのですが、この動画では星を5つ描きます。
forループ
for( ; ; ) forの後にかっこで何かが入ってコロン、何かが入ってコロン、何かが入ってかっこ・・・弓木ちゃんが「（絵文字で）泣いている（；；）」と言っていましたね。
まあ、BASICがわかる人は、内容的にはfor ～ to ～ step ～と同じです。
forの後に初期値を入れて、最終値を入れて、増分という感じです。
ニュアンス的にはそうですが、正確にはUnityのC#の場合は少し違います。
forのすぐ後は、初期値で、次はループする条件、そして3番目はループごとに行う命令です。
→できました！
実行結果
今回のスクリプト（(仮)ゲーム、アニメ基礎サンプル）
Unityの場合、スクリプトのリストだけを完成させても変数や画像の関連付けなどが必要になりますが、紹介しておきます。
Jplayer.cs
Fireball_l.cs
Fireball_r.cs
Star.cs
以上、今回の記事でした。では、またお会いしましょう！
コメント