ブルーノのC#プログラミング & unity勉強日記

プログラミング素人、ブルーノの自主勉強ノートです。他のプログラミングを勉強したい方の助けになれば幸いです。その他趣味の雑記もしていきたいです

No.002 進捗状況04

f:id:covory10101101276:20180829125301j:plain

アンスース・ダルジャン セーシェル共和国

みなさんこんにちは🌚

バイオハザード7を繰り返しやるうちに怖さに隠れていた製作陣の仕掛けの誘導のうまさに驚嘆したブルーノです。特にビデオテープ「ミア」の部分はとても自然と誘導されていると思いました。モールデッドの配置と出現のタイミングはめっちゃビビるんじゃ😡😡😡

 

さて今回は目に見えるオブジェクトや展開について作っていこうと思います。

まずゲームに活気を出すため、モブとなるアセットを配置したいと思います。

f:id:covory10101101276:20180829133226p:plain

前回にもちょっとだけ出てきましたが、すごい適材がいました。これを今回は使います。

f:id:covory10101101276:20180829134401p:plain

いろんなタイプの色があるようですね。全部使って出してみましょう

f:id:covory10101101276:20180829134333p:plain

イーサンくんを取り囲む6人の男たちです。

f:id:covory10101101276:20180829134543p:plain

f:id:covory10101101276:20180829134556p:plain

アニメーションも6つほど入っていました。これをスクリプトから取得して制御したいと思います。

 

f:id:covory10101101276:20180829140301p:plain

AudienceControllerというスクリプトを作成。

f:id:covory10101101276:20180829140358p:plain

シーン上のすべてのAudienceたちにアタッチ。なぜか親に変更を反映させるapplyタブがopenになっているので仕方なく全部を選択してアタッチしました。

ではスクリプトを編集していきましょう。

ここを見ながら作ります

Animation - Unity スクリプトリファレンス

f:id:covory10101101276:20180829144621p:plain

animationをStartメソッドで取得し、とりあえずZボタンを押したら拍手するようにしてみました。再生が終わればidleに戻します。

実験してみると...

f:id:covory10101101276:20180829143031p:plain

全員が祝ってくれました。成功です😀

 では街の人っぽい動きに変えていきます。

f:id:covory10101101276:20180829221349p:plain

f:id:covory10101101276:20180829221355p:plain

ランダムで生成したint値によっていろんなモーションをするようにしました。せっかくintを取得したのにanimationコンポーネント内のanimation clipの取得の仕方がわからないせいでコルーチンの中身が無駄に長くなってしまっています。どこに載ってるんだろう🤔

f:id:covory10101101276:20180829221407p:plain

みんな別々の動きでモブっぽいです笑

 

では今回はもう一つだけオブジェクトを作ります。

3Dアクションといえばやっぱコインですよね!というわけで、コインのオブジェクトを実装していきます。

f:id:covory10101101276:20180829222319p:plain

何気にこれBlenderで自作しました。友人に質問しまくって簡単なものですがつくれました。時計をモチーフにしています。ではシーン上にこれを配置しますが、、、

f:id:covory10101101276:20180829222526p:plain

プレビューだと金ピカなのにシーンだとなんか土みたいだなあ...

ここで友人に教えてもらった魔法を使います。

f:id:covory10101101276:20180829222721p:plain

[GameObject]→[Light]→[Refrection Probe]を選択

 

f:id:covory10101101276:20180829223045p:plain

なんかごちゃごちゃした画像を用意(なんでも良い)

TextureTypeをDefaultに、TextureShapeをcubeにします

f:id:covory10101101276:20180829223236p:plain

これをReflectionProbeのCubemapに指定すると

f:id:covory10101101276:20180829223328p:plain

いい感じに金ピカ!Reflection Probeの画像を反射させることができるんですね。

サンキュー友人😆

インスペクターのBoxSizeをいじると反射の有効範囲を変えられます。

f:id:covory10101101276:20180829223737p:plain

