Pixi.js: Netzhautunterstützung

Ich stimme diesem Fehler zu. Als Referenz kann dies normalerweise so gehandhabt werden: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Dies ist auch ein Problem mit Text.

Angenommen, Sie haben einen Retina-Bildschirm mit devicePixelRatio von 2 und möchten eine gestochen scharfe Leinwand von 400 x 300 Pixeln erhalten. Um dies zu erreichen, müssen Sie den PIXI-Renderer mit Ihren gewünschten Canvas-Abmessungen multipliziert mit devicePixelRatio (800x600) initialisieren und dann den Canvas manuell mit CSS auf 400x300 herunterskalieren. Und dann müssen Sie diese Skalierung natürlich in alle Ihre Berechnungen einbeziehen: Positionen, Schriftgrößen, Linienstärken, geladene Assets usw.

Ich verwende so etwas:

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

Gibt es Pläne, dies demnächst in Angriff zu nehmen? Jede Größe, Position und Schriftgröße skalieren zu müssen, ist wirklich schmerzhaft. Vor allem, wenn es eine ziemlich einfache Möglichkeit gibt, dies mit dem Standard-Canvas zu tun.

Es ist schwierig, diese Bibliotheksgröße zu erreichen, da sie davon abhängt, ob Ihre Sprites Hidpi sind oder nicht. Wir haben es im Userland belassen, weil wir nicht wissen, welche Sprites von Ihnen, falls vorhanden, für Hidpi skalieren sollen und wann; aber du tust.

Hey @englercj . Meinst du mit Sprites Assets, die vom Benutzer geladen wurden?

@dcascais ja

@englercj Danke für deine Antwort.

Wenn die Renderer-Ansicht derzeit mit dem CSS-Trick (in meinem vorherigen Link beschrieben) skaliert wird, um die richtige Anzeigeauflösung zu erhalten, wird alles, was der Bühne hinzugefügt und dann mit der skalierten Renderer-Ansicht gerendert wird, nicht entsprechend skaliert, es behält seine Pixel bei Werte, also im Grunde halb so groß.

Dazu gehören Inhalte, die dynamisch im Grafikkontext gerendert werden, Text und geladene Assets.

Andere Plattformen gehen davon aus, dass es in der Verantwortung des Benutzers liegt, die richtigen Assets für die verschiedenen Bildschirmdichten bereitzustellen, aber die Interna funktionieren nahtlos mit einer Skalierungsfaktoreigenschaft, mit der Sie leicht entscheiden können, welche Anzeigedichte Sie anvisieren möchten. Ich frage mich, ob dies für die Pixi-Benutzer ein einfacherer Ansatz wäre. Sie müssen sich nur um die richtigen Assets kümmern und sicherstellen, dass der Skalierungsfaktor richtig eingestellt ist.

Haben Sie einen Vorschlag, wie die erwartete Skalierung der der Bühne hinzugefügten Inhalte erreicht werden kann?

Das manuelle Skalieren der x-, y-, Breiten- und Höhenwerte jedes Elements in der Anzeigeliste und im Fall von Text kann das Definieren verschiedener Zeichenfolgen mit Schriftnamen mit der richtigen Größe sehr umständlich und fehleranfällig werden, wenn Sie es mit einem großen . zu tun haben Projekt.

Vielen Dank.

Interessant, ich würde gerne sehen, wie einige dieser Systeme funktionieren. Soweit die einzelnen Elemente einzeln skaliert werden, scheint dies nicht der richtige Weg zu sein. Da dies ein Szenendiagramm ist, könnten Sie Ihr Root-DOC nicht einfach entsprechend skalieren?

@englercj , ich hatte dies in einer Sandbox ausprobiert und während es die Dinge wieder auf die richtige Größe gebracht hat, sind sie verpixelt. Würden Sie ein anderes Verhalten erwarten?

@bmantuano Ich erwarte, dass es mit dem ausgewählten Algorithmus skaliert wird (nächster, linear, bikubisch usw.).

Chad, danke für die Antwort hier. Beziehen Sie sich bezüglich des Skalierungsalgorithmus auf die PIXI.scaleModes? Wenn ja, scheint die bikubische Option nicht vorhanden zu sein.

