Canvas: Image remove mit sprite Animation

Jofre

Erfahrenes Mitglied
Ich möchte Bilder von einem Canvas entfernen wenn sie angeklickt wurden. Soweit ich informiert bin, ist das nicht möglich. Gezeichnet ist gezeichnet.
ClearRectangle ist auch nicht möglich da der Hintergrundaus einem Bild besteht.
Ein permanenter refresh des gesamten canvas ist nicht mit der Spiellogik vereinbar.

Kann ich das mit spirit animation realisieren?.

Idee:

Ich teile das Hintergrundbild gedanklich in Rechtecke auf. Die Zeichnung des Hintergrunds erfolgt dann über Spirits Rechteck für Rechteck.
Die Bilder werden anschliewssend jeweils in ein Rechteck gezeichnet.
Wenn ein Bild gelöscht werden soll, wird das entsprechende Rechteck aus dem frame set Hintergrundbild neu eingezeichnet.

Ich habe mich mit sprite animation noch nicht eingelesen Ist das möglich oder ist das Unsinn. ?

GzG

Joachim
 
Hallo Joachim,
Animationen mit CSS-Sprites sind mir wohlbekannt. Sie beruhen ja darauf, dass die Position eines Hintergrundbildes verändert wird, so dass jeweils ein neuer Frame der Animation sichtbar wird.
Allerdings erkenne ich nicht, wie man dieses Prinzip auf Canvas übertragen könnte, denn ein reines Verschieben einer Grafik ist ja nicht möglich, nur neu zeichnen. Und dann ist man wieder da, wo man auch ohne Sprites wäre: Das ganze Bild müsste neu gezeichnet werden.
Man könnte daran denken, den Hintergrund, wo man das Bild zeichnet, zu speichern und hinterher, wenn das Bild gelöscht werden soll, darüber zu zeichnen. Allerdings weiß ich nicht, ob man dabei an Performance gewinnt, weil ja das Auslesen des Hintergrundes ein Zusatzaufwand ist. Müsste man untersuchen.
 
Ja, das letztere meine ich.

Wenn beispielhaft die Figur links oben angeklickt wird, dann wird über Frame??? aus dem gespeicherten Hintergrundbild das Rechteck nr 11 "raus" geschnitten und hier eingefügt. und dann haben wir Bild2

Ich stell mir die Auswirkungen auf die Performance nicht so gravierend vor. Aber ich bin für Cancas / Javascript nicht der Experte.
 

Anhänge

  • Beispiel.jpg
    Beispiel.jpg
    110,9 KB · Aufrufe: 4
  • Beispie2l.jpg
    Beispie2l.jpg
    109,1 KB · Aufrufe: 3
Oder siehst du eine andere Möglichkeit (ohne Neuzeichnen Canvas) von Bild1 nach Bild 2 zu kommen (Gitter kommt dann natürlich weg)?

GzG

Joachim
 
Verstehe, so habe ich es gemeint, nur dass ich mir eher vorgestellt hatte, den Ausschnitt dynamisch aus den Abmessungen des Bildes zu bestimmen.
Eine andere Möglichkeit sehe ich ohne komplettes Neuzeichnen auch nicht.
 
Schönen Abend Ulrich,

es scheint einfach zu sein:

ctx.drawImage(hinter, 80, 0, 80, 100, 160, 0, 80, 100);

die ersten vier Zahlen geben an von wo welcher Auschnitt aus dem Bild "hinten" genommen werden soll, die zweiten 4 Zahlen wo der Bildausschnitt in welcher Größe plaziert werden soll.

So weit die isolierte Lösung. Ich vermute, dass es wenn es ins Programm eingebettet wird da irgendwo noch "gefeuert" wird.

Vielleicht wäre es möglich, dass du es an einem kleinen Beispiel testest .
Nicht, dass ich mit meinen eher geringen Kenntnissen da stundenlang rum probiere und am Ende funktioniert es doch nicht.
Ich habe da so meine leidvollen Erfahrungen.

GzG

Joachim
 
Hi,

vielleicht kannst du mehr Canvas-Elemente übereinander legen. Das untereste Element dient der Anzeige des Hintergrunds und wird nur in seltenen Fällen neu gerendert. Als nächstes wären zwei weitere Elemente vorstellbar. Ein Element ist sichtbar und zeigt die neue Spielsituation. Im anderen unsichtbaren wird die nachfolgende Situation gerendet. Ist das Rendern abgeschlossen, wird der erste unsichtbar und der zweite eingeblendet. Jetzt ist der erste das Element zum Vorrendern.

Damit müsstest du relevante Teile der Spielsituation neu rendern. Und durch das Ein- und Ausblenden sollte es performant sein.

Ciao
Quaese
 
Sehe ich das richtig, das bei Jcanvas in deinem Beispiel 2 Ebenen übereinanderliegen.- Denn sonst könnte das mit dem opacity nicht klappen.Oder?
 
Ja, die Ebenen liegen übereinander, und zwar in der Reihenfolge, in der sie erzeugt wurden. Entsprechend überdecken sie sich. Man kann die Reihenfolge auch ändern, aber das ist ein wenig trickreich und ich habe es noch nicht getestet.
 
Zurück