てぃってぃの楽しい副業日記!

ワイと嫁(てぃってぃ)夫婦の、副業、育児、プログラミング、筋トレ、ゲームを綴ったブログです☆

【ゲームプログラミング】その6. マップ描画&コントローラー実装(動画付き)

【ゲームプログラミング】スマホ向けローグライク開発

どやぁ!進んでるやろぉ!!(開発中の画面です)


こんばんは、てぃってぃ(嫁)の夫です。

「スマホでローグライク開発」第6回です。
第5回から大分あきましたが、ひそひそとだいぶ進めていました。今回の記事は「マップ描画&コントローラー実装」です!
マップの自動生成から、アナログスティックの実装(細かな残件はあり)、階段、次の階に進む、シーン切替あたりを実装していたら大分遅くなりましたが、大分ゲームっぽくなってきました。
今までの記事はここからどうぞ!

www.kt2525family.com


絶賛開発中の画面(動画)

ようやく動画を撮りましたので、お披露目します。開発中につきかなりショボいですが、ここまで15日間かかってます。w

youtu.be

プレイヤーの変な人間は、主人公の「てぃってぃ」です。手書きで作成しました。もう少しちゃんとしたキャラクターかかねば…w。。(だれか作ってくれないかな~…笑)
マップチップは、ぴぽや倉庫さんの画像をとりあえず使わせてもらってますが、たぶん自作マップに切り替えると思います。10パターンぐらいのダンジョンマップが欲しいかな?と思います。なんとなくのイメージは「塔」を攻略していく感じにしたいと思うので、塔っぽい画像セットを10パターンぐらいか用意できればな。あたりかな~?作るのも楽しそうですね!


総じて、大分ゲームっぽくなってきたんじゃないかなって思います。参考になりそうなコード、技術を、メモレベルですが載せておきますので、誰かの役に立てばなと思います!


実装メモ

アナログコントローラー

画面の左下に置いている、十字ボタンの真ん中においている、いわゆる「スティック」です。スティックの画像を用意して、キャンバスにスクリプトを張り付けて、ドラッグ&ドロップを検知してスティックの描画位置を変えています。
そのアタッチしているソースコードがこんな感じです。

    /// <summary>
    /// 画面描画時のスティック位置取得
    /// </summary>
    void Start()
    {
        GameObject analogCtr = GameObject.Find(DataDefine.ANALOG_LINE);
        if (analogCtr != null)
        {
            start_position = analogCtr.transform.position;
        }
    }

    /// <summary>
    /// ドラッグ開始時のイベントハンドラ
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        drag_start_position = eventData.position;
    }

    /// <summary>
    /// ドラッグ中のイベントハンドラ
    /// </summary>
    /// <param name="eventData"></param>
    public void OnDrag(PointerEventData eventData)
    {
        lock (this)
        {
            // アナログスティック描画
            GameObject analogCtrBase = GameObject.Find(DataDefine.ANALOG_LINE_BASE);
            GameObject analogCtr = GameObject.Find(DataDefine.ANALOG_LINE);
            if (analogCtr != null && analogCtrBase != null)
            {
                analogCtr.transform.position = eventData.position;
                analogCtrBase.transform.position = drag_start_position;
            }
        }
    }

    /// <summary>
    /// ドラッグ終了時のイベントハンドラ
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        GameObject analogCtr = GameObject.Find(DataDefine.ANALOG_LINE);
        if (analogCtr != null)
        {
            analogCtr.transform.position = start_position;
        }
    }


シーン切替

ソースがややこしすぎてうまく書けませんが、「SceneChanger」と名付けたゲームオブジェクト(キャンバス)をプレハブ化しておき、階段を進むタイミングにてインスタンス化して、暗転→ダンジョン(階数)表示→明転という風に作っています。暗転、ダンジョン(階数表示)、明転は、終了時にそれぞれゲーム管理をしている「GameMgr」と名付けたオブジェクトにイベント送信を行い、イベント受信によってボタンの入力可否などを切り替えています。
・・・絶対伝わらないですね…w 余力があれば、最後らへんにソースどかんと大公開しようかな(笑) こうご期待!

あとがき

面白いですね!
ただ、そろそろ素材を作成したり、集めたりしないといけないなと思い始めました。マップ描画に関してはしくみがほぼほぼできたので、画像さえ用意すればOKという感じ。ただ、肝心の素材はどうしような…。w
次はHPバーやゴールド表示、メッセージウインドウの表示、道具ウインドウの表示といった、UI部分を作っていこうかなと思っています。

ご購読、ありがとうございました。