@englercj Hier sind ein paar JSFiddles, die zeigen, was wir zu tun versuchen, um gestochen scharfen Text und Grafiken (dynamisch gezeichnet, keine Assets) auf hochauflösenden Displays zu erhalten.

Leinwandskalierung und skalierter Hauptanzeigeobjektcontainer (Korrekte Größe, aber verschwommen und mit einigen Problemen)
http://jsfiddle.net/hsv8Q

Canvas-Skalierung (zeigt scharf, aber falsche Größe und mit einigen Problemen)
http://jsfiddle.net/hsv8Q/1

Keine Skalierung (Korrekte Größe, aber verschwommen)
http://jsfiddle.net/hsv8Q/2

Hoffentlich hilft Ihnen dies zu verstehen, was wir meinen. Lassen Sie es uns wissen, wenn wir noch etwas versuchen sollten.

Danke @dcascais für das Hinzufügen dieser Geigen. @englercj , das erste ist das, was Sie vorgeschlagen haben, oder? Kannst du dort die Pixelierung auf einem Gerät mit hoher DPI sehen?

@bmantuano Leider habe ich kein HDPI-Gerät, um eines zu testen :( Ich werde dieses Gerät @GoodBoyDigital oder @photonstorm zum Anschauen

@englercj , danke, dass hast . Schätzen Sie die Hilfe. @arahlf und @n1313 , haben Sie eine

Nein noch nicht :(

@bmantuano , ich verwende immer noch den in meinem vorherigen Kommentar beschriebenen Ansatz und habe keinerlei Probleme.

Gab es diesbezüglich Bewegung? Ich habe die erwähnte Skalierungsmethode @ n1313 verwendet , aber sie zerstört FPS auf Retina-Geräten.

Irgendwelche Ideen?

@arahlf und @n1313 , thx für die Antworten.

@GoodBoyDigital , ist das auf Ihrem Radar? Wäre hilfreich, nur um eine Vorstellung davon zu bekommen, ob es etwas ist, das wir in einem zukünftigen Update erwarten können oder ob wir es hacken müssen.

@GoodBoyDigital Ich wollte hier nur meine Stimme hinzufügen. Ich arbeite an einem Massively Multiplayer Online-Spiel mit Pixi.js, weil wir es als die leistungsstärkste Rendering-Engine auf dem Markt identifiziert haben, aber die Unterstützung für Retina-Displays tut uns wirklich weh!

Zufällig bin ich gerade auf halbem Weg durch das Hinzufügen von Retina-Unterstützung :) Sehen Sie sich diesen Raum an..

Genial :+1:

@GoodBoyDigital , das ist fantastisch! Danke für das Update. Sich auf etwas freuen.

@GoodBoyDigital Das ist großartig! Vielen Dank, dass Sie sich so schnell bei mir gemeldet haben. Ich weiß, es ist im Allgemeinen schwer zu sagen, aber könnten Sie mir eine sehr grobe Schätzung geben, wann Sie denken, dass eine Netzhautunterstützung für Pixi durchgeführt wird?

Ich werde Sie nicht an den Kostenvoranschlag halten oder mich beschweren, wenn dies nicht in diesem Zeitrahmen erfolgt - nur neugierig im Allgemeinen, wie lange wir Ihrer Meinung nach warten werden!

Hey Leute - habe gerade den neuen "dev-retina" -Zweig auf Git Hub hochgeladen. Es wäre ein Ass, wenn Sie alle ein Spiel haben könnten. Es gibt viele bewegliche Teile darin, also dachte ich, es wäre gut, es mit einigen echten Projekten zu testen, bevor man es in den Dev-Zweig einfügt.

Renderer haben jetzt einen Optionsparameter. Eine der neuen Optionen ist die Auflösung. Um den Renderer auf Retina einzustellen, können Sie einen Renderer wie diesen erstellen:

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

Alles sollte gleich aussehen.. aber die Auflösung wird höher sein :)

