23

私は、アバターが常にマウスカーソルを指すように回転することに依存するトップダウンシューティングゲームを作成しています。私はこのような回転を達成します：

//Rendering.
context.save(); //Save the context state, we're about to change it a lot.

context.translate(position[0] + picture.width/2, position[1] + picture.height/2); //Translate the context to the center of the image.
context.rotate(phi); //Rotate the context by the object's phi.
context.drawImage(picture.image, -picture.width/2, -picture.height/2); //Draw the image at the appropriate position (center of the image = [0, 0]).

context.restore(); //Get the state back.

がゼロの場合phi、画像は通常の品質でレンダリングされ、鋭いエッジと検出可能なピクセルが含まれます。ただし、をphiゼロ以外の値に設定すると（実際には、、、、、または）でない場合、画像の0鮮明さが失われ、個々のピクセルがぼやけて表示されなくなります。Pi/2PiPi+Pi/22Pi

これがスクリーンショットです（スクリーンショットの一般的な品質の悪さについては申し訳ありませんが、違いは目立つ以上のものだと思います）：

ここに画像の説明を入力してください

これは、まあ、少し受け入れられません。いつも画像がぼやけてしまうわけではありません！なぜこれが起こっているのですか、それを解決できますか？

4

4 に答える 4

17

あなたは試すことができます

context.imageSmoothingEnabled = false;

ドキュメントを参照してください：

context.imageSmoothingEnabled [ = 値 ]

パターンの塗りつぶしと drawImage() メソッドが、画像を再スケーリングする必要がある場合に (単に「大きなピクセル」で画像をレンダリングするのではなく) 画像を滑らかにしようとするかどうかを返します。

画像をスムージングするか (true)、しないか (false) を変更するように設定できます。

真のピクセル アート レトロ スタイルの効果が必要な場合は、いくつかの角度で回転したスプライト イメージを手動で作成し、現在の値の適切なスプライトを検索し、phi回転せずに描画する必要があります。これには明らかにかなりの量のアートワークが必要です。

于 2012-07-14T19:08:07.067 に答える
3

中心点を中心に画像を回転させる場合は、画像自体のピクセル数が偶数であることを確認してください。奇数の座標になったら、イメージ データをターゲット キャンバスに補間する必要があります。Apple には、キャンバスの移動と回転に関する優れたドキュメントがあります。

そのため、どの画像でも、上記で提案したように、丸めを使用してフル ピクセルにスナップします。

context.translate(Math.floor(img.width/2), Math.floor(img.height/2));

この方法では、画像のすべてのソース ピクセルが常にキャンバス内のピクセルに正確に描画され、ぼかしは発生しません。ただし、これは 90 度の倍数の場合にのみ当てはまります。

すべてのブラウザは、ある程度、画像描画でアンチエイリアシングを行っているようです。そのため、おそらく回転した画像をスプライトとして提供する必要があります。

このChromium バグ レポートによると、まだ修正されていない場合は幸運かもしれません。読み進めると、Ian Hickson がアンチエイリアス処理された画像の描画をオプションにすることに反対した可能性が高いことがわかります。

于 2012-07-18T12:41:13.160 に答える
1

(picture.width/2, picture.height/2)ポイントは常に機能するとは限りません。

(Math.floor(picture.width/2) + 0.5, Math.floor(picture.height/2) + 0.5)役立つはずです。

于 2012-07-06T09:32:43.550 に答える
0

まあ、実際にはそれはあなたが回避できないものです

画像を 90 度の倍数で回転する場合、ライブラリは補間が適用されないように十分にスマートである必要があります。

しかし、90 度の倍数とは異なる角度で画像を回転させるとすぐに、補間する必要があります。結果として、その平滑化が得られます。理論に興味がある場合は、コンピュータ グラフィックスや画像処理に関する本を探すとよいでしょう。

画像の回転の具体的なケースについては、この論文をご覧ください : http://bigwww.epfl.ch/publications/unser9502.html

于 2012-07-20T08:02:20.717 に答える