Erstellen Sie ein interaktives Spiel mit KI

In dieser Aktivität lernen Sie, ein interaktives Spiel zu programmieren, das auf Handgesten reagiert, und wenden dieses Wissen an, um Ihr eigenes interaktives Spiel zu entwickeln. Anschließend nehmen Sie an einer Design-Herausforderung teil, um einzigartige Spielelemente zu erstellen, das Potenzial von KI im Gaming zu erkunden und ein tieferes Verständnis für die Funktionsweise von KI zu erlangen. Machen Sie sich bereit, die erstaunlichen Möglichkeiten der KI zu entdecken!

Bei der Handerkennung handelt es sich um den Prozess, den ein Computer verwendet, um eine Hand anhand eines Bildes zu identifizieren. Es ist in verschiedenen Bereichen wichtig, etwa in der Robotik, Computer Vision und der Mensch-Computer-Interaktion. Damit Maschinen effektiv mit Menschen interagieren können, sind genaue Handerkennungsmodelle erforderlich. Mit dem Aufkommen lernbasierter Methoden sind Handerkennungsmodelle robuster und genauer geworden, sodass sie für reale Anwendungen geeignet sind.

Handerkennungsmodelle können beispielsweise für Gestenerkennungssysteme wie SignAll verwendet werden, das Computer Vision nutzt, um amerikanische Gebärdensprache zu erkennen und in Text oder Sprache zu übersetzen. Seine Modelle für maschinelles Lernen sind darauf trainiert, verschiedene Gebärdensprachgesten zu erkennen, was gehörlosen oder schwerhörigen Menschen dabei helfen kann, mit anderen zu kommunizieren, die die Gebärdensprache nicht beherrschen.

Die Kerntechnologie von SignAll nutzt visuelle Informationen wie Bilder und Videos und wandelt diese Informationen in Daten um, die vom Computer verarbeitet werden können.

Gebärdensprache ist eine ausdrucksstarke, visuelle Sprache, daher kann die Interpretation mit traditioneller Technologie eine Herausforderung darstellen. Bei SignAll wird die Kamera eines Telefons oder Computers verwendet, um die Kernelemente der Gebärdensprache zu erfassen, zu analysieren und zu übersetzen.

Alle diese Elemente werden von der Computersoftware katalogisiert und interpretiert, sodass sie die Gebärdensprache des Benutzers verstehen kann. Während die App diese visuellen Informationen sammelt, vergleicht sie sie mit einer Datenbank mit Tausenden potenzieller Gebärdensprachgesten. Es nutzt maschinelles Lernen, um die Möglichkeiten einzugrenzen und die wahrscheinlichsten Optionen vorherzusagen. Die App präsentiert dem Benutzer diese Optionen und er wählt die Option aus, die dem entspricht, was er sagen wollte.

Maschinelles Lernen kann ein leistungsstarkes Werkzeug sein, um Kommunikationsherausforderungen für gehörlose und schwerhörige Menschen zu bewältigen. Menschen, die gehörlos oder schwerhörig sind, stoßen häufig auf Kommunikationsbarrieren, wenn sie mit Mitgliedern der Hörgemeinschaft gebärden. KI kann helfen, diese Barrieren zu überwinden, indem sie technologische Lösungen entwickelt, die es gehörlosen und schwerhörigen Menschen ermöglichen, jederzeit und überall spontan und effektiv mit anderen zu kommunizieren.

Nachdem Sie nun wissen, wie SignAll funktioniert, denken Sie über diese Fragen nach:

Wenn Sie diese Technologie einen Schritt weiter entwickeln könnten, wie würde das aussehen? Lass es uns herausfinden!

In dieser Aktivität nutzen Sie die Ideen hinter der SignAll-App und vereinfachen sie, um ein interaktives Spiel zu erstellen, das Handbewegungen erkennt und darauf reagiert. Sie bewegen Ihre Hand über den Bildschirm und versuchen, zufällig erscheinende Objekte zu berühren. Die Kamera Ihres Computers beobachtet, wohin sich Ihre Hand bewegt, und ihre künstliche Intelligenz verfolgt und versteht Ihre Bewegung.