BaseTextures haben jetzt auch eine Auflösung. Wenn das Bild hochauflösend ist, müssen Sie die Auflösung auf 2 einstellen. Die Möglichkeit, die Auflösung beim Laden automatisch auf zwei einzustellen, besteht darin, das Bild mit @2x an den Bildnamen anzuhängen.

Wenn Sie also beispielsweise [email protected] laden, geht

Am besten wirklich spielen! Aber bitte stellen Sie Fragen, da dies wahrscheinlich nicht so einfach ist, wie es scheint :)

+1

Hey Matt. Das sieht toll aus! Ich konnte den Canvas dazu bringen, schönen und klaren Text und Assets zu rendern. Größe und Position scheinen richtig gehandhabt zu werden, soweit ich es getestet habe.

Das einzige, womit ich Probleme zu haben scheine, sind die Zeichenverfahren von Pixi.Graphics. Ich schaffe es nicht, diese knackig zu rendern. Die Größe und Position des Renderings ist jedoch korrekt.

Grafikobjekte sollen auch Netzhaut sein? Cachest du als Bitmap die?
Grafikobjekt zufällig? oder ist es direkt PIXI.graphics?

Am Dienstag, den 9. September 2014 um 17:32 Uhr schrieb dcascais [email protected] :

Hey Matt. Das sieht toll aus! Ich konnte das Canvas schön rendern lassen
und gestochen scharfer Text und Assets. Größe und Position scheinen richtig gehandhabt zu werden
soweit ich getestet habe.

Das einzige, womit ich anscheinend Probleme habe, ist die Pixi.Graphics
Zeichnungsverfahren. Ich schaffe es nicht, diese knackig zu rendern. Die
Größe und Position des Renderings sind jedoch korrekt.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Mattenhaine

_Technischer Partner_

Telefon: 07708 114496 :: www.goodboydigital.com
Erdgeschoss, Einheit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy©. Alle Rechte vorbehalten.

@GoodBoyDigital Bei der Beschreibung des Problems habe ich einen Teil meiner Konfiguration übersehen. Das Setup, das ich habe, ist ein PIXI.Sprite mit einer Textur, die auf einem PIXI.Graphics-Objekt basiert.

Ich habe ein JSFiddle erstellt, um das Problem und das resultierende Rendering zu beschreiben:
Dieser zeigt die verschwommene Grafikausgabe, wenn das PIXI.Sprite eine Textur erhält, die auf einer PIXI.Graphics basiert:
http://jsfiddle.net/hsv8Q/13/

Dieses Setup mit direkter Verwendung einer PIXI.Graphics funktioniert einwandfrei:
http://jsfiddle.net/hsv8Q/7/

Erwischt! Keine Sorge - ich weiß genau woran das liegt :)
Werde es euch wissen lassen, sobald es angepasst wurde. ta!

Hey @GoodBoyDigital , danke für die Retina-Unterstützung! Es kommt auch zu einem großartigen Zeitpunkt, da wir es für unseren Kunden brauchen :)

Ein Problem ist mir im Retina-Zweig aufgefallen: Das Rendering ist besser, aber die Trefferbereiche sind falsch ausgerichtet. Die Leinwand wird skaliert, die Trefferbereiche jedoch nicht. Wenn ich also eine Schaltfläche in der Mitte des Bildschirms berühren möchte, muss ich die Mitte des linken oberen Viertels des Bildschirms berühren, um sie tatsächlich zu berühren.

Wenn ich in diesem Bildschirm die Schaltfläche in der Mitte drücken möchte, muss ich in den orangefarbenen Kreis (den ich später als Beispiel hinzugefügt habe) drücken, um ihn tatsächlich zu treffen. Die Hitarea skaliert nicht mit dem Rest.

Über den Parameter "Auflösung" in der Funktion autodetectRenderer; wir könnten einfach "window.devicePixelRatio" verwenden, oder?

Ich habe eine schnelle / schmutzige Problemumgehung für das oben beschriebene Problem gefunden. Das Problem scheint in den Funktionen onTouchStart, onTouchMove und onTouchEnd des InteractionManagers zu liegen. Dies kann behoben werden, indem die Berechnung von touchData.global.x und touchData.global.y in diesen Funktionen geändert und durch diese.Auflösung geteilt wird.

