Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
das_svl_game_framework_anwenden [2017/10/06 10:38]
huwi
das_svl_game_framework_anwenden [2019/02/07 09:45] (aktuell)
Zeile 1: Zeile 1:
 +====== Das SVL-Game-Framework anwenden ======
 +Das SVL-Game-Framework ist aus einer Idee heraus entstanden, Einsteigern die praktische Systementwicklung mit der UML nahe zu bringen, ohne auf Programmierkenntnisse angewiesen zu sein. Aus fachdidaktischer Sicht ist es besonders für die Einführung in die objektorientierte Systementwicklung geeignet und gestattet, eine objektorientierte Analyse zu erlernen und Entwurfstechniken anzuwenden, bei denen das Projekt bis zum lauffähigen System gelangt, ohne das eine objektorientierte Programmiersprache angewendet werden muss. Dabei kommt die Technologie der UML-Templates in SiSy voll zum Einsatz. Es lohnt sich das kleine Game-Framework einmal auszuprobieren,​ um die Möglichkeiten der grafischen Programmierung mit der UML und der Templatetechnologie in SiSy kennenzulernen.
 +
 +>>>​{{:​game:​newgame.png?​700|}}
 +
 +Um sich mit dem Game-Framework auseinander zu setzen ist es nötig, in SiSy ein SVL-Projekt anzulegen, die aktuelle SVL aus dem Libstore zu laden und ein neues Klassendiagramm zu erstellen. Als Vorlage wählen Sie das //​Grundgerüst für eine SVL GAME Application//​. In diesem Abschnitt soll eine Variante des Spieleklassikers //Snake// erstellt werden.
 +
 +====== Struktur des Game Framework ======
 +Das Grundgerüst der Game-Application besteht aus der Instanz eines Fensters vom Typ //​GameWindow//​.
 +
 +>>>>>​{{:​game:​gamegg.png?​400|}}
 +
 +Die Klasse //​GameWindow//​ stammt aus dem Paket //​SVL_GAME//​. Dort lässt sich im Groben folgende Architektur erkennen:
 +  * //​GameWindow//​ ist ein //​SFrameWindow//​
 +  * es gibt eine globale Instanz //game// vom Typ //Game//
 +  * //Game// kennt das //​GameWindow//,​ auf diesem wird die Spielsituation visualisiert
 +  * //Game// besteht aus //​GameElementen//​
 +  * jedes //​GameElement//​ ist ein //​Container//​
 +  * jeder //​Container//​ ist ein //​Rechteck//​ und realisiert eine //Liste//
 +  * es gibt eine Reihe von spezialisierten //​GameElementen//​
 +    * //​FixedElement//,​ ein Spielelement was einfach nur in der Gegend rum steht
 +    * //​MovedElement//,​ ein Spielelement was bewegt werden kann
 +      * //​AutoMovedElement//,​ ein Spielelement was sich selbständig bewegt
 +        * //​KeyDirectedElement//,​ ein AutoMovedElement welches seine Richtung per Kursortasten erhält
 +      * //​MouseControledElement//,​ ein Spielelement was mit der Maus bewegt wird
 +      * //​KeyControledElement//,​ ein Spielelement was mit der Tastatur gesteuert wird
 +    * ...
 +
 +>​{{:​game:​gamearchitecture.png?​750|}}
 +
 +Die Klassen des Game-Framework können in der konkreten Anwendung mit Templates weiter spezifiziert werden. Dabei weisen Templates den konkreten Klassen spezielle Struktur- und Verhaltensmerkmale zu. Die Templates sind je nach Aufgabe in Pakete einsortiert.
 +
 +>>>​{{:​game:​templatepakete.png?​650|}}
 +
 +Wenn wir in eines der Templatepakete hineinschauen,​ dann stellt man fest, dass die Templates doch eigentlich recht einfach gestrickt sind. Sollte mal eine gewünschte Eigenschaft fehlen, kann man die offensichtlich mit wenig Aufwand ergänzen.
 +
 +>>​{{:​game:​gametemplatesfigure.png?​700|}}
 +
 +Selbst der Code in den Templates ist doch eher trivial.
 +
 +>>>>​{{:​game:​templateellipse.png?​650|}}
 +
 +Es scheint, dass sich erst durch die geschickte Kombination der Klassen und Templates zur Laufzeit des Systems ein gewünschtes Verhalten der einzelnen Elemente, wie auch des gesamten Systems, einstellt. Hier sei nochmals auf das Konzept der //​Polymorphie//​ verwiesen.
 +
 +====== Die Klassen und Templates des Game-Framework anwenden ======
 +Die konkreten Schritte einer methodischen Analyse, die dem objektorientierten Paradigma folgt, sind in den entsprechenden Lehrheften, wie in [[http://​shop.myavr.de/​Literatur/​Software%20Engineering%20f%C3%BCr%20Embedded%20Systems.htm?​sp=article.sp.php&​artID=200045|Software Engineering für Embedded Systems]] genauer beschrieben. Wir halten erst mal nur fest, aus welchen Bestandteilen unser Spiel besteht:
 +  * Spielfeld
 +  * Schlange mit sich verlängerndem Schwanz
 +  * eine Menge Beute (Käferpopulation)
 +  * einige giftige Spinnen
 +  * evtl. Hindernisse
 +
 +Die Implementation des Spiels beginnen wir mit der Schlange. Genauer gesagt, dem Kopf der Schlange. Diese legen wir als Klasse an und aggregieren sie auf dem Spielfeld. ​
 +
 +>>>//​**Die Schlange ist auf dem Spielfeld.**//​
 +
 +>>>​{{:​game:​snaky1.png|}}
 +
 +Wir möchten die Schlange mit der Tastatur steuern, indem per Cursortasten die Richtung der Schlange geändert werden kann. Die geeignete Klasse dafür ist die Klasse //​KeyDirectedElement//​ aus dem Paket //​SVL_GAME//​. Diese ziehen wir aus dem Navigator (UML Pakete) in das Diagramm und benutzen diese als Basisklasse für unsere Schlange.
 +
 +>>>//​**Die Schlange bewegt sich über das Spielfeld.**//​
 +
 +>>>​{{:​game:​snaky2.png|}}
 +
 +Erstellen Sie die Anwendung und testen Sie den Stand der Entwicklung! ​
 +
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​yZrV3k610JA?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +Sie können das Spielelement mit dem Namen //Snake// per Cursortasten steuern. Im weiteren Verlauf kann dem Element noch eine individuelle Form und Farbe gegeben werden. Dazu wählen Sie sich aus den Paketen //​SVL_GAME_COLOR//​ und //​SVL_GAME_Figure//​ zum Beispiel die Templates //​Show_ColorGreen//​ und //​Show_AsEllipse//​. Diese Templates können an die Klasse //Snake// angebunden werden und konkretisieren somit diese mit der in den Templates enthaltenen Realisierungsvorschriften. Zusätzlich hängen wir an die Schlange noch einen Schwanz. Dazu nutzen wir in diesem Fall die gerichtete Assoziation.
 +
 +>>>//​**Die Schlange hat einen Schwanz.**//​
 +
 +>>>​{{:​game:​snaky3.png|}}
 +
 +Den Schlangenschwanz kann man sich als eine Reihe von Segmenten vorstellen, die aneinandergereiht dem Weg des bereits realisierten Schlangenkopfes folgen. Die geeignete Basisklasse dafür ist das //​FollowElement//​ aus dem Paket //​SVL_GAME//​. Der Schlange selbst muss per Template noch Struktur und Verhalten für das Handling eines Schwanzes ab dem Start des Spiels zugewiesen werden. Das ist das Template //​Start_HasTail//​ aus dem Paket //​SVL_GAME_Prepare//​. Wir können auch schon mal dafür sorgen, dass der Schwanz die richtige Farbe hat.
 +
 +>>>//​**Der Schwanz folgt dem Schlangenkopf**//​
 +
 +>>>​{{:​game:​snaky4.png|}}
 +
 +Templates besitzen zumeist Parameter. Diese legen genau fest, wie eine Realisierung zu erfolgen hat. Bei der Schlange sind die Anfangsparameter für den Schwanz festzulegen. Zum einen wie der Elementtyp des Schwanzes heißt, zum anderen wie lang der Schwanz am Anfang sein soll.
 +
 +>>>​{{:​game:​snaky5.png?​700|}}
 +
 +Erstellen Sie die Anwendung und testen Sie den Stand der Entwicklung!
 +
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​cJWoH5HQqwU?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +Na das sieht doch schon fast wie eine Schlange aus. Es fehlt noch der Schlangenfraß,​ damit der Schwanz wachsen kann. Die Beute soll eine größere Menge (Gruppe/​Population) von Käfern sein, die über das Spielfeld krabbeln. Diese Beutepopulatuion ist eine zufällig über das gesamte Spielfeld verteilte Gruppe. Die dafür geeignete Basiklasse ist das von hause aus zunächst unsichtbare //​GameElement//,​ kombiniert mit dem Template //​RandomGroup//​ aus dem Paket //​SVL_GAME_Container//​. Die Population soll mit sehr vielen Käfern gefüllt werden.
 +
 +>>>//​**Auf dem Spielfeld krabbeln eine Menge Käfer (Käferpopulation)**//​
 +
 +>>>​{{:​game:​snaky6.png?​700|}}
 +
 +Erstellen Sie die Anwendung wie oben im Bild gezeigt und testen Sie den Stand der Entwicklung!
 +
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​_Ul8OD_YxeY?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +So, dann kann "das große Fressen"​ ja beginnen. Zunächst überlegen wir uns, wie sich die momentanen Spielakteure verhalten sollen:
 +  * //Der Biss der Schlange ist tödlich.//
 +  * //Wenn die Schlange etwas frisst, wächst der Schwanz.//
 +  * //Wenn alle Käfer aufgefressen sind, ist das Spiel gewonnen.//
 +
 +>>>​{{:​game:​snaky7.png?​700|}}
 +
 +
 +Erstellen Sie die Anwendung wie oben im Bild gezeigt und testen Sie den Stand der Entwicklung!
 +
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​_XItS0BdKzI?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +====== Das Spiel SuperSnake vervollständigen ======
 +Die grundlegende Spielfuktionalität ist bereits erreicht. Es sind jedoch noch eine Unmenge individueller Anpassungen und Verbesserungen möglich. Es fehlen noch die giftigen Spinnen, die Schlange sollte noch ein adequates Verhalten an den Spielfeldgrenzen erhalten. Es könnten noch ein paar Hindernisse ins Spiel kommen, welche die Schlange nicht berühren darf usw..
 +
 +>​{{:​game:​komplettessupersnake.png?​750|}}
 +
 +//**Viel Spaß beim Experimentieren!**//​
 +
 +====== Videozusammenfassung und Videohinweise ======
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​Y6gwtCrbGhA?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​Wk1JF8o36YE?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +>>><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​RQS0xw2QReY?​rel=0"​ frameborder="​0"​ allowfullscreen></​html>​