問題タブ [tile-engine]

長い休日の週末だったので、コーディングのバグが再び発生し、遊んでみました。

マリオhttp://gfilter.net/junk/tileengine.jpg

私は基本的なタイルエンジンを作成しましたが、これまでこれを試みたことがないため、スプライトの衝突検出の処理と重力の現実的な物理学の実装に本当に苦労しています。

他のゲームホビーライターの場合、これにアプローチするための最良の方法に関するいくつかのウォークスルーを教えていただけますか？

アップデート：

進捗レポートを共有したいと思いました。

http://www.youtube.com/watch?v=-RKNQ2UiiLY<-ゲームの動作

それはまだ本当にバグがありますが、衝突検出はほとんど機能しています。私は他のいくつかの機能（ブロックをぶつける（バグに気付く）や敵との相互作用など）に取り組み始めました。

マリオはまだ月にいるように歩きます、私はこれらの定数を使用しています、よりリアリズムのためにそれらを微調整するためのアドバイスはありますか？

タイトルの通り、2Dプラットフォーマーエンジンのデザインを肉付け中です。まだ設計段階ですが、レンダラーに問題が発生しないか心配で、気になるなら避けたいです。

Uint16基本ライブラリに SDL を使用しています。ゲームは、タイルを保持するために単一の大きな配列を使用するように設定されます。これらは、衝突処理からグラフィック ルーチンまで、エンジンのすべての部分で使用される「タイル定義」の 2 番目の配列にインデックスを付けます。これは、私の最大の関心事です。

グラフィック エンジンは、解像度 640x480、タイル 32x32 で動作するように設計されています。フレームごとにレイヤーごとに 21x16 のタイルが描画され (スクロール時に表示される余分なタイルを処理するため)、最大 4 つのレイヤーを描画できます。レイヤーは単に個別のタイル配列ですが、タイル定義配列は 4 つのレイヤーすべてに共通です。

私が心配しているのは、このエンジンで透明度とアニメーション化されたタイルを利用できるようにしたいということです。また、デザインにあまり慣れていないので、現在のソリューションが非効率的すぎるのではないかと心配しています。うまくできた。

私のターゲット FPS はフラットな 60 フレーム/秒で、4 つのレイヤーすべてが描画されているため、毎秒 21x16x4x60 = 80,640 の個別の 32x32 ピクセルのタイルを描画する必要があることに加えて、スプライトには多くの奇数サイズのブリットが必要です。これは少し過剰に思えます。それで、私が持っているタイルマップ設定をレンダリングするためのより良い方法はありますか? ハードウェア アクセラレーションを使用してタイルマップを描画する可能性を検討しています。パフォーマンスが大幅に向上するのであれば。また、少し古いコンピューターでもこのゲームをうまく実行できることを願っています。

求めすぎるのであれば、エンジンの能力を下げることも論外ではないと思います。

私はゲームに取り組んでいます (そして、すでにいくつかの質問をしています) が、皆さんに尋ねたい別の質問があります。

このゲームのレベル形式は、TilemapData 構造体の配列へのインデックスである Uint16 (私は SDL を使用しています) のタイルマップとして設定されます。tilemapData 構造体のビットの 1 つは isConductive ビット/ブール値です。

このビットの使用は基本的に、さまざまなオブジェクトを 1 つの「powerNet」に接続するパスを作成することです。以下に、現在の方法に関するコードをいくつか示します (これは機能しますが、後で本当に嫌いな理由について説明します)。

false を返すことは、関数が失敗したことを意味することに注意してください (この場合、すべてのオブジェクトが適切にリンクされていません)。

私の心配は、導電性タイルを歩く関数が、スタック オーバーフローのために、より複雑なマップで完全に失敗することです。これらの機能を使用してこのリスクを軽減する方法について、いくつかのアイデアはありますか? 必要に応じて、使用される構造体に関する詳細情報を提供できます。

コードを変更してrecursiveCheckTile、ジャンクションに到達したときにのみ再帰呼び出しを行い、それ以外の場合はそれが存在する導電パスを対話的にたどるようにすることを考えましたが、事前に知ることができないため、それはまだ部分的な解決策にすぎないようですパスがどのようにねじれているか、分岐しているか。

それが違いを生む場合、ここでは速度はまったく重要ではありません。この関数は、マップが使用される前に処理されているときに 1 回しか実行されないため、少し余分な時間を使用しても問題はありません。

<canvas>2D ゲームを作成するための HTML5 用のタイル エンジンはどこにありますか?

問題があります。タイル エンジンのアルゴリズムが必要です。

歩行不可能なタイルを格納する 2 次元配列があります。

ライト エンジンを実装したいのですが、このエンジンにはシャドウ ハルが必要です。

したがって、これらのシャドウ ハルを作成するアルゴリズムが必要です。

1配列の歩行不可能な部分 ( sを持つセル) を囲む四角形のセットが必要です
。次に例を示します。

黒いタイルは1s です。それらを完全に囲む赤い長方形のセットを見つける必要があります。

コードの基礎は、JohnE.Grahamのブログhttp://johnegraham2.com/blog/2010/09/25/project-javascript-2d-tile-engine-with-html5-canvas-part-4-using-からのものです。さらに最適化するためのゾーン/

画面に相当するタイルを描画するのに最適ですが、上、下、左、または右のキーを押して、一度に1行/列ずつ調整する方法を一生理解することはできません。

