Visual Studio 2008 Beta 2 Projekt zum Download: SilvrGame_Map_Source.zip

Starte dein Visual Studio 2008 Beta 2 und erzeuge ein neues Silverlight Projekt mit dem Namen SilvrGame_Map. Nachdem Visual Studio dein Projekt erzeugt hat, siehst du den Quelltext deiner Page.xaml Datei vor dir. Wie zu vermuten war, absolut unspektakulär. Nur um auf Nummer sicher zu gehen, ändere in dieser Datei den Wert Background Attributes von White auf Black und starte eine neue Debugger Instanz. Sollte sich ein Browserfenster öffnen und dir ein schwarzen Rechteck darstellen, dann kannst du dir sicher sein, dass deine Silverlight Installation noch intakt ist

Das Gröbste wäre damit auch schon getan, der Rest ist nur noch die Theorie aus dem vorherigen Beitrag in die Praxis umzusetzen. Kleinigkeit!
Es hat sich herauskristallisiert, dass wir vorerst zwei Objekte für die Generierung des Spielfeldes benötigen: die Kachel (Tile) und das Spielfeld (Map) ansich. Füge also deinem Projekt eine neue Klasse mit dem Namen TileBase hinzu und schreibe folgenden Code rein:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilvrGame_Map
{
public class TileBase : Control
{
private bool m_walkable;
private Point m_position;

public Point Position
{
set
{
m_position = value;
this.SetValue(Canvas.LeftProperty, value.X – Width);
this.SetValue(Canvas.TopProperty, value.Y – Height);
}
get
{
return m_position;
}
}

public bool Walkable
{
get { return m_walkable; }
set { m_walkable = value; }
}
}
}

Die Klasse TileBase bildet das Grundgerüst für jede Kachel, die wir in unserem Spiel generieren. Die Kachel erstellst du nachher in Expression Blend als UserControl. Aus diesem Grund leiten wir TileBase von Control und nachher das UserControl aus Blend von TileBase ab. Dazu aber später mehr.
Da ein Control von Haus aus die Eigenschaften Width und Height mitbringt, hast du deine Klasse nur um zwei weitere Eigenschaften, nämlich m_walkable und m_position, ergänzt. Durch das Property Position stellen wir nur sicher, dass jede erstellte Kachel an ihrem linken, oberen Eck ausgerichtet wird. Dies erleichtert uns nachher die Platzierung der Kacheln auf dem Spielfeld.

Das Grundgerüst steht, nun ist es an der Zeit deiner Kachel ein Gesicht zu verpassen. Klicke im Solution Explorer mit der rechten Maustaste auf Page.xaml und wähle Open in Expression Blend… aus. Hast du zuvor Expression Blend installiert, dann öffnet sich nun dein Silverlight Projekt in Expression Blend. Ist dem nicht so, dann installiere es jetzt, starte dein Visual Studio nach der Installation neu und führe den Schritt erneut aus. Vor dir erscheint nun ungefähr dasselbe Fenster, wie das hier:

Ich werde hier auf die Funktionalität von Expression Blend nicht näher eingehen, dazu gibt es im www einige Tutorials.
Du siehst hier nun deine Page.xaml Datei, nichts was dich vom Hocker reißen sollte Um ein UserControl zu erstellen, klicke einfach auf File, dann New Item… und wähle Silverlight UserControl aus. Gebe als Namen Tile.xaml ein und bestätige deine Eingabe mit einem Klick auf OK.

Jetzt zeichnest du dir deine Kachel, dazu musst du

1. In der Tool Palette das Rectangle Werkzeug auswählen, dann im mittleren Bereich des Bildschirms (deiner Arbeitsfläche) ein Recht einzeichnen. Kümmere dich vorerst nicht um die Eigenschaften des Rechtecks.
2. Im Object and Timeline Panel siehst du dann neben dem UserControl noch ein weiteren Eintrag: Rectangle. Markiere das UserControl (wenn es gelb umrahmt ist, ist es markiert) und benenne es von UserControl in Tile um. Dasselbe machst du mit dem Rectangle Objekt. Dieses benennst du, wie auf dem Bild zu sehen ist, in Body um.
3. Die Fülleigenschaft belässt du bei weiß, hier änderst du nur die Farbe des Randes (Stroke) in ein etwas dunkleres grau um.
4. Im Layout Panel widmest du dich den Eigenschaften des Rechtecks. Eine Breite und Höhe von 40 Einheiten ist für unser Vorhaben durchaus OK. Die Ausrichtung setzt du auf Auto. Sie wird nachher per Code angepasst.

