Pixi.js: Dukungan retina

Saya setuju dengan bug ini. Sebagai referensi, beginilah cara menanganinya secara normal: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Ini juga masalah dengan teks.

Katakanlah Anda memiliki layar retina dengan devicePixelRatio 2 dan Anda ingin mendapatkan kanvas 400x300 yang tampak tajam. Untuk mendapatkannya, Anda perlu menginisialisasi penyaji PIXI dengan dimensi kanvas yang Anda inginkan dikalikan dengan devicePixelRatio (800x600) dan kemudian secara manual menurunkan skala kanvas menjadi 400x300 menggunakan css. Dan kemudian, tentu saja, Anda harus memasukkan penskalaan ini ke dalam semua perhitungan Anda: posisi, ukuran font, lebar garis, aset yang dimuat, dll.

Saya menggunakan sesuatu seperti ini:

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

Adakah rencana untuk mengatasi ini segera? Harus menskalakan setiap ukuran, posisi, ukuran font benar-benar menyakitkan. Terutama ketika ada cara yang cukup sederhana untuk melakukan ini dengan kanvas standar.

Sulit untuk melakukan ukuran perpustakaan ini, karena tergantung pada apakah sprite Anda hidpi atau tidak. Kami telah menyimpannya di userland karena kami tidak tahu sprite apa yang Anda gunakan untuk skala hidpi, jika ada, dan kapan; tapi Anda lakukan.

Hai @englercj . Dengan sprite, maksud Anda aset yang dimuat oleh pengguna?

@dcascais ya

@englercj Terima kasih atas balasan Anda.

Saat ini, jika tampilan perender diskalakan dengan trik CSS (dijelaskan di tautan saya sebelumnya) untuk mendapatkan resolusi tampilan yang tepat, apa pun yang ditambahkan ke panggung dan kemudian dirender dengan tampilan perender yang diskalakan tidak diskalakan, ia mempertahankan pikselnya nilai, jadi pada dasarnya setengah ukuran.

Ini termasuk konten yang dirender secara dinamis pada konteks grafis, teks, dan aset yang dimuat.

Platform lain menganggap bahwa itu adalah tanggung jawab pengguna untuk menyediakan aset yang tepat untuk kepadatan layar yang berbeda, tetapi internal bekerja dengan mulus dengan properti faktor skala yang memungkinkan Anda dengan mudah memutuskan kepadatan tampilan yang ingin Anda targetkan. Saya ingin tahu apakah ini akan menjadi pendekatan yang lebih sederhana untuk pengguna Pixi. Membiarkan mereka hanya khawatir tentang aset yang tepat dan memastikan bahwa faktor skala diatur dengan benar.

Apakah Anda memiliki saran tentang bagaimana mencapai penskalaan yang diharapkan dari konten yang ditambahkan ke panggung?

Menskalakan nilai x, y, lebar, dan tinggi secara manual dari setiap item pada daftar tampilan dan dalam hal teks, menentukan string berbeda yang memiliki nama font dengan ukuran yang tepat bisa menjadi sangat rumit dan rawan bug jika Anda berurusan dengan masalah besar proyek.

Terima kasih.

Menarik, saya ingin melihat bagaimana beberapa sistem tersebut bekerja. Sejauh menskalakan setiap item secara individual, sepertinya itu bukan cara yang tepat. Karena ini adalah grafik adegan, tidak bisakah Anda menskalakan DOC root Anda dengan tepat?

@englercj , saya telah mencoba ini di kotak pasir dan sementara itu meniup semuanya kembali ke ukuran yang tepat, itu membuat mereka pixelated. Apakah Anda mengharapkan perilaku yang berbeda?

@bmantuano Saya berharap itu diskalakan dengan algoritma yang dipilih (terdekat, linier, bicubic, dll).

Chad, terima kasih telah menanggapi di sini. Untuk algoritme penskalaan, apakah Anda mengacu pada PIXI.scaleModes? Jika demikian, tampaknya opsi bicubic tidak ada.

