ランドストーカー on JavaScript作成記（3）
ランドストーカー on JavaScript作成記（3）
初めに
前項の作成記（2）の最後に書いた稀有な経験の興奮からやっと醒め、
作成を続けます。
ツイートでは、NPC・BG切り替え・Z方向の当たり判定と言ってますが、
天啓でも有って突然レベルが上がったりしない限り、
いきなりそんなモノを作れるワケも無いです。
さて、どうしましょうか。
影を試す
内藤さんにRTされて以降、
色々なランドストーカーに詳しい方にフォローされました。
それに触発されて再びゲーム自体を調べ始め、
かつてのゲームレビューや感想を検索で読んでみたりした所、
当時もちょっと気に成った「影問題」に当たりました。
影問題とは、ライルや他のスプライトに影が無く、
位置関係の把握が困難という意見です。
個人的には影が無い事は全く気に成らなかったのですが、
物は試しと言う事で作ってみます。
元々のゲームの中にはスプライトやオブジェクトの影が一切無いので、
何となく適当に作ってみました。
ライルのモーションの画像の中に仕込んでみました。
次はコードを書きます。
コードを書くと言っても、
ライルのモーション（影のみのヤツ）を先行で一回描画するだけです。
まずは実際に描画させて画像の中の影の位置を微調整します。
次は影が落ちる高さの演算です。
と言っても、ライルの重力処理で使ってるモノが
そのまま参照出来るので、特に新たに書く必要はありません。
そんなこんなでアッサリ出来た、本家のランドストーカーに無かった新要素・影の有るライルです。
分かり易いように動画ではジャンプ力を強化し、途中から速度を半減、30fpsで動かしてます。
「速度を下げねェと分からんって、やっぱ要らねェんじゃ・・・」
と思いましたが、動く足場とかにも影が有れば少しは難易度が下がったのかも知れないので、影派の人達の言うことも一理有るかな、という感じですね。
実際、速度を下げた場合は位置関係を把握し易くなってます。
NPC作成を開始
遂に逃げる先が無くなって追い込まれました。
村の全景と個別の建物が出来たんで、もうNPCを作るしか無いです。
NPCとはゲーム用語で、Non Playable Characterの略・・・と思ってますが、合ってますかね。
まあ要するに自分の意思と無関係に動くキャラクターです。
RPGには付きモノの、町のヒトとかですね。
現在作成中のマサンの村にも、ベル・ニワトリ・マサン族の男・女・子供・神父・モリオが居ます。とりあえず作ろうと挑んだのは、ベル（犬）です。
まずはライル同様に、連続モーションの描画に使う画像の用意です。
実はこの後に何度も作り直してますが、最初に作ったのはコチラです。
歩行時のモーションが出来たので、次は実際に描画させます。
動画を観れば分かりますが、
ベルの初期位置である教会の入り口のスグ脇から、
初期方向である左下に向かって歩くだけです。
衝突判定も無く、方向転換も無く、単にエンドレスで歩くだけです。
次に実装させたのは、地形との衝突判定です。
やはりベルやニワトリは、ぶつかってランダムに方向転換しないと！
一応の動きは出来ました。
基本的にはライルの地形衝突処理を流用しましたが、やはり別のキャラクターなので、個別に手を入れる必要が有る箇所が多数ありました。
公開動画には多分一度も出ていませんが、フリーズも何度も起こっています。
地形との衝突が出来ただけで、まだライルとの、つまり別のスプライトとの衝突判定は有りませんし、
このゲームの特徴である「ライルが乗る」ことも出来ません。
「ベルは何頭出せるんだ？」
いや、次は衝突判定とかライルが乗れるようにしなさいよ、と思いますが、
出せるようになったNPCを、ドコまで増やせるか試してみたくなりました。
で、やってみたのがコチラ。
もう単なるジョーク動画ですね。
最初のは256頭、次のが2048頭です。
当時は処理も軽かったのでココまで登場させられましたが、現在では出来るかどうか・・・。
色々遊んでてベルの描画が変な事に気付きました。
歩行時にもっとトントンと跳ねてる感じが有るハズなのに、僕が作った方にはソレが無い。
この後も何度か頻繁にやってますが、モーション画像の修正です。
画面中央に固定されているライルと違って、NPCは相対位置に描画されています。
作成当初は気付きませんでしたが、ライルが乗ってしまえば絶対位置での描画に変わるのでソコで確認すれば良いんですが、当時は気付かずに直しては描画、直しては描画を繰り返してました。
で、一応直したベルがコチラ。
前述しましたが何度も直してるので、現在と違うかもしれません。
スプライトの衝突判定を作る
地形と衝突してランダムに方向転換を実装した為、
村の中を自由に散歩するベルは出来ました。
何となく描画も直したので、次はスプライト同士の衝突判定です。
そういえばプログラミング講座に衝突判定が有ったな、と思い出し、
ここでも前述の あきちょん氏 のコードをパクります。
が、後に大間違いだった事が発覚。
自分の書いているコードを如何に理解していないかが良く分かりました。
とりあえずベルしか作ってないので、ベルを二頭出現させて衝突テストしてみます。
現在見ても大して違和感は有りませんが、内部処理的に言えば間違ってます。
その後に衝突判定を直して、更には描画順を簡易的に弄ったのがコチラ。
当初から現在まで延々と続いてるレイヤー処理問題は置いておいて、
一応衝突判定は正しく書けました。
NPCに乗る
このゲームの特徴として、NPCに乗れるという点があります。
かつてプレイしていたヒトは、グミの村の高速ニワトリに一度は乗った事が有るでしょう。
ということで次は乗れるようにします。
この辺りからソースのライルクラス・NPCクラスが滅茶苦茶になって行きます。
そもそも、乗るとは。
乗ってる場合の処理や描画は。
まずはNPCクラスに高さのパラメーターを用意し、
ライルクラスの着地判定を書き直し、
乗った場合はライルの内部位置と描画位置を乗ってるNPCと同様に加算/減算するように書き換えます。
で、とりあえず出来たのがコチラ。
最後の方でジャンプした時の処理がオカシイのが分かりますが、
とりあえず乗ったり降りたりは、本物っぽいですね。
そして再び悪い癖の、ジョーク動画はコチラ。
ベルや村人や町のヒトなどを1倍速とすると、ニワトリやライルが2倍速ですが、このベルは8倍速です。
オークキング様の支配下に置かれてる時のグミの村のニワトリと同じ速度です。
別のNPCを作る
とりあえずベルはOKと言う事で、次はニワトリ作りに挑戦です。
まずはエリア指定のコードを書き換えます。
エリア指定コードとは、「複数のシーンを纏めて一つのエリアを構成する」と僕が勝手に決めて作った仕様に基づく、なんかそういうヤツです。
具体的には、
・背景画
・背景画の描画座標
・最初のライルの向き
・最初のライルの座標
・最初のライルの高さ
・サイズ・衝突判定に使う配列
・シーンチェンジ座標
等が列挙されたメソッドです。
おおまかにエリアを指定して詳細を記述しておいて、エリアを跨ぐ場合には別のエリア指定コードを読み込んで・・・と考えて作りましたが、
現状ではArea_000.js（マサンの村）しか有りません。
そこに、各シーン毎に配置するNPCの詳細を記述し、開始時に読み込むように書き換えます。
このコードは現在のコードなので当時とは少し違いますが、
こんな感じでNPCを配置するようにしました。
初期位置、幅や奥行き、高さ、向き、種別、速度を指定すると、シーン開始時に配置されます。
ちなみに速度0を指定すると、静止NPCになります。
次にNPC用の画像にニワトリを追加です。
例によってキャプチャーです。
相変わらずこの工程は時間が掛かります。
そしてコードを記述。
NPCクラスが犬専用になっているので、上述のエリアコードから渡される種別に従って動きや描画を変えるようにします。
と言っても、動きは犬と大差ありません。
速度が違う程度で、基本的には直進を続けて衝突時にランダムで方向転換です。
そう勘違いして速度だけ変えるコードを書いて動かした動画がコチラ。
実際の当時の動画ではなく現在のコードで再現した動画ですが、
動きがガタついてるのが分かります・・・か？
いや、あんまりワカんないですね。
実は密かに「作った部分は完コピ」を目指してるので、本物の動画をスロー再生して、シミュレーターもfpsを下げて見比べたりする事が有ります。
それで気付けたのかも知れませんが、まぁとにかくミスってるので書き換えました。
ソレを直したら、次は門番です。
モンヴァーンはマサン族（男）で、他には静止版・歩行版も居ます。
とりあえずモンヴァーンが一番モーションが多そうなのでコイツでキャプチャーし始めましたが、柵に隠れる場合が多いので非常に苦労しました。
なんとかキャプチャーを終えたら、次は動作を書きます。
今度の動作は今までとは趣が違います。
モンヴァーンは常に一定の動きを繰り返していて、衝突時は一時停止して、衝突が解除されたら再開します。
なるべくコンパクトに、カッコ良いコーディングをしたい所ですが、そういう特性の動きを書いた事が無かったので、ただひたすらif文の繰り返しというベタなコードになってしまいました。
配置されたら1フレーム毎にモンヴァーン専用のcounterが加算されて行きます。
そのカウンターの値が32未満の場合は右下を向いて静止、
32～40の時は右下歩行モーション1で移動、
41～49の時は右下歩行モーション2で移動
・・・
111～142の時は左上を向いて静止
・・・
というコードです。
ライルやベル・ニワトリの時もそうでしたが、キャラクターを作る際の手順は
➀本物を動画撮影する
➁フレーム単位で再生し、確認
➂本物の全てのモーション画像をキャプチャー
➃画像を整形し、スプライト用画像に格納
➄動作をフレーム単位で再現するコードを記述
という流れになっています。
で、モンヴァーンを実際に動かしてみた動画がコチラ。
うん、本物っぽいですね。
モーション用画像は恐らく全部あるハズなので、
村の隅で静止しているヤツと、広場で徘徊するヤツも作ります。
静止しているヤツは速度＝0と向き＝右上、座標を指定して完了。
徘徊するヤツの動作は村人/町人の基本動作ですので、少し汎用性を持たせて作りました。
そんな感じで、フラグが何も立ってない時のマサンの村の全員を作って配置しました。
まぁこんなモンでしょうか。
特に静止NPCに関しては本物とトコトン見比べて、ドット単位で合わせました。
たった今、自分で書いてて気付きました。
ゲーム進行のフラグ次第で配置が変わるんですが、ソレに非対応なコードです・・・。
落下時の処理を修正
合ってるか不明ですが、このゲームはジャンプ時に最高高度に至った後や、NPC/地形からの落下時にライルが動く量は
最初の4フレームでは1ドット、次の4フレームでは2ドット、
その次の4フレームでは4ドット、
それ以降は8ドットと決まっているようです。
通常のキリの良い数値のナニカから落下したり、ジャンプ後に落下する場合は特に問題はありません。
しかしマサン族（子供）の高さを、色々と考えて28と設定しています。
そうすると高い所からジャンプ後に落下する際に、1フレームの移動量がマサンキッズの頭の座標を超えてしまいます。
具体的には、一瞬キッズの頭にメリ込んでから次のフレームで頭に乗ってる状態になります。
もちろん、キッズ以外にも地面に対しても、キリの良い数値じゃない高さから落下するとメリ込んでから戻るという動作をします。
現在のライルの高さと落下予定位置の高さが8未満なのに、
「このフレームでは落下移動量は8ドット」
という命令で処理されて、結果メリ込んでしまうわけです。
落下コードに、先読みしてメリ込まないような処理を追加すれば解決します。
このバグの修正前/後の動画がコチラ。
すんげー細かいトコですが、操作してると気に成るんで直しました。
持上/置きモーション
ランドストーカーと聞いて何を思い出すかは人それぞれ違うでしょう。
「コレ」を思い出す人も多いかと思います。
このゲームの特徴の一つに、オブジェクトを持ち上げて移動し置くことが出来る、というのが有ります。
その動作によって買い物をしたり、セーブしたり、宿屋に泊まったりします。
高所への階段を作って新たなルートへ進行したりと、謎解きの重要な動作にもなっています。
とりあえず先に、一般オブジェクトを作ります。
一般オブジェクトとは僕の勝手呼称で、持上可能/NPCじゃないスプライトの事です。
具体的には、アイテムや壺、宝箱、宿帳と地図、教会の本等です。
宝箱は持上不可で、開閉のフラグが必要だったり、開く時のアニメーションが必要だったりと少し特殊な扱いになります。
例によって画像をキャプチャーし、一般オブジェクト用画像を作ります。
ブロックは不要ですが、マサンの村で必要なモノは揃いました。
スグに配置してみます。
この画像の当時はNPCクラスでは無く、別の専用クラスで作っていたので、乗ったり出来ませんでした。
その後に色々と考えてNPCクラスに統合しました。
ここでライルのジャンプ時の処理を色々と変更したり、
持上/置きモーション用SEの録音で他の多数のSEも録音したりと大幅に脱線します。
紆余曲折を経て、仮実装した持上/置き動画がコチラ。
ハッキリ言って、余りにも不完全です。
持上げ中のライルの移動モーションも無いですし、
持上げ中のオブジェクトも移動していません。
置く動作も似て非なる物です。
具体的に「置く」とは、オブジェクトをライルの前方の高さ32の位置に設置する行為です。
普通のオブジェクトや階段、商品棚や教会の本が乗ってる所、ベッド等は高さ16です。
置く場合は、その2段分の高さが底面なので、下から3段目の位置に設置するという事です。
通常はソコから自由落下します。
何も無い地面で置く場合や、高さが有る所の端で置く場合に、自由落下しているのが良く分かります。
ヒトに向かって置く場合は頭の上に乗ります。
多くの場合ヒトの高さは32なので、落下せずにそのまま乗ります。
本物のゲームの細かい仕様を解説しても余り意味が無いのですが、要するに不完全な実装です。
とにかく「コレ」と言いながら置きたかったんです！
階段状にオブジェクトを積み上げたかったんです！
とりあえず書いたコードは、ライル前方のライルと同じ高さに設置するというものです。
ライルクラスには全てのフレームで落下の判定が、要するに重力が有ります。
一方NPCクラスには重力のコードはまだ有りません。
つまり、置いたらずっとソコに有りますし、ドコでも置けます。
オブジェクトに重ねて置けますし、NPCや地形に重ねて置けます。
多段で積んでから下の段のオブジェクトを持上げても、上の段のオブジェクトはそのままです。
更には、投げられません。
上記の正しい「置き」と、投擲に必要な重力をNPCクラスに書かないとダメだなーと思っていた所・・・
とりあえずライルのモーションに、持上モーションを追加する事にしました。
画像キャプチャーは、大変ですが簡単です。
例によって、難しい事からの逃げです。
二日ほど掛けて出来上がったのがコチラ。
なんとなく似てますが、もう全然違います。
持上げ中のライルのモーションをキャプチャーすると言う事は、何かを持ってます。
何かを持ってると言う事は、ライルに被って見えない部分が有るワケです。
スプライト描画を消すと持ってるモノも消えますが、ライルも消えます。
仕方なく、偽モーション画像です。
偽造しました。
見えない所のドットを打ちました。
頭の位置も本物と比べると、随分ズレてます。
ココまでは完コピを通せたんですが、ココから偽ランドストーカーシミュレーターになりました。
これはかなり屈辱的ですが、どうにも仕方ありません。
いや、やり方は有るんですが、僕の技術力では持上げライルモーション画像を作れませんでした。
モーションを作り、持上げ中のオブジェクトの描画等も書いて、
一応なんとなくソレっぽい感じになった状態がコチラ。
ここで新たな問題にブチ当たるワケなんですが、とりあえずオブジェクトを持上げて移動する際の
「ライルのモーション」「オブジェクトの描画」
は、割と良い感じになってる気がします。
終わりに
その後、この作成記を記述している現在に至るまで二週間、
レイヤー処理（と僕が呼ぶ、描画のプライオリティ）の問題に掛かりきりで何も追加/修正出来ていません。
色々と考えてはいますが、試行錯誤を繰り返して当たりたい問題なので、連休等で無いと出来ないかも知れません。
現状は、少し変な場合があるだけで概ねOKと言えなくも無いので、このままNPCの重力処理を作って次に進んでも良いかも知れませんが・・・
と思っていましたが、この作成記を記述していたら
結構本物に近づいている気がして来ました。
ゆっくりですがだんだんと規模が大きくなり、手を入れたい箇所・書き足したい処理が増えてきました。
これからも非常にノンビリですが、進めていきたいですね。
果たして、今年中にマサンの村を出られるんでしょうか・・・！？
御質問・御意見・御感想は @m_o_p_u までお気軽にどうぞ
| << 前の記事 | 次の記事>> | ||
| ランドストーカー on JavaScript作成記（2） | ランドストーカー on JavaScript作成記（4） |
|
コメント
コメントを投稿