ゾーンを視覚化するのに役立つ透明度の例を次に示しますhttp://simplehotkey.com/Javascript/canvas.html（1,188タイルの位置をロードしますが、画面全体に数百を描画するだけです）70,000の配列をロードしましたエントリとそれは画面上に何を描画しているだけなので、それでも迅速でしたが、入力に基づいてすべてをスライドさせる方法を理解することはできません...

私はいくつかのアイデアを思いついたが、何が最善の方法かわからない。

1画面分のタイルがここに表示されます。

ここで、0は壁タイル（周囲）、9は床タイル、7はドア、その他いくつかのランダムなタイルです。

これはまさに画面に読み込まれるものですが、入力、上、下、左、右に基づいて、すべてを1タイルずついずれかの方向にシフトする方法がわかりません。

私が今傾倒しているアイデアの1つは、上記の配列をレンダリングの基礎として使用し、キーボード入力に基づいて別の配列から新しい値をその配列にフィードすることです。たぶん、別のはるかに大きな配列からスライスし（レベル全体のすべてのタイルを保持）、そのスライスを使用して実際にレンダリングされた配列にデータを入力しますか？

ただし、フレームごとにすべてのタイルが置き換えられます...

私が使用していたプレーヤーの入力を取得するために：

もう1つの方法は、画面に既に表示されているタイルを調整して新しいタイルを追加することですが、このエンジンはグローバル変数を使用していないため、入力に基づいてプログラムでタイルエンジンに影響を与える方法がわかりません。別のメソッド（inputReaction（num））を追加し、キーボード入力（console.log（））からいくつかのアクションをトリガーしますが、実際にタイルを描画している他のメソッドにアクセスできません。または、オブジェクトのコピーを作成し、変更して返す必要がありますか？しかし、それはかなり複雑です。

エンジンが描画されているものを計算する方法を変更するよりも、「エンジン」（上の配列）に供給されている配列値を調整する方が簡単かもしれないと思います。これを確認できますか？

これを行うと、タイルがちらつき、常に再描画されます。一度だけ描画してランダム効果を得るにはどうすればよいですか？これらのタイルをマウスでクリックして変更する方法はありますか？また、1つのタイルを他のタイルよりも普及させる方法はありますか？

直接的な助けよりもアドバイスを求めています。

XNA で 8 ビットのプラットフォーマー ゲームに取り組んでいます。私はおそらくすでに 160 時間もその作業に没頭しており、所有しているエンジンに問題が生じ始めています。これは基本的に、XNA プラットフォーマー デモの適応/修正バージョンです。私のタイルのすべてまたはほとんどは 32x32 ですが、机のように幅 64 ピクセル、高さ 32 ピクセルのものもあります。植物のように、幅 32、高さ 64 のものもあります。

XNA チュートリアルの作成者がタイル マッピングを行うのと同じように、一度に .png を 1 つだけ gpu に送ります。アニメーション化されたスプライトには、キャラクターのさまざまなフレームのタイル マップを使用します。タイル マップ データは、XNA チュートリアルと同じようにテキスト ファイルを読み込んでいます。

幅の広いタイルと背の高いタイルにはどのように対応すればよいですか? 2 層のタイル システムを作成する必要がありますか?

現在、透明なタイルを使用して幅の広いタイルを拡張しています。

椅子付きデスク:

椅子 http://dl.dropbox.com/u/8446900/game_screen_desk.png

植物と椅子:

デスク http://dl.dropbox.com/u/8446900/game_screen_plant.png

椅子は 'h'、'd' は机、'p' は植物、',' は透明な背景タイル (ユーザーとの対話なし) です。'"' は、ユーザーがその上に立つ (机を拡張する) ことができる透明なタイル用です。問題は、ご覧のとおり、背景に穴が開いているように見えることです。

実際のタイル マップを作成し、すべてを 1 つの大きな png に結合する必要がありますか? 私が取ることができる別のオプションは、実際に各幅または高さのタイルを 2 つの異なるタイルにカットすることです。プロはこれをどのように行うでしょうか？私は、現代のプラットフォーマーがどのように動作するかについて、簡単で汚い修正を探しているわけではありません。

更新: 回答を確認した後、スプライトをシートにパックする非常に便利なツールを見つけました。

http://spritesheetpacker.codeplex.com/

更新: 新しくアップグレードしたタイル エンジンは、はるかに高速で、ほぼ同じくらいシンプルです。以下のアドバイスは素晴らしかったです。強く推奨する。

私はタイルエンジンを持っていて、それはすべてうねりが働いています、私のプレーヤーはうまく歩き回っています、私はアイテムを追加することに取り組んでいます、プレーヤーは常に画面の中央にいます。端に近づく。

ワールドでアイテムを描画すると、プレイヤーが中心 (ワールドの端) を離れる場合を除いて、アイテムは正常に描画されます。これを修正する方法に頭を悩ませることはできません。

そのかなり自明な説明ですが、世界は寸法（w.worldDimensions.x幅と.y高さ）を取得するために渡され、アイテムは（画面上ではなくゲーム世界の場所）を取得するために使用され、それを相対的に描画するためのプレーヤー（i.x含むおよび位置) と、次に screenDimensions です。i.y.x.y

私は自分のプロジェクトの基本的なタイル エンジンに取り組んでおり、かなり機能する状態にすることができました。ただし、主な問題の 1 つは、コードを実行すると、タイルが常に (0, 0) ではなく (16, 0) で描画を開始することです。

そして問題の写真：

for() ループで x = 1 から開始することはわかっていますが、これを if ((x - 1) ...) で打ち消しても機能しません。私は本当に困惑しています。