Möglicherweise möchten Sie mit einem Partner oder einer Gruppe an diesem Projekt zusammenarbeiten, damit Sie Freunde haben, die Ihnen beim Brainstorming von Ideen helfen, Feedback geben und Ihren Code debuggen. Für diese Aktivität benötigen Sie keine Vorkenntnisse in KI oder maschinellem Lernen.

Für dieses Projekt verwenden Sie die PoseBlocks-Software von MIT. Dieses kostenlose Toolkit verwendet Drag-and-Drop-Blöcke zum Erstellen von Code, ähnlich wie die beliebte Programmiersprache Scratch. Der Unterschied zwischen ihnen besteht darin, dass PoseBlocks über spezielle Blöcke verfügt, um die integrierte künstliche Intelligenz zur Körperverfolgung zu nutzen.

Um Ihren Code zu erstellen, klicken Sie auf das Slicer-Sprite und ziehen Blöcke in den Arbeitsbereich. Der PoseBlock-Arbeitsbereich besteht aus mehreren Abschnitten. (Wenn Sie mit Scratch vertraut sind, wird Ihnen das sehr bekannt vorkommen.)

Der Bereich auf der linken Seite verfügt über drei Registerkarten mit den Bezeichnungen „Code“, „Kostüme“ und „Sounds“, die jeweils eine Bibliothek mit Elementen enthalten, die Sie verwenden können. Alle Codeblöcke befinden sich in der Codebibliothek, wo sie nach Funktion gruppiert und farblich gekennzeichnet sind. In der Kostümbibliothek können Sie Sprites hinzufügen, ändern oder zeichnen. „Sprite“ ist der Name für ein Objekt oder Zeichen in PoseBlock. Jedem Sprite kann Code zugewiesen werden, um etwas in Ihrem Programm zu tun. Wenn ein Sprite mehrere Formen hat, nennen wir sie Kostüme. Das Elements-Sprite hat beispielsweise neun Kostüme. Klicken Sie auf die Registerkarte „Kostüme“, um sie anzuzeigen. (Sie können jedes beliebige Sprite verwenden. Sie können sogar Ihr eigenes zeichnen.)

Mit der Soundbibliothek können Sie Sounds hinzufügen oder aufnehmen. Im Codebereich in der Mitte ziehen Sie Ihre Codeblöcke und klicken sie zusammen, um Ihr Spiel zu erstellen. Oben rechts ist die Bühne. Hier können Sie sehen, wie das Sprite die von Ihnen codierten Aktionen ausführt. Die grüne Flagge startet das Spiel. Das rote Schild stoppt es. Darunter befindet sich der Sprite-Bereich. In diesem Bereich können Sie Sprites zum Codieren auswählen und einige Einstellungen für Sprites anpassen. Sie können auch einen benutzerdefinierten Hintergrund auswählen. Oben befindet sich die Symbolleiste. Dort können Sie Beispielcode laden und Ihrem Projekt einen Namen geben. Beachten Sie auch, dass Sie auf den „Globus“ 🌐 klicken können, um die verwendete Sprache anzupassen. Es sind über 70 verfügbar.

Damit Sie schnell mit diesem Projekt beginnen können, wurde ein spezielles Verzeichnis mit Beispielen erstellt. Im Verzeichnis finden Sie drei Dateien: Spiel, Tutorial und Spielgrafiken.

Der vollständige, spielbereite Code befindet sich in der Datei „Game“. Um es zu verwenden, laden Sie die Datei auf Ihren Computer herunter. Wählen Sie dann in PoseBlocks „Datei“ aus der Symbolleiste und dann „Von Ihrem Computer laden“ aus. Wenn Sie möchten, können Sie sofort mit dem Remixen des Spielcodes und der Anpassung Ihres Spiels beginnen. Gehen Sie zu „Aktivität 3: Passen Sie Ihr interaktives Spiel an“, um Ideen und Inspiration zu erhalten. Wenn Sie mehr über die Codierung erfahren möchten, mit der dieses Spiel funktioniert, fahren Sie mit „Aktivität 2: Erstellen und Codieren Ihres Spiels“ fort, um das Spiel Schritt für Schritt zu erstellen.