また、反射させたくないオブジェクトはそれぞれのメッシュレンダラーのReflection ProbesをOffにしておくと無効にできます。すべてに反射させると重くなりそうなのでコイン以外は今回切っておきます

f:id:covory10101101276:20180829223713p:plain

そしてイーサンがコインに触れたことを取得するためにコライダーをコインにつけます

f:id:covory10101101276:20180829224238p:plain

Box Colliderじゃ判定ガバガバですがまあ気にしないでおきましょう。

では今度はコインの動きを制御していきましょう。とくあるゲームの中のコインは浮いていて、くるくる回ってたりして、取得すると上にピコーンって動くようなイメージですよね。これを実装したいと思います。そこで、Animatorコンポーネントを使っていきたいと思います。

f:id:covory10101101276:20180831100313p:plain

Add Componentの欄からAnimatorを選択

f:id:covory10101101276:20180831100412p:plain

Animatorコンポーネントがアタッチされましたが、これだけでは動きません。アニメーションを制御するのは青字でもありますがControllerというもので、これはそれをオブジェクトに再生させる再生装置のようなものらしいです。ではこのコントローラを作っていくのですが、実はコントローラもアニメーションの動きの中身ではなく、文字通りアニメーション同士の相関性を管理するコントローラでしかないのです。各々の動き自体はアニメーションクリップというものによって管理されます。というわけでこのアニメーションクリップを作っていきましょう。

Window→Animation→Animationを選択します

f:id:covory10101101276:20180831101501p:plain

 これがアニメーションの動きを編集できるウィンドウです。

f:id:covory10101101276:20180831101542p:plain

こんなウィンドウが出て来ました。今この画面ではAudienceのアニメーションを作り出そうとしていますが、これはヒエラルキービューでAudienceを現在選択しているためです。今回はコインのアニメーションを作成するのでコインを選択してから[Create]をクリックします。

f:id:covory10101101276:20180831101744p:plain

新しく作るアニメーションクリップの名前を選択。

f:id:covory10101101276:20180831102214p:plain

Coin Idleという名前のアニメーションクリップを作成しました。左上で名前が確認できます。ちなみに、この名前が表示されているタブをクリックするとそのオブジェクトの他のクリップに移動したり、また新たにアニメーションクリップを作成することができます。まずは待機状態のくるくる回っているアニメーションを作成します。

f:id:covory10101101276:20180831102440p:plain

Add PropertyからTransform→Rotationを選択

f:id:covory10101101276:20180831102542p:plain

Rotationのクリップができました。右の時間らしき目盛たちがタイムラインで、現在見えている中では1秒間でのアニメーションを編集できるようになっています。右にスライドすれば当然もっと長い時間までのアニメーションを組むことができますが今回はとりあえずこの1秒の中で何回か回転するようにしてそれをループ再生することでコインがくるくる回っているアイドル状態を表現したいと思います。

さて、タイムライン上にはそろばんのように現在ひし形の玉が一つ表示されていますね。CoinNew : Rotationという行の玉にはrotation情報が入っており、タイムライン上でさまざまなrotation情報をいろんな時間に置くことで再生した時にそれらを滑らかに補間してくれます。

玉の作り方はいたって単純です。左上の赤丸をクリックし、レコードモードにします。

f:id:covory10101101276:20180831192132p:plain

するとタイムラインとrotationに対応するオブジェクトのインスペクター欄が赤くなりましたね。タイムラインにかかっている白の縦線は時間の目盛を押すことで移動でき、インスペクター上の数値を変更するとこの縦線の時間にその数値の情報が玉として記録されるということです。ではいろいろ数値を記録してみます

f:id:covory10101101276:20180831192640p:plain

1/4秒ごとにコインが1回転するように組んでみました。レコードボタン横の再生ボタンで再生すると...

f:id:covory10101101276:20180831192819p:plain

画像なので分かりにくいですがくるくる回転しています。

f:id:covory10101101276:20180831193322p:plain

