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 [2019/02/07 09:45]
127.0.0.1 Externe Bearbeitung
das_svl_game_framework_anwenden [2019/07/27 16:11] (aktuell)
huwi
Zeile 2: Zeile 2:
 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. 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|}}+>​{{:​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. 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.
Zeile 9: Zeile 9:
 Das Grundgerüst der Game-Application besteht aus der Instanz eines Fensters vom Typ //​GameWindow//​. Das Grundgerüst der Game-Application besteht aus der Instanz eines Fensters vom Typ //​GameWindow//​.
  
->>>>​>​{{:​game:​gamegg.png?​400|}}+>​{{:​game:​gamegg.png?​400|}}
  
 Die Klasse //​GameWindow//​ stammt aus dem Paket //​SVL_GAME//​. Dort lässt sich im Groben folgende Architektur erkennen: Die Klasse //​GameWindow//​ stammt aus dem Paket //​SVL_GAME//​. Dort lässt sich im Groben folgende Architektur erkennen:
Zeile 31: Zeile 31:
 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. 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|}}+>​{{:​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. 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|}}+>​{{:​game:​gametemplatesfigure.png?​700|}}
  
 Selbst der Code in den Templates ist doch eher trivial. Selbst der Code in den Templates ist doch eher trivial.
  
->>>​>​{{:​game:​templateellipse.png?​650|}}+>​{{:​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. 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.
Zeile 53: Zeile 53:
 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 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.**//​+>//**Die Schlange ist auf dem Spielfeld.**//​
  
->>>​{{:​game:​snaky1.png|}}+>​{{:​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. 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.**//​+>//**Die Schlange bewegt sich über das Spielfeld.**//​
  
->>>​{{:​game:​snaky2.png|}}+>​{{:​game:​snaky2.png|}}
  
 Erstellen Sie die Anwendung und testen Sie den Stand der Entwicklung! ​ 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>​+><​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. 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.**//​+>//**Die Schlange hat einen Schwanz.**//​
  
->>>​{{:​game:​snaky3.png|}}+>​{{:​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. 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**//​+>//**Der Schwanz folgt dem Schlangenkopf**//​
  
->>>​{{:​game:​snaky4.png|}}+>​{{:​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. 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|}}+>​{{:​game:​snaky5.png?​700|}}
  
 Erstellen Sie die Anwendung und testen Sie den Stand der Entwicklung! 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>​+><​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. 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)**//​+>//**Auf dem Spielfeld krabbeln eine Menge Käfer (Käferpopulation)**//​
  
->>>​{{:​game:​snaky6.png?​700|}}+>​{{:​game:​snaky6.png?​700|}}
  
 Erstellen Sie die Anwendung wie oben im Bild gezeigt und testen Sie den Stand der Entwicklung! 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>​+><​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: So, dann kann "das große Fressen"​ ja beginnen. Zunächst überlegen wir uns, wie sich die momentanen Spielakteure verhalten sollen:
Zeile 102: Zeile 102:
   * //Wenn alle Käfer aufgefressen sind, ist das Spiel gewonnen.//   * //Wenn alle Käfer aufgefressen sind, ist das Spiel gewonnen.//
  
->>>​{{:​game:​snaky7.png?​700|}}+>​{{:​game:​snaky7.png?​700|}}
  
  
 Erstellen Sie die Anwendung wie oben im Bild gezeigt und testen Sie den Stand der Entwicklung! 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>​+><​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 ====== ====== Das Spiel SuperSnake vervollständigen ======
Zeile 117: Zeile 117:
  
 ====== Videozusammenfassung und Videohinweise ====== ====== 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/​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/​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>​+><​html><​iframe width="​700"​ height="​468"​ src="​https://​www.youtube.com/​embed/​RQS0xw2QReY?​rel=0"​ frameborder="​0"​ allowfullscreen></​html>​