So schnell erstellt man sich ein UserControl in Expression Blend. Ok, es ist nichts Aufwendiges, aber was nicht ist, kann vielleicht noch werden Speichere dein Projekt in Expression Blend ab und wechsle dann zu Visual Studio, welches dich eleganter weise daraufhinweist, dass sich etwas an deiner Projektstruktur geändert hat und du diese nachladen kannst, sofern du möchtest. Und Ja, du möchtest Sofort erscheint in deinem Solution Explorer ein neues Objekt, nämlich Tile.xaml und darunter Tile.xaml.cs. Diese öffnest du in deinem Editor und schreibst folgenden Code rein:

using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace SilvrGame_Map
{
public class Tile : TileBase
{
private FrameworkElement m_root;
private Rectangle m_body;

public Tile(Point position, bool walkable)
{
Stream s = this.GetType().Assembly.GetManifestResourceStream(“SilvrGame_Map.Tile.xaml”);
m_root = this.InitializeFromXaml(new StreamReader(s).ReadToEnd());
m_body = m_root.FindName(“Body”) as Rectangle;

if (!walkable)
{
SolidColorBrush _notWalkableColor = new SolidColorBrush(Color.FromRgb(0, 0, 0));
m_body.Fill = _notWalkableColor;
}

Position = position;
}

public Tile(double tileSize, Point position, bool walkable)
: this(position, walkable)
{
m_root.Width = tileSize;
m_root.Height = tileSize;

m_body.Width = tileSize;
m_body.Height = tileSize;
}
}
}

Wie schon oben erwähnt, lassen wir unser UserControl nicht von Control, sondern von TileBase erben und geben ihm unsere ergänzten Eigenschaften, wie ob es begehbar ist und dessen Position. Für unsere Kachel brauchen wir neben dem FrameworkElement m_root, welches die Kachel als Ganzes abbildet, noch ein Rectangle Objekt m_body, das wir mit dem gezeichneten Rechteck aus Expression Blend im Konstruktor der Klasse referenzieren.

Stream s = this.GetType().Assembly.GetManifestResourceStream(“SilvrGame_Map.Tile.xaml”);
m_root = this.InitializeFromXaml(new StreamReader(s).ReadToEnd());
m_body = m_root.FindName(“Body”) as Rectangle;

Als Ãœbergabeparameter bekommt der Konstruktor einmal einen boolschen Wert, ob die Kachel begehbar ist oder nicht und ein Punkt zum Positionieren der Kacheln. Nach der Initialisierung und Referenzierung der Elementen unser Kachel, muss nur noch geprüft werden, ob die Kachel für den “Held” als nicht begehbar deklariert wurde, ist dies der Fall, so färben wir die Kachel schwarz. Zum Schluss wird die Kachel noch an ihre richtige Stelle positioniert.

Der zweite Konstruktor wird um die Kachelgröße ergänzt. Sprich, durch den Aufruf dieses Konstruktors können wir die Größe der Kachel per Code ändern, so kann es durchaus vorkommen, dass wir nicht die Default-Kachel von 40 x 40 Einheiten haben wollen, sondern vielleicht Kacheln der Größe 25 x 25 Einheiten.

public Tile(double tileSize, Point position, bool walkable)
: this(position, walkable)
{
m_root.Width = tileSize;
m_root.Height = tileSize;

m_body.Width = tileSize;
m_body.Height = tileSize;
}

Ein weiterer, noch wichtigerer Grund ist, dass die Spielfeldklasse die Kachelgröße verwaltet und somit entscheidet, wie groß/klein die Kacheln erzeugt werden.
Somit wäre unsere Kachel soweit fertig. Machen wir uns endlich an das Spielfeld ran. Hierzu fügst du deinem Projekt eine neue Klasse hinzu, nämlich Map. Wie gerade erwähnt, verwaltet das Spielfeld die Größe jeder Kachel und bekommt deswegen diese Eigenschaft als Attribut – m_tileSize. Desweiteren muss das Spielfeld wissen, auf welchen Canvas Objekt es die Kacheln legen soll. Hierzu bekommt es ein ein Canvas Objekt – m_parentCanvas – als Attribut. Was noch bleibt ist neben einem Container für die generierten Kacheln – hier ein Array m_mapTiles – noch das Spielfeldformat – m_map. Das Spielfeldformat gibt die gibt unserer Karte die richtige Struktur, es legt fest, welche Kacheln begehbar sind und welche nicht. Zusätzlich entscheidet es über die Größe des Spielfeldes und der Anzahl der darin vorkommenden Kacheln.