タブの下側の[Curves]という欄をクリックするともっと視覚的に数値の変動加減を編集できます。待機状態のアニメーションがこれで完成したのでこんな感じでコインゲット時のアニメーションも作ります。

f:id:covory10101101276:20180831193607p:plain

名前の欄をクリックして、クリップを変更したり追加したりできます

アニメーションが完成したら次はそれを制御するコントローラを作ります。それをAnimatorコンポーネントに適応したら完成です!もう少しですね

f:id:covory10101101276:20180831193812p:plain

実はアニメーションをCreateした時に同時に空のコントローラも生成されています。

f:id:covory10101101276:20180831193959p:plain

コントローラの中身はこんな感じになってます。中にある四角ひとつひとつのことをステートと呼び、必ずEntryステートからアニメーションは始まり、矢印に沿って進みます。最初はidleに伸びているはずですが、もし最初のアニメーションが思惑と違っていたら目的のステートで右クリックし、Set as Layer Default Stateを選択しましょう

f:id:covory10101101276:20180831194516p:plain

今、二つのクリップは独立していて切り替わることは絶対にありません。そこで、Entryステートが行なっているようにidleステートで右クリックし、Make Transitionで目的のステートまでトランジション(矢印)を伸ばします。

f:id:covory10101101276:20180831194758p:plain

ただこれだけではアニメーションが遷移する条件がないので遷移されません。トランジションをクリックして情報を見ると

f:id:covory10101101276:20180831195119p:plain

遷移する具合や条件(Condition)を指定できます。このConditionも自分で決めなければならず、先ほどのコントローラのビューの右上のParametersから追加します。

f:id:covory10101101276:20180831195436p:plain

条件の値も様々な型の変数が用意できますが、今回はTriggerにします。

f:id:covory10101101276:20180831195621p:plain

これで作った条件を改めてインスペクター上のConditionに入力します。これで準備は完了です。あとはスクリプトでAnimatorを取得し、このTriggerを起こせばアニメーションが遷移します。

f:id:covory10101101276:20180831195824p:plain

とても単純ですが、12行目でAnimatorを取得し、31行目でTriggerを引き起こしています。再生してみると

f:id:covory10101101276:20180831200018p:plain

触れると上にくるくるしました!!大成功です😸こんな調子でオブジェクトを今後追加した際はこうやって動かしてにぎやかにしたいと思います。今回はここまでにしておきます。

 

一つ一つの過程をメモしていたらすごい量になってしまいました。でもほとんど画像なんですよね。。。いろいろあってかれこれ1ヶ月もこれの土台作成で止まっていました。おもしろいの作るぞー

No.002 進捗状況03

f:id:covory10101101276:20180728111702j:plainニュー川渓谷 - ウエスバージニア州アメリ

 

みなさんこんにちは🌚

スマブラで1on1もぐってもクラウドキャプテンファルコンしかあたらないブルーノです。今回はいよいよゲーム的な側面を持たせてきたいと思います。

 

まず、テストプレイ用に人物を配置します。

f:id:covory10101101276:20180828142218p:plain

[Assets]→[Import Package]→[Characters]で、キャラクターアセットをインポートします。

f:id:covory10101101276:20180828142602p:plain

Unity標準のイーサンくんをインポートしました。Standard Assets→Character→ThirdPersonCharacter→Prefabsの中のThirdPersonControllerをシーン上に配置します。

f:id:covory10101101276:20180828142824p:plain

なんか周りにいますが気にしないでください。そしたらシーン上に最初からあるMain Cameraオブジェクトをドラッグ&ドロップでこのオブジェクトの子にします。

f:id:covory10101101276:20180828143156p:plain

もうこれだけで再生ボタンを押せばイーサンくんを十字キーで操作すること・カメラが追跡して来てくれることを実装できてしまいました。

f:id:covory10101101276:20180828143248p:plain

自分で作った街を散策するの楽しい〜〜〜🤩

