UnityとPhotonでオンラインのオリジナルトランプゲームを作りたい その11 ～Canvasの理解～

次に何をやって良いのか分からず、とりあえず何か発見できるかとソフトを立ち上げてみたものの、手探り状態の人にはとことん手厳しいUnityの洗礼を受け続けます。そんな中、ボタンを配置してそれを押すということをやってみようと思い立ちました。

試しに配置してみたものの、なぜかやはり表示されないという状況。縮小したり拡大したりして、なんかすみっこの方に表示されていることに気づきます。実際の作業とは前後するのですが、このボタンには「Button」という文字を入れているはずなのに、その文字は表示されていませんでした。そして再生してみると、常に以下のようなウィンドウが開きます。

英語は相変わらずよくわからんのですが、雰囲気だけでも分かるよう努力して読んでみると、どうやらテキストの表示のために必要なものが足りてないから入れろ、ということを言ってる風なので、ここはおとなしくその指示に従うことにしました。「Import～」と書かれたボタンを押しても反応しなかったのですが、それは再生中であったかららしく、再生を止めてから押すと無事インポートされました。すると、ボタンに「Button」の文字が浮かび上がりました。さらに下のも多分必要なんだろうと、同じくインポートしておきました。ボタンを押す処理については後で記述します。

さて、色々いじっているうちに、マウスのホイールでシーンの拡大縮小が出来るとわかり、それで思いっきりシーン画面を引いてみてみると、前回Canvasに書いた文字がでかでかと配置されていることに気づきました。そこで色々調べた結果、Canvasのインスペクターには「レンダーモード」なるものがあることを理解します。レンダーモードには「スクリーンスペース - オーバーレイ」「スクリーンスペース - カメラ」「ワールド空間」の３つがあり、ワールド空間にしてやると、普通にシーンの方に現れる、ということが分かりました。ちなみにスクリーンスペースオーバーレイはカメラに直接書くようなイメージ、スクリーンスペースカメラはカメラから距離を取った場所に常に表示されるという不思議なイメージだということも分かりました。

さて、ボタンを押して何かをするということですが、ヒエラルキーのボタンを選択し、インスペクターにある「コンポーネントを追加」から「新しいスクリプト」を選んで名前をつけてやり、インスペクターに現れるそのスクリプトの右の３つの点から「スクリプトを編集」を選ぶことによって、スクリプトの記入が可能になるみたいです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ButtonScript : MonoBehaviour
{
   // Start is called before the first frame update
   void Start()
   {
       
   }

   // Update is called once per frame
   void Update()
   {
       
   }

}

こんなスクリプトが始めから入っていました。波括弧が文末ではなく改行後の先頭に来ていることに多少の違和感は感じましたが、そもそもこれがオフィシャルの作ったものなんだから従うべきかと思ってます。ここに、クリックした時の挙動などを記述し、さらにはインスペクターの「クリック時」の所にボタンそのものをドラッグ＆ドロップで入れて、その右側を当該のスクリプトにしてやることにより、クリックの挙動を登録できるようです。実際どういうコードを書いたかは、参考にしたサイトのまんまだったので今回は割愛します。これから先は積極的に書いていきます。

あと、すごく単純なことですが、カメラが被写体よりも奥にある場合は、ゲーム画面には何も映りません。でも、奥にあるか手前にあるかは２Dの画面では非常にわかりにくいので、その時は表示を３Dにしてやると、結構直感的に理解することができました。というか、Unityはやはり３Dに特化したソフトなんだと改めて思った次第です。

何をやろうか決めずに作業に入ったわりには、収穫がかなりあったので非常にありがたい一日でした。ただ、ある意味基本の基本みたいなこれらのことを分かるのに、やはり１時間強を要しています。英語が出来れば、もちょっと早く理解できるのかなぁ。