Bevor Sie fortfahren, gibt es im Verzeichnis noch einige andere Elemente, die Sie interessieren könnten. Die Datei „Tutorial“ enthält alle einzelnen Codeblöcke, die im Spiel verwendet werden. Sie können diese Datei auf Ihren Computer herunterladen und auf Poseblocks laden, genau wie Sie es mit der Spieldatei getan haben. Wenn Sie es vorziehen, beim Codieren nicht nach jedem Block suchen zu müssen, ist dies hilfreich. Dies kann den Programmiervorgang schneller und einfacher machen und Ihnen gleichzeitig die Möglichkeit geben, die einzelnen Schritte durchzugehen. (Hinweis: Für Lehrer sind auch PNG-Versionen der Codeblöcke verfügbar. Sie eignen sich hervorragend, wenn Sie auf einem Smartboard unterrichten oder sie einer Präsentation hinzufügen möchten.)

Schließlich enthält die Datei mit dem Namen „Game Graphics“ die im Spiel verwendeten Sprites als PNG-Dateien, sodass Sie sie bearbeiten, nur diejenigen hochladen können, die Ihnen gefallen, oder sie auf andere kreative Weise verwenden können. Sie können diese Datei auch herunterladen, wodurch alle Sprites auf einmal auf PoseBlocks hochgeladen werden.

Sie beginnen mit der Codierung des „Slicer“-Sprites. Klicken Sie unten im Sprite-Panel auf das blaue Katzensymbol und wählen Sie dann die Option „Malen“. Machen Sie im sich öffnenden Kostümfenster einen gelben Punkt (oder eine beliebige Form). Nennen Sie es „Slicer“. Sie können alle anderen Sprites entfernen, indem Sie im Sprite-Panel auf das „x“ klicken. Dieser Punkt bewegt sich mit Ihrem Finger, sodass Sie Ihren Fortschritt auf dem Bildschirm verfolgen können.

Für dieses Spiel verwenden Sie eine spezielle Funktion namens aStift , wodurch das Sprite Formen auf dem Bildschirm zeichnen kann. Um dem Stift mitzuteilen, was er tun soll, benötigen Sie einige Codeblöcke. Suchen Sie den Block „Wenn die grüne Flagge angeklickt wurde“. Dadurch wird dem Spiel mitgeteilt, dass es beginnen soll. Ziehen Sie es aus der Codebibliothek in den Codebereich. Als nächstes möchten Sie die Stiftgröße auf 11 einstellen, die Farbe weiß machen und sie aktivieren. Suchen Sie in der Codebibliothek nach den Blöcken „Stiftgröße festlegen“, „Stiftfarbe festlegen“ und „Stift nach unten“ und ziehen Sie sie ebenfalls in den Codebereich. Fügen Sie abschließend die „eingestellte Größe“ hinzu. Stellen Sie die Größe des Objekts auf 10 Prozent ein und zeigen Sie es mit dem „Show“-Block an. Dies hilft Ihnen auch dabei, die Bewegung Ihres Fingers auf dem Bildschirm zu verfolgen. Denken Sie daran, dass Sie alle Einstellungen ändern können, wenn Sie möchten. Wenn Sie eine violette Stiftlinie bevorzugen, entscheiden Sie sich dafür!

Der nächste Schritt besteht darin, eine Endlosschleife zu erstellen und darin eine Bedingung einzufügen, die den Wert der Variable „schneiden“ überprüft. Wenn Ihre Fingerspitze eines der zufälligen Elemente auf dem Bildschirm „berührt“, „schneidet“ das Slicer-Sprite es und lässt es verschwinden. Die Schnittvariable dreht das Sprite nicht nur um 15 Grad, wenn es ein Objekt schneidet, sondern verändert auch die Figur des Sprites selbst. Diese Funktion fügt dem Spielerlebnis ein visuell ansprechendes Element hinzu und verbessert die Ästhetik des Spiels.

Da es sich um eine Aktion handelt, die immer wieder wiederholt werden soll, benötigen Sie einen speziellen Block. Eine Schleife ist eine Anweisung für den Computer, die sich wiederholt – in diesem Fall für immer. Ziehen Sie den Block „forever“ auf den Codebereich und fügen Sie ihn zu den Blöcken Ihres Codes hinzu. Alles innerhalb dieser Schleife passiert so lange, wie das Spiel läuft.