ですがまだ少し問題がありました。今のままでは縁石や歩道をイーサンくんの足が貫通していました。

f:id:covory10101101276:20180828144330p:plain

ここで注意するのがColliderについてですね。Unityのオブジェクト同士の接触や当たり判定にはこのColliderコンポーネントが使用されます。(正確には他にも方法はある)

道路のオブジェクトや建物のオブジェクトにColliderコンポーネントをそれぞれつけていきましょう。

f:id:covory10101101276:20180828144608p:plain

前回作ったステージのある道路のオブジェクトのインスペクターです。Mesh Colliderという名のコンポーネントがついていますね(なんで2つついてんだ)。

コライダーにも様々な種類があり、当たり判定の形によってコライダーを使い分けます。このMeshコライダーオブジェクトのメッシュにあわせてコライダーを貼ってくれるという特性があるのでモデルの形に寸分違わない当たり判定をつけられるという利点の一方で頂点数がもともと多いモデルに適応すると処理が重くなりやすいといった特徴もあります。今回は道路にのみこのメッシュコライダーを使用し、建物にはそれぞれBoxコライダーを使いました。

f:id:covory10101101276:20180829122915p:plain

f:id:covory10101101276:20180829122940p:plain

とある建物のプレファブのインスペクター。上画像の緑の線で構成されているのがコライダーで、今回は主人公を通しさえしなければ良いので足元にだけ作りました。した画像を見るとわかるように3つのBoxコライダーを用いることで玄関等の地味な突起のあたりをカバーしています。今回はここまでにしておきます。

 

動くオブジェクトとイベントについてまとめるといっておきながら記事の中で動くオブジェクトがイーサンくんだけだったり当たり判定というイベントと呼べるかどうかも微妙な部分の制作過程だけになってしまいましたが記事が長くなってしまったので次回に繰り越します。今回は最低限の世界の検証環境を整えたということで😓

最近は色々やることがあって更新ができていませんでしたが、また続けていけるように頑張りたいと思います。

No.002 進捗状況02

f:id:covory10101101276:20180719184603j:plain

パラワン島 - フィリピン

 

みなさんこんにちは🌚

食費を削るために自炊をしているのですが料理に凝り始めたら材料費がかさんで本末転倒になってしまっているブルーノです。チーズはやっぱ高い(ーー;)

 

さて今回は以前に引き続き進捗状況と気が付いたことをメモしていきます。

まず現在の状況がこちら

f:id:covory10101101276:20180719185030p:plain

まだ建物ですら半分程度ですね😅

一応道は敷いたのでそこに建物や地面をくっつけて作っていきたいと思います。

f:id:covory10101101276:20180719185209p:plain

街の真ん中に意味もなく巨大ゴリラを置いてみました。このゴリラを置いた時にちょっと気になったのですがあまり違う3Dモデルばっかり作っていると世界観がごっちゃごちゃになってしまう....のはどうでもいいんですが容量が大きくなってロード時にも読み込みに時間がかかってしまうのではないか?ということです。というわけであまり新しいアセットを使わずに今度はUniteTokyo2018のMike Geig氏による「Unityでサクッといいビジュアルを作るテクニック講座」で実演されていたテクニックを使ってみました。

f:id:covory10101101276:20180719185839p:plain

例えばこの高層ビル群なんですが今回買ったアセットにはそこまで高いビルが入っていなかったので上の方はなんとか工夫して高く見せかけてみました

f:id:covory10101101276:20180720141420p:plain

このビルの真ん中の継ぎ目らへんはよく見ると...

f:id:covory10101101276:20180720141514p:plain

下のホテルを一回り小さくして重ねただけであることがわかります。ビルの途中に入り口は不自然なのでこれまた元々のビルの屋上にあるダクトを重ねています

f:id:covory10101101276:20180720141705p:plain

 

f:id:covory10101101276:20180720141837p:plain

ビルに大きなチョークボードが突き刺さっているのですがこれは

