RPGのアルゴリズムに関して理解する

JavaScriptでも最近は公開されているライブラリによって随分と複雑なものが作れるようになりました。

特にRPGはenchant.jsによって楽に製作ができるようになっています。

http://www.4gamer.net/games/032/G003263/20110428001/

しかしながら、HTML5はまだブラウザ上で完全に完成しているわけではありません。

特にIEユーザーが多い中、HTML5(canvas)を使ったRPGを作るとどうしてもプレイできないユーザーも出てしまう難点があります。

今回はHTML5未使用、そして全ブラウザ完全対応の簡易RPG製作を行なっていこうと思います。

RPGの原理について

RPGといえば、主人公がマップ場を歩き、そしてエンカウントしてバトルが始まり、敵を倒して経験値を得ながら

各地点にいる中ボスを倒した挙句、最終の的敵と戦い勝利して終わるのが典型的なRPGです。

今回はRPGのマップを歩くという概念について考えていこうと思います。

RPGのマップの概念についてもう少し考えていきましょう。

まずmap配置に関してですが、当然正方形のマップチップを使用します。これは複雑な事を避けたり安易に製作できるように

はてな16×16のサイトで作れるドット絵メーカーを使うこととしましょう。

ですので今回のRPGは16px×16pxが主体の世界となります。

http://16x16.hatelabo.jp/

まず簡単に地形を描くことから考えていきます。

(キャラクターが動いたりさらにイベントが発生するのは随分後半の事となってきます)

7×7マス:ランダムにステージを配置する

Demo

http://yatagarasu0495.web.fc2.com/javascript/blog/map/map01.html

※今の所IEで動作するようにはしていません

ランダムにマップを配置するソースを書いてみました

まずこの構造について説明すると、二重ループを使います、そして各イメージにidを打っていきます。

マップチップは全て配列に収めます。ですので結果から言うと、多重配列(二次元配列)でマップを描くことになります。

これを使って弱ローグライク方針でマップを作ることができます(厳密に言うと少し違う)

http://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%82%B0%E3%83%A9%E3%82%A4%E3%82%AF%E3%82%B2%E3%83%BC%E3%83%A0

今回のソースはimageで配列を作り0～2までイメージを追加しております。

そこから配列を見やすい状態にして数字を入力すれば思いの通りにマップが作れるという形になります。

そして今回はその各マップ配列にランダム関数で値を代入してリロードごとに表示が変わるという状態を作りました。

具体的な説明は、キャラクターを歩かせる部分から説明したほうがまとまりがよさそうなため次回に回します。