Du bist nicht angemeldet.

Werbeanzeige

1

21.12.2012, 14:13

Browsergame - Riesenspielfeld erstellen mit Javascript

Hallo zusammen,



ich versuche im Moment ein Spielfeld für ein Browsergame zu erstellen.
Ich habe png-Figuren die über das Spielfeld laufen im Moment 1024 x 1024 großes Spielfeld.
Aber ich hätte gerne ein z.B. 30.000 x 30.000 großes Spielfeld.

Wie realisiere ich das am besten?

Gibt es irgendwelche Links?

Schorsch

Supermoderator

Beiträge: 5 200

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

2

21.12.2012, 16:45

Dann mach das Spielfeld halt größer? Wenn die Spielwelt zu groß wird und dadurch dein Spiel verlangsamt wird, kannst du die Welt in kleinere Bereiche einteilen. Dann ist nicht immer die gesamte Welt geladen sondern immer nur Teile. Das sind aber schon fortgeschrittenere Sachen und du wirkst mir bei dieser Frage nicht so, als wenn es die richtige Aufgabe für dich wäre. Übernimm dich nicht direkt.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

3

28.12.2012, 17:56

So. Ich habe nun ein Spielfeld aus Kacheln gebastelt. Auf den Kacheln (60px * 60px) stehen im Moment halt nur die Koordinaten. Bin kein Designer :).

- Es gibt einen Ordner namens "Tiles"
- dieser Ordner hat widerum Unterordner 1 - N
- In diesen Unterordnern befinden sich Jpegs (Kachelbilder) mit den Namen 1 -N
- So setzen sich die Kordinaten Zusammen Tiles/[X-Koordinate]/[Y-Koordinate].jpg

- Die Kacheln werden in einer 2-fach verschachtelten for-Schleife im Javascript geholt.
- Das heisst: Sie werden kleinen Divs (60px * 60px) als Hintergrunbild zugewiesen.
- Diese kleinen Divs werden dann in einem großen Div (Spielfeldcontainer) dargestellt.

Klappt schon sehr gut.

- Der nächste Schritt wird sein, wie ich bein Mouseover am Rand das Spielfeld verschiebe.
- Und danach die Jpegs per Ajax zu holen und zu cachen. Weil das gesamte Spielfeld ist jetzt schon nur mit den Koordinaten 30MB groß
:dead:

Für Tipps bin ich immer dankbar.
Außerdem versuchr ich gerade den A* Alg. in Javascript umzusetzen. Gar nicht so leicht :P

Edit: @Mods Vielleicht meinen Thread besser in 2D-Grafik verschieben.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »nerdyGeek« (28.12.2012, 18:14)


NachoMan

Community-Fossil

Beiträge: 3 905

Wohnort: Berlin

Beruf: (Nachhilfe)Lehrer (Mathematik, C++, Java, C#)

  • Private Nachricht senden

4

28.12.2012, 19:33

Ich glaub du hast den Nutzen von Tiles falsch verstanden... man erstellt sich eigentlich Tiles für z.B. Gras, Stein, Sand, nummeriert sie durch und verwendet diese immer wieder. Man speichert also nicht die Grafik für jedes einzelne Tile auf dem Feld sondern nur den Index von dem was dort gezeichnet werden soll(dafür dürfte eine Datei reichen).
Das ist schneller und spart Speicher.

Das dürfte auch dein Problem mit dem "riesen Spielfeld" lösen.
"Der erste Trunk aus dem Becher der Erkenntnis macht einem zum Atheist, doch auf dem Grund des Bechers wartet Gott." - Werner Heisenberg
Biete Privatunterricht in Berlin und Online.
Kommt jemand mit Nach oMan?

Schorsch

Supermoderator

Beiträge: 5 200

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

5

28.12.2012, 21:12

Und wenn du eine Map laden willst, kannst du diese Indizes einfach in einer Textdatei speichern und dann daraus einlesen. Das über eine Ordnerstruktur zu lösen ist eigentlich quatsch.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

6

29.12.2012, 15:11

OK! Ich danke euch für die vielen Tipps.
Ich bin ein absoluter Anfänger was Spieleprogrammierung und Frontndprogrammierung angeht.
Bisher habe ich nur Backendprogrammierung (C#), Datenbankdesign und Datenbankprogrammierung (SQL) gemacht.

Ich hätte ein paar Fragen:
1.) Was ist an der Ordnerstruktur so schlecht? Ist ein XML-File besser und alle Files in einem Ordner.
2.) Die Tiles NUR für den Untergrund habe ich das richtig verstanden? Und da sich die Grafiken wiederholen, weniger MBs!
3.) zu 2. wenn JA wie löse ich das mit den Gebäuden und so weiter.
4.) Aber ich muss die Grafiken trotzdem asynchron holen und dann auf dem Client cachen, RICHTIG?
5.) Die Gebäude und so weiter hole ich dann pro Gebäude auf einen Schlag. RICHTIG?
6.) Kann jemand mir einen Tip geben, wie ich am besten in javascript scrolle, wenn ich am Rand ein Mouseover mache.