f:id:covory10101101276:20180720141921p:plain

裏に逆さになった入り口が。これはビルを180度回転させて逆さにしています。

f:id:covory10101101276:20180720142049p:plain

おかげで継ぎ目は綺麗です

f:id:covory10101101276:20180728105318p:plain

全体的な街が完成しました!ただスマホゲーでこの街を読み込んで中で自由に動けるのか疑問が残るのでもし無理そうならどんどん減らしていきます。

 

記事にするとあっさりですがレイアウト考えたり一つずつ建物を作っていくのにだいぶ時間がかかってしまいました。次回は動くオブジェクトやイベントに関するものを街に配置して活気を出していきたいと思います!

 

学校の課題がこの季節でとても多くてなかなかこちらに時間を割けないです😵かといって課題とUnityしかやっていないと体がなまってテニスがぜんぜんできないし😠テニスとゲーム作りばかりやれるような夢の環境はないものか...

お絵かき デッサン7/16

f:id:covory10101101276:20180716223010j:plain

今日のデッサンは腕組みの人です。顔の書き方がいつまでもたっても上手くならないです。体もガッチリしているし指の先や耳など細かいところも丁寧に書かなければいけませんね。

ちなみにモデルはeasy poser というアプリを使って書いています

イージーポーザー Easy Poser

イージーポーザー Easy Poser

  • Park Kiyoung
  • ユーティリティ
  • 無料

 無料版は使えるコンテンツが限られていますが、それでも十分な数のモデルやポーズが揃っています。pro版を買いたくなってしまう...!! ところでこれもUnityで作られてるんですね。すごいなあ

No.002 進捗状況01

6f:id:covory10101101276:20180711153125j:plain

ウーゼドム島

 

みなさんこんにちは🌚

ビーフシチューのルーを買っても豚肉を使うと途端に味がカレーになってしまうことに気づいたブルーノです。さて今回から新しいゲームの開発に取り組んでいこうと思います。

 

まず最初にプランニングをしました。最近流行りのPDACではありませんが、どんな作業も計画をたてておいた方が明確になりますね。私の場合は素材をフルスクラッチできないので、大抵はApp Storeを眺めて面白そうなアセットからアイデアを膨らませる方式を現在は取っています。するとこんなアセットを見つけました。

assetstore.unity.com

有料ではありますが格安ですし、とてもクオリティが高いので今回はこちらのアセットを使った箱庭ゲーのようなものを作っていきたいと思います。

人をたくさん立たせてみたいですね。複数の種類でなおかつあまり容量が大きくならなそうな人のアセットは...

assetstore.unity.com

ちょうど良さそうなのがありました。これを使わせていただこうと思います。

とりあえずインポートしてみました。街を作っていきたいと思います。

f:id:covory10101101276:20180711154729p:plain

f:id:covory10101101276:20180711154843p:plain

建物から道から小道具まで様々な環境が並んでいます。これで200円なら格安ではないでしょうか

f:id:covory10101101276:20180711155143p:plain

道を並べると良かれと思って敷いておいたPlaneと重なってしまっていますね。Planeをほんの少し下げておきます。

f:id:covory10101101276:20180711161132p:plain

少しずつ街を作っていきます。ここでちょっとだけ気をつけたのが、右のヒエラルキーリストのように建物と道を一つのオブジェクトの子にまとめておくときに、親のオブジェクトの座標を全て(0,0,0)にしておくことです。どうやらドラッグ&ドロップ以外の方法でオブジェクトを生成すると(Prefabの場合は座標も与えられてるから影響されない?)シーンビューの真ん中に配置されるようで、まとめるためだけに生成したオブジェクトが座標を持っているせいで子がみんなその影響を受けてスクリプトを書く際に混乱することが最初の時も多々ありました。さてどんどん街を作っていきます。

道路などは縁石と道路など一緒に使うことが多いです。そんな時はよく使うものの位置関係を一つの親にまとめてプレファブ化するとレゴブロックのように作れて効率よくなるような気がします。

