Was ist der einfachste Weg, ein "Room Designer" Spiel im Browser umzusetzen?
Früher gab es auf den gängigen Spieleseiten zum Beispiel "My New Room":
Das Spiel funktionierte so: Man hatte eine isometrische Raumansicht (ich nehme an einfach ein statisches Bild), bei der man die Wandfarbe und die Bodentextur ändern konnte (ich nehme an, die Wände waren dann einzelne Bilder).
In einer Art Galerie gab es einige Möbelobjekte (nicht animiert!) die man beliebig in den Raum ziehen konnte, um diesen so zu gestalten. Es gab also keine festen Plätze, auch kein Raster an das die Möbel andocken, man konnte die beliebig herum schieben und über oder nebeneinander legen.
Und am Ende konnte man sich ein jpg ausgeben lassen, um das Bild zu teilen.
Wie setzt man - als relativer Anfänger in der Spieleentwicklung - sowas um? Ich denke der Raum selbst ist ein "canvas" mit einem Hintergrundbild, aber wie man die Objekte verschiebbar macht mit HTML 5 verstehe ich noch nicht so ganz oder wäre das was für Javascript?
Oder gibt es irgendwo vllt. schon Code oder eine Anleitung für so ein Spiel? Ich finde nur kompliziertere Projekte und im Grunde will ich ja nur etwas zusammenstellen, wo man Bilder auf ein anderes großes Bild ziehen und daraus ein neues Gesamtbild erzeugen kann.
1 Antwort
Wie setzt man - als relativer Anfänger in der Spieleentwicklung - sowas um?
Du benötigst definitiv JavaScript-Kenntnisse. MediaEvent wäre da eine erste gute Anlaufstelle. Für die Szenerie generell kannst du mit der Canvas API auf einem canvas-Element zeichnen.
Um den isometrischen Raum mit seinen Wänden und Texturen zu erstellen, wäre es sicherlich am einfachsten, die Szene in verschiedene teiltransparente Bilder aufzuteilen (Hintergrund, Boden, Wand rechts, Wand links), die dann hintereinander einmal (übereinander) gezeichnet werden. Damit das immer passt, sollte der Nutzer dann aber auch nur eine festgelegte Auswahl an Bildern vorgegeben bekommen und nicht die Möglichkeit haben, eigene Bilder hochzuladen. Die notwendigen Rotationen/Transformationen werden in den Bildern gelöst, Vektorgrafiken eignen sich generell am besten, um flexibler für verschiedene Auflösungen/Skalierungen zu bleiben.
Das gleiche Prinzip kann man dann noch auf die Bildobjekte im Vordergrund anwenden. Mit dem einzigen Unterschied, dass diese verschiebbar sind. Daher sollte es eine Liste geben, die alle Vordergrundobjekte archiviert. Die Listeneinträge sollten am besten nach z-Index aufsteigend sortiert vorliegen. Wenn man jedes neue Bildobjekt ans Ende der Liste anhängt und auch als Letztes zeichnen lässt, stellt das kein Problem dar.
Um Bilder zu verschieben, müsste man verschiedene Mausereignisse (mousedown, mouseup, mousemove) abfangen und behandeln (Stichwort: Event Listener).
- Wenn die Maustaste gedrückt wird, wird die oben erwähnte Liste rückwärts durchlaufen und je Eintrag geschaut, ob die Mauskoordinaten (die stehen im Event-Objekt) innerhalb der Fläche des Bildobjekts liegen. Das erste Vorkommen wäre das Objekt, welches folgend verschoben wird.
- Wenn die Maustaste bewegt wird und ein Verschiebevorgang gestartet wurde, wird die Position des zu verschiebenden Objekts an die der Maus angepasst.
- Wenn der Nutzer die Maustaste wieder loslässt, wird die Position des zu verschiebenden Objekts an die der Maus angepasst und der Verschiebevorgang beendet.
Für die Speicherung in ein Bild wiederum kann man sich zum Canvas-Element eine data-URL generieren lassen.
Beispiel:
<!doctype html>
<title>Example</title>
<body>
<canvas height="100" id="canvas" width="100"></canvas>
<div id="result"></div>
<script>
const canvas = document.getElementById("canvas");
// draw red rectangle
const context2d = canvas.getContext("2d");
context2d.fillStyle = "red";
context2d.beginPath();
context2d.rect(10, 10, 20, 20);
context2d.closePath();
context2d.fill();
// save and add as image on web page
const result = document.getElementById("result");
const imageSource = canvas.toDataURL("image/png");
result.innerHTML = `<img alt src="${imageSource}">`;
</script>
</body>