private Canvas m_parentCanvas;
private double m_tileSize;
private Tile[,] m_mapTiles;

// Initialisize the map format
private int[,] m_map =
{
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 1, 0, 0, 0, 1, 0, 0, 1},
{1, 0, 1, 0, 0, 0, 1, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};

Jetzt fehlt uns nur noch der Konstruktor, der die Spielfeldattribute initialisiert und eine Methode – BuildMap() – zur Generierung des Spielfeldes.

public Map(Canvas rootCanvas, double tileSize)
{
m_parentCanvas = rootCanvas;
m_tileSize = tileSize;
m_mapTiles = new Tile[m_map.GetLength(0), m_map.GetLength(1)];
}

public void BuildMap(bool centered)
{
for (int i = 0; i < m_map.GetLength(0); i++)
{
for (int j = 0; j < m_map.GetLength(1); j++)
{
bool walkable = true;

if (m_map[i, j] == 1)
{
walkable = false;
}
// calculate the tile position depends on the centered parameter
Point cellPosition;
if (centered)
{
double canvasMiddle = m_parentCanvas.Height / 2 – (m_tileSize * m_map.GetLength(0) / 2);
double canvasCenter = m_parentCanvas.Width / 2 – (m_tileSize * m_map.GetLength(1) / 2);

cellPosition = new Point(j * m_tileSize + canvasCenter, i * m_tileSize + canvasMiddle);
}
else
{
cellPosition = new Point(j * m_tileSize, i * m_tileSize);
}

Tile _tile = new Tile(m_tileSize, cellPosition, walkable);

m_parentCanvas.Children.Add(_tile);
m_mapTiles[i, j] = _tile;
}
}
}

Ich habe der Methode BuildMap() als Übergabeparameter einen boolschen Wert mitgegeben, der festlegt, ob das Spielfeld sowohl horizontal als auch vertikal zentriert dargestellt wird. Sonst würde es oben links in der Ecke kleben und das sah für mich nicht so schön aus.

Nun hast du es aber geschafft. Zum Schluß musst du nur noch in dem Page_Loaded EventHandler der Page.xaml.cs Datei eine Instanz der Map Klasse erzeugen und ihre Methode BuildMap() mit den dazugehörigen Übergabeparametern aufrufen. Das wars dann auch schon.

Map _map = new Map(this, 60);
_map.BuildMap(true);

Im Browser kannst du dann das Ergebnis deiner harten Arbeit betrachten Im Firefox sollte es dann ungefähr so aussehen:

Im nächsten Artikel bringen wir ein wenig Leben ins Spiel und fügen dem Ganzen einen Held hinzu, den wir dann hoffentlich auf unsere Karte bewegen können

Eine Neuinstallation der Runtime brachte keine Erfolge. Kann mir das Phänomen leider nicht erklären, den auf der silverlight.net Webseite springt das PlugIn an und zeigt den Inhalt mit Animation an. Ist nur etwas ärgerlich das Ganze, da ich einige Tabs im FF offen habe und bei jedem Testrun, muss ich meinen Firefox schließen, weil Visual Studio eine Instanz des Browsers öffnen muss, damit ich darin debuggen kann.

Gibts da eurerseits irgendwelche Erfahrungswerte bezüglich Lauffähigkeit mit dem IE und dem Debuggen von Silverlight Projekten?

Wie wir an diesem Bild links erkennen können, ist das Spielfeld eine zwei dimensionale Fläche, die sich in Spalten und Zeilen untergliedern lässt. Das programmiertechnische Pendant in C# dazu wäre ein zwei dimensionales Array. Wem diese Datenstruktur nicht geläufig ist, so möchte ich ihn/sie an dieser Stelle auf die MSDN Online Bibliothek aufmerksam machen, in der Arrays ausführlich erklärt werden.

Betrachten wir unser Spiel aus der Sicht eines Arrays, so beginnt die Adressierung der Spalten und Zeilen jeweils bei 0. In unserem Beispiel besteht das Spieldfeld aus 10 Spalten und 6 Zeilen, was genau 60 Kacheln entspricht. Die blau markierte Kachel würden wir also wie folgt ansprechen:

map[3][7];

