9

HTML5/キャンバス/ゲーム プログラミングは初めてですが、数冊の本を読んだ後、いじくり回しています。私は物事がどのようにうまくいくかについてかなり良い考えを持っていると思います. この質問はいくつかの小さな質問をしますが、一般的には基本的に「構造的アプローチ」の質問です。私は冗長な応答を期待していませんが、うまくいけばあちこちに小さなポインタがあります:) スクロールしない、そして現在かなり退屈なスーパーマリオワールドへのリンクです.

スーパーマリオワールドテスト

注: コントロールは左/右とジャンプするためのスペースバーです。私はちょうど学習しているので、これは現在Firefox用のセットアップのみです。

この時点で何か間違ったことをしましたか?

今のところ、マリオの走り方やジャンプの仕方だけに集中していて、そこそこうまく収まったと思います。コイン ボックスは何もせず、背景は見た目のために読み込まれた画像です。これが私のアプローチです。これに完全に問題がある場合はお知らせください。

  • マリオが 2 つの Y 速度 (Gravity 変数と Jump 変数) を実行してジャンプできるようにします。
  • マリオが 1 つの速度 (左または右の「摩擦」 + 加速度) を実行することによって実行できるようにします。
  • スプライトは、キープレス/キーダウンに従って使用および配置されます
  • これが正しいかどうかはわかりませんが、コンストラクター関数を使用してオブジェクトを作成し、メインのアニメーション ループ内でそのオブジェクトのプロトタイプ.ドロー関数を呼び出して、すべての変数を更新し、オブジェクトを再描画します。
  • フレームごとにキャンバス全体をクリアしています
  • これを Mario.move() のような描画関数以上のものに分割する必要がありますか?
  • ゲームプレイの 2 つの平面を作成するために、GroundLevel 変数と JumpLevel 変数をセットアップしました。JumpLevel は、マリオがその場でジャンプできる高さを制御できるように設定されています。この 2 つの場所により、地面が丘のように盛り上がるようになり、重力がマリオのジャンプ力を無効にするポイントを地面から同じ距離に保つことができます。
  • わかりやすくするために、すべてが異なる JS ファイルに分割されていますが、明らかに統合されます。

今後:

これで、マリオの動き方の設定が完了しました (キノコの上下や火の玉の発射など、他にもいくつかの小さな操作があると思います)。私はそれを理解できると思いますが、以下を視覚化し、HTML5/Canvas でこれを簡単に処理する方法については、本当に迷っています。

  • 背景のスクロール (Ground Tiles を設定して Screen Wrapping を使用してみましたが、タイルを反対方向に動かしていたため、多くの不均一な問題が発生しているようです。残念ながら、加速を考慮しようとしているので、これは数を捨てて、地面に隙間ができていた. 私はこのアイデアを捨てました. 大きな背景画像を持つキャンバスの下のDIVが最良の解決策でしょうか?

  • 敵: 同じ方法で敵を作成し、各フレームですべての敵に対して衝突検出のループを実行しますか?

  • 背景のボックス: マリオが背景のボックスの上に立つことを許可しようとしていますが、これにアプローチする方法がわかりません。現在、マリオがキャンバスにとどまるように境界を設定していますが、ボックスに基づいて異なる境界を設定するためにこれらの条件を拡張し続けますか? 画面上に複数のボックスを表示して、この方法で行うと、特に敵に対して同じヒット テストを行う場合は、ちょっとクレイジーになることがわかります。私はここで何かが欠けていることを知っています....

  • レベルの移動: これは多少関連しています。右キーを押すと、基本的にレベル内のすべてが左に移動する必要があります。すべてのアニメーション フレームで、マリオに触れる可能性のあるすべてのもの (マリオが立つボックスと衝突する敵) のすべての位置を追跡する必要がありますか? これはちょっと非効率になりそうですか？

ありがとうございます！結果/解決策でこれを更新し続けます:)

4

1 に答える 1

7

うわー、わかりました。あなたは明らかにこれについて多くのことを考えてきたので、私はあなたの質問が本当に好きですが、部分的にはそれが信じられないほど広範で会話的であることも理由の1つです. この質問をするフォーラムを見つけた方がよいでしょう。

…というわけで、私が資格を持っているいくつかの点について、順不同でお答えします。:)

  • レベルの移動: それは奇妙な (非効率的な) 方法です。画面上の位置に基づいて計算を行うことはありません。レベル内のすべての標準的なカメラに依存しない座標セットを追跡し、ビジュアルを更新して一致させます。これにより、フレームレートが歩行できるものとできないものに影響を与えるという奇妙な問題に遭遇したり、低速のコンピューターでマリオが時々ダメージを受けることなく敵を通り抜けたりするのを防ぐことができます. このように位置を追跡すると、付随的に他の多くの問題が解決されます。

  • これは絶対に複数の機能に分割する必要があります。動作コードとレンダリング コードを同じ場所に置くと、特に更新/リフレッシュ レートと悪意を持って相互作用することで、あなたを台無しにします。これは基本的に、プレーヤーがトリッキーなジャンプをするたびに、ゲームが通常よりも多くの更新を行うことを意味し、アニメーション/ヒット検出/その他が均等になる可能性がはるかに低くなります.

  • 敵: これを他のすべてのものに組み込むことをお勧めします。すべてに対して 1 つのヒット検出パスを実行し、何かをヒットした場合は、それが何であったかを確認します。特定のエンティティを 100 ピクセル以内のオブジェクトに対してのみチェックすることで、これを最適化することができますが、この方法で行うと、敵ごとに個別の衝突検出イベントを実行する必要があります。敵同士をすり抜けるようにすると、計算コストが低くなります。

編集: 「レベル移動」に関する最初のポイントについて明確にしたいと思います。基本的に、カメラが移動するたびに画面上のすべてのエンティティを移動したり、すべてのエンティティの位置をカメラの位置からのオフセットとして保存したりすることは望ましくありません(この場合、カメラが動きます。）

理想的なアプローチは、レベルの絶対左上からオフセットされた X/Y 座標を使用して、敵、ブロック、地形の場所を保存することです (最初の段階で)。フレームをレンダリングするには、基本的にこれを行います。 : (架空のレベル形式について話しているため、疑似コードです!)

function GetVisible(x,width,level_entities_array) {
  for (i = 0; i < count(level_array); i++){
    if (level_entities_array[i][x] > x && level_entities_array[i][x] < x+width) {
      visible_elements[] = level_entities_array[i][x];
    }
  }
return visible_elements;
}

ブーム、窓の中にあるべきものがすべて揃っています。xエンティティの位置と ZAP からカメラのオフセットを差し引くxと、キャンバス上の位置が得られます。物事が現実になったので、チームとしてポーズをとってください。

Y 軸でカリングするつもりはないことに注意してください。これは外挿によって修正できますが、ここまでたどり着いたので対処できると思います。これは、マリオ スタイルの垂直方向の探索を行う場合に必要になります。

はい、私の疑似コードが C# と JavaScript の邪悪な恋人のように見えることはわかっています。すみません、夜の11時半にそんな風に転がります。;)

于 2012-08-21T03:21:08.167 に答える