Objekte in einem Grid bewegen – Windows 8

Dieser Artikel ist ein Gastbeitrag von Malte, welcher sonst für CodingCave.de Beiträge verfasst. Beim letzten CodingCamp an der Uni Kiel kam die Frage auf, wie die Bewegung von Objekten in einem Grid möglich ist. Realisiert habe ich dies bereits in der App Zahlenwurm. Hier muss der Nutzer geeignet lange Kugelketten durch das Ziehen von Kugeln über das Feld erstellen. Wie ihr das jetzt in eure App integrieren könnt, möchte ich euch in diesem Beitrag zeigen.

Die Zahlenwurm-App

Die Zahlenwurm-App

Hierzu eignet sich zum Beispiel die Verwendung eines Grids. In diesem Fall erstelle ich zur Demonstration ein Grid mit 3×3 Feldern:

Man erkennt, dass bereits die Events für verschiedene Pointer-Aktionen angegeben sind. Dazu gehören PointerPressed, Moved, Released und Exited. Über diese Events wollen wir die Bewegung einer Kugel über das Feld steuern, beziehungsweise ermöglichen. Wir benötigen nun die folgende globale Variablen:

Hierbei ist image unsere Kugel, die bewegt werden soll und movePointer gibt an, ob gerade eine Kugel über das Feld gezogen wird. PointClicked speichert das zuletzt geklickte Feld. Um ein Raster über das Grid zu legen, definieren wir ein Border-Array. Dieses initialisieren wir in einer im Konstruktor aufgerufenen initializeGrid() Methode:

Über die Events für das Grid können wir nun anfangen, Bewegungen und Verschiebungen zu ermöglichen. Realisieren möchten wir hier das Entfernen eines Objektes beim Klicken auf das jeweilige Feld und das Ziehen von einem Feld in andere, um damit die Erstellung des Wurmes nachzubilden. Über die globalen Variablen pointClicked und pointerMoved speichern wir die getätigten Eingaben in dem PointerClicked-Event.

Über die Abfrage dieser Variablen können in den anderen Events damit je nach Bedarf Zustände abgerufen werden und die Bewegung und Erstellung neuer Grafiken veranlasst werden. Dies geschieht hier im PointerMoved und PointerReleased. Das Event PointerMoved feuert, sobald man die Maus bewegt. Wir ändern also den Hintergrund des Feldes, wenn wir gerade die Maus gedrückt halten, also wenn pointerMoved == true. Für das Löschen beim Anklicken einer Kugel definieren wir im PointerReleased-Event die kurze if-Abfrage, die überprüft, ob das angeklickte Feld (pointClicked) und das Feld, in dem die Maus losgelassen wurde, übereinstimmen.

Schaut euch dazu einfach das Beispielprojekt und die darin enthaltenen Kommentare an. Durch das Ausführen der App und Herumprobieren können viele Bewegungen und Regeln für diese realisiert werden. Die bisher programmierten Bewegungen haben natürlich noch ihre Ecken und Kanten. Zum Beispiel reicht eine kleine Bewegung der Maus beim Klicken (um die Kugel zu Entfernen) aus, um die Kugel erneut zu zeichnen. Dies könnte natürlich weiter abgefragt werden.

Bevor ich das fertige Projekt verlinke, noch schnell der Hinweis: Wenn ich oben von einer Maus gesprochen habe, so kann alles auf Finger- und Stifteingaben umgeschrieben werden. Dies regelt Windows alles automatisch für euch!

Hier das gesamte Projekt zum Ausführen und Testen:

  GridMove - Sample (275,9 KiB)

Viel Spaß.

Das könnte dich auch interessieren...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.