Eine Variable ist ein Wert, der sich abhängig von den empfangenen Informationen ändern kann. Um eine Variable zu erstellen, klicken Sie auf den Abschnitt „Variablen“ der Codebibliothek und wählen Sie „Variable erstellen“. Erstellen Sie eine Variable namens „Schneiden“. Wenn in diesem Fall die Schnittvariable gleich 1 ist, dreht sich der Stift im Rahmen der Spielbewegung und der visuellen Reaktion des Schnitts um 15 Grad, wenn unsere Finger eines der Elemente auf dem Bildschirm berühren , um sie verschwinden zu lassen. Fügen Sie einen „Wenn-Dann“-Block mit einer Bedingung hinzu, der einen Operatorblock verwendet, um den Wert der Schnittvariablen zu überprüfen.

Es ist Zeit, die KI zu aktivieren! Fügen Sie den „Gehe zu“-Block am Ende Ihres Codes hinzu und wählen Sie „Zeigefinger“ und „Spitze“. Ihr Code erkennt die Position Ihrer Hand, insbesondere die Spitze Ihres Zeigefingers.

Als nächstes haben Sie eine Bedingung, die den absoluten Wert einer Operation annimmt. Der Vorgang verfolgt die Koordinaten Ihrer Fingerspitze auf dem Bildschirm. Der „X“-Wert stellt die horizontale Position Ihres Fingers dar. In diesem Vorgang berechnen Sie die Differenz zwischen der aktuellen „x-Position“ und der vorherigen X-Position „letztes Maus-x“ und stellen sicher, dass die Differenz eine positive Zahl (abs) ist. Wenn die Differenz größer als 2 ist, bedeutet dies, dass sich das Objekt stark von seiner ursprünglichen Position entfernt hat. Der Computer kann diese Berechnung sehr, sehr schnell durchführen. Verwenden Sie den „Wenn-dann-sonst“-Block, um dem Computer bei dieser Entscheidung zu helfen. Beachten Sie auch, dass Sie die Variable „letzte Maus x“ erstellen müssen.

Wenn sich Ihre Hand schnell bewegt, wird die Variable „Schneiden“ auf 1 gesetzt, wodurch sich der Stift um 15 Grad dreht, sodass die Linie sichtbar gezeichnet wird. Wenn der Unterschied zwischen früheren und aktuellen Stiftpositionen gering ist, wird „Schneiden“ auf 0 gesetzt. Da Sie sich nicht bewegen, muss der Stift nicht gedreht werden und alle Markierungen werden gelöscht. Wenn Sie Ihren Finger nicht bewegen, geht der Computer für das Spiel davon aus, dass Sie ihn berührt haben

Der letzte Schritt besteht darin, die letzte X-Variable der Maus so einzustellen, dass sie mit den X-Koordinaten der aktuellen Position Ihres Fingers übereinstimmt. Dann wiederholt sich der Prozess und beginnt von vorne.

Nachdem Sie diese Schritte ausgeführt haben, sollten alle Blöcke so aussehen.

Jetzt befassen Sie sich mit dem zweiten Teil des Slicer-Codes. Das Ziel besteht hier darin, einen Klon oder eine Kopie des Original-Sprites zu erstellen. Die Aufgabe des Klons besteht darin, etwas Cooles zu tun, direkt nachdem wir im Spiel eine Schneidaktion ausgeführt haben – wenn Ihre Fingerspitze ein Objekt berührt und es verschwinden lässt. Das Slicer-Sprite zeigt eine blinkende Animation an, die dem Spiel Spaß und mehr Interaktion verleiht.

Um einen Klon zu definieren, stellen Sie zunächst die Größe des Objekts auf 100 Prozent ein und zeigen Sie es an.

Erstellen Sie dann eine Schleife, die zehnmal wiederholt wird. Stellen Sie Ihren Code so ein, dass er sich um 15 Grad dreht, die Größe um 1 ändert und einen Farbeffekt und einen Fade-Effekt hinzufügt. Ändern Sie die Position in Y auf -2. Dadurch entsteht ein bunter Blinkeffekt, wenn unsere Fingerspitze eines der grafischen Elemente im Spiel berührt. Fügen Sie schließlich „Klon löschen“ hinzu, wenn die Animation fertig ist. Spielen Sie mit den Einstellungen, um genau die Art von blinkender Animation zu erstellen, die Ihnen gefällt!

