タグ付けされた質問 「html-canvas」

HTML5の新機能。JavaScriptアプリがブラウザーに描画面を表示できるようにします。

7
HTML5 Canvasにペイントされる2D配列のテキストマップの管理
それで、私はただの楽しみのためにHTML5 RPGを作っています。マップは<canvas>（幅512ピクセル、高さ352ピクセル|横16タイル、縦11タイル）です。をペイントするより効率的な方法があるかどうかを知りたいです<canvas>。 ここに私が今それを持っている方法があります。 マップ上でのタイルのロード方法とペイント方法 マップは、Image()ピースを使用してタイル（32x32）でペイントされています。画像ファイルは単純なforループを介してロードされ、tiles[]を使用してペイントされるように呼び出される配列に入れられdrawImage()ます。 まず、タイルを読み込みます... そして、それがどのように行われているのですか： // SET UP THE & DRAW THE MAP TILES tiles = []; var loadedImagesCount = 0; for (x = 0; x <= NUM_OF_TILES; x++) { var imageObj = new Image(); // new instance for each image imageObj.src = "js/tiles/t" + x + ".png"; …
5
ゲームの俳優は自分自身を描く責任がありますか？
私はゲーム開発は初めてですが、プログラミングは初めてです。 私は（再び）JavaScriptのcanvas要素を使用してPongタイプのゲームで遊んでいます。 Paddle次のプロパティを持つオブジェクトを作成しました... width height x y colour 次のPongようなプロパティを持つオブジェクトもあります... width height backgroundColour draw()。 draw()現在、メソッドはをリセットしてcanvasおり、そこで問題が発生しました。 必要があるPaddleオブジェクトが持つdraw()その描画方法は責任、または必要があるdraw()のPongオブジェクトがその役者を描くための責任がある（私が間違ってる場合、私はそれが正しい用語であると仮定し、私を修正してください）。 私はのためにそれがadvantagousだろうと考え出しPaddle自体を描画するために、私は2つのオブジェクトをインスタンス化するように、PlayerとEnemy。それはでなかった場合Pongのdraw()、私は二度同様のコードを記述する必要があると思います。 ここでのベストプラクティスは何ですか？ ありがとう。
2
私のゲームはほぼ完成です！私は今何をしますか？[閉まっている]
閉じた。この質問はより集中する必要があります。現在、回答を受け付けていません。 この質問を改善したいですか？この投稿を編集するだけで1つの問題に焦点を当てるように質問を更新します。 5年前に閉鎖されました。 HTML5 /キャンバスゲームがほぼ完成し、すぐに起動できます。これは、手順で生成された風景を探索して混乱させ、生き残るためのアイテムや構造を作成する2Dゲームです。「エンディング」を確定し、いくつかのバグを修正する必要がありますが、ゲームはプレーヤー向けに準備が整っています。 このゲームはウェブ上で無料でプレイでき、iOSとMac App Storeのバージョンの作業を開始する予定です。また、ゲームが起動した後でも、ゲームにコンテンツを追加し続けます。 ゲームを起動する前に私が覚えておくべきことを誰かが推奨できますか？ありがとう！
3
HTML5 Canvasゲームのダブルバッファリング？
私のシンプルなキャンバスゲームは、Chromeでは正常に動作し、Mac / LinuxではFFで動作するようです。スマートフォンやWindows環境でテストする機会はまだありません。ダブルバッファリングは使用しませんが、それを使用するJS Canvasの例をいくつか見ました。 ダブルバッファリングの使用はいつ推奨されますか？特定のブラウザでのみ違いがありますか？重大なパフォーマンスヒットはありますか？ ありがとう！
7
HTML5ゲーム（キャンバス）-UIテクニック？
PhoneGapを使用してモバイル（Android / iPhone / WebOS）向けのJavaScript / HTML5ゲーム（Canvasを使用）を作成中です。現在、UIとプレイボードをどのように構築し、どのように相互作用させるかを設計しようとしていますが、最善のソリューションが何であるかはわかりません。ここに私が考えることができるものがあります- drawImageやfillTextなどを使用して、キャンバスにUIを直接構築します。通常のDOMオブジェクトを使用して、キャンバスの外側にUIのパーツを構築し、UI要素がプレイボードキャンバスとオーバーラップする必要がある場合、divをキャンバス上にフロートします。私が考えていないゲームUIを構築するために使用できる他の可能なテクニックはありますか？また、これらのどれが「標準」の方法と考えられますか（HTML5ゲームはあまり人気がないので、おそらく「標準」の方法はまだないでしょう）。最後に、どの方法を推奨/使用しますか？ 事前に感謝します！
6
Box2Dの代替JSポートはありますか？
HTML5用のトップダウン2Dカーゲームを作成することを考えています。最初のゲームでは物理学と衝突を自分で書きましたが、このゲームでは既製のライブラリを使いたいと思います。 Box2DとそのJSポートを見つけました。 http://box2d-js.sourceforge.net それは、2008年に作られた非常に古いポートのようです。現在のBox2Dの多くの機能が欠けているのでしょうか、それとも大きな問題がありますか？そして、それに代わるものはありますか？
7
ブラウザーベースのゲームを構築する際に、キャンバスにするか、キャンバスにしないか？
背景：私は広範な開発の背景を持っていますが、ゲームをコーディングしたのは何年も前です。私のJavascriptスキルは非常に限られており、テトリス、パックマン、またはその複雑さレベルの単純なゲームを構築することにより、それらを改善するつもりです。 質問：私がしなければならない基本的な選択は、<canvas>要素にレンダリングするかどうかです。 キャンバスには、ポイント、ライン、さらに複雑なものをレンダリングするための基本的なツールがあります。おそらく、これを支援するためのさまざまなフレームワークがあります。 キャンバスがなければ、オブジェクトをDOMツリーに保持できます。通常のWebページのように、非常に複雑で、多くの要素が重複しています。 1つのアプローチは他のアプローチよりも優れていますか？それらは相互に排他的ですか？どれを選ぶべきかをどうやって知るのですか？
2
近くのクリッププレーンよりも目に近いクリッピング頂点をどのように処理すればよいですか？
JavaScriptで独自の3Dエンジンを展開し、キャンバス描画のみを使用し、WebGLは使用していません。これは別のMinecraftクローンです。私は箱が大好きです、私を判断しないでください。 これまでのところ、すべてが素晴らしく機能しますが、1つのことを除いて：3Dでは、いくつかの頂点が近くのクリッピングプレーンの背後に移動すると、画面上の投影が奇妙になります（プレーンをトレースするために使用される他の頂点が前面にあると仮定）。 これらのポイントをクリップしてみましたが、これらの頂点を使用するサーフェスの谷を見ることができます。WebGL / OpenGLでは、グラフィックカードがこれらのポイントを処理し、プレーンが正しくレンダリングされますが、ハードウェアにアクセスできないため、これを自分でコーディングする必要があります。 私はそれをどうすればよいのかよく分かりませんが、現在最後に思いついたのは、プレイヤーの近くのクリッピング平面の後ろにあるポイントの投影を逆にすることです。これは、正面にあるスクリーンにポイントを投影する必要があるため、論理的に思えます頂点の。 私の考えは次のとおりです。 以下は、何が起こるかを説明するための画像です。 遠くから見ると、青いボックスは完璧にレンダリングされます。 頂点のいくつかがプレイヤーのクリッピングプレーンの背後にある場合、逆投影を行いますが、正しく見えません。 focalLength *= -1; 2d.x = x*focalLength/z; 2d.y = y*focalLength/z; 顔の描画に使用されるすべての頂点がプレーヤーの背後にあるため、背後の灰色のボックスは完全に削除されます。 これは、ルックアップまたはダウンしたときに起こることです。 私はこの背後にある数学をどうすればいいのかわかりません。誰かがすでに同じ問題に遭遇し、助けてくれることを望んでいます。
1
マルチプレイヤーHTML5、Node.js、Socket.IO [終了]
閉じた。この質問には、詳細または明確さが必要です。現在、回答を受け付けていません。 この質問を改善したいですか？詳細を追加し、この投稿を編集して問題を明確にします。 5年前に閉鎖されました。 HTML5 Canvas、JavaScript（John Resig simple Inheritanceライブラリを使用しすぎます）、およびSocket.IOを使用したNode.jsを使用して、シンプルなマルチプレーヤーを作成しようとしています。私のクライアントコード： var canvas = document.getElementById（ 'game'）; var context = canvas.getContext（ '2d'）; var socket = new io.Socket（ '127.0.0.1'、{port：8080}）; var player = null; var UP = 'UP'、 LEFT = 'LEFT'、 DOWN = 'DOWN'、 RIGHT = 'RIGHT'; socket.connect（）; socket.on（ 'connect'、function（）{socket.send（）; console.log（ 'Connected！'）; player = new Player（50、50）; …
6
APKを実行するとAndroidのパフォーマンスが低下し、ブラウザで正常に実行されます
Phaserエンジンを使用してHTML5で小さなゲームプロジェクトを作成しました（1.1.5と1.1.6の両方を試しました）。次に、モバイルプラットフォームに移植するために、Windows Phone 8、Android、iOSでPhonegap / Cordovaを使用しました。 私のゲームには、アニメーション化された（ポイントaからポイントbに移動し、同時に回転する）約10個の要素があります。iOSおよびWindows Phone 8では、問題は発生しませんでした。 しかし、Androidでは、パフォーマンスは受け入れられません。一方、デバイスブラウザーを介してゲームを実行すると、遅延なくスムーズに実行されます。しかし、コンパイルされたAPKは非常にぎくしゃくして動作し、要素の動きは非常に遅く、ちらつきます。 マニフェストファイルで、Androidハードウェアアクセラレーションフラグが「true」に設定されていることを確認しました。falseに変更しようとしましたが、パフォーマンスの変化は反映されませんでした。 Samsung S2デバイスのAndroid 4.2でも同じことを確認しましたが、そのパフォーマンスは向上しています。しかし、Asus Nexus Tab 7（Android 4.4を実行している）では非常にぎくしゃくしていますが、OSとデバイスはどちらも最新です。また、Android 4.3（Samsung Galaxy Grand Duos）を実行している別のデバイスで確認しましたが、そのパフォーマンスもまったく良くありません。 私のゲームではWebGLとCanvasの両方のレンダリングを試みました（PhaserエンジンはPixi.jsを使用しますが、WebGLがサポートされていない場合は2dキャンバスにフォールバックします）が、変更はありません。イーゼルjsでも同様です。 他の誰かが同様の問題に直面し、ネイティブのようなパフォーマンスを得る方法を提案できる場合。cocoonjsの例を確認しましたが、滑らかで許容できるように見えますが、そのルートに行くことはできません。
2
複数のキャンバスオブジェクトを使用することは良い習慣ですか？
私たちはHTML5とJavaScriptを使ってジャンプアンドランゲームを開発しており、そのための独自のゲームフレームワークを構築する必要があります。ここにいくつかの困難があり、いくつかのアドバイスをお願いしたいと思います： ゲームのルートを表す「ステージ」オブジェクトがあり、これはグローバルなdivラッパーです。ステージには、div要素でもある複数の「シーン」を含めることができます。再生タスク、一時停止などのシーンを実装し、それらを切り替えます。したがって、各シーンには、キャンバスを表す複数の「レイヤー」を含めることができます。これらのレイヤーには、「ObjectEntities」が含まれます。これは、画像または長方形などのその他の形状を表します。各Objectentityには、あるエンティティの画像を描画できるようにするための独自のtemporaryCanvasがあり、別のエンティティには長方形が含まれています。 ステージにactiveSceneを設定したので、ゲームをプレイすると、アクティブなシーンだけが描画されます。を呼び出しactiveScene.draw()、すべてのサブレイヤーを呼び出して描画し、エンティティを描画します（呼び出しdrawImage(entity.canvas)）。しかし、これはある種の良い習慣ですか？描画する複数のキャンバスがありますか？各ゲームループでは、すべてのレイヤーコンテキストがクリアされ、再度描画されます。たとえば、バックグラウンドレイヤーがまだ残っている場合、…これを一度描画して、毎回クリアして再描画するほうが便利ではないでしょうか。または、ステージなどでグローバルキャンバスを使用し、このキャンバスを使用して描画する必要がありますか？しかし、これは高額になると思っていました...
5
（ドワーフ要塞のような）ブラウザでアスキーマップとキャラクターを移動するための優れた技術的ソリューション？[閉まっている]
閉まっている。この質問はトピックから外れています。現在、回答を受け付けていません。 この質問を改善してみませんか？ 質問を更新して、ゲーム開発スタック交換のトピックになるようにします。 5年前休業。 私のゲームのWebサイト用に、テキスト文字を使用して動物と人を表すWebアプリケーションを作成し、独立した（サーバー主導の）AIを使用してマップスクエア上を移動させたいと思います。 つまり、基本的には、ブラウザ内の小人-要塞マップです。 移動する生き物、mob、npcs、およびpcsがあります。私がこの規模を達成するつもりはないというわけではありませんが、いつでもこのコンテンツの4分の1程度を表示し始めるでしょう。 おそらく一部の背景/固定タイルが静的に読み込まれる可能性があります。しかし、生き物/動物や動くことができるものについては、どのテクノロジーソリューションが最も効果的であるかわかりません。 <canvas>その機能がこのユースケースに適合するかどうかはわかりませんが、私は知っています。確かに、ある程度のJavaScriptが必要になるでしょう。 このユースケースに適合するJavaScriptライブラリまたはキャンバスライブラリはありますか？私が気づいていない別のテクノロジー？これに類似したことをしたウェブサイトの例を知っている人がいるので、私はそれらからアイデアを集めることができますか？
2
ダーティ2Dマップレンダリング
HTML5のマップレンダリングに関しては、「ダーティレンダリング」について人々が話すのをよく耳にします。私はグーグルで検索し、GameDevで検索しましたが、それほど多くはありません。 正確には何ですか？ それを適切に実装する方法は？
1
gluLookAtはどのように機能しますか？
私の理解から、 gluLookAt( eye_x, eye_y, eye_z, center_x, center_y, center_z, up_x, up_y, up_z ); 以下と同等です。 glRotatef(B, 0.0, 0.0, 1.0); glRotatef(A, wx, wy, wz); glTranslatef(-eye_x, -eye_y, -eye_z); しかし、ModelViewマトリックスを出力すると、への呼び出しがglTranslatef()正しく機能していないようです。コードスニペットは次のとおりです。 #include <stdlib.h> #include <stdio.h> #include <GL/glut.h> #include <iomanip> #include <iostream> #include <string> using namespace std; static const int Rx = 0; static const int Ry …
2
タイルベースのアイソメトリックゲームでの自由な動き
タイルベースのアイソメトリックゲームで自由な動きを実装する合理的な簡単な方法はありますか？つまり、プレーヤーがタイルからタイルに瞬時にジャンプしたり、グリッドに「スナップ」されないだけではありません（たとえば、タイル間の動きがアニメーション化されているが、アニメーションが完了する前に何もしないようにロックされている場合）。私はゲームプログラミングに関わることは本当に初心者ですが、このサイトや他のリソースの助けを借りて、基本的なことを行うのは非常に簡単でしたが、この特定の問題に役立つリソースを見つけることができませんでした。 現在、私はこれに近いものを即興で作成しています：http : //jsfiddle.net/KwW5b/4/（WASDの動き）。移動のアイデアは、マウスマップを使用してプレーヤーが別のタイルに移動したことを検出し、オフセットを反転することでした。ほとんどの場合、正しく機能します（各コーナーでプレーヤーが間違った場所に移動します。http：を参照してください）。 //www.youtube.com/watch?v=0xr15IaOhrI、これはおそらく、フルマウスマップを適切に機能させることができなかったためと思われます）が、それが良い/正常なソリューションに近いという幻想はありません。とにかく、それはほとんどの場合、私が実装したいものの種類を示すためだけです。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.