投稿者: Kumie

朝日新聞デジタル版に掲載されました。

https://www.asahi.com/articles/ASS7W4F5BS7WULPT001M.html

既に教材データのアップデートはしていますがご不明な点等ございましたらご遠慮なくお問い合わせください。

ご参加いただいています皆様には個別でメールアドレスへパスコードをご案内させていただいています。

それでは今月も楽しく学習してください。

ブログ記事の形式で、Unityでのログイン画面の作り方を紹介します。このチュートリアルでは、UnityのUIシステムを使用して、スマートフォン風のログイン画面を作成する方法を詳しく解説します。このプロジェクトは、初心者から中級者のUnity開発者に適しています。

Unityでのスマートフォン風ログイン画面の作成方法

1. 新しいキャンバスの作成

まず、Unityエディタで新しいキャンバスを作成します。これが、ログイン画面の基盤となります。

• UI > Canvas を右クリックし、名前を「PhoneCanvas」と設定します。
• Canvasの設定:
• Render Mode: Screen Space – Overlay
• UI Scale Mode: Scale with screen size
  • Reference Resolution: 1920×1080
  • Screen Match Mode: Match Width Or Height
  • Match: 0.5
  • Reference Pixels Per Unit: 100

2. PhoneShellの追加

• PhoneCanvasの子オブジェクトとしてImageを追加し、名前を「PhoneShell」と設定します。このImageには、スマートフォンの画面をイメージしたスプライトを設定します。サイズは500×1000にします。

3. PhoneLoginPanelの追加

• PhoneCanvasにUIパネルを追加し、名前を「PhoneLoginPanel」とします。サイズはPhoneShellの画像に合わせます。このパネルからImageコンポーネントを削除します。

4. 背景マスクとスプライトの追加

• PhoneLoginPanelの子としてImageを追加し、名前を「BGMask」とします。Maskコンポーネントを追加し、このBGMaskの子として別のImageを追加し、名前を「BGSprite」とします。

5. ログイン画面の主要なUI要素の追加

• MainTextArea、LockIcon、TextMeshPro (パスコード入力指示用)、Button (緊急用)、KeyInputField (パスコード入力フィールド)、KeyContainer (数字キーパッドコンテナ) をPhoneLoginPanelの子として追加します。

6. キーパッドの設定

• KeyContainerにGrid Layout Groupコンポーネントを追加し、Key1ボタンを作成して12個複製します。各キーに適切な名前と数字を設定し、キャンセルと確認キーを特別に設定します。

7. PhoneLoginManagerの設定

• 空のGameObjectを作成し、名前を「PhoneLoginManager」とし、カスタムスクリプト「PhoneLockManager」をアタッチします。必要なUI要素をドラッグ&ドロップで紐付け、パスコードの検証や画面遷移のロジックを設定します。

8. ボタンの動作設定

• 各キーに対して、適切なアクションをOn Clickイベントに設定します。これにより、ユーザーがキーパッドを使用してパスコードを入力したり、キャンセル、確認操作を行えるようになります。

まとめ

このチュートリアルでは、Unityを使用してスマートフォン風のログイン画面を作成する基本的な手順を説明しました。UI要素の配置、イベントの設定、

スクリプトによる動作の制御など、UnityでインタラクティブなUIを作成する際の基礎知識を提供します。このプロジェクトを通じて、UnityでのUI開発スキルを向上させることができるでしょう。

ヒエラルギーはこんな感じです↓

タイピングゲームの作り方

Unityを使ったタイピングゲームの作り方を紹介します。このチュートリアルを通じて、Unityの基本的な操作方法やコンポーネントの活用方法を学んでいきましょう。

まず、ゲームのオブジェクト構造を確認します。ヒエラルキービューの中で以下のように各オブジェクトを配置します。

• Game Manager（Game Managerにはスクリプトをアタッチします）
• Canvas
  • Panel Question
    • Question Image
  • Panel Answer
    • Answer Text
    • Correct Text（ここではチェックを外します）
    • Wrong Text（ここではチェックを外します）
  • Button Parent（空のオブジェクト。ここにはGrid Layout Groupをアドコンポーネントとして追加します）
    • Button (a) （On Click()イベントに対して、Game ManagerにアタッチしたTypingGame.OnKeyPressを設定します。また、このボタンに対応するアルファベットを設定します）
    • … 同様にButton (b) から Button (z)までを作成します。

次に、Game ManagerオブジェクトのInspectorビューを使って、必要な設定を行います。