@englercj Berikut adalah beberapa JSFiddles yang menunjukkan apa yang kami coba lakukan untuk mendapatkan teks dan grafik yang tajam (digambar secara dinamis, bukan aset) pada tampilan beresolusi tinggi.

Penskalaan kanvas dan wadah objek tampilan utama yang diskalakan (Ukuran benar tetapi buram dan dengan beberapa masalah)
http://jsfiddle.net/hsv8Q

Penskalaan kanvas (tampil dengan ukuran yang tajam tetapi salah dan dengan beberapa masalah)
http://jsfiddle.net/hsv8Q/1

Tidak ada penskalaan (Ukuran benar tetapi buram)
http://jsfiddle.net/hsv8Q/2

Semoga dapat membantu Anda memahami apa yang kami maksud. Beri tahu kami jika ada hal lain yang harus kami coba.

Terima kasih @dcascais telah menambahkan biola itu. @englercj , yang pertama adalah apa yang Anda sarankan, bukan? Apakah Anda dapat melihat pikselasi pada perangkat DPI tinggi di sana?

@bmantuano Sayangnya saya tidak memiliki perangkat HDPI untuk mengujinya :( Saya akan meninggalkan yang ini untuk dilihat oleh @photonstorm .

@englercj , terima kasih telah melihat sejauh ini. Hargai bantuannya. @arahlf dan @n1313 ,

Tidak, belum :(

@bmantuano , saya masih menggunakan pendekatan yang dijelaskan dalam komentar saya sebelumnya dan tidak memiliki masalah apa pun.

Apakah sudah ada gerakan dalam hal ini? Saya telah menggunakan metode penskalaan @ n1313 yang disebutkan tetapi itu menghancurkan FPS pada perangkat retina.

Ada ide?

@arahlf dan @n1313 , thx atas jawabannya.

@GoodBoyDigital , apakah ini ada di radar Anda? Akan sangat membantu hanya untuk mendapatkan ide jika itu adalah sesuatu yang dapat kita harapkan dalam pembaruan di masa mendatang atau apakah kita perlu meretasnya.

@GoodBoyDigital Hanya ingin menambahkan suara saya di sini. Saya sedang mengerjakan game Massively Multiplayer Online menggunakan Pixi.js karena kami mengidentifikasinya sebagai mesin rendering paling berperforma di luar sana, tetapi kami benar-benar membutuhkan dukungan tampilan retina!

Seperti yang terjadi, saya sebenarnya setengah jalan menambahkan dukungan retina :) Perhatikan ruang ini ..

Luar biasa :+1:

@GoodBoyDigital , itu luar biasa! Terima kasih atas pembaruannya. Menantikannya.

@GoodBoyDigital Itu luar biasa! Terima kasih banyak untuk kembali kepada saya begitu cepat. Saya tahu ini umumnya sulit untuk dikatakan, tetapi bisakah Anda memberi saya perkiraan kasarnya ketika Anda berpikir dukungan retina akan dilakukan untuk Pixi?

Saya tidak akan menahan Anda untuk memperkirakan atau mengeluh jika itu tidak dilakukan dalam jangka waktu itu-- hanya ingin tahu secara umum berapa lama Anda pikir kami akan menunggu!

Hai teman-teman - baru saja mengunggah cabang "dev-retina" baru ke git hub. Ini akan menjadi ace jika Anda semua bisa bermain. Ada banyak bagian yang bergerak di sana, jadi saya pikir akan lebih baik untuk mengujinya dengan beberapa proyek nyata sebelum menggabungkannya ke cabang dev.

Renderer sekarang memiliki parameter opsi. Salah satu opsi baru adalah resolusi. Jadi untuk mengatur penyaji ke retina Anda dapat membuat penyaji seperti ini:

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

Semuanya harus terlihat sama .. tetapi resolusinya akan lebih tinggi :)

BaseTextures juga memiliki resolusi sekarang juga. Jika gambar beresolusi tinggi maka Anda perlu mengatur resolusi ke 2. Cara untuk mengatur resolusi ke dua secara otomatis saat dimuat adalah dengan menambahkan gambar dengan @2x ke nama gambar.

