Pixi.js: 網膜のサポート

私はこのバグに同意します。 参考までに、これは通常どのように処理できるかです： http ：

これもテキストの問題です。

devicePixelRatioが2のRetina画面があり、鮮明な400x300のキャンバスを作成したいとします。 これを取得するには、希望のキャンバスサイズにdevicePixelRatio（800x600）を掛けて、PIXIレンダラーを初期化し、cssを使用してキャンバスを手動で400x300に縮小する必要があります。 そしてもちろん、このスケーリングをすべての計算に組み込む必要があります：位置、フォントサイズ、線幅、ロードされたアセットなど。

私はこのようなものを使用しています：

var canvas = document.getElementById('game'),
    scale = window.devicePixelRatio,
    width = 400,
    height = 300,
    renderer = PIXI.autoDetectRenderer(width * scale, height * scale, canvas);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

+1

すぐにこれに取り組む計画はありますか？ すべてのサイズ、位置、フォントサイズを拡大縮小する必要があるのは本当に苦痛です。 特に、標準のキャンバスでこれを行う非常に簡単な方法がある場合。

スプライトがhidpiであるかどうかに依存するため、このライブラリサイズを実行することは困難です。 hidpiに合わせてスケーリングするスプライトがあれば、いつ、どのスプライトにするかわからないため、ユーザーランドに保持しています。 しかし、あなたは行います。

ねえ@englercj 。 スプライトとは、ユーザーがロードしたアセットを意味しますか？

@dcascaisはい

@englercjお返事ありがとうございます。

現在、適切な表示解像度を得るためにレンダラービューがCSSトリック（前のリンクで説明）でスケーリングされている場合、ステージに追加されてスケーリングされたレンダラービューでレンダリングされたものは、それに応じてスケーリングされず、ピクセルが維持されます値なので、基本的に半分のサイズです。

これには、グラフィックスコンテキストで動的にレンダリングされるコンテンツ、ロードされたテキストおよびアセットが含まれます。

他のプラットフォームでは、さまざまな画面密度に適切なアセットを提供するのはユーザーの責任であると想定していますが、内部はシームレスに機能し、ターゲットにする表示密度を簡単に決定できるスケールファクタープロパティを備えています。 これはPixiユーザーにとってより簡単なアプローチになるのではないかと思います。 適切な資産についてのみ心配させ、スケール係数が正しく設定されていることを確認します。

ステージに追加されたコンテンツの期待されるスケーリングをどのように達成するかについての提案はありますか？

ディスプレイリストのすべてのアイテムのx、y、幅、高さの値を手動でスケーリングし、テキストの場合、適切なサイズのフォント名を持つさまざまな文字列を定義すると、非常に面倒でバグが発生しやすくなります。事業。

ありがとう。

興味深いことに、これらのシステムのいくつかがどのように機能するかを確認したいと思います。 各アイテムを個別にスケーリングする限り、それは道のりのようには思えません。 これはシーングラフなので、ルートDOCを適切にスケーリングできませんでしたか？

@englercj 、私はこれをサンドボックスで試しましたが、物事を適切なサイズに戻しましたが、ピクセル化されたままでした。 別の動作を期待しますか？

@bmantuano選択したアルゴリズム（最も近い、線形、バイキュービックなど）でスケーリングされることを期待しています。

チャド、ここで返信してくれてありがとう。 スケーリングアルゴリズムについては、PIXI.scaleModesを参照していますか？ もしそうなら、バイキュービックオプションはありません。

@englercjこれは、高解像度のディスプレイで鮮明なテキストとグラフィックス（アセットではなく動的に描画される）を取得するために私たちが何をしようとしているのかを示すいくつかのJSFiddleです。

キャンバスのスケーリングとスケーリングされたメインディスプレイオブジェクトコンテナ（サイズは正しいがぼやけており、いくつかの問題がある）
http://jsfiddle.net/hsv8Q

キャンバスのスケーリング（鮮明ですがサイズが間違っており、いくつかの問題があります）
http://jsfiddle.net/hsv8Q/1

スケーリングなし（正しいサイズですがぼやけています）
http://jsfiddle.net/hsv8Q/2

うまくいけば、これは私たちが何を意味するのかを理解するのに役立つでしょう。 私たちが試みるべき他の何かがあるかどうか私たちに知らせてください。

それらのフィドルを追加してくれた@dcascaisに感謝します。 @englercj 、最初のものはあなたが提案していたものですよね？ そこにある高DPIデバイスでピクセル化を確認できますか？

