【Unity/2D】Flappy Bird風ゲームを作ってみる話 #3 土管の画像を用意する～土管のPrefabを作る
記事をご覧いただき、誠にありがとうございます。
※二次配布に該当するため、リンク先からダウンロードしてください
インストーラー版・Microsoft Storeアプリ版のどちらでも問題ありません。
起動出来たら、先程ダウンロードした土管の画像をGimpへドロップします。
キャンバスの大きさが足りないので、メニューの画像 > キャンバスサイズの変更でキャンバスの大きさを変更します。
別ウィンドウが表示されるので、高さを4000にします。
すると、変更後のプレビューは下方向へキャンバスが伸びています。
これでキャンバスが変更できました。
画像の加工は色々なやり方がありますが、今回はGimpで簡単に出来る方法を紹介しました。
次は、この画像を使って土管のオブジェクトを作成します。
次は必要なコンポーネントをアタッチします。
Colliderをアタッチしたら、土管にフォーカスを寄せてEdit Colliderを押します。
Edit Colliderボタンを押すと、現在のBox Collider2Dの範囲が緑色の線で表示されます。
ちょっとはみ出してしまっているので、SizeとOffsetで調整します。
良い感じに調整できました。
複製したら「Pipe_Bottom」へリネームして、Transformで位置と回転を調整します。
これで上下の土管が準備出来ました。
オブジェクトのアイコンが青く変化したらPrefab化の完了です。
投稿主の無能です。
前回は、スクリプトを書いてプレイヤーがジャンプする（上方向へ移動する）機能を実装しました。
今回は、障害物となる土管をゲーム内に登場させたいと思います。
土管の画像を探す
土管の画像を探しましょう。
土管の画像は自由に選んで問題無いですが、スーパーマリオの土管みたいに真っ直ぐなものが好ましいです。
という事で、こちらの画像を使います。
.png形式でダウンロードしてください。
※ダウンロードにはイラストACのアカウントが必要になります
土管の画像を少し修正する
Gimpのインストール
ダウンロードした土管の画像のままだと、長さが足りないので、Gimpを使って長さを足します。
無能はGimp（ギンプ）という無料のソフトで編集しますが、使い慣れたソフトがあるならそれでOKです。
2Dシューティングのチュートリアルがお済みの方ならインストール済みだと思います。
2Dシューティング未実施でGimpを未インストールの方は、以下のリンクからダウンロード・インストールしてください。
無能はインストーラー版を使用しています。
インストーラー版・Microsoft Storeアプリ版のどちらでも問題無し
無能はインストーラー版を使用
Gimpを起動し、キャンバスサイズを変更
インストールができたらGimpを起動します。
Gimpの起動直後
土管の画像をドロップ
画像 > キャンバスサイズの変更
キャンバスサイズの変更
高さを4000にする
この状態でリサイズボタンを押します。
プレビューは下方向へキャンバスが伸びている
この状態でリサイズボタンを押す
キャンバスが変更できた
画像の一部を切り取りコピーする
次は、画像の一部を切り取って、先程サイズを変更したキャンバス一杯に土管を長くしてやります。
「画像をエクスポート」という別ウィンドウが表示されるので、エクスポートする画像の保存場所、名前を決めて下部のエクスポートボタンを押します。
左上の矩形選択ツールを選択し、適当な土管の筒の部分をコピー（Ctrl+c）ます。
左上の矩形選択ツールを選択
矩形選択ツールの状態で範囲選択した状態
そして、その状態でコピー（Ctrl+c）して、矩形選択ツールを下にずらして、ずらしたところで貼り付け（Ctrl+v）します。
矩形選択ツールを下にずらし、ずらしたところで貼り付け（Ctrl+v）
後は、土管の長さがキャンバスの一番下になるまで繰り返します。
同じ作業を繰り返して、土管の長さがキャンバス一杯になるまで繰り返す
これで、土管の長さが変更したキャンバスの長さになったので、この変更した画像を保存します。
.png画像でエクスポート
保存するには、変更した画像を.png形式でエクスポートします。
今回は.pngファイルのみを保存します。
各自作業状況にあわせて保存形式を選んでください。
メニューのファイル > 名前を付けてエクスポートを選択するか、ショートカットキー（Ctrl+Shift+e）を押します。
ファイル > 名前を付けてエクスポート
または
Ctrl+Shift+e
加工した画像の保存場所・名前を決めたら下部のエクスポートボタンを押す
もう一つ別ウィンドウが表示されるので、そのままエクスポートします。
もう一つ別ウィンドウが表示されるので、そのままエクスポート
すると選択した保存場所に、加工し命名した長い土管の画像が入ります。
加工した画像
では、この加工した画像をUnityへインポートします。
加工した土管の画像をUnityへインポートする
先程加工した土管を伸ばした画像を、UnityのSpritesフォルダへインポートします。
インポートしたらリネームします。
先程加工した土管を伸ばした画像を、UnityのSpritesフォルダへインポート
インポートした画像ファイルをリネーム
土管のオブジェクトを作成
加工した土管の画像をインポートしたので、この画像を使って障害物となる土管のオブジェクトを作成します。
プレイヤーと同様に画像をHierarchyビューにドロップすると、オブジェクトが画像付きで作成されます。
インポートした画像をHierarchyビューにドロップした状態
インポートしたら、Hierarchyビューにできたオブジェクトの名前をリネームします。
本記事では「Pipe_Top」にします。
Hierarchyビューにできたオブジェクトをリネームする
それでは、画像のサイズを調整しましょう。
画像のサイズを調整する
画像のサイズが大き過ぎるので、修正します。
Spritesフォルダにインポートした土管の画像を選択します。
するとInspectorビューに画像の詳細項目が出てくるので、Pixels Per Unitを800に設定して、右下のApplyボタンで変更を適用します。
Pixels Per Unitを800に変更し、Applyボタンで変更を適用する
土管の画像が縮小されました。
丁度良いサイズに縮小された
土管オブジェクトに必要なコンポーネントをアタッチする
土管オブジェクトの役割を考える
さて、インポートしてオブジェクトが出来たまでは良いのですが、このオブジェクトはどんな動きをして、どんな形でプレイヤーの障害になるのかを明確にしていませんでした。
ですので、役割が現状では不明瞭です。
不明瞭だから、どんなコンポーネントが必要なのかが分からないので、この土管オブジェクトの役割から明確にしていきましょう。
まず、土管は右から左へ移動します。
移動する、という事は…Rigidbody2Dをアタッチする必要があります。
次に、土管オブジェクトは「プレイヤーを遮る」という障害物になりますね。
という事は、「プレイヤーと接触した」という当たり判定が必要になります。
当たり判定という事は…Colliderが必要になります。
これで必要なコンポーネントが見出せたようですね。
早速アタッチしていきましょう。
Rigidbody2Dをアタッチする
最初に土管オブジェクトに、移動を可能にするためのRigidbody2Dをアタッチします。
InspectorビューのAdd Componentボタンで、Rigidbody2Dをアタッチします。
やり方はPlayerと同様です。
InspectorビューのAdd Componentボタンを押して、Rigidbody2Dを検索してアタッチ
Rigidbody2Dがコンポーネントに追加された
そして、Body TypeをKinematicにします。
Body TypeをKinematicに変更
このKinematicと言うのは、単純に特徴だけ挙げると
- 明示的なユーザー制御でのみ動く
- 重力や他からの影響を受けない
- Body TypeがDynamicのRigidbody2Dのみ衝突する
という特徴があります。
という事は、プレイヤーとは衝突の判定が起こるけど、その他のBody Typeは衝突の判定が起こらないという事になります。
加えて、ユーザーからの明示的な制御は出来るけど、重力や他からの影響はありません。
という事は、スクリプトで土管を動かす処理で土管そのものを動かすことは可能ですが、プレイヤーがぶつかっても、Dynamicはプレイヤーが衝突した影響で土管が動きますが、淡々とスクリプトで与えられた通りの動きしかしない、という事になります。
特徴を掴むと、何かのギミックとかに役に立ちそうですね。
では次に当たり判定をアタッチします。
Colliderをアタッチする
次は当たり判定となるColliderをアタッチします。
InspectorビューのAdd Componentボタンを押して、Box Collider2Dをアタッチします。
InspectorビューのAdd Componentボタンを押して、Box Collider2Dを検索してアタッチ
Box Collider2Dがアタッチされた
オブジェクトへのフォーカスは対象のオブジェクトをHierarchyビューでダブルクリックすれば、Sceneビューでフォーカスできます。
後はSceneビューで見やすい位置へ調整します。
土管オブジェクトにフォーカスする
Edit Colliderボタンを押す
Edit Colliderボタンを押すと、現在のBox Collider2Dの範囲が緑色の線で表示される
あと土管の一番太い部分にあわせてColliderが作成されているので、土管の細い部分にあわせて少し細くしておきましょう。
いい感じに調整出来たら、Edit Colliderボタンを押して編集モードを解除します。
SizeとOffsetでColliderを調整
こんな感じになった
これで当たり判定も準備できました。
では位置や回転を調整します。
Transformで調整する
次はTransformで位置や回転を調整し、上側の土管にしていきます。
土管を180°回転させ、上方向の位置へ土管を動かします。
位置と回転を調整
調整後の上側の土管
では土管を複製します。
土管オブジェクトを複製して下側の土管を作る
上側の土管を複製して、下側の土管を作成します。
Hierarchyビューでオブジェクトを選択し、右クリックからDuplicateで複製できますが、ショートカットキー（Ctrl+d）で複製します。
土管が複製された
リネーム、位置・回転を調整
調整した下側の土管
この土管をPrefabにします。
Prefabオブジェクトにする
では上下の土管オブジェクトをPrefabにします。
Prefabというのは「再利用可能なオブジェクト」だと考えていただければ分かりやすいと思います。
Prefab化の方法はとても簡単で、HierarchyビューにあるPrefab化したいオブジェクトを、Projectビューへドロップするだけです。
ProjectビューにPrefabsフォルダを作成して格納します。
ProjectビューにPrefabsフォルダを作成
Prefab化
まとめ
今回は
- 土管オブジェクトの画像をダウンロード、加工した
- 土管オブジェクトに必要なコンポーネントをアタッチした
- 土管オブジェクトをPrefab化した
という事をやりました。
次回は、土管オブジェクトが移動できるようにスクリプトを書いていきたいと思います。
では、また次回！
コメント
コメントを投稿