Ich versuche, ein kleines 2D-Spiel in Javascript/Canvas zu erstellen, das aus mehreren animierten Sprites besteht. Ich möchte die Anzahl der HTTP-Anfragen reduzieren, also habe ich jeden Frame der Animation (32px mal 32px) zu einem Bild pro Sprite kombiniert (zB 192px mal 128px). Gibt es eine Möglichkeit, diese Bilder clientseitig in mehrere kleinere Bilder zu kopieren und zu beschneiden? Dies würde meinen Rendering-Code erheblich vereinfachen und die Ladezeit aufgrund der Netzwerklatenz verringern.Kopieren und Zuschneiden Bilder in Javascript
Antwort
Werfen Sie einen Blick auf Pixastic, speziell http://www.pixastic.com/lib/docs/actions/crop.
Die HTML5-Canvas-API bietet eine Methode namens drawImage, mit der Sie das Eingabebild beschneiden können.
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Weitere Informationen finden Sie in der Spezifikation (das Bild direkt aus dem spec genommen wird):
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images
Das mache ich jetzt gerade. Ich versuche nur herauszufinden, ob es eine Möglichkeit gibt, das Bild vor dem Zeichnen zu beschneiden, um meinen Rendering-Code zu vereinfachen. –
Wenn Ihre einzige Sorge einfach Code ist, könnten Sie die Bilddaten in ein wiederverwendbares Objekt wie folgt einkapseln: https://gist.github.com/702799 – mike
Ich arbeite immer noch daran, aber um Ihnen eine Idee zu geben wo ich bin, hier ist die Quelle: http://bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js –
Wenn Sie Leinwand nicht verwenden wollen oder 3rd-Party Bibliothek, könnten Sie das Bild zu einem div (mit "Überlauf: versteckt") der Größe der beschnittenen Version hinzufügen, und geben Sie dem Bild negativen linken und oberen Rand.
Jeder trägt das ganze Bild herum, zeigt aber nur einen Teil davon an, was die Leistung beeinträchtigen kann oder auch nicht. Ich glaube, du musst dem div-Element eine Position geben: auch relativ, um IE glücklich zu machen.
Alternativ können Sie das Bild als Hintergrund des div zuweisen und die backgroundPosition angeben. Ich glaube mich zu erinnern, dass das für etwas, das ich einmal gemacht habe, nicht funktioniert hat, nicht sicher warum. (Ich denke, es hatte mit der Opazität zu tun)
Ich bin mir nicht sicher, ob dies überhaupt relevant ist, wenn man bedenkt, dass die Frage im Zusammenhang mit der Erstellung eines JavaScript/Canvas-Spiels gestellt wurde? –
fair genug, ich denke, ich dachte, dass Leinwand erwähnt wurde, weil er dachte, dass es nur dafür notwendig war. Aber ja, mit Canvas ist es einfach, Teile eines Bildes zu kopieren, ich frage mich, warum die pixastische Bibliothek benötigt wird .... – rob
Laden Sie einfach das Bild in einem img-Tag mit Stil-Attribut-Display auf verborgen. Dann schneiden Sie das Bild auf einer Leinwand außerhalb des Bildschirms aus und schreiben Sie dieses Bild auf die Leinwand, falls erforderlich.
Ich hatte das vorher nicht gesehen, ich werde es untersuchen. Vielen Dank. –