Dies scheint das Problem zu beheben, aber es könnte eine viel bessere Lösung geben.

Hallo @GillesVermeulen
Ich habe in meinem letzten Commit die Hit-Bereiche optimiert. Würde es mit der neuesten Version versuchen? ta!

Hey @GoodBoyDigital , danke für die schnelle Antwort und den Support, aber ist es möglich, dass der Commit, von dem du sprichst, noch nicht auf Github ist?

@GillesVermeulen - Berührung sollte jetzt gut sein. Ich habe die Auflösungsänderung nur auf die Mausereignisse angewendet. Lass mich wissen, ob jetzt alles ok für dich funktioniert. Danke!

Nachmittag @dcascais ! Ich habe gerade einen Fix für den Retina-Zweig verschoben, mit dem Sie die Auflösung der Funktion "generateTexture" definieren können.

Für eine schöne knusprige Netzhauttextur können Sie also nur Folgendes tun:

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

lass mich wissen ob das bei dir klappt. Vielen Dank!

@GoodBoyDigital Schön! Das funktioniert jetzt ganz gut. Ich freue mich über das Update dazu.

Als allgemeine Frage. Sind Sie oder andere aufgrund dieses hochauflösenden Updates auf andere Dinge wie Leistung, Speicher oder Absturzprobleme gestoßen?

Danke, Matthew.

Froh zu hören!

Wünschte, es gäbe eine magische Kugel dafür! Leider wirkt sich eine höhere Auflösung in der Tat auf die Leistung und den Speicherverbrauch aus, da Sie im Wesentlichen alles in der Größe verdoppeln. Retina-Bilder benötigen 2x so viel Speicher und webGL/Canvas benötigen eine Szene mit 2x so vielen Pixeln. Auf Geräten mit niedrigem Speicher/CPU kann dies ein echter Killer sein, daher ist es sehr wichtig, vorsichtig zu sein, wenn Sie etwas mit hoher Auflösung tun.

Wären die nicht 4x? Ist es nicht so ziemlich garantiert, dass auch Menschen mit Retina-Displays schnelle Computer haben?

@iirelu wahr in der Tat! 4x so viel!
Ja, ich kann mir nicht vorstellen, dass es bei Computern mit Retina-Display Probleme geben würde, da sie ziemlich High-End wären.

Die Speicherprobleme würden sich eher auf mobilen Geräten mit Retina-Bildschirmen manifestieren.

@GoodBoyDigital , danke für das Update der Touch-Funktionen. Es war das gleiche wie meine vorübergehende Lösung und scheint den Zweck zu erfüllen.

Zur Leistung: Seit kurzem teste ich Sachen in CocoonJS auf IOS7. Die Leistung ist definitiv besser im Vergleich zur standardmäßigen iOS-Webansicht, die von Dingen wie Phonegap verwendet wird, aber das Zeichnen von Formen scheint sehr anstrengend zu sein und die Formen werden nicht wie in Safari geglättet. Ich kann mir vorstellen, dass dies mit CocoonJS zu tun hat und wenig mit Pixi zu tun hat.

Sobald Sie einen Filter auf eine Retina-Textur (@2x) anwenden, scheinen alle Positionierungen deaktiviert zu sein.

Danke für den Hinweis @joaomoreno ! Werde auf jeden Fall mal nachschauen :+1:

Nur eine kleine Frage zu der von Ihnen vorgestellten API: Gibt es nicht einen Konflikt zwischen PIXI.autodetectRenderer(width, height, optionObject) und PIXI.autodetectRenderer(width, height, view, antialias, transparent )?
Würde das optionObject Argument das sechste Argument aus der zweiten Signatur machen, wie in src/pixi/utils/Detector.js ? Ich bin mir nicht ganz sicher, wo ich es sonst hinstellen soll, da das dritte Argument bereits ein DOMElement ist, nicht wahr?

Die nächste Version von pixi wird die neue Methodensignatur verwenden, dies ist eine bahnbrechende Änderung.

@englercj Vielen Dank für Ihre schnelle Antwort. Bleiben die weggefallenen Optionen dann noch auf andere Weise zugänglich?

