2013-10-23 11 views
6

私はマルチポーンゲームを書きましたが、〜60ms遅れてボールが滑らかに動いていません。 The game itself is available hereが、それはクロームでのみ動作するので、サイト自体は(もあなたは明らかにそれが動作するためには2つのブラウザが必要です)私の母国語で書かれている、ここでの問題のjsfiddleです:キャンバスボールをスムーズに動かす

http://jsfiddle.net/yc6Lb/75/

フィドルで見ることができるように、dxdyが定義されており、1秒あたりのリフレッシュ数はspeedと定義されています。私はこれらの3つの変数が一定に保たれている必要があります(ボールがスムーズに動かないことがわかっています)。

質問:これらの変数には触れないトリックはありますか?ボールは滑らかに動くように見せかけますか?ボールの新しい位置をレンダリングし、ボールの以前の位置を50%の不透明度でレンダリングすることを考えていましたが、まだテストしていません。この問題に対する他の解決策はありますか?

+1

'dx'、' dy'、 'speed'に触れたくない特別な理由はありますか?より頻繁な更新はよりスムーズなアニメーションを実現します。 –

+0

@JasonP:まず、元のアプリでは、「dx、dy」はできるだけ小さい(値1と2)。だからそれがある。クライアントとサーバーの間の遅れ(約50ms)のために「スピード」を変更することはできません。そのことについても何もできません。だから私はここで何らかのトリックが必要です。 – ojek

+2

ゲームをクライアント上でアニメートさせ、サーバーとの同期に必要なときに変更するだけの場合はどうなりますか?また、ステップを1より小さくすることもできます。 –

答えて

3

@Jasonによると、あなたはアニメーション(アニメーションフレームを使用して)で望み通りの正確なステップを持つことができ、リモート情報を取得するという問題を個別に処理できると思います。
しかし、クイックフィックスのために、時々使用するそのトリックを使うことができます:不透明度を下げたcontext2dをクリアすることでトレイル/シャドー効果を得ます。
だから、明確な機能は次のようになります。

function clear() { 
    cxt.globalAlpha=0.3; 
    cxt.fillStyle='#FFFFFF'; 
    cxt.fillRect(0, 0, WIDTH, HEIGHT); 
    cxt.globalAlpha=1; 
} 

、あなたはドロー()関数の中で明確にはならない、とドローループ中)(クリアするために呼び出します。

私はあなたのフィドルを更新:

http://jsfiddle.net/gamealchemist/yc6Lb/86/

は、あなたが望む効果を得るために、アルファと遊びます。

Rq:画面の一部(スコアなど)を完全に不透明にして、キャンバスのアニメーション部分でのみ不透明度を低くすることができます。

+0

+1モーション効果が素晴らしい!私はOPの質問についてはっきりしていません...彼らは、不機嫌なアニメーションに対処する方法を尋ねるのですか、代わりに、クライアントとサーバーの間のネットワークレイテンシに対処する方法を尋ねていますか?クライアント側で計算/アニメーションを実行するのではなく、各ボールの位置をサーバーに送信させることが心配です。 – markE

+0

Thx、私もそれが大好き!低コストのステンシルバッファー!問題は悪いアニメーションを隠すことにあるようですが、実際には、一定の時間枠を持つことは、プレーヤーの時計を処理し、他の人の実際の位置を推測しようとする努力を惜しまないでしょう。だから、@ojekはアニメーションフレームのために行って、難しい遅れ計算のコーディングを開始します:-) – GameAlchemist

+0

そして、それは私が探していたものです!ありがとう! – ojek

0

すべてのループで2 * pi計算を実行しないと少しパフォーマンスが向上します。 6.28の静的値に丸めます。

また、processing.jsを参照すると、処理が速くなる場合があります。

-1

あなたの数学には何も問題はありません。 requestAnimationFrameを使用する必要があります。あなたはおそらくも、それはすべてのブラウザでの作業を取得するpolyfill for requestAnimationFrameが必要になります

function init() { 
    window.requestAnimationFrame(init, cxt) 
    draw(); 
} 

Here's a working JSFiddle example

:それはこのようになりますようにあなたのinit関数を変更し 。

3

これは醜いですが、ここではあなたのためのFPSの参照です: http://jsfiddle.net/yc6Lb/84/

具体的requestAnimationFrame()を使用し、FPSカウンターを持ちます。パフォーマンスの違いに注意してください:)

はここBEAUTIFUL CODEバージョンです:あなたが最も歓迎しているhttp://jsfiddle.net/neuroflux/Ey9uz/1/

関連する問題