Also halten wir fest, dass ein Spielfeld auf einer bestimmten Anzahl an Spalten und einer bestimmten Anzahl an Zeilen beruht, deren Produkt die Anzahl der benötigten Kacheln ergibt. Klingt recht einfach, oder? Und ja, das ist es auch.

Was uns also noch fehlt, sind die Kacheln. Welche Eigenschaften können Kacheln den gebrauchen?
Eine bestimmte Höhe und Breite wäre sicherlich sinnvoll. Wie sieht es mit der Eigenschaft aus, ob das Feld begehbar ist oder nicht? Denn nicht alle dargestellten Kacheln auf dem Spielfeld können von unserem Helden (Spielfigur) betreten werden. Eine Mauer oder Wasser sind je nach Spielprinzip nicht begehbar. Diese drei Eigenschaften für eine Kachel sollte uns fürs erste reichen.

Somit hätten wir schon ein wenig beschrieben, wie ein Spielfeld und die darin befindlichen Kacheln aufgebaut sind. Was ist noch fehlt, um mit dem Programmieren endlich anzufangen ist das Format des Spielfeldes. Die Frage, die sich uns an dieser Stelle stellt ist, wie speichern wir unser Spielfeld ab?
Klar in einem Array, aber woher wissen wir, welche Kachel begehbar ist und welche nicht? Wie werden diese identifiziert? In unserem Fall gestaltet sich die Lösung des Problems recht einfach. Wir unterscheiden vorerst nur zwei Zustände, begehbar oder nicht begehbar. Also würde ich die Zahl 1 für den Zustand nicht begehrbar definieren und die Zahl 0 für den Zustand begehbar.

Um ein Spielfeld, wie wir es hier im linken Bild sehen, aufzubauen, müssen wir für jede schwarze Kachel eine 1 und für jede weiße Kachel eine 0 schreiben. in C# sieht das folgendermaßen aus:

int[,] map = {
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 0, 1, 1, 0, 0, 1, 1, 0, 1},
{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
};

Man könnte das Format des Spielfeldes sicherlich auch in eine seperate Datei auslagern, sei es XML, TXT oder ein eigenes Dateiformat. Ich habe mich für das 2D Array entschieden, weil es erstens für kleine Spiele die gängiste Methode ist, zweitens es die Kollisions- und Pfadberechnung relativ einfach macht und drittens es zahlreiche Beispiele im Internet gibt, die auf dieser Methode aufbauen. Wieso sollten wir uns dann das Leben schwerer machen?

Im nächsten Artikel werden wir dann endlich anfangen unsere Gedanken in C# Code umzuwandeln. Wir konstruieren uns mit Expression Blend eine Kachel und bauen mit dieser Kachel unser erstes Spielfeld auf. Man darf also gespannt sein

Mini Adventure (Lights of Laminos)

Auf diesem Bild kann man das Prinzip sehr gut erkennen. Die Spielfläche ist in viele kleine Kacheln untergliedert und findet seinen Ursprung vor langer langer Zeit. Früher, als es auf den Speicherverbrauch ankam und man um jedes Bit gekämpft hat, war dieses Prinzip der Kartengenerierung von Vorteil. Man konnte mit wenig Grafikelementen eine komplette Spielwelt erstellen und bei Bedarf einzelne Elemente austauschen ohne dabei große Datenmengen nachladen zu müssen.
Ich habe auf diesem Bild das Raster eingezeichnet und die Flächenbereiche markiert, die aus ein und derselben Grafik bestehen. Die braun hinterlegten Vierecke haben dasselbe Muster, genau so die blau hinterlegten und die grün hinterlegten Flächen.Dieses Prinzip birgt aber nicht nur den Vorteil von geringen Datengrößen, sondern auch die “einfache” Realisierung von Pathfinding Algorithmen oder Kollisionberechnungen. Desweiteren gibt es unzählige Informationen und Webseiten, die sich mit diesem Thema befassen und das ermöglicht uns eine relativ einfache Umsetzung der Theorie in Silverlight bzw. C#

Im nächsten Beitrag kümmern wir uns um die Generierung solcher Spielflächen und zeigen anhand eines kleines Beispiels in Silverlight, wie einfach es ist eine solche Karte zu erstellen.

Hier die Links zu den Downloads:

• Microsoft Visual Studio 2008 Beta 2 und Silverlight 1.1 Alpha Refresh
• Microsoft Expression Blend 2 August Preview

