Google+ もご覧ください
ユーザーアイコン

Unityではじめるゲーム開発

Unity4.3 で追加された Sprite 機能を使ってみよう - その3

Nakamura001

Unity4.3 で追加された Sprite 機能を使ってみよう - その3

今回は実際にゲームを作成しながら Sprite のレイアウト方法や当たり判定の処理方法を解説します。

今回作成するゲーム

作成するプログラムの完成版を Web Player 形式でビルドして、こちらにアップしておきました。記事を読む前にどのようなゲームを作るのか確認も含め、遊んでみて下さい。

ゲームのルールとしては自動スクロールをするマップの中をトゲを避けながらゴールを目指すゲームです。

今回作成するゲームは簡単なものです。しかし、簡単なものとはいえプログラム部分を細かく説明しているとかなりのテキスト量となってしまいます。その為、今回はある程度下準備のしてあるプロジェクトを準備しました。こちらからプロジェクトをダウンロードして下さい。

ダウンロードが終わったらプロジェクトを開いて一度、実行してみて下さい。

実行すると上からボックスがスクロールしてきます。キャラクターの移動についてはまだ準備が終わってないのでまだ移動できません。

ゲーム画面
ゲーム画面

プレイヤーを移動させる

プレイヤーの移動については前回、 transform.Translate() を使って実装しました。しかし、この移動方法では Collider を使った当たり判定処理が行えず、自前で当たり判定のプログラムを書かないといけません。そのため、今回は rigidbody2D.AddForce() を使った実装に変更しました。該当部分は以下のような実装になっています。

float maxSpeed = 1.0f;
float speed = 100.0f;
if(directionX * rigidbody2D.velocity.x < maxSpeed)
    rigidbody2D.AddForce(Vector2.right * directionX * speed);
if(directionY * rigidbody2D.velocity.y < maxSpeed)
    rigidbody2D.AddForce(Vector2.up * directionY * speed);

それに合わせて処理をする部分を Update() から FixedUpdate() に変更してあります。

ここで Rigidbody 2D を使うので Player に Rigidbody 2D を追加して下さい。

今回のゲームでは重力の処理は行わないので Rigidbody 2DGravity Scale の値を0にします。また、プレイヤーが回転する事はないので Fixed Angle にチェックを付けておきます。ここにチェックを付けることで他のオブジェクトとぶつかった時などにプレイヤーが回転してしまうのを防げます。

 Rigidbody 2D の設定
Rigidbody 2D の設定

ここまでの作業を完了させた後にゲームを実行するとカーソルで移動できる事が確認できます。

プレイヤーとボックスに当たり判定を付ける

次にプレイヤーとボックス(茶色い箱)に当たり判定を付けます。

まずはプレイヤーから作業します。 Player に Circle Collider 2D を追加して下さい。デフォルトの設定では画像に比べて少し大き目のサイズになっているので Radius の値を0.1に変更しましょう。

 Circle Collider 2D を追加
Circle Collider 2D を追加

 Radius の値を0.1に
Radius の値を0.1に

続いてボックスに Collider を追加します。 Profabs フォルダにある Box を選択し、 Box Collider 2D を追加して下さい。当たり判定の範囲を確認すると画像に比べてかなり大きな範囲となっています。

デフォルトの当たり判定の範囲
デフォルトの当たり判定の範囲

再度、 Project ビューのBoxを選択し、 SizeXY の値をいずれとも 0.23 に変更してサイズを調整します。

調整後の当たり判定の範囲
調整後の当たり判定の範囲

ここでゲームを実行してみるとプレイヤーとボックスとに当たり判定の処理が行われているのが確認できます。

トゲに当たり判定を付ける

トゲはこのくらいのサイズであれば Box Collider 2D を使ってざっくりとした当たり判定にしても良いですが、せっかくなので使い方の説明も兼ねてちゃんと輪郭に沿った当たり判定を設定できる Polygon Collider 2D を使うようにします。

Profabs フォルダにある Spikes を選択し、 Polygon Collider 2D を追加して下さい。

追加した後に Scene ビューでトゲを選択すると、このように画像の透過部分を配慮したポリゴンが自動的に作成されているのが確認できます。

トゲの当たり判定ポリゴン
トゲの当たり判定ポリゴン

しかし、自動的に作成された当たり判定用のポリゴンは画像部分とズレている部分が目立ちます。そのため、ここから手動で調節を行うことにします。

頂点の移動

当たり判定用のポリゴンの編集は頂点の編集により行います。 shift キーを押した状態でマウスカーソルをポリゴンの頂点部分に移動すると頂点が四角で表示されます。この四角をドラッグすることで頂点を移動できます。

