Pixi.js: Prise en charge de la rétine

Je suis d'accord avec ce bug. À titre de référence, voici comment cela peut être normalement géré : http://www.html5rocks.com/en/tutorials/canvas/hidpi/

C'est aussi un problème avec le texte.

Supposons que vous ayez un écran Retina avec un appareil PixelRatio de 2 et que vous souhaitiez obtenir une toile 400x300 nette. Pour obtenir cela, vous devez initialiser le moteur de rendu PIXI avec les dimensions de votre toile souhaitées multipliées par devicePixelRatio (800x600), puis réduire manuellement la toile à 400x300 à l'aide de css. Et puis, bien sûr, vous devrez intégrer cette mise à l'échelle dans tous vos calculs : positions, tailles de police, largeurs de ligne, actifs chargés, etc.

J'utilise quelque chose comme ça :

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

Avez-vous l'intention de vous attaquer à cela bientôt ? Devoir mettre à l'échelle chaque taille, position, taille de police est vraiment pénible. Surtout quand il existe un moyen assez simple de le faire avec le canevas standard.

Il est difficile de faire cette taille de bibliothèque, car cela dépend si vos sprites sont en hidpi ou non. Nous l'avons gardé dans l'espace utilisateur parce que nous ne savons pas quels sont vos sprites à mettre à l'échelle pour hidpi, le cas échéant, et quand ; mais toi si.

Salut @englercj . Par sprites, entendez-vous les assets chargés par l'utilisateur ?

@dcascais oui

@englercj Merci pour votre réponse.

Actuellement, si la vue du rendu est mise à l'échelle avec l'astuce CSS (décrite dans mon lien précédent) pour obtenir une résolution d'affichage appropriée, tout ce qui est ajouté à la scène puis rendu avec la vue mise à l'échelle du rendu n'est pas mis à l'échelle en conséquence, il conserve son pixel valeurs, donc fondamentalement la moitié de la taille.

Cela inclut le contenu rendu dynamiquement sur le contexte graphique, le texte et les actifs chargés.

D'autres plates-formes supposent qu'il incombe à l'utilisateur de fournir les ressources appropriées pour les différentes densités d'écran, mais les composants internes fonctionnent de manière transparente avec une propriété de facteur d'échelle qui vous permet de décider facilement quelle densité d'affichage vous souhaitez cibler. Je me demande si ce serait une approche plus simple pour les utilisateurs de Pixi. Les laisser se soucier uniquement des actifs appropriés et s'assurer que le facteur d'échelle est correctement défini.

Avez-vous une suggestion sur la façon d'atteindre la mise à l'échelle attendue du contenu ajouté à la scène ?

Mettre à l'échelle manuellement les valeurs x, y, largeur et hauteur de chaque élément de la liste d'affichage et dans le cas du texte, définir différentes chaînes qui ont des noms de police de la bonne taille peut devenir très fastidieux et sujet aux bugs si vous avez affaire à un gros projet.

Merci.

Intéressant, j'aimerais voir comment certains de ces systèmes fonctionnent. En ce qui concerne la mise à l'échelle de chaque élément individuellement, cela ne semble pas être la voie à suivre. Puisqu'il s'agit d'un graphique de scène, ne pourriez-vous pas simplement mettre à l'échelle votre DOC racine de manière appropriée ?

@englercj , j'avais essayé cela dans un bac à sable et bien qu'il ait ramené les choses à la bonne taille, cela les a laissés pixelisés. Vous attendriez-vous à un comportement différent ?

@bmantuano Je m'attends à ce qu'il soit mis à l'échelle avec l'algorithme qui a été choisi (le plus proche, linéaire, bicubique, etc.).

Chad, merci d'avoir répondu ici. En ce qui concerne l'algorithme de mise à l'échelle, faites-vous référence aux PIXI.scaleModes ? Si c'est le cas, il semble que l'option bicubique ne soit pas là.

@englercj Voici quelques JSFiddles qui montrent ce que nous essayons de faire pour obtenir du texte et des graphiques nets (dessinés dynamiquement, pas des actifs) sur des écrans haute résolution.

Mise à l'échelle du canevas et conteneur d'objets d'affichage principal mis à l'échelle (taille correcte mais floue et avec quelques problèmes)
http://jsfiddle.net/hsv8Q

Mise à l'échelle du canevas (affiche une taille nette mais incorrecte et avec quelques problèmes)
http://jsfiddle.net/hsv8Q/1

Pas de mise à l'échelle (taille correcte mais floue)
http://jsfiddle.net/hsv8Q/2

J'espère que cela vous aidera à comprendre ce que nous voulons dire. Faites-nous savoir s'il y a autre chose que nous devrions essayer.