Jadi jika Anda memuat katakan: [email protected] maka pixi akan menganggapnya memiliki resolusi 2.

Terbaik untuk bermain benar-benar! Tapi tolong ajukan pertanyaan karena ini mungkin tidak semudah kelihatannya :)

+1

Hei Matt. Ini terlihat bagus! Saya bisa mendapatkan Canvas untuk membuat teks dan aset yang bagus dan tajam. Ukuran dan Posisi tampaknya ditangani dengan benar sejauh yang saya uji.

Satu-satunya hal yang sepertinya saya alami adalah prosedur menggambar Pixi.Graphics. Sepertinya saya tidak bisa membuat mereka merender dengan tajam. Ukuran dan posisi rendering sudah benar.

Objek grafis harus retina juga? apakah Anda melakukan cache sebagai bitmap?
objek grafis secara kebetulan? atau langsung ke PIXI.graphics?

Pada Selasa, 9 Sep 2014 pukul 17.32, dcascais [email protected] menulis:

Hei Matt. Ini terlihat bagus! Saya bisa membuat Kanvas menjadi bagus
dan teks dan aset yang tajam. Ukuran dan Posisi tampaknya ditangani dengan benar
sejauh yang saya telah diuji.

Satu-satunya hal yang sepertinya bermasalah adalah Pixi.Graphics
prosedur menggambar. Sepertinya saya tidak bisa membuat mereka merender dengan tajam. NS
ukuran dan posisi rendering sudah benar.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Mat Groves

_Mitra Teknis_

Telepon: 07708 114496 :: www.goodboydigital.com
Lantai Pertama, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
anak baik ©. Seluruh hak cipta.

@GoodBoyDigital Saat menjelaskan masalah saya melewatkan bagian dari konfigurasi yang saya miliki. Setup yang saya miliki adalah PIXI.Sprite dengan tekstur berdasarkan objek PIXI.Graphics.

Saya membuat JSFiddle untuk membantu menjelaskan masalah dan rendering yang dihasilkan:
Yang ini menunjukkan output grafik buram jika PIXI.Sprite mendapatkan tekstur berdasarkan PIXI.Graphics:
http://jsfiddle.net/hsv8Q/13/

Pengaturan ini dengan penggunaan langsung PIXI.Graphics berfungsi dengan baik:
http://jsfiddle.net/hsv8Q/7/

kena kau! jangan khawatir - saya tahu persis apa yang menyebabkannya :)
Akan memberi tahu Anda setelah di-tweak. ta!

Hai @GoodBoyDigital , terima kasih atas dukungan retinanya! Itu datang pada waktu yang tepat juga, karena kami membutuhkannya untuk klien kami :)

Satu masalah yang saya perhatikan di cabang retina: rendering lebih baik, tetapi area hit tidak sejajar. Kanvas diskalakan, tetapi area yang terkena tidak. Jadi jika saya ingin menyentuh tombol di tengah layar, saya harus menyentuh bagian tengah kiri atas layar untuk benar-benar menyentuhnya.

Di layar ini, jika saya ingin menekan tombol di tengah, saya harus menekan lingkaran oranye (yang saya tambahkan nanti sebagai contoh) untuk benar-benar menekannya. Hitarea tidak berskala dengan yang lainnya.

Tentang parameter "resolusi" dalam fungsi autodetectRenderer; kita hanya bisa menggunakan "window.devicePixelRatio" kan?

Saya menemukan solusi cepat/kotor untuk masalah yang saya jelaskan di atas. Masalahnya tampaknya terletak di fungsi onTouchStart, onTouchMove dan onTouchEnd dari InteractionManager. Ini dapat diperbaiki dengan mengubah perhitungan touchData.global.x dan touchData.global.y dalam fungsi tersebut dan membaginya dengan this.resolusi.

Ini tampaknya memperbaiki masalah, tetapi mungkin ada solusi yang jauh lebih baik.

