前回の記事では、モグラのアニメーションが完成しましたね。今回は、そのアニメーションを使って、モグラが穴からひょこっと出てくる挙動を作っていきます。
いわゆる、Unityに備わっている「マスク機能」を使い、見せたい部分と隠したい部分を調整することで、もぐら叩きゲームっぽく仕上げることができます。
今回の記事では、『RectMask2D』を使って、マスク機能を紹介していきますので、ぜひ参考にしてみてください。
Table of Contents
筆者はテックアカデミー でUnityを勉強しました！
この記事をご覧になっている方の中には、プログラミング初心者でUnityがまだまだわからないという方が多いのではないでしょうか？
筆者は、元々ITとは無縁の仕事をしており、Unityどころかプログラミング自体が初めてでした。
独学で頑張っていましたが、些細なことでつまづいてしまい…。それが、積み重なり疲れ切ってしまいました。
そして、悩んだ末にプログラミングスクール「テックアカデミー 」を受講することにしました。
テックアカデミー で、Unityの基礎を習得できたので、現在ゲームの作り方やUnityに関する情報を発信できています。
もし、「テックアカデミー って実際どうなんだろう？」と気になっている方がいれば、ぜひこちらの記事もご覧になってください。
筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や受講した感想を詳しく紹介しています。
『RectMask2D』を使うと、こんなもぐら叩きゲームになります
今回の記事では、上の動画のように、モグラが下がっても草の下から登場しないように設定してみます。
ちなみに、失敗すると以下の動画のように、モグラが下がったら、草の下からモグラが出てきてしまい、見た目が悪くなってしまいます。
モグラが下がっても、モグラが隠れるようにするには、Unityに元から備わっている『マスク機能』を利用します。
マスク機能にも、いくつか種類がありますが、今回は一番簡単な『RectMask2D』を使って、もぐら叩きの作り方を解説していきますよ。
RectMask2Dのマニュアルをチェック！
まず、RectMask2Dの使い方を、Unityマニュアルから確認してみましょう。
こちらの数行のマニュアルからわかる重要ポイントは、「親要素の短径に対する子要素を制限」ということです。
意味としては、「大きな画像領域中の小さな領域を表示する」と同義です。
つまり、親オブジェクトと子オブジェクトの二つを用意して、「親オブジェクトの枠内でモグラを表示させていく」ということになります。
具体的な設定方法は、次の見出しから紹介していきます。
手順①空オブジェクトに『RectMask2D』を追加する
まずは、CreateEmptyから、空のゲームオブジェクトを生成します。Canvasの子要素にいれるために、Canvasの中にドラッグ＆ドロップしましょう。
そして、インスペクターにあるAddComponentをクリックして、「RectMask2D」を追加します。
なお、Canvasの作り方は、UI→Imageと選択すれば登場します。画像では、ImageをBackGroundと名前を変更してあり、Imageに芝生の画像をアタッチ済みです。
手順②Imageで各画像を配置する
今回は、草からモグラが登場する挙動を作ります。穴、モグラ、草の3つの画像を配置するために、Imageを生成しましょう。
名前は、それぞれ「Ana」「Mogura」「Kusa」にしました。これら3つのオブジェクトを、RectMask2Dを持つ「GameObject」の子要素に入れておきましょう。
なお、穴、モグラ、草の画像の順番は、この通りで配置する必要があります。
ヒエラルキーのゲームオブジェクトは、階層性の特徴を持っており、上にある穴、モグラ、草のオブジェクトから順番に奥に配置されます。
今回のモグラオブジェクトには、アニメーション機能がついています。モグラにアニメーションを付ける方法は、前回の記事を読んで参考にしてみてください。
手順④RectMask２Dをシーンビューから直接調整する
RectMask２Dは、シーンビューで見ると薄い四角の線（赤い線は実際にはありません）に囲まれた中身を表示させる機能です。
画像のように、四角の内側が見える部分、外側が隠れる部分です。この機能を使うことで、下記の動画のように上手にモグラを隠すことができるのです。
RectMask２Dはシーンビューから手動で大きさを変えることができます。今回は、草の底あたりまで見えるようにしています。
注意！子オブジェクトから一旦、モグラを外す必要がある
RectMask2Dをシーンビューから調整しようとしても、うまくいかないケースがあります。
それは、RectMask2Dの範囲を調整すると、モグラや穴など、画像の大きさも変化してしまうことです。
理由は、RectMask2Dの子要素にモグラや穴の画像があるからです。親の範囲を広くすれば、子どもの範囲も広くなってしまう仕組みだからです。
そこで、下の画像のように、一旦モグラ、穴、草を「GameObject」から外すことをおすすめします。
一旦、子オブジェクトから外すことで、GameObjectに追加されたRect Mask 2Dの範囲を調整することができます。
調整後に、再び、子オブジェクトに戻すことを忘れないでください。
まとめ：RectMask2Dを使って、うまくモグラを隠そう！
ここまで、Rect Mask 2Dを使って、モグラの見える部分と隠れる部分の調整を行ってきました。
いわゆるマスク機能と呼ばれるものですが、知っておくとかなり便利な機能な上、プログラムを書く必要もありません。
マスクの使い方に困っている方は、ぜひRect Mask 2Dを活用してみてください。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
RectMask2D は、Mask と同様にマスク制御を行います。Mask は親要素の短径に対する子要素を制限します。（中略）
RectMask2D は一般的に、大きな画像領域中の小さな領域を表示するのに使います。この領域を枠として表示するため RectMask2D を適用します。unityドキュメンテーション：https://docs.unity3d.com/ja/2019.4/Manual/script-RectMask2D.html