• Question Image: Question Imageオブジェクトを指定します。
• Input Text: Answer Textオブジェクトを指定します。
• Correct Text: Correct Textオブジェクトを指定します（ここではチェックを外します）。
• Wrong Text: Wrong Textオブジェクトを指定します（ここではチェックを外します）。
• Next Scene Name: 次に移動するシーンの名前を設定します。

さらに、”Questions”項目に問題を追加していきます。”Element()”の項目で必要な数だけ問題を追加し、各々の項目に以下の情報を入力します。

• Question: 問題となるスプライトを設定します。
• Answer: 正解となるアルファベットを入力します。

以上がUnityを使ってタイピングゲームを作る際の基本的な設定方法です。

こんにちは、Unityの使い方シリーズ第3弾です。

今回は、「ドラッグ＆ドロップ」機能の作り方をご紹介します。ここでは、画像をクリックすると音声が流れ、画像をドラッグできる機能と、所定の場所に画像をドロップすると音声が流れる機能を組み合わせたインタラクティブなシステムを構築します。

まずは、ヒエラルギーの構成を理解しましょう。

ヒエラルギー

• Canvas
• Slot Parent(UIイメージで作成）
  • Puzzle Slot_finish（ドロップインする場所）
  • Puzzle Slot_end
  • …
• finish（ドラッグするイメージ）
• end
• …
• Spawn1
• Spawn2
• …

___ここまで全てCanvasの子オブジェクト___

• Object Generator（スクリプト添付）
• GameControllerGPT4（スクリプト添付）

ここで注意が必要なのは、すべてのこれらの要素がCanvasの子オブジェクトであることです。

次に、各オブジェクトに付け加えるべきコンポーネントとその設定を説明します。

Slot Parent（UIイメージで作成）

アドコンポーネント：Grid Layout Group（Constraint…Fixed Column Count）

Puzzle Slot_finish, end,…

アドコンポーネント：

• Tag（finish）：イメージの名前と同じに設定
• Rect Transform
• Canvas Renderer
• Image
• Audio Source
• スクリプト（PuzzleSlot）

die,…

アドコンポーネント：

• Tag（finish）：イメージの名前と同じに設定
• Rect Transform
• Canvas Renderer
• Image
• Audio Source
• Canvas Group
• スクリプト（DragDrop）

Spawn1,…

アドコンポーネント：特になし

Object Generator

アドコンポーネント：スクリプト（ObjectGenerator）

GameControllerGPT4

アドコンポーネント：

• スクリプト（GameContoroller）
• Particle Prefabs（２つ作成）
• Particle Spawn Positions（発生スタートさせる場所）

Red

アドコンポーネント：

• Particle System
• Audio Source（AudioClip（hooray）, Loop）
• Material（Red, Shader: Unity/Transparent）

これらの構成と設定を組み合わせることで、Unityにおける音声付きのドラッグ＆ドロップ機能を実現します。今回ご紹介した内容を基に、自分だけのインタラ

アクティブなアプリケーションやゲームを作ってみてください。この仕組みは、教育ソフトウェア、パズルゲーム、ユーザーインターフェースなど、多くのシチュエーションで使用できます。

ただし、この基本的な設定だけではまだ完成していません。各スクリプト内で具体的に何を行うかを設定する必要があります。それぞれのスクリプト（PuzzleSlot、DragDrop、ObjectGenerator、GameContoroller）には独自のロジックが必要です。この例では、PuzzleSlotはドロップ先を、DragDropはドラッグされるオブジェクトの動きを、ObjectGeneratorはオブジェクトの生成を、GameContorollerはゲーム全体のフローとパーティクルの管理を制御します。

音声は、それぞれのAudio Sourceコンポーネントに関連付けられたAudioClipから流れます。音声は、ドラッグまたはドロップ操作の開始と終了時にトリガーされます。具体的には、ドラッグ操作が開始されると、”finish”オブジェクトのAudio Sourceから音声が流れ、ドロップ操作が完了すると、”Puzzle Slot”オブジェクトのAudio Sourceから音声が流れます。

Unityのドラッグ＆ドロップ機能は、ユーザーインタラクションを豊かにし、よりダイナミックなエクスペリエンスを提供します。今回の記事を参考に、ぜひ自身のプロジェクトに応用してみてください。次回もUnityの使い方シリーズを通じて、さらに有用なテクニックをご紹介していきますので、お楽しみに！

それでは、Happy coding！