hai @GillesVermeulen
Saya mengubah hal-hal area hit di komit terakhir saya. Akan mencoba dengan versi terbaru pls? ta!

Hai @GoodBoyDigital , terima kasih atas balasan dan dukungan cepatnya, tetapi mungkinkah komit yang Anda bicarakan belum ada di Github?

@GillesVermeulen - sentuhan seharusnya bagus sekarang. Saya hanya menerapkan perubahan resolusi ke acara mouse. Beri tahu saya jika semuanya berfungsi baik untuk Anda sekarang. Terima kasih!

Sore @dcascais ! Saya baru saja mendorong perbaikan ke cabang retina yang memungkinkan Anda menentukan resolusi fungsi generateTexture.

Jadi untuk tekstur retina renyah yang bagus, Anda bisa melakukan ini:

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

beri tahu saya jika itu berhasil untuk Anda. Terima kasih!

@GoodBoyDigital Bagus! Ini sekarang bekerja dengan cukup baik. Saya menghargai pembaruan tentang ini.

Sebagai pertanyaan umum. Pernahkah Anda atau orang lain mengalami hal-hal lain seperti kinerja, memori, atau masalah mogok berdasarkan pembaruan resolusi tinggi ini?

Terima kasih, Mat.

Senang mendengar!

Berharap ada peluru ajaib untuk yang itu! Sayangnya resolusi yang lebih tinggi memang akan memengaruhi kinerja dan konsumsi memori karena Anda pada dasarnya semuanya akan berukuran dua kali lipat. Gambar retina menggunakan memori 2x lebih banyak dan webGL / Canvas perlu merender adegan dengan piksel 2x lebih banyak. Pada perangkat memori / cpu rendah ini bisa menjadi pembunuh nyata sehingga sangat penting untuk berhati-hati saat melakukan sesuatu dengan resolusi tinggi.

Bukankah itu akan menjadi 4x? Juga bukankah cukup menjamin bahwa orang dengan layar retina juga akan memiliki komputer yang cepat?

@iirelu memang benar! 4x lipat!
Ya, saya tidak membayangkan akan ada masalah pada komputer dengan tampilan retina karena mereka akan cukup canggih.

Masalah memori akan lebih mungkin muncul pada perangkat seluler yang memiliki layar retina.

@GoodBoyDigital , terima kasih atas pembaruan untuk fungsi sentuh. Itu sama dengan perbaikan sementara saya dan sepertinya berhasil.

Pada kinerja: sejak baru-baru ini saya telah menguji hal-hal di CocoonJS di IOS7. Performanya pasti lebih baik dibandingkan dengan tampilan Web iOS standar yang digunakan oleh hal-hal seperti Phonegap, tetapi menggambar bentuk tampaknya sangat melelahkan dan bentuknya tidak anti-alias seperti di Safari. Saya membayangkan ini terkait dengan CocoonJS dan tidak ada hubungannya dengan Pixi.

Segera setelah Anda menerapkan filter ke tekstur retina (@2x), semua pemosisian tampaknya tidak aktif.

Terima kasih atas perhatiannya @joaomoreno ! Pastikan untuk melihat :+1:

Sekedar pertanyaan kecil tentang API yang Anda hadirkan: Apakah tidak ada bentrokan antara PIXI.autodetectRenderer(width, height, optionObject) dan PIXI.autodetectRenderer(width, height, view, antialias, transparent )?
Apakah itu akan menjadikan argumen optionObject argumen keenam dari tanda tangan kedua seperti yang dijelaskan dalam src/pixi/utils/Detector.js ? Saya tidak sepenuhnya yakin di mana lagi harus meletakkannya, karena argumen ketiga sudah menjadi DOMElement, bukan?

Versi pixi berikutnya akan menggunakan tanda tangan metode baru, ini adalah perubahan besar.

@englercj Terima kasih banyak atas tanggapan cepat Anda. Apakah opsi yang dijatuhkan masih dapat diakses dengan cara lain?

