HTML、キャンバス、およびレイキャスティングメソッドを使用した擬似3次元ゲームの作成
はじめに
ブラウザーのパフォーマンスが向上したため、最近では三目並べよりも複雑なJavaScriptゲームの開発が容易になりました。 今ではFlashは必要ありませんが、canvas要素（キャンバス）を使用して非常に複雑で魅力的なゲームを簡単に作成できます。
ゲームまたはゲームエンジン？
このトピックに取り組む前に、ゲームWolfenstienをテストしました。 最初は、canvasを使用して最も一般的な3Dエンジンを作成しようとしましたが、次にDOMを使用した再キャストに切り替えました。
この記事では、rakecastingを使用して本格的な疑似3次元エンジンを作成する方法について詳しく説明します。 実際には、ゲームMaze （ 世界で最初の3Dゲームの1つ。翻訳者のメモ ）の迷路のように見える2Dマップを作成するだけなので、「疑似」という言葉を追加します。 このマップは、プレイヤーに対してワールドがどのように描画されるかを説明します。 プロジェクトが複雑にならないように、ゲームは1つの軸でのみ回転します。 垂直線は、垂直線とまったく同じようにレンダリングされます。 プレーヤーはしゃがむこともジャンプすることもできません。 これは非常に簡単に実装できますが。 特にインターネットには、キャスト技術を使用して3次元グラフィックスを作成するサイクル全体を網羅した優れたガイドが既にあるため、理論的な部分には深く入りません。 このガイドの著者はF. Permadiです。
この記事の資料を使用するには、JavaScript言語の適切なコマンド、HTML5キャンバス要素に精通していること、および三角法の学校知識が必要です。 この記事では、プロジェクトの一部が完全に分解されています。 コードの個々のセクションの説明では、すべての側面をカバーできるわけではないことに注意してください。 プロジェクトの全体像を取得し、コードの各セクションに関するコメントを読むことができるようにするには、アーカイブをコンピューターにダウンロードすることをお勧めします...
著者の最終結果をテストします。 。
翻訳者から
reykastingに慣れていない人のために：この方法の特徴は、CSS 3D変換の機能の場合のように、ブラウザに組み込まれた特別なツールではなく、プログラミング言語とHTML5機能によって3次元空間の効果が作成されることです。 疑似3次元オブジェクトの形でマークアップ言語の2次元オブジェクトを表すための数学的な装置全体が、コードに直接実装されています。 通常、最も単純なエンジンには、3Dの構築に必要な3つの基本的な方法（回転、平行移動、平行移動、交差）の実装が含まれています。
ほとんどすべての基本的な実装は、条件付きで3つのブロックに分割できます。1）カメラ制御-回転、移動。 2）ビームキャスト-カメラから各ピクセル（または実装によってはより大きなセクターまで）の距離を決定し、カメラの視野に入ります。 3）カメラの視野内の空間のレンダリング。
実際、リキャストを使用すると、既製のライブラリを使用せずに、完全な3Dエンジンをゼロから作成できます。 簡単な場合、 この記事のエンジンのように、実装には200〜300行のコードが必要になる場合があります：「256行のコードの一人称ゲームエンジン」。 ところで、この記事はレイキャスティングのクイックガイドでもあります。
あなたがラカスティングの方法に興味があり、簡単な例でそれを理解したいという願望があれば、それは私には思えます、それは最も簡単なプロジェクトの知り合いを始める価値があります。 すべてのJavaScript実装の中で、テクスチャ、追加オブジェクト、2Dマップ出力なしでも、最も簡単な10個ほどを見つけることができました。このリンクでgithubを見ることができます。 以下はプロジェクトのスクリーンショットです。
結論の代わりに。 Web向けのレイキャスティングの利点について
- この方法の本質的な特徴は、マップのサイズを任意に設定できることです。これは、パフォーマンスの向上にはまったく影響しません。ラカスト方法では、画像のレンダリング速度がそれぞれ投射される光線の数に依存するため、構築された世界の出力があるウィンドウの領域が小さいほど速くエンジンは動作します。 言い換えれば、レイスロー機能は常に空間のハードセットセクションを1つだけ処理します（プレーヤーの位置に関連する配列内の特定の数のポイントを調べます）。
- 前の段落から作成する可能性に従います
プレイヤーが自分の現在位置を基準にしてどこに移動するかを予測する試みに基づいてフレームをキャッシュします。 - 空間を構築するのに3Dスキルは必要ありません。これは、マップで配列を編集するだけで実行できるためです。 同時に、注意深い書式設定が行われたコード内のスペースの配列自体は、上から見たマップのように見えることに注意してください。
すなわち 構内図を遠近法で表示する必要がある場合、大規模な3Dエディターをロードする必要はありません。テキストとスケッチを開くだけです
手動計画または特定の形式で計画をスキャン/認識します。
- マップ間のトランジションをうまく整理することで、大きなスペースの効果を作成できるため、実際には、マップのサイズや1つのプロジェクトのカードの数に制限はありません。
PS
レイキャスティングが適用されたより深刻なプロジェクトについては、Habrのこの記事で詳しく知ることができます。
この方法に関する資料を探すようになった記事 。