Merci @dcascais d' avoir ajouté ces violons. @englercj , le premier est ce que vous

@bmantuano Malheureusement, je n'ai pas d'appareil HDPI pour en tester un :( Je vais laisser celui-ci à @GoodBoyDigital ou @photonstorm .

@englercj , merci de l'avoir examiné jusqu'à présent. Appréciez l'aide. @arahlf et @n1313 , avez-vous trouvé une solution de contournement ?

Non pas encore :(

@bmantuano , j'utilise toujours l'approche décrite dans mon commentaire précédent et je n'ai aucun problème.

Y a-t-il eu un mouvement à ce sujet? J'ai utilisé la méthode de mise à l'échelle mentionnée @ n1313, mais elle détruit les FPS sur les appareils Retina.

Des idées?

@arahlf et @n1313 ,

@GoodBoyDigital , est-ce sur votre radar ? Ce serait utile juste pour avoir une idée si c'est quelque chose auquel nous pouvons nous attendre dans une future mise à jour ou si nous devons le contourner.

@GoodBoyDigital Je voulais juste ajouter ma voix ici. Je travaille sur un jeu en ligne massivement multijoueur utilisant Pixi.js parce que nous l'avons identifié comme le moteur de rendu le plus performant du marché, mais nous avons vraiment du mal pour la prise en charge de l'affichage Retina !

Il se trouve que je suis en fait à mi-chemin de l'ajout de la prise en charge de la rétine :) Surveillez cet espace ..

Génial :+1:

@GoodBoyDigital , c'est fantastique ! Merci pour la mise à jour. J'attends ça avec impatience.

@GoodBoyDigital C'est génial ! Merci beaucoup d'être revenu vers moi si rapidement. Je sais que c'est généralement difficile à dire, mais pourriez-vous me donner une estimation très approximative du moment où vous pensez que le support de la rétine sera fait pour Pixi ?

Je ne vous tiendrai pas à l'estimation ou ne me plaindrai pas si ce n'est pas fait dans ce laps de temps - je suis simplement curieux de savoir combien de temps vous pensez que nous attendrons !

Hé les gars, je viens de télécharger la nouvelle branche "dev-retina" sur git hub. Ce serait génial si vous pouviez tous jouer. Il y a beaucoup de pièces mobiles là-dedans, alors j'ai pensé qu'il serait bon de le tester avec de vrais projets avant de le fusionner dans la branche de développement.

Le moteur de rendu a maintenant un paramètre d'option. L'une des nouvelles options est la résolution. Donc, pour définir le moteur de rendu sur Retina, vous pouvez créer un moteur de rendu comme celui-ci :

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

Tout devrait se ressembler.. mais la résolution sera plus élevée :)

BaseTextures a également une résolution maintenant. Si l'image est une haute résolution, vous devrez définir la résolution sur 2. Le moyen d'obtenir la résolution automatiquement définie sur deux lors du chargement consiste à ajouter l'image avec @2x au nom de l'image.

Donc, si vous chargez, dites: [email protected] alors pixi supposera qu'il a une résolution de 2.

Le mieux est d'avoir un jeu vraiment! Mais s'il vous plaît posez des questions car ce n'est probablement pas aussi simple qu'il y paraît :)

+1

Salut Matt. Cela a l'air super ! J'ai pu faire en sorte que le canevas rende du texte et des actifs agréables et nets. La taille et la position semblent être correctement gérées dans la mesure où j'ai testé.

La seule chose avec laquelle je semble avoir des problèmes, ce sont les procédures de dessin de Pixi.Graphics. Je n'arrive pas à obtenir que ceux-ci soient rendus nets. La taille et la position du rendu sont correctes, cependant.

Les objets graphiques devraient-ils aussi être de la rétine ? mettez-vous en cache en tant que bitmap le
objet graphique par hasard ? ou est-ce directement PIXI.graphics ?

Le mardi 9 septembre 2014 à 17h32, dcascais [email protected] a écrit :

Salut Matt. Cela a l'air super ! J'ai pu obtenir un rendu agréable de la toile
et un texte et des actifs nets. La taille et la position semblent être correctement gérées
pour autant que j'ai testé.

La seule chose avec laquelle je semble avoir des problèmes est le Pixi.Graphics
procédures de dessin. Je n'arrive pas à obtenir que ceux-ci soient rendus nets. Les
la taille et la position du rendu sont correctes, cependant.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Les bosquets des tapis

_Partenaire technique_

Téléphone : 07708 114496 :: www.goodboydigital.com
Premier étage, unité 9B, Queens Yard, White Post Lane, Londres, E9 5EN
bon garçon©. Tous les droits sont réservés.

