レゴ® Mod:メニューをカスタマイズする

Tutorial

·

Beginner

·

+10XP

·

20 mins

·

(16)

Unity Technologies

レゴ® Mod:メニューをカスタマイズする

マイクロゲームのメニュー画面をステッカーのアセットを使ってカスタマイズしましょう。

Languages available:

1. 概要

この Mod では、マイクロゲームのメニュー画面をカスタマイズします。アドオンのステッカーアセットも使います。ゲーム体験全体の雰囲気を変えるために、こうしたアセットを使うことができます。


さあ、始めましょう。


2. 始める前に

エディター内チュートリアル


最初にレゴ® マイクロゲームのエディター内チュートリアルを完了しておくと、この Mod からもっと多くのことを学べます。ご自分のペースで、時間をかけて学んでいってください。


マイクロゲームを開く


レゴ® マイクロゲームを開くには、次のようにします。


1. Unity Hub を開きます。


2. マイクロゲームを使ったことがあるかどうかに従って、次のどちらかの手順を行ってください。


  • すでにマイクロゲームを使用したことがある場合は、Projects タブで保存した Unity プロジェクトを選択してください。プロジェクトを選ぶと Unity エディターが開きます。これには数分かかることもあります。

  • マイクロゲームを初めて使う方は、Learn タブで「LEGO® Microgame」を選択してください。指示に従って、エディター内チュートリアルを完了してください。

アドオンパッケージ


このクリエイティブ Mod を完了するには、Stickers LEGO® Microgame Add-On をダウンロードしてインストールする必要があります。


3. テストのためにシーンを調整する

まず、チュートリアルシーンを変更して、勝敗の結果表示画面をトリガーして変更をテストすることが簡単にできるようにしておきましょう。


1. Project ウィンドウで、 Assets > LEGO > Prefabs > LEGO Behaviour Bricks と移動します。



2. Scene ビューで、ステージの終了地点に移動します。プロジェクトにあった元の Win ブロックとその Touch Trigger を削除(Ctrl / Cmd + Del)します。


3. プレイヤーのスタート地点に戻ります。手っ取り早い方法は、Hierarchy ウィンドウで「Player Minifig」を選択し、シーンビューにカーソルを合わせてショートカットキーの Fフレーム選択)を使い、そのゲームオブジェクトに視点を合わせることです。


4. 「Win」ブロックを Project ウィンドウから Scene ビューにドラッグします。



5. LEGO® Tools で、ブロックの組み立てを有効にし、ブロック選択を Single Brick に設定します。



6. プロジェクトウィンドウで「Touch Trigger」を探し、シーンビューにドラッグします。


7. カーソルで Touch Trigger ブロックを Win ブロックの上に移動させます。接続できる場所に張り付きながら動きます。クリックしてブロックを接続します。



8. Project ウィンドウで、「Hazard」ブロックを探し、Scene ビューの、Win ブロックから少し離れた場所にドラッグします。



9. Ctrl / Cmd + S を押して変更を保存します。


4. ゲームの最初に表示されるメニューを見直す

次に、ゲームの最初に表示されるメニュー、勝利時のメニュー、敗北時のメニューを作るために使われている UI(ユーザーインターフェース)を見直しましょう。


1. Project ウィンドウで、Assets > LEGO > Scenes と移動します。



2. 「Menu Intro」をダブルクリックしてシーンを開きます。プロンプトが表示されたら、変更を保存します。


3. Scene ビューの上部で、2D ボタンを選択して 2D 表示を有効にします。



4. Hierarchy ウィンドウで、「Canvas」ゲームオブジェクトを選択します。


5. キャンバスをよく見たい場合は、Scene ビュにカーソルを合わせて、ホットキー の Fフレーム選択)を使用します。


6. Scene ビューで Canvas の各要素を選択するか、Hierarchy ウィンドウで、親になっている「Canvas」ゲームオブジェクト、次に「Menu」オブジェクト、そしてその子になっているゲームオブジェクトの要素を表示することができます。


ゲームの最初に表示させるメニューの Canvas には、次の要素が含まれています。


  • Title(テキスト)

  • Play Button(テキストとステッカー)

  • Controls Button(テキストとステッカー)


5. ステッカーでメニューをカスタマイズする

メニュー画面の Canvas をカスタマイズして、ゲーム全体の外観に合わせることができます。これを行う方法の 1 つが、LEGO® Microgame Stickers Add On を使って、2D 画像を本物のステッカーのように Canvas に追加することです。(こういう 2D 画像はスプライトと呼ばれています)。


1. ステッカーを変更する


まず、ステッカーを変更しましょう。


1. Scene ビューまたは Hierarchy ビューで、Canvas 上のステッカーを選択します。この例では、Play Button の横にある Treasure Map ステッカーを使用しています。



2. インスペクターで、Image コンポーネントを探します。