Objek opsi berisi semua opsi sebelumnya dan yang baru. Fungsionalitas tidak dihapus, Anda hanya memberikan opsi secara berbeda:

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

Oh, berguna! Terima kasih banyak untuk itu. :+1:

dukungan retina ada di cabang dev sekarang. Tolong beri tahu saya jika ada yang menemukan masalah dengannya :+1: tutup untuk saat ini.

Saya mengalami masalah dengan retina macbook pro.

Saya tidak menggunakan {resolution:2} .

Lebar panggung mengembalikan piksel retina nyata. Dalam kasus saya ini adalah 2540 piksel. Tekstur dirender dengan ukuran dua kali lipat dan lebarnya juga tidak dalam piksel retina 1:1 yang sebenarnya. Jadi gambar 300 x 200 menempati 600 x 400 piksel retina, tetapi lebarnya menghasilkan 300.

Apakah ini perilaku yang diharapkan?

@PierBover Ya, tinggi/lebar objek sebenarnya tidak berubah. Itu hanya diberikan pada resolusi yang berbeda.

@englercj tapi kenapa ada dimensi dalam piksel nyata dan piksel ganda bercampur?

Hai teman-teman, apakah saya melakukan sesuatu yang salah di sini. Jika saya membuat resolusi CanvasRenderer 2 untuk tampilan retina, ukuran kanvas saya menjadi dua kali lipat dan gambar @x2 empat kali lebih besar.

    <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

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

Dalam edisi ini dan dalam posting blog ini http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ gambar retina disebutkan membutuhkan @2x atau @x2 sebelum ekstensi . Saya berasumsi yang benar adalah @2x . Apakah ini benar?

@2x benar. Itu bisa berupa nama folder atau ditambahkan ke nama gambar.

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

@Adireddy terima kasih. Itu setengah pertempuran. Adakah yang tahu mengapa kanvas saya diskalakan daripada resolusinya meningkat?

Masalah yang sama di sini untuk retina, penggunaan resolusi apa pun: 2, membuat beberapa posisi jangkar PIXI.Text salah. Menskalakan kembali kanvas di CSS tidak banyak membantu. Saya harus mengatur resolusi ke 1, menggandakan ukuran font Teks saya, lalu menskalakannya menjadi setengah.

Dan bahkan dengan itu teksnya masih tidak terlihat mulus.

Hai Elyx0, Anda dapat mencoba plugin teks saya untuk seluler yang tersedia di sini: https://github.com/JiDW/pixi-cocoontext

Apakah itu memperbaiki masalah Anda?

Hai @JiDW , akhirnya saya memperbaikinya. Saya menggunakan PIXI.js kosong jadi tidak ada Kepompong untuk saya, kanvas tampilan saya tidak diatur dengan benar. Terima kasih

@GillesVermeulen

Saya sedang mempertimbangkan untuk mendukung perangkat DPI Tinggi di proyek saya, jadi saya bertanya-tanya:

Kanvas diskalakan, tetapi area yang terkena tidak.

Apakah ini telah diselesaikan di PixiJS? (misalnya dalam versi yang lebih baru/terbaru)

Hei @tobireif , saya pikir begitu ya. Sudah lama tidak ada masalah, tapi itu dengan Pixi v2. Saya juga tidak berpikir itu masalah dengan versi yang lebih baru.

@GillesVermeulen Kedengarannya bagus! Terima kasih!

Metode CSS yang bekerja untuk saya menggunakan kanvas (tanpa pixi.js)
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; }
Kalau-kalau ini bisa membantu siapa saja.

Hai !

Saya mengalami masalah dengan proyek terakhir saya: http://romaincazier.com/davatars/

Saya tidak bisa mendapatkan resolusi piksel yang tepat pada objek saya... Saya tidak tahu apakah ini tentang penyaji atau grafik tempat saya menghasilkan tekstur, tetapi dalam kedua kasus saya menambahkan window.devicePixelRatio tetapi sepertinya tidak memiliki pengaruh apapun.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.