Wie kann ich das CSS-Pixelverhältnis in JavaScript entfernen, sodass ich HD-Spiele auf meinem Telefon erstellen kann?

Question

Ich habe an einem Spiel in reinem JavaScript/CSS/HTML gearbeitet und ich habe das Problem, wo mein 1920x1080 Handy mein Spiel als 586x330 mit einem Pixel-Display-Verhältnis von 3 anzeigt. Was ich wissen möchte ist, wie zu haben Mein Spiel läuft auf dem Bildschirm in HD, da ich kein Low-Res-Spiel haben möchte, wenn es höherres sein könnte.

Wenn ich das Spiel auf einem Webbrowser (Desktop oder Mobile) ausführen, ist die Pixeldichte 1, alles ist in Ordnung, das Problem tritt auf, wenn ich es als Android-App mit PhoneGap ausführen.

Jede Hilfe wäre willkommen, ich bin hier ziemlich fest.

Danke,

Answer 1

Ich gehe davon aus Sie das <canvas> Element verwenden, wie es die grafische Grundlage für die meisten Spiele ist.

Wenn dies der Fall ist, müssen Sie sicherstellen, dass Sie die Größe immer nur mit den Inline-Attributen width und height ändern. Durch die Inline, ich meine die, die buchstäblich in den HTML-Code eingebettet sind:

<canvas width="--your width--" height="--your height--"> 
</canvas> 

Was wollen Sie sicherstellen, dass es keine andere Schlichte auf der Leinwand aufgetragen wird.

Nichts von alldem:

/* style.css */ 
canvas { 
    transform: scale(1.5, 1.5); 
} 

Und auch nichts davon:

/* style.css */ 
canvas { 
    width: 100%; 
    height: 100%; 
} 

Die Sache ist, dass die Anzahl von Pixeln Auflösung, die eine Leinwand, mit zu arbeiten ist definiert nur durch seine inline width und height Attribute. Wenn Sie Ihre Leinwand die gleiche Auflösung wie Ihr Handy-Bildschirm haben wollen, müssen Sie Javascript verwenden, um seine width und height, wenn die Bildschirmgröße ändert sich zu ändern:

/* thing.js */ 
var resizeCanvas = function() { 
    var canvasElem = getYourCanvasElement(); 

    canvasElem.width = getWidthOfScreen(); 
    canvasElem.height = getHeightOfScreen(); 
} 

// Make sure canvas fits initially... 
whenPageLoads(resizeCanvas); 

// And then resize it whenever needed 
whenScreenSizeChanges(resizeCanvas); 

Natürlich weiß ich nicht, was Frameworks du bist so verwenden, dass Code nur eine Vorlage ist. Sie müssen entscheiden, wie Sie getYourCanvasElement, , getHeightOfScreen, whenPageLoads und whenScreenSizeChanges implementieren.

BEARBEITEN: Eine andere Sache, die die Größe Ihrer Zeichenfläche beeinflussen kann, ist die Skalierung des Browser-Ansichtsfensters. Es gibt einen guten Einblick in das here.