【Unity入門】フラッシュ暗算アプリの作り方｜開発環境の準備と基本設定【第1回】｜Wamutai Tech

はじめに

フラッシュ暗算は、数字が高速で表示され、瞬時に計算する能力が試されるゲームです。本記事では、Unityを使ってフラッシュ暗算アプリを作る準備を進めていきます。本ページでは初心者でもわかりやすいように、開発環境の準備から基本的な設定までを丁寧に解説します。

本記事ではUnityを始めたばかりの人がインプットとアウトプットを同時にできるように解説しているので、もし興味があれば一緒に学んでもらえると嬉しいです。

それでは、本題に入っていきます。

フラッシュ暗算とは、画面に短時間だけ表示される数字を記憶し、素早く計算するトレーニングゲームです。

この仕組みをプログラムで実装するには、数字のランダム生成、表示・非表示の制御、プレイヤーの入力機能などが必要になります。

ゲーム開発にはさまざまな方法がありますが、本記事ではUnityを使用します。理由は以下の通りです。

初心者でも使いやすく、豊富なドキュメントやチュートリアルがあるので、学習しながら開発を進めることができます。

フラッシュ暗算アプリを作るために、以下のツールをインストールしましょう。

まだインストールができていない人はこの記事を参考にしてインストールしてください。

Unityエディタを開いたら、以下のオブジェクトをシーンに配置します。

Hierarchyの空いたスペースで右クリックをして「UI」→「Canvas」 を作成。
HierarchyでCanvasを選択する。
UIをカメラの最前面に表示したいため、Canvasの Render Mode を 「Screen Space – Overlay」 に変更。（デフォルトでなっていれば変更なし。）

※ 「Canvas」は「UI」の統括マネージャーみたいなものです。

※背景を画像にしたい方は①～⑦を、単純に色だけ変えたい方は①と⑧のみで大丈夫です。

Hierarchyで右クリックをして「UI」→「Panel」 でパネルを作成。
Projectビューの「Assets」内で右クリックをして「Folder」を作成する。今回は「Image」フォルダとしている。
「Image」フォルダに好きな画像をドラッグ＆ドロップでインポートする。
「Image」フォルダ内の画像を選択する。
Inspectorで「Texture Type」を「Sprite(2D and UI)」にして、「Sprite Mode」を「Single」にして適用。
HierarchyでPanelを選択する。　
Inspectorで「Source Image」に「Image」フォルダ内の画像をドラッグ&ドロップでアタッチする。
Inspectorで「Panel」の「Color」を適当な色にする。

Hierarchyの先ほど作ったPanel上で右クリックをして「UI」→「Text-TextMeshPro」でテキストを作成。（最初に「Import TMP」とでたら上段だけ選択する。）
Inspectorでフォントサイズを変更する。（Font Size：40）
Inspectorでテキストサイズを変更する。（Width：300、Height：80）
InspectorでVertex Colorを黒に変更する。（RGM：0、A：255）
Inspectorでテキストを中央揃えに設定。（Allignment：Center、Middle）

※ Inspectorでテキストの下に見えているボタンはまだ説明していないのでこの段階ではできてなくて問題ないです。

Hierarchyの先ほど作ったPanel上で右クリックをして「UI」→「Button-TextMeshPro」でボタンを3つ作成。
ボタンの子オブジェクトとしてボタンテキストも作成されるので、それぞれ「New Text」を「Start」「Return」「Continue」と名前を変更。配置や見た目は各自ご自由にしてください。（あまりデザインは得意じゃないのでシンプルに作ってます。）
ボタンは初期時は使わないので非表示にしておきます。（画像の赤枠のチェックボックスを外すだけです。）

※ ボタンの中にテキストがいるような関係を親オブジェクト（ボタン）、子オブジェクト（ボタンテキスト）といいます。よく使われる言葉なので覚えておきましょう。