[FRAGE] Canvas und drawImage mit einzelnen Dateien
- Ersteller terra75
- Erstellt am
xorg1990
New member
Von Flash habe ich keinen Plan, habe eine Zeitlang mit Java Applts hantiert.... java igit.terra75 schrieb:
Du suchst wohl sowas wie einen z-index, das regelt man über das globalCompositeOperation Attribut vom canvas. Um mehrer Layer zu erreichen musst du zwischen "destination-over" und "source-over" hin und her springen.
Wie stark zoomst du den rein?? Theoretisch bracht du bloß raus zu zoomen.terra75 schrieb:
html5 - canvas element - Multiple layers - Stack Overflow
Ist das ein Tippfehler?
return functionm()
{
Glaube da hat tsseh ein m mit reingemanscht
Komme ich auch, Windows 3.1 + Qbasic.=terra75 schrieb:
In eine neue Programmiersprache einzusteigen und gleich ein Spiel entwickeln wollen ist ja auch nicht ohne.terra75 schrieb:
Dann solltest du dir die 2 Videos mal anschauen.terra75 schrieb:
https://www.youtube.com/watch?v=ya4UHuXNygM
und
https://www.youtube.com/watch?v=2pL28CcEijU
Bei mir kam da immer so der "Aaahh" und "achso ist das" effect auf.
Das ist der HAMMER. Das soundesign gigantisch. Spiele ja über eine 7.1 Anlage. Grusel ohne ende.. Wie gesagt die Viecher sind eine bin da seit der Silent hill reihe ziemlich abgehärtet.terra75 schrieb:
Nicht nur immer Zombie wie in Resident evil . Absolute Kaufempfehlung meinerseits, zumindest wen Bioshock vom Leveldesign gefallen hat und deadspace 1 von der Atmo.
terra75
Member
Also, wenn man von eigentlichen Thema ausgeht, dann kann ich "Ja" sagen.
Terra
- - - Aktualisiert - - -
Ist definitiv ein Ansatz aber vielleicht nicht ganz, was ich denke.
Mit Layern meine ich eher, das ich z.B. ein Container habe, in dem ich nur die Map zeichne. Ein weiterer Container, der über der Map liegt zeigt dann evtl. ein User Interface (z.B. ein transparentes Image) an, der fest an seine Position verbleibt. Trotzdem soll die Map mit der Maus verschiebbar sein. Und das alles in einem Canvas.
wenn du schon mal mit Photoshop gearbeitet hast, könnte man auch die Ebenen als Beispiel nehmen.
Es gibt 7 Zoom-Stufen, wovon ich aber wohl nur 4 verwenden möchte.
https://tiles.guildwars2.com/{continent_id}/{floor}/{zoom}/{x}/{y}.jpg
Wenn ich nach deiner Idee gehen würde, bräuchte ich aber die letzte Zoomstufe. Also Stufe 7. Da ist aber das Problem, das ich über 16.000 Einzelbildchen aufrufen müsste. Das macht mein Server nicht mit (und wahrscheinlich kein anderer). Es bedeutet, das ich es irgendwie einrichten müsste, das nur die Bilder aufgerufen werden, die ich grade sehe. Und da wüsste ich gar nicht, wie ich das umsetzen sollte.
Ja, war ein Tippfehler. Ist mir aber sofort aufgefallen.
Es wird ja kein Spiel. Einfach nur eine Übersichtskarte, die von einem Spiel auf einer Webseite mittels Canvas dargestellt werden soll. Später evtl. mehr.
Gruß,
Terra
das ist genau der falsche ansatz.
du hast einen viewport, also einen ausschnitt aus einem größeren bereich den du siehst.
diesen, und nur diesen, zeichnest du jedesmal neu, wenn du die position änderst.
und die user, die die bilder alle laden müssten.
hatten wir auch auf unserer gw2 seite, für oricalcum, erz das man alle 24h einmal abbauen kann, dass aber jeden tag woanders spawnt.
Zuletzt bearbeitet:
terra75
Member
Warum muss eigentlich alles so schwer sein?
Ja, die sowieso ...
Aber mal ein ganz anderer Ansatz. Nur rein Hypothetisch ... Was wäre, wenn ich mit Node.js arbeite und alles durch den Server vorbereiten lassen würde, so das ich nur noch das Ergebnis anzeigen lassen würde. Die Datenmenge ist sicherlich die gleiche aber ist da nicht was zu machen?
Anderes Beispiel: Ich habe mal 2 Tests gemacht. Lese aus der Datenbank 50 Einträge mittels Javascript aus. Bei der einen habe ich klassisch eine PHP Datei mittels Ajax aufgerufen, die mir die Sachen aus der DB geholt hat. Die andere war, das ich direkt in Node.js MySQL benutzt habe - ohne PHP. Das Ergebnis war, das der Aufruf mit Ajax und PHP etwa 1,534 Sekunden gedauert hat, bis was zu sehen war und bei Node.js ich keine Zeit messen konnte, weil es so schnell ging. Wäre das auch mit den Bildern machbar?
Gruß,
Terra
xorg1990
New member
Das ist eigentlich "noch nicht so schwer." Schwer ist einen Algorithmus zu entwickeln aufgrund einer Mathematik z.b Die Fourier Transformation.terra75 schrieb:
terra75 schrieb:
Das gilt es auszuprobieren, es gibt bestimmt Module die für das schnelle einlesen von Bildern gedacht sind. Php ist ja auch nicht mit Nodejs gleichzusetzen, wenn dann musst du apatche mit Nodejs vergleichen. Denn Apache führt ja erst php aus, und php wiederum mysql. Die Bilder würde ich via xhr2 laden und das als blob oder Arraybuffer. Oder du machst gleich einen server push.
Solche Tests hat doch bestimmt schon wer gemacht, leider muss ich jetzt wech, sonnst würde ich mal googlen.
schau mal
javascript - 2D top-down minimap - Stack Overflow
was willst du da vorbereiten? den sichtbaren bereich änderst du am client, zeichnen muss der sowieso und die bilder kommen von arenanet.
was hast du gemacht? einmal einen request gestartet, und gewartet, dass das ergebnis angekommen ist und einmal direkt auf dem server gemessen?
terra75
Member
So in etwa könnte man es ausdrücken. Wobei ich aber bei der 2. Variante mich mit dem Client erst noch via Socket.io zum Server verbunden habe und dann eine Rückantwort via socket.emit und socket.on realisiert habe.
Heißt so viel wie, bei der PHP Variante mussten erst die Daten von der Datenbank geholt werden, während bei der Node.js Variante bereits der Server das fertige Ergebnis vorhanden war.
Es ist nur eine Überlegung. Das z.B. alle Bilder, die es gibt vom Server abgeholt und irgendwo zwischengespeichert werden. Vielleicht lässt sich ja dann durch eine Funktion das darstellen und Händeln der Bilder durch den Server beschleunigen.
Wie gesagt, das ist nur eine Idee. Ob es Möglich ist und ob es überhaupt Sinn macht - so weit bin ich noch gar nicht.
Terra
heißt auf jedenfall, keine vergleichbaren szenarien. prinzipiell könnte js ein wenig schneller laufen, weil die node-js-engine js in maschienencode übersetzt, aber in diesem szenario dürfte die zeit in den requests und im db-zugriff stecken
nee, würde ich aufgeben.
nimm die js-lib, wenn du es nur fertig machen möchtest, oder wenn du es nur für dich machst, mach weiter so wie beschrieben.
das ist eigentlich nicht schwer.
terra75
Member
Das habe ich bis jetzt gemerkt. *ironie*
Sowas ist für dich sicherlich keine große Aufgabe. Beneide dich sogar etwas, das es dir so leicht von der Hand fällt.
Aber setzte auch auf deine Erfahrungen und werde Node.js dafür mal links liegen lassen.
Wichtiger finde ich es jetzt, selbst zu verstehen, wie ich mit Canvas und JavaScript umgehen muss um mein Ziel zu erreichen. Eine blöde Karte in Canvas darstellen und diese mit der Maus zu verschieben. Für viele hier wahrscheinlich eine Lächerlichkeit - aber für mich im Moment eine echte Hürde.
Na mal schauen. So in 5 Jahren werde ich das auch geschafft haben.
Gruß,
Terra
na wo ist denn das problem?
du hast eine karte von x_0 - x_n und y_0 bis y_n
hier drinn sind x*y bildkacheln mit einer festen bildgröße w*h
x*w - 1=x_n und y*h - 1 =y_n
du siehst einen ausschnitt dieser hat einen offset x_o und y_o und ist x_w breit und y_h hoch
als 1. musst du rausfinden, welche bilder du zeichnen musst(jetzt kommt es darauf an, wie die bildkacheln bezeichnet werden, ich nehme mal an x-index und y-index beginnen bei 0, du hast also bilder BILD_X_Y beginnend mit BILD_0_0)
x_min = Math.floor(x_0/w);
y_min = Math.floor(y_0/h);
x_max = Math.floor((x_0 + x_w - 1)/w);
y_max = Math.floor((y_0 + y_h - 1)/h);
du musst also alle bilder von x_min bis x_max in x richtung und von y_min bis y_max in y richtung zeichnen
dabei sind alle bilder am rand, also alle x_min, x_max, y_min und y_max bilder, in den meisten fällen nur teilweise zu zeichen
so ist z.b. bei allen x_min bildern nur der untere teil zu zeichnen also
x_min_height = ((y_min + 1) * h) - y_o;
beginnend ab einen y des bildes
x_min_y = y_o - y_min * h
bis hierhin alles klar?
bei allen y_min bilden ist nur der rechte teil zu zeichnen. den bekommst du analog raus.
bei allen bildern für x=x_max und y=y_max ist nur der obere bzw. der linke teil zu zeichen.
das solltest du jetzt eigentlich selbst rausfinden.
du hast eine karte von x_0 - x_n und y_0 bis y_n
hier drinn sind x*y bildkacheln mit einer festen bildgröße w*h
x*w - 1=x_n und y*h - 1 =y_n
du siehst einen ausschnitt dieser hat einen offset x_o und y_o und ist x_w breit und y_h hoch
als 1. musst du rausfinden, welche bilder du zeichnen musst(jetzt kommt es darauf an, wie die bildkacheln bezeichnet werden, ich nehme mal an x-index und y-index beginnen bei 0, du hast also bilder BILD_X_Y beginnend mit BILD_0_0)
x_min = Math.floor(x_0/w);
y_min = Math.floor(y_0/h);
x_max = Math.floor((x_0 + x_w - 1)/w);
y_max = Math.floor((y_0 + y_h - 1)/h);
du musst also alle bilder von x_min bis x_max in x richtung und von y_min bis y_max in y richtung zeichnen
dabei sind alle bilder am rand, also alle x_min, x_max, y_min und y_max bilder, in den meisten fällen nur teilweise zu zeichen
so ist z.b. bei allen x_min bildern nur der untere teil zu zeichnen also
x_min_height = ((y_min + 1) * h) - y_o;
beginnend ab einen y des bildes
x_min_y = y_o - y_min * h
bis hierhin alles klar?
bei allen y_min bilden ist nur der rechte teil zu zeichnen. den bekommst du analog raus.
bei allen bildern für x=x_max und y=y_max ist nur der obere bzw. der linke teil zu zeichen.
das solltest du jetzt eigentlich selbst rausfinden.