Das Optionsobjekt enthält alle bisherigen und neuen Optionen. Die Funktionalität wird nicht entfernt, Sie übergeben die Optionen einfach anders:

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

Oh, praktisch! Vielen Dank dafür. :+1:

Retina-Unterstützung ist jetzt im Dev-Zweig. Bitte lassen Sie es mich wissen, wenn jemand Probleme damit findet :+1: vorerst geschlossen.

ich habe ein Problem mit einem Retina MacBook Pro.

Ich verwende nicht {resolution:2} .

Die Bühnenbreite gibt die echten Retina-Pixel zurück. In meinem Fall sind es 2540 Pixel. Die Texturen werden doppelt so groß gerendert und ihre Breiten sind auch nicht in echten 1:1 Retina-Pixeln. Ein 300 x 200-Bild belegt also 600 x 400 Retina-Pixel, aber die Breite gibt 300 zurück.

Ist das erwartetes Verhalten?

@PierBover Ja, die Höhe/Breite des Objekts hat sich nicht geändert. Es wird nur in einer anderen Auflösung gerendert.

@englercj aber wie kommt es, dass Dimensionen in echten Pixeln und doppelten Pixeln gemischt werden?

Hey Leute, mache ich hier was falsch. Wenn ich die Auflösung meines CanvasRenderers auf 2 für ein Retina-Display mache, wird meine Leinwand doppelt so groß und meine @x2 Bilder viermal größer.

    <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-Frage
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

In dieser Ausgabe und in diesem Blogbeitrag http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ wird erwähnt, dass die Retina-Bilder entweder ein @2x oder ein @x2 vor der Erweiterung benötigen . Ich gehe davon aus, dass @2x richtig ist. Ist das richtig?

@2x ist richtig. Dies kann ein Ordnername sein oder an den Bildnamen angehängt werden.

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

@Adireddy danke. Das ist die halbe Miete. Haben Sie eine Idee, warum meine Leinwand skaliert wird, anstatt die Auflösung zu erhöhen?

Das gleiche Problem hier für die Netzhaut, jede Verwendung von Auflösung: 2, macht einige PIXI.Text-Ankerpositionierungen falsch. Das Zurückskalieren der Leinwand in CSS hilft nicht viel. Ich musste die Auflösung auf 1 einstellen, meine Textschriftgröße verdoppeln und dann auf die Hälfte skalieren.

Und selbst damit sieht der Text immer noch nicht glatt aus.

Hallo Elyx0, Sie können mein Text-Plugin für Mobilgeräte ausprobieren, das hier verfügbar ist: https://github.com/JiDW/pixi-cocoontext

Behebt es deine Probleme?

Hallo @JiDW , ich habe es endlich behoben. Ich verwende nackte PIXI.js, also kein Cocoon für mich, meine Ansichtsleinwand war nicht richtig eingerichtet. Danke

@GillesVermeulen

Ich überlege, High-DPI-Geräte in meinem Projekt zu unterstützen, also frage ich mich:

Die Leinwand wird skaliert, die Trefferbereiche jedoch nicht.

Wurde das in PixiJS gelöst? (zB in einer neueren/neueren Version)

Hey @tobireif , ich denke schon, ja. Habe das Problem schon lange nicht mehr, aber das ist mit Pixi v2. Ich denke auch, dass es bei neueren Versionen kein Problem ist.

@GillesVermeulen Klingt gut! Vielen Dank!

Eine CSS-Methode, die für mich mit Canvas funktioniert hat (ohne 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; }
Nur für den Fall, dass dies jemandem helfen kann.

Hi !

Ich habe ein Problem mit meinem letzten Projekt: http://romaincazier.com/davatars/

Ich kann bei meinen Objekten nicht die richtige Pixelauflösung erzielen... Ich weiß nicht, ob es am Renderer liegt oder an den Grafiken, aus denen ich die Texturen generiert habe, aber in beiden Fällen habe ich das window.devicePixelRatio hinzugefügt, aber es scheint nicht irgendeinen Einfluss zu haben.

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen in letzter Zeit keine Aktivität stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.