f:id:covory10101101276:20180716221635p:plain

f:id:covory10101101276:20180716221647p:plain

こんな感じで😄あー楽チンですねー。これならすぐに街が....

f:id:covory10101101276:20180716221049p:plain

果てしない😱

地道に頑張ります。。

 

今回はここまでにしておきます!

これからもちょくちょく進捗状況をあげていけたらいいなと思います。ゲーム作ってる時間は楽しいですね。ちなみに今回は自由に操作できる箱庭ゲーを作りたいと思っています。

 

そういえばこの前、あるゲーム会社のインターン説明会のようなものに行ってきました。ゲームを作ってお金を実際にもらっている方々の運営体制を聞くことができたのはとても良かったです。どこでもいいからゲーム会社入れたらいいなあ

お絵かき FF12 ヴァン

f:id:covory10101101276:20180711215155j:plain

ちょっとArtRageで画像をトレースして書いてみました。こんだけ書いてから思ったんですがトレースってもしかして元の絵に合わせて修正してくれる機能とかありますかね?こんな私にうまくかけるわけないです😓これじゃ絵の練習にならない...

ちなみに書いたのは今PS4でやっているFF12より主人公のヴァンです。キャラデザインもとても良いですし、設定やストーリーもめちゃくちゃ面白くてガンビットシステムなんか特にずっと考えていられるくらい楽しいです。しかしこのガンビットシステムもそうですがL1ボタンの早送り機能や取り返しのつかない要素が多い点など、結構ゲーム好きな人じゃないととっつきにくいんじゃないかとも感じました。

最新作のFF15はストーリーやキャラクター、丸ボタンだけの戦闘などネットでは叩かれている部分が多いですが私は楽しめました!今日のFFは体験する映画のようなスタイルで作られていて、現実から少し離れたファンタジー体験ができるのが他のゲームとは違う強みではないかと私は思っています。今回のFF15はまさにその体現のような作品で、新規プレイヤーには特に好印象だったんではないでしょうか。どうもヴェルサス13の時の初期案のイメージが尾を引いていて過剰に叩かれているように思えます。もちろん私もとても楽しみにしていましたが、それはキングダムハーツⅢに引き継がれているようなのでそちらに期待しています😆

久しぶりの更新

f:id:covory10101101276:20180711115407j:plain

ロックアイランド - パラオ

 

みなさんこんにちは🌚

梅雨もあけてとても暑い日々かと思ったら豪雨に見舞われたり今年の夏は中々荒れていますね。ある理由でブログの更新をしていなかったブルーノです。

というのもこれが今回の記事のメインで、実はこの2ヶ月の間に私の初アプリを開発、販売していました!🤯🤯🤯🤯もしよかったら遊んでみてください

直リンク

https://itunes.apple.com/jp/app/%E3%81%8A%E3%81%BE%E3%81%A4%E3%82%8A%E3%81%97%E3%82%87%E3%81%86%E3%81%98%E3%82%87/id1406127754?mt=8

本当に対したものではないし、粗が目立ちますが今回の経験の全てが私自身にとって大きな一歩になりました!

2ヶ月の間がありましたが制作期間は実は1ヶ月のみで、あとは販売までの手続きでいろいろ私がヘマをして手間取ってしまい、時間としては倍になってしまいました。でもこれで次からはスムーズに販売まで行ける...はず。作ってる間にも思ったのですが制作のフローをこのブログに載せてその間に起こった問題とその解決方法をここに残しておけばよかったなーと後悔しています笑。次のアプリ制作時にはちょっとやってみようと思います👺

全てが初めてで、これまでの勉強の知識を総動員しても次から次に新たな問題が出てきたので結局ネットでの検索の繰り返しでした。結局あれこれ考えても何もしないのでは意味がないなんて当たり前のことを再認識した2ヶ月です。

これからもどんどんアプリを作って色んな事にチャレンジしてみたいと思います😡😡