解説することで、自分も理解できる、弓削田です。
実は、mapのしくみについて、あまり説明ができていないことに気がついたので、
今回は、このゲームの根幹のmapシステムについての技術解説をしてみたいと思います。
一般的に、スマホやブラウザゲームと言えば、一昔前まではFlashが主流だったんですが、
最近では、それ置き換えるように、canvasを使ったレンダリングがほとんどです。
でも、今回手掛けるゲームの基本は、HTML5で行おうと考えています。
その理由としては、css3の強力な機能と、画像うや動画、音声などの、メディア・コンテンツの扱いが
html5の機能でかなり事足りる上、ネイティブアプリ顔負けぐらいのクオリティが保てるということで、
その先はどうなるかわかりませんが、HTML5LCSS3+Javascriptで構築をしようと考えました。
マップシステムの構造
この、RPGのゲームマップは、基本的にはドット絵をタイル状に並べて表示をする、
2Dゲームの基本構造で成り立っています。
ただ、昔バージョンの2Dドラクエのような、見下ろし構図をさらに斜めにした、クォートマップを採用して、
立体感を見た目で持てるようにして、ちょっとでもクオリティアップになればいいかと考えています。
そして、表示に関して、次のようなレイヤーでの構成を実現しています。
レイヤー2 : キャラクター or オブジェクト
レイヤー1 : 下地マップ
キャラクターは、コントロールをする、自キャラと、マップ上に歩き回っているキャラ全体がこのレイヤーで
アニメーションまでコントロールされています。
オブジェクトというのは、宝箱や、岩、家、木、などの、マップ上で立体的に前後判定を行ういわゆるオブジェクトにあたります。
レイヤーの再開である下地マップというのは、地面の扱いで、キャラクターやオブジェクトは、
無条件にその上を歩いて、表示順番が必ず上に来るようなもので扱っています。
なので、このゲームでのマップは、突起物はご法度というワケですね。
前後判定は、z-index
オブジェクトは、斜め構図なので、わかりにくいですが、基本的には、x軸、y軸という2次元の座標で管理されていて、
対角線上に横に来るものが同じz-indexレイヤーの値にすることで、手前と奥とを前後判定で表示することができます。
少しわかりにくいので、テキスト図で簡単に説明すると、以下のようにレイヤー配置されていると考えてください。
0001000
002200
0033300
044440
0555550
066660
0077700
008800
0009000
ちょっとわかりにくいですが、菱形が互い違いになっているので、奇数行と偶数業で、横の並び数が変わります。
（偶数が奇数よりも１つ少なくなります）
そして、表示している数値がそのレイヤー番号にすることで、
手前のオブジェクトと、奥に配置されたキャラクターという判定ができるわけです。
移動するキャラクターは、歩いて、座標が変わる度に、z-indexを都度変更しているんですね。
コリジョンの共通化
そして、マップで歩ける箇所、歩けない箇所や、
オブジェクトにぶつかった際に、行き止まりになる判定を、「コリジョン判定」として、
共通処理で行っています。
ユーザーがコントロールするキャラと、マップ内を自由に歩き回るキャラ、どちらも、同じ判定でうごくという仕様にすることで、
ゲーム操作の一貫性がキープできるということになります。
もちろん、ゲームのイベントに応じて、こうしたルールをやぶらないといけなくなるケースも発生するかも
しれませんが、グランドルールとして、こうしたキメは重要ですよね。
メッセージウィンドウの重要性
ゲーム開発開始の時は、あまり意識していなかったんですが、
ゲーム中に他のキャラと会話する時や、アイテムをゲットした時などに、メッセージウィンドウの存在が重要になります。
このモードをきちんと作っておくことで、今後色々なユーザーの選択肢であったり、
何かしらの文言表示や、各種操作などを、一元管理できたりもします。
この仕様は、PCブラウザと、スマホブラウザでどちらも、同じレスポンシブデザイン仕様で、運用できることを考慮して、
あまり、ゲーム画面枠をはみ出さないような仕様でやろうと考えています。
なので、広いディスプレイで、このゲームをプレイしようとする人向けに、
色々なパラメータ表示や、その他の情報表示などは、後ほど別途検討しなければいけないかもしれませんが、
今のところは、現状維持で・・・
そんなわけで、比較的簡単に、こうしたゲームって作れるんだぞ！という簡易な説明をしてみました。
もっと仕組みに興味があるひとがいたら、ご覧のwebサイトの「お問い合わせ」で質問してもらえると、ブログ内または、メールで直接返答させていただきたいと思います。
引き続き、よろしくお願いします。
0 件のコメント:
コメントを投稿