3. ソース画像ピッカー(丸いアイコン)を選択し、Select Sprite ウィンドウでゲームに合ったステッカーを選択します。



2. ステッカーのサイズを変更する


次の手順で、追加したステッカーのサイズを変更することができます。


1. Scene ビューまたは Hierarchy ビューで、Canvas 上の「Sticker」ゲームオブジェクトを選択します。


2. ツールバーで、Rect ツールを選択します(またはショートカットキーの T を使用します)。ギズモを選択してドラッグし、ステッカーのサイズを変更します。Shift キーを押しながらドラッグすると、ステッカーのアスペクト比を保ったまま、均一なサイズ変更を行うことができます。


下の動画は Rect ツールを使って、均一なサイズ変更と均一でないサイズ変更を順番に行っているところを実演しています。



3. ステッカーを複製する


メニューのステッカーを複製することもできます。


1. Scene ビューまたは Hierarchy ウィンドウで、複製したいステッカーを選択します。


2. Ctrl / Cmd + D でゲームオブジェクトを複製します。


3. ツールバーで、移動ツールを選択し(またはショートカットキーの W を使用)Canvas 上のステッカーの配置を調整します。


テストして保存する


重要:


  • ツールバーの再生ボタンを選択して再生モードに入り、「Win」または「Hazard」ブロックを発動させてゲームの最初のメニューを表示させて、変更をテストします。テストが終わったら再生モードを終了することを忘れないでください。再生モードで行った変更は保存されません。

  • 定期的に変更を保存(Ctrl / Cmd + S)するようにしてください。

6. テキストをカスタマイズする

次に、テキストをカスタマイズしましょう。


1. テキストを変更する


テキストを変更するには、次のようにします。


1. Hierarchy ビューまたは Scene ビューで、「Title」 ゲームオブジェクトを選択します。


2. インスペクターで、TextMeshPro - Text (UI) コンポーネントを見つけます。


3. Text Input フィールドで、ゲームの名前を変更します。



2. テキストの色を変更する(単色)


1 つの色を選んで、その色に変更する場合は、次のようにします。


1. インスペクターで、TextMeshPro - Text (UI) コンポーネント Vertex Color プロパティを探します。





2. カラーボックスを選択し、ゲームの外観に合わせて色を選択します。



3. テキストの色を変更する(グラデーション)


テキストの色をカラーグラデーションに変更する場合は、次のようにします。


1. インスペクターで、TextMeshPro - Text (UI) コンポーネント Color Gradient プロパティを有効にします。



2. 色選択ボックスを使って、テキストの右下と右上、左下と左上の端の色をそれぞれ設定します。ステッカーから色を拾いたい場合は、カラーピッカー(スポイトのアイコン)を使うこともできます。



4. テキストボックスの色を変更する


テキストボックスの色を変更する(例えば、再生ボタンの背景など)には、次のようにします。


1. Hierarchy ビューまたは Scene ビューで、「Play Button」ゲームオブジェクトを選択します。



2. インスペクターで、Image コンポーネントColor プロパティを探します。



3. 色選択ボックスまたはカラーピッカー(スポイトアイコン)を使用して、背景の色を設定します。


4. インスペクターで、Custom Button (Script) コンポーネントの横の矢印をクリックして、折りたたまれたプロパティを展開します。


5. Transition None に設定します。



テストして保存する


重要:


  • ツールバーの再生ボタンを選択して再生モードに入り、「Win」または「Hazard」ブロックを発動させてゲームの最初のメニューを表示させて、変更をテストします。テストが終わったら再生モードを終了することを忘れないでください。再生モードで行った変更は保存されません。

  • 定期的に変更を保存(Ctrl / Cmd + S)するようにしてください。

7. 実験して繰り返し修正する

ゲームの最初に表示されるメニュー画面をカスタマイズしたら、「勝利時のメニュー」と「敗北時のメニュー」のそれぞれのシーンにある Canvas も変更してみてください。


変更がプレイヤー体験にどのような影響を与えるかを明確に把握するために、テストをしながら行ってください。


ヒント:


  • テストが終わったら再生モードを終了することを忘れないでください。再生モードで行った変更は保存されません。

  • ゲームのメニュー以外のシーンに戻るときは、Scene ビューの上部にあるボタンを使って、3D 表示に戻るようにしてください。

8. もっと改造したい人へ

メニュー画面の完成度を一段引き上げるために、次のような変更を行ってみるのはいかがでしょうか。


  • キャンバス上の要素を移動したり、サイズを変更したりして、より自由な感じにします。



皆さんがどんなものを作るのか、今から楽しみです。



次のステップ


他のレゴ® マイクロゲームクリエイティブ Mod にもトライして、皆さんのマイクロゲームをどんどんカスタマイズしてしまいましょう。


Complete this tutorial