【Unity】もぐら叩きゲームvol.5『RectMask2D』で簡単に画像を隠す。

プログラミング
この記事は約5分で読めます。
スポンサーリンク

前回の記事では、モグラのアニメーションが完成しましたね。今回は、そのアニメーションを使って、モグラが穴からひょこっと出てくる挙動を作っていきます。

いわゆる、Unityに備わっている「マスク機能」を使い、見せたい部分と隠したい部分を調整することで、もぐら叩きゲームっぽく仕上げることができます。

今回の記事では、『RectMask2D』を使って、マスク機能を紹介していきますので、ぜひ参考にしてみてください。

筆者はテックアカデミー でUnityを勉強しました!

この記事をご覧になっている方の中には、プログラミング初心者Unityがまだまだわからないという方が多いのではないでしょうか?

筆者は、元々ITとは無縁の仕事をしており、Unityどころかプログラミング自体が初めてでした。

独学で頑張っていましたが、些細なことでつまづいてしまい…。それが、積み重なり疲れ切ってしまいました。

そして、悩んだ末にプログラミングスクール「テックアカデミー 」を受講することにしました。

テックアカデミー で、Unityの基礎を習得できたので、現在ゲームの作り方やUnityに関する情報を発信できています。

もし、「テックアカデミー って実際どうなんだろう?」と気になっている方がいれば、ぜひこちらの記事もご覧になってください。

筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や受講した感想を詳しく紹介しています。

『RectMask2D』を使うと、こんなもぐら叩きゲームになります

今回の記事では、上の動画のように、モグラが下がっても草の下から登場しないように設定してみます。

ちなみに、失敗すると以下の動画のように、モグラが下がったら、草の下からモグラが出てきてしまい、見た目が悪くなってしまいます。

モグラが下がっても、モグラが隠れるようにするには、Unityに元から備わっている『マスク機能』を利用します。

マスク機能にも、いくつか種類がありますが、今回は一番簡単な『RectMask2D』を使って、もぐら叩きの作り方を解説していきますよ。

RectMask2Dのマニュアルをチェック!

まず、RectMask2Dの使い方を、Unityマニュアルから確認してみましょう。

RectMask2D

RectMask2D は、Mask と同様にマスク制御を行います。Mask は親要素の短径に対する子要素を制限します。(中略)

RectMask2D は一般的に、大きな画像領域中の小さな領域を表示するのに使います。この領域を枠として表示するため RectMask2D を適用します。

unityドキュメンテーション:https://docs.unity3d.com/ja/2019.4/Manual/script-RectMask2D.html

こちらの数行のマニュアルからわかる重要ポイントは、「親要素の短径に対する子要素を制限」ということです。

意味としては、「大きな画像領域中の小さな領域を表示する」と同義です。

つまり、親オブジェクトと子オブジェクトの二つを用意して、「親オブジェクトの枠内でモグラを表示させていく」ということになります。

具体的な設定方法は、次の見出しから紹介していきます。

手順①空オブジェクトに『RectMask2D』を追加する

まずは、CreateEmptyから、空のゲームオブジェクトを生成します。Canvasの子要素にいれるために、Canvasの中にドラッグ&ドロップしましょう。

そして、インスペクターにあるAddComponentをクリックして、「RectMask2D」を追加します。

なお、Canvasの作り方は、UI→Imageと選択すれば登場します。画像では、ImageをBackGroundと名前を変更してあり、Imageに芝生の画像をアタッチ済みです。

手順②Imageで各画像を配置する

今回は、草からモグラが登場する挙動を作ります。穴、モグラ、草の3つの画像を配置するために、Imageを生成しましょう。

名前は、それぞれ「Ana」「Mogura」「Kusa」にしました。これら3つのオブジェクトを、RectMask2Dを持つ「GameObject」の子要素に入れておきましょう。

なお、穴、モグラ、草の画像の順番は、この通りで配置する必要があります。

ヒエラルキーのゲームオブジェクトは、階層性の特徴を持っており、上にある穴、モグラ、草のオブジェクトから順番に奥に配置されます。

今回のモグラオブジェクトには、アニメーション機能がついています。モグラにアニメーションを付ける方法は、前回の記事を読んで参考にしてみてください。

手順④RectMask2Dをシーンビューから直接調整する

RectMask2Dは、シーンビューで見ると薄い四角の線(赤い線は実際にはありません)に囲まれた中身を表示させる機能です。

画像のように、四角の内側が見える部分外側が隠れる部分です。この機能を使うことで、下記の動画のように上手にモグラを隠すことができるのです。

RectMask2Dはシーンビューから手動で大きさを変えることができます。今回は、草の底あたりまで見えるようにしています。

注意!子オブジェクトから一旦、モグラを外す必要がある

RectMask2Dをシーンビューから調整しようとしても、うまくいかないケースがあります。

それは、RectMask2Dの範囲を調整すると、モグラや穴など、画像の大きさも変化してしまうことです。

理由は、RectMask2Dの子要素にモグラや穴の画像があるからです。親の範囲を広くすれば、子どもの範囲も広くなってしまう仕組みだからです。

そこで、下の画像のように、一旦モグラ、穴、草を「GameObject」から外すことをおすすめします。

一旦、子オブジェクトから外すことで、GameObjectに追加されたRect Mask 2Dの範囲を調整することができます。

調整後に、再び、子オブジェクトに戻すことを忘れないでください。

まとめ:RectMask2Dを使って、うまくモグラを隠そう!

ここまで、Rect Mask 2Dを使って、モグラの見える部分と隠れる部分の調整を行ってきました。

いわゆるマスク機能と呼ばれるものですが、知っておくとかなり便利な機能な上、プログラムを書く必要もありません。

マスクの使い方に困っている方は、ぜひRect Mask 2Dを活用してみてください。

コメント

タイトルとURLをコピーしました