@bmantuano残念ながら私は1つをテストするためのHDPIデバイスを持っていません:(私は@GoodBoyDigitalまたは@photonstormが見るためにこれを残しておきます。

@englercj 、これまで調べてくれてありがとう。 助けに感謝します。 @arahlfと@ n1313 、回避策を見つけましたか？

いいえ、まだです ：（

@bmantuano 、私は以前のコメントで説明したアプローチをまだ使用しており、何の問題もありません。

これについて何か動きはありましたか？ 前述のスケーリング方法@ n1313を使用しましたが、網膜デバイスのFPSが破壊されています。

何か案は？

@arahlfと@ n1313 、返信用のthx。

@GoodBoyDigital 、これはあなたのレーダーにありますか？ それが将来のアップデートで期待できるものであるかどうか、またはそれをハックする必要があるかどうかを知るためだけに役立ちます。

@GoodBoyDigitalここに私の声を追加したかっただけです。 Pixi.jsを使用して大規模マルチプレイヤーオンラインゲームに取り組んでいるのは、Pixi.jsが最もパフォーマンスの高いレンダリングエンジンであると特定したためですが、Retinaディスプレイのサポートには本当に苦労しています。

たまたま、私は実際に網膜サポートを追加する途中です:)このスペースを見てください。

素晴らしい：+1：

@GoodBoyDigital 、それは素晴らしいです！ 更新していただきありがとうございます。 楽しみにしています。

@GoodBoyDigitalそれはすごい！ 早く返事をくれてありがとう。 一般的に言うのは難しいと思いますが、Pixiの網膜サポートが行われると思う時期について、非常に大まかな見積もりを教えていただけますか？

その時間枠内にそれが行われなかった場合、私はあなたを見積もりに拘束したり文句を言ったりしません-あなたが私たちがどれくらい待っていると思うか一般的に興味があります！

やあみんな-新しい「dev-retina」ブランチをgitハブにアップロードしたところです。 みんなで遊べたらエースだろう。 そこにはたくさんの可動部分があるので、それをdevブランチにマージする前に、いくつかの実際のプロジェクトでテストするのが良いと考えました。

レンダラーにオプションパラメーターが追加されました。 新しいオプションの1つは解像度です。 したがって、レンダラーを網膜に設定するには、次のようなレンダラーを作成できます。

PIXI.autodetectRenderer(100, 100, {resolution:2})

すべてが同じように見えるはずです..しかし、解像度は高くなります:)

BaseTexturesにも解像度があります。 画像が高解像度の場合は、解像度を2に設定する必要があります。ロード時に解像度を自動的に2に設定する方法は、画像名に@ 2xを付けた画像を追加することです。

したがって、たとえば[email protected]をロードすると、

本当に遊ぶのが一番！ しかし、これはおそらく見た目ほど簡単ではないので、質問してください:)

+1

ねえマット。 これは素晴らしく見えます！ Canvasに、すっきりとしたテキストとアセットをレンダリングさせることができました。 私がテストした限り、サイズと位置は正しく処理されているようです。

私が問題を抱えていると思われるのは、Pixi.Graphicsの描画手順だけです。 それらをサクサクとレンダリングさせることができないようです。 ただし、レンダリングのサイズと位置は正しいです。

グラフィックオブジェクトも網膜である必要がありますか？ ビットマップとしてキャッシュしていますか
たまたまグラフィックオブジェクト？ それともまっすぐにPIXI.graphicsですか？

火曜、午前5時32分PMに2014年9月9日、上dcascais [email protected]は書きました：

ねえマット。 これは素晴らしく見えます！ Canvasをうまくレンダリングすることができました
鮮明なテキストとアセット。 サイズと位置は正しく処理されているようです
私がテストした限りでは。

私が問題を抱えていると思われるのはPixi.Graphicsだけです
描画手順。 それらをサクサクとレンダリングさせることができないようです。 NS
ただし、レンダリングのサイズと位置は正しいです。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
。

マットグローブ

_テクニカルパートナー_

電話番号：07708 114496 :: www.goodboydigital.com
1階、ユニット9B、クイーンズヤード、ホワイトポストレーン、ロンドン、E9 5EN
goodboy©。 全著作権所有。

@GoodBoyDigital問題を説明するとき、私が持っている構成の一部を見逃しました。 私が持っているセットアップは、PIXI.Graphicsオブジェクトに基づくテクスチャを持つPIXI.Spriteです。

