Grafiken in Original- und Fenstergröße anzeigen

[Prometheus]

Hallo zusammen,

ich habe mich jetzt angemeldet, weiß aber nicht ob es so einen Vorstellungsthread gibt, ich seh keinen?

Ich hab mich vorgestern endlich entschieden, dass ich es mit JS versuchen will (Alternative war z.B. Java)(schon sehr lange viel dazu gesehen und gelesen), und habe dann auch gleich mal VSC installiert und so ein Tutorial ausprobiert. Leider hat YouTube ein notorisches Problem mit mir, und ich habe aktuell das Problem, dass meine Kommentare nach wenigen Sekunden grundsätzlich verschwinden. Ich kann den Tutorial-Kanal daher nichts fragen.
Also versuche ich es mal hier.

Folgendes ist mein Problem, gewissermaßen ist es ein triviales Perfekionismusproblem, und das Tutorial geht nicht darauf ein.
Es soll ein kleiner SpaceShooter erstellt werden. Die Grafiken werden im Script als kleiner Container definiert:

Code:

let fighter = {
            x: 950,
            y: 850,
            width: 100,
            height: 100,
            src: 'img/ships/fighters/fighter_11.png'

width und height werden hier einfach mit einer festen Pixelgröße angegeben. Was ich gerne machen würde: width und height so definieren, dass sie einfach in originaler Auflösung angezeigt werden. Dasselbe versuchte ich so ähnlich mit dem Canvas bzw. Background: der soll sich einfach ans Fenster oder zumindest an den Bildschirm anpassen. Alle Befehle die ich versuchte, führen dazu, das die Spielfläche im Browser auf ein kleines Quadrat oder Rechteck schrumpft.

Ich versuchte schon alles mögliche, mit verschiedenen "Satzzeichen" (; , (); ... mit = oder : usw. auch ohne) nichts geht:

w/d = 100%
w/d = original.
w/d = natural.
w/d = device.
w/d = window.
w/d = screen.
w/d = real.....
w/d = inner.
w/d = outer.
w/d = browser.

usw. alle möglichen Kombinationen... Auch versuchte ich dies verschieden einzufügen, blockierte nichts, half aber auch nicht:
ctx.width  = window.innerWidth;
ctx.height = window.innerHeight;

usw. lange Liste. Finde ich die richtige Syntax nicht? Warum ist es nicht möglich, Width und Height als original zu definieren? Oder den Hintergrund auf Window oder Screengröße zu ziehen? Ich habe schon Stunden lang probiert und gesucht. Ich habe natürlich noch andere Idee von der Lösung. Vielleicht versteht der Cotainer nicht was ich will, weil das img ja dort nicht geladen wird? Dann wüsste ich aber auch nichts genaues mehr...

Ausserdem fand ich viele Code-Stücke, diverse Beiträge im Internet, die aber komplizierter sind, ich wüsste nicht wie ich die richtig implementiere.
Mir ist z.B. nicht klar, wie sich Funktionen zur Originalgröße auf die einzelnen Grafiken beziehen lassen.
Einfach sowas einzufügen dürfte nicht helfen:

Code:

<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
    onload="resizeImg(this, 200, 100);">

<script type="text/javascript">
function resizeImg(img, height, width) {
    img.height = height;
    img.width = width;
}
</script>

Es gibt ja noch start, load and draw, ich denke dort muss das irgendwie mit rein? Es muss doch möglich sein, mit wenigen Befehlen die Originalabmessungen einzufügen... Kann mir jemand weiterhelfen?

Viele Grüße, Prometheus


EDIT:

Ich konnte meine Probleme über Nacht teilweise lösen, weil ich in einem anderen Tutorial mit etwas anderem Thema was aus dem Code abschauen konnte. Meine Lösung war, im style-Abschnitt Folgendes zu ergänzen:

Code:

body { overflow: hidden; }
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            margin: 0;

padding und margin haben das Problem des Randes (fast) gelöst, border war mein Versuch, der nichts weiter verbesserte. Grund: Unten wird ein dicker Streifen vom Hintergrund abgeschnitten, das sieht man erst im Vollbild. Leider ga es auch einen weißen Streifen unten, bei Mausrad und Leertaste... es "wobbelte".
Das habe ich so fast komplett gedämpft:

Code:

window.onscroll = function () {window.scrollTo(0, 0);} 

Den kleinen weißen Spalt, der trotzdem unten aufblitzte, entfernte bzw. verdeckte ich mit +1 Pixel, ohne das eine Laufleiste verursacht wurde:

Code:

canvas.height = window.innerHeight +1;

Da die Leertaste später zum Abfeuern verwendet wird, war es ganz lustig, das der Hintergrund bei "erschüttert" wird. Habe es noch probiert mit schwarzem Hintergrund, das geht auch.

Leider tauchte aber auch mit Veränderung der Fenstergröße oder dem Vollbild eine tote Laufleiste auf. Ich fand dann noch das, jetzt bewegt sich nichts mehr, es gibt auch keine Laufleisten-Fehler mehr:

Code:

body { overflow: hidden; }

Nur im Vollbild ist unten nach wie vor ein weißer fetter Balken... Ausserdem gibts ein "Problem" bei den Fenstergrößen, mit der Anpassung. Egal. Ganz am Ende wäre das auch noch einen Versuch wert, ist erstmal nicht wichtig.


Was mich immer noch (akademisch) interessiert: Wie kann man Grafiken in Originalgröße laden bzw. anzeigen lassen?

Soweit erstmal. Danke fürs lesen schonmal.


PS: Ich bin am WE vermutlich weg und antworte ggf. erst nächste Woche.

[admin]

Was mich immer noch (akademisch) interessiert: Wie kann man Grafiken in Originalgröße laden bzw. anzeigen lassen?

Soweit erstmal. Danke fürs lesen schonmal.


PS: Ich bin am WE vermutlich weg und antworte ggf. erst nächste Woche.

Canvas ist nicht so mein Ding, was passiert den, wenn du keine Angaben machst?

[rzscout]

Hi,
versuche es mal mit den Eigenschaften 'naturalWidth' und 'naturalHeight'. Diese geben die natürliche Breite und Höhe von der selektierten Grafik wieder.

Gruss rzscout

[Prometheus]

Hallo,

pardon, ich war länger weg als gedacht. Danke für die Ideen! Ich werde beides mal ausprobieren, und melde mich dann nochmal.
Ausserdem habe ich bestimmt noch weitere Fragen.  z.B. ob jemand weiß wie man GIF zu einem bestimmten Ereignis abspielen kann. Ich wollte eine kleine GIF-Animation einspielen wenn das Raumschiff explodiert. Das klappt natürlich nicht wie erwartet, es taucht auf aber spielt nichts ab.
Ich weiß ich weiß, GIF ist ein Fossil...

Viele Grüße