Jetzt codieren Sie die „Elemente“-Sprites. Diese Bilder erscheinen zufällig und bewegen sich im Spiel über den Bildschirm. Sie müssen sie mit der Fingerspitze „berühren“, wodurch die Slicer-Animation ausgelöst wird, die Sie im ersten Schritt erstellt haben.

Sie müssen erneut ein neues Sprite hinzufügen, genau wie zuvor. Es wird „Elemente“ genannt. Dieses Mal möchten Sie jedoch, dass mehrere verschiedene Objekte angezeigt werden können. Verwenden Sie die bereitgestellten Spielgrafiken (siehe „Aktivität 1: Lernen Sie die PoseBlock-Plattform kennen“), zeichnen Sie Ihre eigenen oder wählen Sie Sprites aus der Bibliothek aus. Klicken Sie auf die Registerkarte „Kostüme“, um sie anzuzeigen. Das Wichtigste ist, dass jedes Objekt ein Kostüm unter demselben „Elemente“-Sprite sein muss, wie gezeigt.

Klicken Sie auf das Elements-Sprite, um einen Block zum Code-Arbeitsbereich hinzuzufügen. Wenn Sie das Spiel starten (klicken Sie auf die grüne Flagge), verstecken Sie das Objekt und erstellen Sie eine Endlosschleife. Erstellen Sie innerhalb der Schleife einen Klon von „mich“, indem Sie auf den Abwärtspfeil klicken. Fügen Sie dann den Warteblock hinzu und stellen Sie ihn auf ein bis zwei Sekunden ein. Dadurch wird zu einem zufälligen Zeitpunkt zwischen einer und zwei Sekunden ein Sprite generiert, sodass Sie nicht erraten können, wann es erscheinen wird. Dies wird so lange fortgesetzt, wie das Spiel läuft.

Sobald der Klon erstellt ist, möchten wir ein zufälliges Element-Sprite-Kostüm auswählen. Verwenden Sie den Block „Wenn ich als Klon starte“, um mit dem Code zu beginnen. Fügen Sie dann einen versteckten Block und eine Wiederholungsschleife hinzu. Fügen Sie den Block „nächstes Kostüm“ zur Schleife hinzu und lassen Sie ihn mithilfe eines Operatorblocks zufällig eine Zahl zwischen 1 und 10 auswählen. Dadurch wird zufällig ausgewählt, welche Elemente des Sprite-Kostüms angezeigt werden.

Jetzt müssen wir unseren Elementen auf dem Bildschirm etwas zu tun geben. Fügen Sie eine Variable hinzu und stellen Sie sie auf „nach rechts gehen“ ein. Verwenden Sie denselben Zufallscode, um die Variable auf einen Zufallswert zwischen 1 und 0 zu setzen. Abhängig vom Wert bewegen sich die Sprite-Elemente auf dem Bildschirm nach rechts oder links.

Mit Hilfe der Variable „X-Geschwindigkeit“ bewirkt ein positiver Wert eine Bewegung in eine Richtung (rechts), während ein negativer Wert eine Bewegung in die entgegengesetzte Richtung (links) bewirkt. Der Wert der Geschwindigkeit bestimmt die Geschwindigkeit des Objekts. Mit der Geschwindigkeitsvariablen können wir im Wesentlichen steuern, wie sich das Objekt im Spiel bewegt. Versuchen Sie, die Werte zu ändern, um zu sehen, wie sich dies auf die Bewegung der Elemente auswirkt.

Außerdem muss das Element auf dem Bildschirm angezeigt werden. Benutzen Sie dazu den Block „show“. Legen Sie die Geschwindigkeitsvariable (Geschwindigkeit) in Y-Richtung auf 20 fest, wodurch die Bewegung nach oben und unten gesteuert wird, indem Sie eine Variable „Y-Geschwindigkeit“ erstellen.

Jetzt müssen Sie programmieren, was mit dem Element-Sprite passiert, wenn es auf den Slicer trifft. Ändern Sie innerhalb einer Endlosschleife die Y-Geschwindigkeitsvariable um -1. Ändern Sie die Position von Y durch die Variable „Y-Geschwindigkeit“ und machen Sie dasselbe mit der Position in X. Dadurch springt das Element-Sprite zufällig vom unteren Rand der Bühne auf und fällt dann wieder ab. Erstellen Sie dann eine Bedingung, die prüft, ob das Element-Sprite den Rand der Bühne berührt. Wenn dies der Fall ist, löschen Sie den Klon.

