Unity2D / 只見周遊すごろく制作１（背景-Waypoint-キャラの移動）

BoardGameのチュートリアルを参考に、プレイヤーのチャとシロが、只見町の各名所を巡るボードゲームの制作に挑戦した時のまとめ。

今回のゲームで参考にしたチュートリアルはこちら
Unity 2D Tutorial How To Create Simple Board Game With Dice Rolling And Turn Based Movement Features

　チャとシロの只見周遊すごろくの概要

サイコロをクリックするだけで遊べる、簡単な２人対戦のすごろくゲームです。

プレイヤーのチャとシロと一緒に、すごろく上に描かれた只見の各所に立ち寄ることで、町の紹介や名所についての会話を楽しみながら遊べるすごろくゲームになっています。

2Dゲームで遊んでいる時の様子

毎回チャが先行なこともあり、チャが先にゴールすることが多いですが、シロが勝つこともあるので、それぞれが勝った時の動画を載せておきます。

チャの勝ちです

シロの勝ちです

最初はチャ（茶色の犬）の番です。右側の中央にあるサイコロをクリックすると、出たサイコロの目の数だけチャが進みます。次はシロ（白い犬）の番です。サイコロをクリックして出た目の数だけ、今度はシロが進みます。

順番にサイコロをクリックしながら、それぞれのキャラクタを進め、どちらかがゴールの只見線に到達して、イヌ君を見送ることが出来たら終わりです。最後に、勝った方のキャラクタの名前がテキストで表示されます。

　画像を用意

チュートリアルの画面は、これを見る限り、16:9なので背景画像も合わせて作成しました。

そして背景づくりに時間をかけすぎているところ。

イラストの素材はこれで揃ったかな。これはイラストレータの画面。

ボードゲームの背景
サイコロ x6面
プレイヤー1（チャ）＆プレイヤー2（シロ）

次は実際にUnityで作業開始です。

　2DでWebGL

プロジェクトのテンプレートは2Dを選び、Build SettingsでPlatformをWebGLに変更

　イメージをスプライトに変換して配置

Inspectorで Texture TypeをDefaultからSprite (2D and UI) に変更し、Applyボタンで適用

スプライトに変更した画像を配置

計算の負荷を軽減させると同時に、ゲームオブジェクトとして扱えるようになるらしい。
Unityのスプライトについて【Sprite】

　BoardWaypoint（ボード上でキャラクタが止まる各箇所の親オブジェクト）を作成

空のGameObjectを作り名称を変更、ポジションはリセットしておく

GameObjectの名称は任意ですが、チュートリアルに従ってBoardWaypointsで作成。大文字小文字は適宜設定してください。

　キャラクタが止まるボード上の各箇所をWaypointとして追加

BoardWaypointsのチャイルドに各GameObjectを追加、分かりやすく色をつけておく　

キャラクタが止まる箇所の数だけWaypointをコピーして、キャラクタがボード上を進む順に配置

このすごろくはちゃんとしたセルになってないけど、Waypointの位置を調整すれば、各箇所でキャラがいい感じに配置されるよね、きっと？

　プレイヤー１＆２のキャラクタを配置

キャラクタの２体のスプライトもシーンに追加、ポジションをリセットしておく

ボードの前面に来るように、Order in Layerを5にセットし、大きさを適宜調整

キャラクタのいる場所はスクリプトでコントロールするので、この時点ではボード上のどこに配置しておいても良い。

　プレイヤー１＆２にスクリプトをアタッチ

FollowThePathスクリプトをHierarchy上のキャラクタにドラッグ＆ドロップ

各プレイヤのInspectorで、FollowThePathスクリプトのmoveSpeedの数値を上げておく（チュートリアルでは５に変更）

public class FollowThePath : MonoBehaviour
{
    public Transform[] waypoints;  //waypoint達の配列

    [SerializeField]
    private float moveSpeed = 1f;  //inspectorで設定可能な動くスピードの変数

    [HideInInspector]
    public int waypointIndex = 0;  //現在キャラクタが存在するwaypointの番号を保持

    public bool moveAllowed = false;  //moveAllowedの変数


    // Use this for initialization
    // Startメソッドでキャラクタを最初のwaypointに配置

    private void Start()          
    {
        transform.position = waypoints[waypointIndex].transform.position;
    }

    // Update is called once per frame
    // moveAllowedの状態になったらキャラクタを動かす

    private void Update()
    {
        if (moveAllowed) 
            Move();
    }

    // キャラクタを最後のwaypoinに到達するまで、1waypointずつ動かしていき、ゴールに到達したら止める。

    private void Move()
    {
        if (waypointIndex <= waypoints.Length - 1) 
        {
            transform.position = Vector2.MoveTowards(transform.position,
            waypoints[waypointIndex].transform.position,
            moveSpeed * Time.deltaTime);

            if (transform.position == waypoints[waypointIndex].transform.position)
            {
                waypointIndex += 1;
            }
        }
    }

}

キャラクタにwaypointをアサインする前に、次はサイコロをシーンに追加するようです。

「実験レポート」の記事一覧