Hallo mal wieder bei einen Tutorial von Wbedesign-Ugurcu. Wir befinden uns immer noch in der 2D RPG reihe. Heute wollen wir unsere Klasse World schreiben.
Unsere Weltkarte ist eine sogenannte 2D tilemap. diese ist in einen Raster angeordnet was ihr euch ungefähr so vorstellen könnt.
Diese Raster ist etwas unspektakulär und soll nun die Optik von Wiesen und Steinen bekommen etwa so.
Heute widmen wir uns der Character class. In dieser werden wir eine Funktion schreiben um den Spieler auf der Karte zeichnen zu lassen und eine Funktion , damit er sich bewegen kann.
Erstmal vorweg wir werden für alle Elemente Objekte erstellen und mi dehnen Arbeiten. Für die Character class erstellen wir ein player Object.
|
1 2 3 4 5 6 |
Player = { posX : 1, posY : 1, } |
Es ist sehr simple, wir haben auch direkt Variablen für die Position auf der X achse (posX) und der Position auf der Y Achse(posY) erstellt. der Spieler soll sich von links auf Feld 1 befinden und von Oben nach Unten ebenfalls.
Hier eine Grafik zur Veranschaulichung.Auf dem Bild sieht man unsere Tilemap, das grün markierte Feld ist die Startposition unserer Spielfigur.Er befindet sich auf Feld 1 der X Achse und Feld 1 der Y Achse.
Als nächstes schreiben wir in unseren Objekt eine DrawPlayer Funktion um den Player in die Weltkarte tatsächlich zu zeichnen.
In diesem Tutorial wollen wir unsere Bühne erstellen in dieser Spielt sich das ganze Spiel ab.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Fighting Monk</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="Stage" width="480" height="320"> <p>Your browser does not support HTML5!</p> </canvas> |
Was wir benötigen ist ein einfachen Canvas Element. Diesen habe ich die ID Stage zugewiesen. und eine Breite von 480px und eine Höhe von 320px.
Hallo zusammen
Heute möchte ich euch einen Einblick in die Spielentwicklung geben.
Da die meisten Tutorials in diesen Bereich mit Frameworks sind, möchte ich eins ohne machen.
Gut also müssen wir uns als ersten Gedanken machen was wir benötigen.
Das wäre es in Grunde. Beides lässt sich ohne Aufwand kostenlos downloaden.