頂点の移動
頂点の移動

頂点の追加

shift キーを押した状態でポリゴンのライン上にマウスカーソルを当てても頂点を表す四角が表示されます。この状態で左クリック→ドラッグと新しい頂点を追加できます。

頂点の追加
頂点の追加

頂点の削除

command キー( Windows の場合には Ctrl キー)を押した状態でマウスカーソルを頂点に合わせると赤い四角が表示されます。この状態で左クリックするとその頂点が削除されます。

頂点の削除
頂点の削除

頂点編集時のTips

頂点の位置を移動を行っている時など編集する位置によっては頂点ではなく、 Sprite をリサイズしてしまう場合があります。リサイズが頻発する際には Inspector の Sprite Renderer を折り畳んで下さい(左端の▼のアイコンをクリックすると折り畳めます)。この操作により、 Sprite の移動やリサイズを行うための Gizmo が非表示になり誤操作が防げます。

 Sprite Renderer を折りたたむ
Sprite Renderer を折りたたむ

 Sprite Renderer を折りたたんだ時の表示
Sprite Renderer を折りたたんだ時の表示

以上の操作方法を使い、画像に沿った当たり判定になるように Hierarchy ビュー上で Spikes のポリゴンを編集して下さい。

画像に沿った当たり判定
画像に沿った当たり判定

編集が終わったら Inspector の Apply ボタンを押して、大元の Prefab を更新します。これで全ての Spikes がたった今編集した当たり判定のものに差し替わったはずです。

 Apply ボタンで更新
Apply ボタンで更新

ここまでの作業でトゲに当たった時にゲームオーバーになる処理まで完成しました。

マップを作成

Hierarchy ビュー上で Spikes を選択した状態で command キー( Windows の場合には Ctrl キー) + Dキーで複製した後、 ScrollMap の下に配置します。複製したままでは同じ位置に重なっていて分かりづらいので Position(0, 0, 0) に変更しておきましょう。

 Spikes を ScrollMap の下に配置
Spikes を ScrollMap の下に配置

これから Sprite 編集を行うので Sprite Renderer が折りたたまれたままになっていた場合には展開して、 Gizmo が表示される様にしておきましょう。ここまでの作業が終わると下のような表示になっているはずです。

ここまでの作業が終った状態
ここまでの作業が終った状態

ピッタリとした位置に配置する

まずはトゲをボックスの上に配置してみましょう。このような作業を行う場合にはスナップ機能を使うのが便利です。

Sprite の Gizmo の角にマウスカーソルを近付けた状態で v キーを押すと以下の様にマウスカーソルに一番近い角のみ青丸が表示された状態になります。

 v キーを押した状態
v キーを押した状態

v キーを押したままマウスカーソルをドラッグすると他の Sprite の角にスナップします。この機能を使い中央のボックスの上にトゲを配置してみましょう。

ボックスの上にトゲを配置
ボックスの上にトゲを配置

垂直、水平移動

shift キーを押しながら Sprite をドラッグすると、垂直や水平に移動できます。

垂直に移動
垂直に移動

この操作中に間違って当たり判定のポリゴンの頂点を移動してしまう誤操作が発生する場合は Inspector 上で Collider を折りたたんで下さい。この操作により、頂点編集用の Gizmo が非表示になり誤動作が防げます。

 Collider を折りたたむ
Collider を折りたたむ

他の向きのトゲを配置

左向きのトゲを使いたい場合には Spikes の RotationZ の値を90に変更します。

ボックスの上にトゲを配置
ボックスの上にトゲを配置

下向きにしたい場合には180、右向きにしたい場合には270に設定して使います。

以上の機能を活用してボックスやトゲを並べてマップを作成して下さい。

ゴールを配置

マップ作成が終わったら最後にゴールの位置に ScrollMap の下の階層に存在する GameClearAreaPosition を調整移動して下さい。ここに設定してある当たり判定( Collider )に触れた瞬間、ゴールの処理が行われます。

ゴールを配置
ゴールを配置

以上で完成です。完成版のプロジェクトをこちらに置いておきます。もし、ここまでの作業が上手く行かなかった場合には記事とこのプロジェクトとを見比べながら確認してみて下さい。

次回は Sprite で物理エンジンを使う方法を解説する予定です。

画像素材について

今回のゲームでは OpenGameArt で公開されている以下のパブリックドメインの画像を使わせて頂きました。配布されている方々に感謝します。

Unity
タグ:

記事をリクエストする

関連記事

コメント