@GoodBoyDigital Lors de la description du problème, j'ai raté une partie de la configuration que j'ai. La configuration que j'ai est un PIXI.Sprite avec une texture basée sur un objet PIXI.Graphics.

J'ai créé un JSFiddle pour aider à décrire le problème et le rendu résultant :
Celui-ci montre la sortie graphique floue si le PIXI.Sprite obtient une texture basée sur un PIXI.Graphics :
http://jsfiddle.net/hsv8Q/13/

Cette configuration avec une utilisation directe d'un PIXI.Graphics fonctionne correctement :
http://jsfiddle.net/hsv8Q/7/

je t'ai eu! pas de soucis - je sais exactement ce qui cause ça :)
Je vous le ferai savoir une fois que c'est modifié. ta!

Salut @GoodBoyDigital , merci pour le soutien de la rétine ! Cela arrive aussi à un bon moment, car nous en avons besoin pour notre client :)

Un problème que j'ai remarqué dans la branche rétine : le rendu est meilleur, mais les zones touchées sont mal alignées. Le canevas est mis à l'échelle, mais pas les zones touchées. Donc, si je veux toucher un bouton au centre de l'écran, je dois toucher le centre du quart supérieur gauche de l'écran pour le toucher réellement.

Dans cet écran, si je veux appuyer sur le bouton au centre, je dois appuyer sur le cercle orange (que j'ai ajouté plus tard à titre d'exemple) pour le frapper. Le hitarea n'évolue pas avec le reste.

À propos du paramètre "résolution" dans la fonction autodetectRenderer ; nous pourrions simplement utiliser "window.devicePixelRatio", non ?

J'ai trouvé une solution de contournement rapide/sale pour le problème que j'ai décrit ci-dessus. Le problème semble être localisé dans les fonctions onTouchStart, onTouchMove et onTouchEnd de l'InteractionManager. Il peut être corrigé en modifiant le calcul de touchData.global.x et touchData.global.y dans ces fonctions et en les divisant par this.resolution.

Cela semble résoudre le problème, mais il pourrait y avoir une bien meilleure solution.

salut @GillesVermeulen
J'ai modifié les éléments de la zone touchée dans mon dernier commit. Est-ce qu'essayer avec la dernière version pls? ta!

Salut @GoodBoyDigital , merci pour la réponse rapide et le support, mais est-il possible que le commit dont vous parlez ne soit pas encore sur Github ?

@GillesVermeulen - le toucher devrait être bon maintenant. J'appliquais uniquement le changement de résolution aux événements de la souris. Faites-moi savoir si tout fonctionne bien pour vous maintenant. Merci!

Après-midi @dcascais ! Je viens de pousser un correctif sur la branche retina qui vous permettra de définir la résolution de la fonction generateTexture.

Donc, pour une belle texture de rétine croustillante, tout ce que vous pouvez faire :

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

dis-moi si ça marche pour toi. Merci!

@GoodBoyDigital Nice ! Cela fonctionne maintenant assez bien. J'apprécie la mise à jour à ce sujet.

Comme question générale. Avez-vous ou d'autres personnes rencontré d'autres problèmes tels que des problèmes de performances, de mémoire ou de plantage basés sur cette mise à jour haute résolution ?

Merci, Mat.

Heureux d'entendre!

J'aimerais qu'il y ait une solution miracle pour celui-là ! Malheureusement, une résolution plus élevée affectera en effet les performances et la consommation de mémoire, car la taille de tout sera pratiquement doublée. Les images Retina occupent 2 fois plus de mémoire et webGL / Canvas devra restituer une scène avec 2 fois plus de pixels. Sur les périphériques à faible mémoire / processeur, cela pourrait être un véritable tueur, il est donc très important d'être attentif lorsque vous faites quoi que ce soit avec une résolution élevée.

Ces chiffres ne seraient-ils pas 4x ? N'est-il pas non plus garanti que les personnes avec des écrans Retina auront également des ordinateurs rapides ?

@iirelu vrai en effet ! 4x plus !
Oui, je n'imagine pas qu'il y aurait des problèmes sur les ordinateurs avec écran Retina car ils seraient assez haut de gamme.

Les problèmes de mémoire seraient plus susceptibles de se manifester sur les appareils mobiles dotés d'écrans de rétine.

@GoodBoyDigital , merci pour la mise à jour des fonctions tactiles. C'était la même chose que ma solution temporaire et semble faire l'affaire.

Sur les performances : depuis peu, je teste des trucs dans CocoonJS sur IOS7. Les performances sont nettement meilleures par rapport à la vue Web iOS standard utilisée par des choses comme Phonegap, mais dessiner des formes semble être très éprouvant et les formes ne sont pas anti-aliasées comme dans Safari. J'imagine que c'est lié à CocoonJS et a peu à voir avec Pixi.