Erstellen Sie als Nächstes eine Bedingung, damit bei Berührung des Element-Sprites mit Ihrem Finger – dem weißen Stift des Slicer-Trotzes – ein Klon des Slicers erstellt wird. Dadurch wird die zuvor codierte Animation geparkt. Fügen Sie abschließend eine Wiederholungsschleife hinzu und setzen Sie den Block „Größe ändern“ auf -10. Dadurch wird das Element-Sprite verkleinert, bis es sehr klein ist.

Nachdem Sie diese Schritte ausgeführt haben, sollten alle Blöcke so aussehen.

Dies ist ein guter Zeitpunkt, um Ihr Spiel zu speichern. Leider bietet PoseBlocks keine Möglichkeit, Ihr Programm zwischen Sitzungen online zu speichern und zu teilen. Stattdessen müssen Sie die Datei speichern. Geben Sie in der Symbolleiste den Namen Ihres Spiels in das weiße Feld ein. Klicken Sie dann auf „Datei“ und wählen Sie „Auf Ihrem Computer speichern“. Um ein anderes Mal am Spiel zu arbeiten, laden Sie einfach die Spieldatei auf die gleiche Weise in PoseBlock, wie Sie es beim Hochladen anderer Dateien getan haben, wie in Aktivität 1 beschrieben. Achten Sie darauf, nach jeder Sitzung zu speichern. Sie können Ihre Spieldateien an jeden senden, damit auch diese spielen können!

Bereit? Jetzt ist es Zeit, Ihr Spiel zu testen!

Nachdem Sie nun das Grundspiel gesehen haben, überlegen Sie, wie Sie es anpassen können. Sie können die Sprites ändern, mit der Änderung des Timings und der Bewegungsblöcke experimentieren, die Animation des Slicer-Sprites anpassen oder sogar Sounds hinzufügen. Sie können Blöcke ändern und neue Dinge ausprobieren. Wenn etwas schief geht, können Sie es jederzeit rückgängig machen!

Wenn Sie bereit sind, Ihr eigenes Spiel zu erstellen, stellen Sie sich diese Fragen.

Sobald Sie Ihr Spiel erstellt haben, geben Sie ihm einen Namen und speichern Sie Ihre Arbeit. Lassen Sie andere Ihr Spiel ausprobieren und erhalten Sie Feedback. Spielen Sie die Spiele, die andere gemacht haben. Besprechen Sie, mit welchen Herausforderungen Sie konfrontiert waren und wie Sie diese gemeistert haben.

Hat es Ihnen Spaß gemacht, mit PoseBlocks ein interaktives Spiel zu erstellen? Der Spaß muss hier aber noch nicht aufhören!

CreditsLektion und Ergänzungen von Camila Luna und Diego Luna. Lektorat von Lois Parshley. Digitale Produktion von Sandy Roberts.

Camila und Diego sind die Gründungsmitglieder von MoonMakers, einer Gemeinschaft wissensbegeisterter Schöpfer. Sie veranstalten einen Makerspace, einen offenen Raum mit verschiedenen digitalen Fertigungsmaschinen, und einen YouTube-Kanal, auf dem sie Wissenschaft, Technologie und die Maker-Bewegung fördern. Sie haben bei der Erstellung von Bildungsinhalten mit Unternehmen wie Sesame Stree und Make: Community in den USA sowie Educational Television und Fundación Televisa in Mexiko zusammengearbeitet. Camila unterrichtet außerdem Workshops in der gesamten mexikanischen Republik bei Talent Land, dem Bildungsminister in Jalisco, Conacyt, Centro Cultural España.

Werden Sie ein Chatbot-Ingenieur, während Sie mithilfe künstlicher Intelligenz Ihren eigenen, einzigartigen Chatbot entwerfen, erstellen und anpassen.

Erfahren Sie mehr über künstliche Intelligenz (KI), indem Sie direkt mit Chatbots und maschineller Lerntechnologie experimentieren.