AIを使ったのに俺のゲームがリリースできないわけがない#2｜スマホで遊べるようにしよう（最小限）

前回は、リリースまでの地図を広げて、待ち期間のあるものを申し込みました。今回は、星ふる夜の庭をスマホで遊べるようにします。「絶対に完成させるゲーム制作」ではPC（キーボードとゲームパッド）向けに作ったので、スマホには移動の操作がありません。とはいえ、このシリーズの主役はリリースの仕組みなので、スマホ対応は最小限にします。スクリプトは5行ほどのものを1つだけ。スティックを1つ置いて、動けるようにしたいと思います！

• シリーズの目次：AIを使ったのに俺のゲームがこんなにリリースできないわけがない
• 前回：AIを使ったのに俺のゲームがリリースできないわけがない#1｜完成したのにリリースできない理由とリリースまでの地図

今回作るもの

• 画面を横向きに固定する
• 左下にスティックを置いて、PCでは出さない
• Device Simulator で、スマホの画面で遊んでみる

なぜ最小限で済むの？

• 移動の入力（Player.Move）に、最初からゲームパッドの左スティックが入っている
  • 画面のスティック（On-Screen Stick）は「左スティックを倒した」ことにしてくれるので、移動のスクリプト（PlayerMove）は書き換えません
• ボタンは、そのままタップで押せる（EventSystem が Input System のものになっているため）

入力の仕組みはInput Systemで入力を受け取ろう【Unityスタートガイド6-7】を見てください。

画面を横向きに固定しよう

• Edit>Project Settings>Player を開く
• Androidのタブ（ドロイド君のマーク）を選ぶ
• Resolution and Presentation を開き、Orientation のところを設定する
  • Default Orientation：Auto Rotation（そのまま）
  • Allowed Orientations for Auto Rotation：Portrait と Portrait Upside Down のチェックを外す
  • Landscape Right と Landscape Left はチェックしたまま

この向きの設定はAndroidとiOSで共通なので、片方で変えればOKです。Androidのタブが無いときは、Unity HubでAndroid Build Supportのモジュールを足すと出てきます。

スティックを置こう

Stage1 のシーンを開いて、Canvas の中に、スティックの台（Stick）とつまみ（Knob）の2つの画像を作ります。

台（Stick）を作る

• Hierarchy で Canvas を右クリック>UI>Image を作り、名前を Stick にする
• Rect Transform
  • アンカー：左下（Anchor Presets で bottom-left を選ぶ）
  • Pos X：260、Pos Y：260
  • Width：260、Height：260
• Image
  • Source Image：Knob（選ぶ画面で「Knob」と探すと、Unityに最初から入っている丸い画像が出ます）
  • Color：白（R・G・Bは255）で、A：64（薄く透ける）
  • Raycast Target：チェックを外す（触ったときに反応するのは、つまみの方にするため）

つまみ（Knob）を作って、On-Screen Stick を付ける

• Stick を右クリック>UI>Image を作り、名前を Knob にする
• Rect Transform：Pos X：0、Pos Y：0、Width：130、Height：130（台の真ん中）
• Image：Source Image：Knob、Color：白で A：204
• Add Component で On-Screen Stick を付ける
  • Movement Range：90（つまみが動ける半径）
  • Control Path：右の欄をクリックして、Gamepad>Left Stick を選ぶ（「Left Stick [Gamepad]」と出ればOK）
  • Behaviour はそのまま（Relative Position With Static Origin）

On-Screen Stick は、指でつまみを動かすと「ゲームパッドの左スティックを倒した」という入力を出してくれます。移動の入力（Player.Move）には最初から左スティックが入っているので、ここをつなぐだけでスライムちゃんが動きます。

PCでは出さない

このままだと、PCで遊ぶときにもスティックが出てしまいます。スマホのときだけ出すスクリプトを作りましょう。

using UnityEngine;

public class MobileOnly : MonoBehaviour
{
    void Awake()
    {
        bool isMobile = UnityEngine.Device.Application.isMobilePlatform;
        gameObject.SetActive(isMobile);
    }
}

• isMobilePlatform
  • スマホで動いているときに true。PCやWebでは false なので、SetActive(false) でスティックごと隠す
• UnityEngine.Device.Application
  • いつもの Application ではなく、UnityEngine.Device の方を使う
  • こちらは、Device Simulator でスマホの画面にしているときもスマホとして答えてくれる（ビルドしたゲームでは、どちらも同じ値）

スライム

Application が2種類あるなんて・・・。いつもの方で書いてたら、Simulator でスティックが出なくて悩むところでした

Assets/CompleteGame/Scripts に MobileOnly を作り、Stick に付けます。

プレハブにして、ステージ2・3にも置く

• Hierarchy の Stick を、Project の Assets/CompleteGame/Prefabs にドラッグしてプレハブにする
• Stage2 と Stage3 の Canvas の中に、プレハブの Stick をドラッグする（Flash より上）
• シーンを保存する

プレハブはプレハブの基本概念と作成方法【Unityスタートガイド7-1】も見てください。

スマホの画面で遊んでみよう

• Game ビューの左上の「Game」を「Simulator」に切り替え、端末を選ぶ（ここでは iOS Notch Device）
• Rotate のボタンで横向きにして再生し、スティックをマウスでドラッグする

スライムちゃんが、倒した方向に歩けば成功です！

横に余ったところの色を合わせる

スマホの画面はPC（16:9）より横に長いものが多く、16:9の背景の左右にすき間が出来て、カメラの背景の色（Unityの最初の青）が見えます。ここは作り直さず、カメラの背景の色を、背景の端の色に合わせるだけにします。各シーンの Main Camera の Inspector で、Environment の Background を変えます。

スライム

あれ、ボタンのほうは何もしてないのに、押せるんですね・・・？

フェアリー

最初から Input System で作ってたからね！こういう「あとで助かる作り」も、リリースまでたどり着くコツなの

次回は

次回は、ボタンを押す人がいなくてもビルド出来るように、ビルドの処理をスクリプトにまとめます。ここから、いよいよ自動化の話に入っていきたいと思います！