Schorsch

Supermoderator

Beiträge: 5 200

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

7

29.12.2012, 15:55

Das sind alles verschiedene Fragen und an sich sieht man, dass du dich vielleicht mit ein paar Grundlagen vertraut machen solltest. So ein Thema wie scrolling oder manchmal auch als viewport scrolling bezeichnet ist eigentlich nicht sonderlich schwer. Du möchtest einen bestimmten Ausschnitt deiner Karte zeichnen. Mal dir das ganze mal auf. Den Ausschnitt den du grad sehen möchtest kannst du umrahmen. Dieser Auschnitt hat einfach eine Verschiebung. Du musst die Grafiken einfach an anderen Positionen zeichnen, welche du mit der Verschiebung ermitteln kannst. Zu dem Thema sollte Google aber auch einiges liefer. Zum Thema TileMap findest du bei Google sicherlich auch viel.
Natürlich funktioniert der Ansatz mit den Ordnern, ist aber eigentlich unsinnig. Du hast für jedes Tile auf der Map eine Grafik. Wenn sich Grafiken wiederholen hast du sie auch mehrfach auf dem Server. Wenn du jetzt ein Tile austauschen willst, musst du unter Umständen eine Menge Grafiken austauschen. Wenn du aber sagst du hast:
Grafik1, Grafik2 und Grafik3 und speicherst in einer Textdatei nur Indizes:

Quellcode

1
2
3
4
1111111
1223221
1223221
1111111

Da wo eine 1 steht würdest du Grafik1 rendern, bei der 2 dann halt Grafik2 und so weiter. Das hat den Vorteil, dass du jede Grafik nur ein mal auf dem Server hast und schnell austauschen kannst. Dadurch das Mapdaten und Mapdarstellung voneinander getrennt sind könntest du theoretisch verschiedene Mapthemes etc anbieten, indem du die Grafiken austauschst. Wenn du jetzt die Karte ändern willst musst du nur eine Textdatei verändern, was meist etwas übersichtlicher sein sollte als deine Version mit den Ordnern. Theoretisch kannst du dir dann noch nen Karteneditor schreiben in welchem du die Karte zusammen klicken kannst und danach speichern kannst.
Ob du zum speichern jetzt XML oder was auch immer verwenden willst steht dir erst mal offen. Am besten ist du Googlest nach den Themen einfach mal. Und versuch dabei vielleicht nicht nur nach Webversionen zu suchen, sondern erst mal allgemein zu gucken wie es gelöst wird.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

8

29.12.2012, 16:11

Achso. Jetzt versteh ich was ihr mit indizes gemeint habt. OK! Der Quellcode macht jetzt einiges klar!
Ich schreibe mir in C# einen Map-Editor der Textfiles erstellt und ausließt.

Jetzt noch die Gebäudefrage bitte. Gebäudegrafiken hole ich auf einmal (Und lege sie ÜBER die Tiles) oder. Ein Gebäude teile ich nicht in Tiles auf. habe ich das richtig verstanden?

Schorsch

Supermoderator

Beiträge: 5 200

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

9

29.12.2012, 18:47

Das ist der Plural von Index. Ein Index, aber mehrere Indizes. Du kannst dir deine Tilegrafiken zum Beispiel in einem Array ablegen und so direkt darauf zugreifen, oder du stellst dir einen Texturatlas zusammen, wobei alle Tiles in einer großen Grafik sind und nur der jeweilige Ausschnitt gerendert wird. Da gibts aber zig Möglichkeiten.
Das Problem mit den Gebäuden kannst du über verschiedene Ansätze lösen. Du kannst natürlich große Objekte über die Tilemap legen, wobei die großen Objekte nicht in der Kachelstruktur deiner Tilemap sind. Du kannst dein Gebäude jedoch auch zerstückeln und dieses aus einzelnen Tiles zusammen bauen. Du kannst deine Map ja nicht nur Zweidimensional, sondern Dreidimensional machen. Du hast einfach mehrere Schichten der Karte. Die unterste Schicht ist möglicherweise der Boden. Die nächste Schicht besteht aus Gebäuden und anderen Objekten mit denen Kollidiert wird. Dann könnte man noch eine weitere Schicht machen, für Objekte die sich über dem Spieler befinden. Baumkronen oder Wolken zum Beispiel. Je nach Anforderung kannst du dir dann dein Schichtensystem weiter ausbauen. Beim rendern gehst du dann von unten nach oben durch. Zuerst renderst du die unterste Schicht und arbeitest dich dann nach oben durch. Das sind aber alles nur Möglichkeiten. Wenn du bei Google nach Tilemaps suchst solltest du eine Menge an Informationen finden.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Werbeanzeige