オリジナルポストカードは”こちら”で好評発売中!

Unity2D / 只見周遊すごろく制作1(背景-Waypoint-キャラの移動)

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

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

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

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

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

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で作成。大文字小文字は適宜設定してください。

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

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

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

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

 プレイヤー1&2のキャラクタを配置

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

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

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

 プレイヤー1&2にスクリプトをアサイン

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

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

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をアサインする前に、次はサイコロをシーンに追加するようです。

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


雪まつり 2022も中止だったので1人ハッカソン 結果発表 一枚絵からアニメーション6 (完成動画) Shiroちゃんモデリング1 3D/AR15

コメントを残す

メールアドレスが公開されることはありません。