問題とその結果のレンダリングを説明するためにJSFiddleを作成しました。
これは、PIXI.SpriteがPIXI.Graphicsに基づいてテクスチャを取得した場合のぼやけたグラフィック出力を示しています。
http://jsfiddle.net/hsv8Q/13/

PIXI.Graphicsを直接使用するこのセットアップは正常に機能します。
http://jsfiddle.net/hsv8Q/7/

ガッチャ！ 心配ありません-私はそれを引き起こしているものを正確に知っています:)
微調整したらお知らせします。 た！

ねえ@GoodBoyDigital 、網膜のサポートに感謝します！ 私たちがクライアントのためにそれを必要としているので、それも素晴らしい時期に来ます:)

網膜の枝で気付いた問題の1つは、レンダリングは優れているが、ヒット領域がずれていることです。 キャンバスは拡大縮小されますが、ヒット領域は拡大縮小されません。 そのため、画面中央のボタンをタッチしたい場合は、画面左上四分の一の中央をタッチして実際にタッチする必要があります。

この画面で、中央のボタンを押したい場合は、オレンジ色の円（後で例として追加しました）を押して実際に押す必要があります。 ヒットエリアは他のエリアに比例しません。

autodetectRenderer関数の「resolution」パラメーターについて。 「window.devicePixelRatio」を使用できますか？

上記の問題の迅速で汚い回避策を見つけました。 問題は、InteractionManagerのonTouchStart、onTouchMove、およびonTouchEnd関数にあるようです。 これらの関数のtouchData.global.xとtouchData.global.yの計算を変更し、this.resolutionで除算することで修正できます。

これで問題は解決したようですが、もっと良い解決策があるかもしれません。

こんにちは@GillesVermeulen
前回のコミットでヒットエリアのものを微調整しました。 最新バージョンのplsで試してみませんか？ た！

ちょっと@GoodBoyDigital 、迅速な返信とサポートに感謝しますが、あなたが話しているコミットがまだGithubにない可能性はありますか？

@ GillesVermeulen-タッチは今は良いはずです。 マウスイベントにのみ解像度の変更を適用していました。 それが今あなたのためにすべてうまくいくかどうか私に知らせてください。 ありがとう！

午後@dcascais ！ generateTexture関数の解像度を定義できるようにする修正を網膜ブランチにプッシュしました。

だから、すてきなサクサクした網膜の質感のためにあなたがこれをすることができるすべて：

var retinaTexture = myGraphicsObject.generateTexture(2)
var normalTexture = myGraphicsObject.generateTexture(1)
var smallTexture = myGraphicsObject.generateTexture(0.5)

それがあなたのためにどのようにうまくいくか私に知らせてください。 ありがとう！

@GoodBoyDigitalニース！ これは今では非常にうまく機能します。 これに関する更新に感謝します。

一般的な質問として。 この高解像度の更新に基づいて、パフォーマンス、メモリ、クラッシュの問題など、他の問題に遭遇したことはありますか？

ありがとう、マット。

聞いてうれしい！

そのための魔法の弾丸があったらいいのに！ 残念ながら、基本的にすべてのサイズが2倍になるため、解像度が高くなると、パフォーマンスとメモリ消費量に実際に影響します。 Retina画像は2倍のメモリを消費し、webGL / Canvasは2倍のピクセルでシーンをレンダリングする必要があります。 低メモリ/ CPUデバイスでは、これは本当のキラーになる可能性があるため、高解像度で何かを行うときは注意することが非常に重要です。

それらは4倍になると思いませんか？ また、Retinaディスプレイを使用している人も、高速のコンピューターを使用できることがほぼ保証されているのではないでしょうか。

@iirelu確かに本当です！ 4倍！
はい、Retinaディスプレイを搭載したコンピューターは非常にハイエンドであるため、問題が発生することはないと思います。

メモリの問題は、Retina画面を備えたモバイルデバイスで明らかになる可能性が高くなります。

@GoodBoyDigital 、タッチ機能のアップデートに感謝します。 それは私の一時的な修正と同じで、トリックをしているようです。

パフォーマンスについて：最近から、IOS7のCocoonJSでテストを行っています。 Phonegapなどで使用される標準のiOSWebviewと比較すると、パフォーマンスは間違いなく優れていますが、図形の描画は非常に負担が大きいようで、Safariのように図形がアンチエイリアス処理されていません。 これはCocoonJSに関連していて、Pixiとはほとんど関係がないと思います。

網膜（@ 2x）テクスチャにフィルタを適用するとすぐに、すべての配置がオフになっているように見えます。

