デジタル系アナログ人間

ランドストーカー on JavaScript作成記（2） 初めに 前項 のランドストーカーのウォーキングシミュレーターを更新し続け、 無人のメルカトルの町を歩くという、個人的には爽快な所まで行けました。 町の南側から港に向かう際に必死に誤魔化してますが、 レイヤー処理、要するに背景とライルの重ね合わせの処理が出来ていません。 通常の2DのRPGでは 「この部分はメインキャラクターより手前」 「この部分はメインキャラクターより奥」 と決まっている事が多いです。 しかしランドストーカーは、描画こそ2Dですが内容は3Dですので、 何らかのオブジェクトに対し 「ライルが手前なら手前、ライルが奥なら奥」に描画する事で奥行きを表現しています。 ゲーム開始直後のマサンの村で言えば、村長の家の前の広場に有る謎の石像、各種建物、竹製っぽく見える柵などです。 上の画像を見るとライルの描画されている絶対座標はホボ同じですが、 右のライルは手前に描画されていて、 左のライルは奥に描画されています。 カメラから見ると右のライルは石像よりも手前でジャンプしてるので、石像よりも手前に描画されます。 同様に左のライルも、カメラから見ると石像より奥に立っている為に、石像よりも奥に描画されます。 ゲームを操作しているプレイヤーの視点で考えると、至極当然な見え方です。 つまり全てのスプライトは高さを持つBGオブジェクトに対し、手前か奥を判別して描画する順番を変えているわけです。 コレを作らないと、キャラクターを普通に動かすというとりあえずの目標に届きそうに有りません。 HTMLやCSSでレイヤーと言えば、z-indexです。 コレを動的に書き換えれば良さそうです。 早速コードを書いて実行してみましたが、何故か動きません。 色々と考えて色々と試してみましたが、どうにも動きません。 そんな時は検索。 色々と調べていて、ふと検索ワードを変えてみました。 「JavaScript ゲーム」 遂にCanvasを使い始める そのワードで得た検索結果に、 JavaScriptで作ったゲームやJavaScriptでのゲーム製作講座等がありました。 最初の方にシューティングゲーム製作の講座のyoutube動画が有ったので、何かの参考になるかなと徐に観始めます。 以前からゲーム関連の話題で 「ゲー