Dès que vous appliquez un filtre à une texture rétine (@2x), tout positionnement semble être désactivé.

Merci pour l' alerte @joaomoreno ! Je ne manquerai pas d'y jeter un œil :+1:

Juste une petite question sur l'API que vous présentez : n'y a-t-il pas un conflit entre PIXI.autodetectRenderer(width, height, optionObject) et PIXI.autodetectRenderer(width, height, view, antialias, transparent ) ?
Est-ce que cela ferait de l'argument optionObject le sixième argument de la deuxième signature comme décrit dans src/pixi/utils/Detector.js ? Je ne sais pas trop où le mettre, car le troisième argument est déjà un DOMElement, n'est-ce pas ?

La prochaine version de pixi utilisera la nouvelle signature de méthode, il s'agit d'un changement décisif.

@englercj Merci beaucoup pour votre réponse rapide. Les options supprimées resteront-elles accessibles d'une autre manière, alors ?

L'objet options contient toutes les options précédentes et les nouvelles. La fonctionnalité n'est pas supprimée, vous passez simplement les options différemment :

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

Ah, pratique ! Merci beaucoup pour ça. :+1:

le support de la rétine est maintenant dans la branche dev. S'il vous plaît laissez-moi savoir si quelqu'un trouve des problèmes avec cela :+1: fermeture pour l'instant.

J'ai un problème avec un macbook pro retina.

Je n'utilise pas {resolution:2} .

La largeur de la scène renvoie les vrais pixels de la rétine. Dans mon cas, il s'agit de 2540 pixels. Les textures sont rendues au double de leur taille et leurs largeurs ne sont pas non plus en vrais pixels rétine 1:1. Ainsi, une image de 300 x 200 occupe 600 x 400 pixels de rétine, mais la largeur renvoie 300.

Est-ce un comportement attendu ?

@PierBover Oui, la hauteur/largeur de l'objet n'a pas réellement changé. Il est juste rendu à une résolution différente.

@englercj mais comment se fait-il qu'il y ait des dimensions en pixels réels et en pixels doublés mélangés ?

Hé les gars, est-ce que je fais quelque chose de mal ici. Si je fais la résolution 2 de mon CanvasRenderer pour un affichage rétine, cela fait que ma toile est deux fois plus grande et mes images @x2 quatre fois plus grandes.

    <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

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

Dans ce numéro et dans cet article de blog http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ les images de rétine sont mentionnées pour avoir besoin d'un @2x ou d'un @x2 avant l'extension . Je suppose que le bon est @2x . Est-ce correct?

@2x est correct. Il peut s'agir d'un nom de dossier ou ajouté au nom de l'image.

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

@Adireddy merci. C'est la moitié de la bataille. Avez-vous une idée de la raison pour laquelle ma toile est mise à l'échelle plutôt que la résolution augmente ?

Même problème ici pour la rétine, toute utilisation de la résolution : 2, rend le positionnement de l'ancre PIXI.Text incorrect. Redimensionner le canevas en CSS n'aide pas beaucoup. J'ai dû régler la résolution sur 1, doubler la taille de ma police de texte, puis la réduire de moitié.

Et même avec cela, le texte n'a toujours pas l'air lisse.

Salut Elyx0, vous pouvez essayer mon plugin texte pour mobile disponible ici : https://github.com/JiDW/pixi-cocoontext

Cela résout-il vos problèmes ?

Salut @JiDW , je l'ai enfin corrigé. J'utilise PIXI.js nu, donc pas de Cocoon pour moi, mon canevas de vue n'a pas été correctement configuré. THX

@GillesVermeulen

J'envisage de prendre en charge les appareils High DPI dans mon projet, je me demande donc :

Le canevas est mis à l'échelle, mais pas les zones touchées.

Cela a-t-il été résolu dans PixiJS ? (par exemple dans une version ultérieure/récente)

Hé @tobireif , je pense que oui. Je n'ai pas eu le problème depuis longtemps, mais c'est avec Pixi v2. Je ne pense pas non plus que ce soit un problème avec la nouvelle version.

@GillesVermeulen Ça a l'

Une méthode CSS qui a fonctionné pour moi en utilisant canvas (sans 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; }
Juste au cas où cela pourrait aider quelqu'un.

Salut !

J'ai un problème avec mon dernier projet : http://romaincazier.com/davatars/

Je n'arrive pas à obtenir la bonne résolution de pixels sur mes objets... Je ne sais pas s'il s'agit du moteur de rendu ou des graphiques à partir desquels j'ai généré les textures, mais dans les deux cas j'ai ajouté le window.devicePixelRatio mais ça ne semble pas avoir une quelconque influence.

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.