ヘッズアップ@joaomorenoをありがとう！ 必ず見てください：+1：

あなたが提示するAPIについてのちょっとした質問： PIXI.autodetectRenderer(width, height, optionObject)とPIXI.autodetectRenderer(width, height, view, antialias, transparent間に衝突はありませんか？
src/pixi/utils/Detector.js説明されているように、 optionObject引数は2番目の署名から6番目の引数になりますか？ 3番目の引数はすでにDOMElementであるため、他にどこに置くべきか完全にはわかりませんね。

pixiの次のバージョンでは、新しいメソッドシグネチャが使用されます。これは重大な変更です。

@englercj迅速な対応に感謝します。 ドロップされたオプションは、他の方法で引き続きアクセスできますか？

optionsオブジェクトには、以前のすべてのオプションと新しいオプションが含まれています。 機能は削除されていません。オプションを別の方法で渡すだけです。

https://github.com/GoodBoyDigital/pixi.js/blob/dev/src/pixi/utils/Detector.js#L14 -L19

ああ、便利！ どうもありがとうございました。 ：+1：

Retinaサポートは現在devブランチにあります。 誰かがそれに問題を見つけたら私に知らせてください：+1：今のところ閉じています。

Retina MacBookProに問題があります。

{resolution:2}を使用していません。

ステージ幅は実際の網膜ピクセルを返します。 私の場合、それは2540ピクセルです。 テクスチャは2倍のサイズでレンダリングされ、幅も実際の1：1網膜ピクセルではありません。 したがって、300 x200の画像は600x 400の網膜ピクセルを占有しますが、幅は300を返します。

これは予想される動作ですか？

@PierBoverはい、オブジェクトの高さ/幅は実際には変更されていません。 異なる解像度でレンダリングされるだけです。

@englercjしかし、

やあみんな、私はここで何か間違ったことをしているのですか。 CanvasRendererの解像度をRetinaディスプレイ用に2にすると、キャンバスのサイズが2倍になり、 @x2画像のサイズが4倍になります。

    <strong i="7">@scale</strong> = window.devicePixelRatio
    width = 960/<strong i="8">@scale</strong>
    height = 556/<strong i="9">@scale</strong>

    renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:@scale})
    container = document.getElementById 'container'
    container.appendChild renderer.view

StackOverflowの質問
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

この号とこのブログ投稿http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/で、網膜画像は拡張の前に@ 2xまたは@ x2のいずれかが必要であると述べられています。 正しいのは@ 2xだと思います。 これは正しいです？

@ 2xは正しいです。 フォルダ名にすることも、画像名に追加することもできます。

assets/@2x/image.png or assets/[email protected]

@Adireddyありがとう。 それは戦いの半分です。 解像度を上げるのではなく、キャンバスを拡大縮小する理由はありますか？

ここでの網膜の同じ問題、解像度の使用法：2、いくつかのPIXI.Textアンカーの位置が間違っています。 CSSでキャンバスを再スケーリングしてもあまり役に立ちません。 解像度を1に設定し、テキストのフォントサイズを2倍にしてから、半分に拡大縮小する必要がありました。

それでも、テキストはまだ滑らかに見えません。

こんにちはElyx0、あなたはここで利用可能なモバイル用の私のテキストプラグインを試すことができます： https ：

それはあなたの問題を解決しますか？

こんにちは@JiDW 、私はついにそれを修正しました。 私は裸のPIXI.jsを使用しているので、Cocoonがありません。ビュー・キャンバスが正しくセットアップされていませんでした。 THX

@GillesVermeulen

プロジェクトで高DPIデバイスをサポートすることを検討しているので、次のことを考えています。

キャンバスは拡大縮小されますが、ヒット領域は拡大縮小されません。

これはPixiJSで解決されましたか？ （例えば、それ以降/最近のバージョン）

ねえ@tobireif 、そうだと思います。 長い間問題はありませんでしたが、それはPixiv2の場合です。 新しいバージョンでも問題はないと思います。

@GillesVermeulenいいですね！ ありがとう！

キャンバス（pixi.jsなし）を使用して私のために働いたCSSメソッド
canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
これが誰かを助けることができる場合に備えて。

やあ ！

前回のプロジェクトで問題が発生しました： http ：

オブジェクトで適切なピクセル解像度を取得できません...それがレンダラーに関するものなのか、テクスチャを生成したグラフィックスに関するものなのかわかりませんが、どちらの場合もwindow.devicePixelRatioを追加しましたが、表示されません影響力を持つこと。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。