Hinter dem ersten Link verbergen sich alle weiterführenden Link zu den Entwicklungswekzeugen für Silverlight 1.1 Alpha Refresh. Auf Silverlight GetStarted gibt es diese Link auch nochmal. Von dort benötigt ihr einmal das Silverlight 1.1 Development Software Kit Alpha Refresh, Visual Studio 2008 Beta – hier empfiehlt sich die Professional Version, und zum Schluss noch die Silverlight Alpha Tools for Visual Studio 2008 Beta.

Bei der Installation ist zu beachten, dass sofern andere Betas vom Visual Studio installiert sind, diese vorher deinstalliert werden müssen.
Nach Erfolgreichen Installieren der Tools, startet ihr Visual Studio Beta 2 und erstellt ein neues Projekt -> Silverlight Projekt und nennt es “FirstStep”. In diesem neu angelegtem Projekt befindet sich eine Page.xaml Datei, durch einen Doppelklick auf diese Datei öffnet ihr sie in eurem Editor. Folgenden Inhalt müsste diese Datei aufweisen:

<Canvas x:Name=”parentCanvas”
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Loaded=”Page_Loaded”
x:Class=”FirstStep.Page;assembly=ClientBin/FirstStep.dll”
Width=”640″
Height=”480″
Background=”White”>
</Canvas>

Ändert hier die Background Eigenschaft von White auf Black und starte das Projekt durch drücken der F5 Taste im Debugger. Bei einer funktionierenden Installation von Silverlight sollte nun ein neues Browserfenster geöffnet werden, welches eine 640×480 Pixel große schwarze Fläche darstellt.

Glückwunsch, Silverlight läuft

Da ich mir fest vorgenommen habe ein 2D Browser-Based-Game zu entwickeln und dabei nicht auf Adobe Flash zurück greifen möchte, werde ich meine Erfolge, Probleme und Zwischenschritte beim Spieleentwickeln mit Microsoft Silverlight hier darlegen. Das Ziel ist momentan nicht die Realisierung eines Browserspiels from the Scratch an bis Ende, sondern eher ein Sammelsurium an Informationen, Links, Beispielen und Ideen rund um 2D Spieleentwicklung, insbesondere Tile-Based-Games, im Browser.
Da ich erst vor kurzem angefangen habe mich mit Silverlight 1.1 Alpha Refresh auseinander zu setzen und bemerkt habe, dass für mich der Anfang viele Hürden bereit hielt, will ich hier den Einstieg für alle anderen etwas erleichtern und ihnen eine Richtung weisen. Ob mir das gelingt, steht auf einem anderen Blatt geschrieben
Ich werde mich ausschließlich mit Silverlight 1.1 beschäftigen, da es mir die Möglichkeit bietet, die Logik dahinter mit C# umzusetzen und ich mich halbwegs in dieser Programmiersprache wohlfühle.

“Aber, ich dachte ich finde hier Tips & Tricks zu Silverlight oder HowTo’s wie ich ein Browserspiel entwickeln kann, da ich selber gerade dabei bin eins zu programmieren!“

Und da liegst du richtig. Aller Anfang ist schwer und momentan sieht es hier auch noch etwas leer aus, aber mit der Zeit wird sich hier der Inhalt füllen und du wirst hoffentlich deinen gesuchten Content hier wiederfinden können. Selbstverständlich bist du ganz herzlich eingeladen am Geschehen aktiv mitzuwirken. Ideen, Verbesserungsvorschläge, Hinweise und Ähnliches wird hier sehr gerne gesehen und darf in Form von Kommentaren hinterlassen werden.
Ich freue mich über jedes Feedback, sei es Lob oder aber auch Kritik.

“Ääh Silverlight? Ne, lass mal. Hab ich nix am Hut mit, eigentlich suche ich nur das Weblog von Mariusz [Bionic]! Hast du es zufällig irgendwo gesehen?”

Ach du kennst Silverlight gar nicht? Dann wirds aber höchste Eisenbahn. Auf der Website von Silverlight kannst du dir einen sehr guten Ãœberblick, über diese technologie verschaffen. Interessiert dich nicht? Auch nicht schlimm. Das private Weblog von mir – Mariusz – findest du hier -> Bionic’s blOg.
Ich werde versuchen in diesem Blog themenbezogen zu schreiben und das private in meinem anderen Blog unter zu bringen.

“Ja gut! Alles schön und gschmeidig. Wann gehts den los?“

JETZT!
Ich wünsche viel Spaß beim Lesen und Ausprobieren