Canvas: Image remove mit sprite Animation


Jofre

Erfahrenes Mitglied
#1
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
 

Sempervivum

Erfahrenes Mitglied
#2
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.
 

Jofre

Erfahrenes Mitglied
#3
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

Sempervivum

Erfahrenes Mitglied
#5
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.
 

Jofre

Erfahrenes Mitglied
#6
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
 

Quaese

Moderator
Moderator
#8
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
 

Sempervivum

Erfahrenes Mitglied
#10
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.
 

Jofre

Erfahrenes Mitglied
#11
Ganz schön pfiffig. Aber das muss man auch wissen. Da wäre ich nie drauf gekommen.

Meine Lösung klappt auch. Und sie ist auch simpel.

1.) Ich zeichne erst den Hintergrund.

zeichneBild("Images/Hintergrund.jpg",0,0,canv.width,canv.height);

2.) Dann zeichne ich über bilderGesamt.forEach(dein Tipp thema vorher) - die ausgesuchten Figuren ein.

3.) Wenn ich dann eine Figur anklicke, zeichne ich den alten Hintergrund für diese Person neu.

ersetzeBild ("Images/Hintergrund.jpg",xclick,yclick,80,100,xclick,yclick,80,100);

4.) dann zeichne ich an diese Stelle ein Kreuz oder rauchende Fahne.

zeichneBild("rauchendeFahne.png",xclick,yclick,80,100);

GzG

Stolzer Joachim