Glanz: /* Einleitung */

2026-04-29T10:54:37Z

Einleitung

Neue Seite

{{T}}
{| align=center
{{:D-Tab}}
'''[[Alternativen zu p5.js]]'''
# [[p5.js]]
# [[Creative Coding]]
# [[JavaScript]]
# [[Game-Engine]]
# [[GDevelop]]
# [[Phaser]]
# [[Godot]]
# [[Construct 3]]
# [[Unity]]
# [[Scratch]]
# [[MakeCode Arcade]]
# [[App-Entwicklung]]
# [[2D-Spiel]]
# [[3D-Spiel]]
# [[Export]]
# [[No-Code]]
# [[Low-Code]]
# [[HTML5]]
# [[WebGL]]
# [[Canvas]]
|}
{{BR}}
= Alternativen zu p5.js: Mehr App, mehr Optionen, mehr Vorteile? =

[[Datei:P5js Logo.svg|500px|rahmenlos|zentriert]]

{{BR}}
= Einleitung =

[[p5.js]] ist ein sehr gutes Werkzeug, wenn Du [[Creative Coding]], [[JavaScript]], [[interaktive Grafik]], [[Animation]], [[Algorithmische Kunst]] oder kleine [[Browserspiel|Browserspiele]] lernen möchtest. Es ist besonders stark, wenn ein Projekt schnell sichtbar werden soll: Du schreibst wenige Zeilen [[Code]] (oder lässt diese von KI schreiben), startest die Vorschau im [[Browser]] und siehst sofort eine Zeichnung, Bewegung oder Interaktion. Genau deshalb eignet sich [[p5.js]] sehr gut für [[Schule]], [[Informatikunterricht]], [[Medienbildung]], [[Kunstunterricht]] und erste [[Programmierprojekt|Programmierprojekte]].

Trotzdem gibt es viele Situationen, in denen andere Werkzeuge '''besser geeignet''' sind. Wenn Du ein richtiges [[Spiel]] mit mehreren [[Level|Levels]], [[Menü|Menüs]], [[Kollisionsabfrage|Kollisionen]], [[Inventar]], [[Speicherstand]], [[Touchscreen|Touch-Steuerung]], [[Sounddesign]], [[App-Export]], [[Android]], [[iOS]], [[Desktop-App]] oder [[Steam]]-Veröffentlichung bauen möchtest, kann [[p5.js]] schnell an Grenzen kommen. Das bedeutet nicht, dass [[p5.js]] schlecht ist. Es bedeutet nur: [[p5.js]] ist eher eine [[Bibliothek]] für kreative Programmierung als eine vollständige [[Game-Engine]].

In diesem aiMOOC lernst Du, welche Alternativen zu [[p5.js]] es gibt, wann sie Vorteile haben und wie Du eine kluge Entscheidung für Dein eigenes Projekt triffst. Du vergleichst [[GDevelop]], [[Phaser]], [[Godot]], [[Construct 3]], [[Unity]], [[MakeCode Arcade]], [[Scratch]] und weitere Werkzeuge. Am Ende kannst Du einschätzen, ob Du bei [[p5.js]] bleiben solltest oder ob eine andere [[Entwicklungsumgebung]] besser zu Deinem Ziel passt.

{{BR}}
== Lernziele ==

Nach diesem aiMOOC kannst Du erklären, was [[p5.js]] gut kann und wo seine Grenzen liegen. Du kannst zentrale Unterschiede zwischen [[Bibliothek]], [[Framework]] und [[Game-Engine]] beschreiben. Du kannst verschiedene Alternativen nach [[Lernkurve]], [[App-Export]], [[2D-Grafik]], [[3D-Grafik]], [[Kosten]], [[Lizenz]], [[Unterrichtseinsatz]] und [[professionelle Entwicklung|professioneller Entwicklung]] vergleichen. Außerdem kannst Du ein eigenes Projekt planen und begründen, welches Werkzeug dafür am sinnvollsten ist.

{{BR}}

= Was ist p5.js? =

[[p5.js]] ist eine freie [[JavaScript]]-Bibliothek für [[Creative Coding]]. Sie ist vom Gedanken der Programmiersprache [[Processing]] geprägt: Programmieren soll nicht nur trocken und abstrakt sein, sondern direkt sichtbar, kreativ und experimentell. Typisch für [[p5.js]] sind die Funktionen [[setup()]] und [[draw()]]. In [[setup()]] bereitest Du die Zeichenfläche vor, in [[draw()]] wird wiederholt gezeichnet, animiert oder auf Eingaben reagiert.

[[p5.js]] arbeitet häufig mit einem [[Canvas]] im [[HTML5]]-Umfeld. Dadurch kannst Du Formen, Farben, Linien, Bilder, Texte, Mausbewegungen, Tastatureingaben oder einfache Spielobjekte direkt im [[Browser]] darstellen. Für den Einstieg ist das ein großer Vorteil: Du brauchst oft keine komplizierte Installation und kannst sehr schnell erste Ergebnisse erzeugen.

{{BR}}
== Stärken von p5.js ==

# [[Einfacher Einstieg]]: Du kannst schnell mit [[Form]], [[Farbe]], [[Bewegung]] und [[Interaktion]] experimentieren.
# [[Browserbasiertes Lernen]]: Viele Projekte laufen direkt im [[Webbrowser]] und lassen sich leicht teilen.
# [[Kreative Programmierung]]: [[p5.js]] eignet sich besonders für [[Kunst]], [[Design]], [[Simulation]], [[Datenvisualisierung]] und [[Animation]].
# [[JavaScript]]: Du lernst eine Sprache, die auch für [[Webentwicklung]] sehr wichtig ist.
# [[Offene Lernkultur]]: Viele Tutorials, Beispiele und Erweiterungen unterstützen den Einstieg.

{{BR}}
== Grenzen von p5.js ==

[[p5.js]] ist keine vollständige [[Game-Engine]]. Das merkst Du besonders dann, wenn Dein Projekt größer wird. Es gibt keinen eingebauten visuellen [[Level-Editor]], kein vollständiges [[Szenenmanagement]], keine automatische [[Asset-Pipeline]], keine einfache Veröffentlichung als [[Android-App]] oder [[iOS-App]] und keine standardisierte Verwaltung komplexer [[Spielzustand|Spielzustände]]. Viele Dinge kannst Du selbst programmieren, aber das kostet Zeit und wird bei größeren Projekten schnell unübersichtlich.

Typische Grenzen zeigen sich bei [[Level-Design]], [[Benutzeroberfläche]], [[Kamera]], [[Physik-Engine]], [[Kollisionserkennung]], [[Animation]], [[Partikelsystem]], [[Speicherstand]], [[Mehrspieler-Modus]], [[Controller-Unterstützung]], [[Performance]] und [[App-Store]]-Veröffentlichung. Genau hier können Alternativen mehr Vorteile bieten.

{{BR}}
= Wichtige Begriffe =

{{BR}}
== Bibliothek, Framework und Game-Engine ==

Eine [[Bibliothek]] stellt Funktionen bereit, die Du in Deinem eigenen Programm nutzt. [[p5.js]] ist ein gutes Beispiel: Du rufst Funktionen wie [[circle()]], [[rect()]], [[image()]] oder [[keyPressed()]] auf, um Deine Idee umzusetzen.

Ein [[Framework]] gibt meistens schon mehr Struktur vor. [[Phaser]] ist ein Beispiel für ein [[Game-Framework]]: Es bietet [[Szenen]], [[Sprite|Sprites]], [[Asset-Loader]], [[Physik]], [[Input]] und andere Bausteine, die speziell für Spiele gedacht sind.

Eine [[Game-Engine]] ist noch umfassender. Sie enthält neben Code-Bausteinen oft einen visuellen [[Editor]], [[Projektverwaltung]], [[Szenenbaum]], [[Animation]], [[Physik]], [[Import]] von Grafiken, [[Export]] auf verschiedene Plattformen und Werkzeuge für [[Level-Design]]. [[Godot]], [[Unity]], [[GDevelop]] und [[Construct 3]] gehören in diese Richtung.

{{BR}}
== No-Code, Low-Code und Code ==

[[No-Code]] bedeutet, dass Du möglichst wenig oder gar keinen klassischen Textcode schreiben musst. Stattdessen arbeitest Du mit [[Ereignis|Ereignissen]], [[Blockprogrammierung]], Tabellen oder visuellen Regeln. [[GDevelop]], [[Construct 3]], [[Scratch]] und [[MakeCode Arcade]] sind dafür gute Beispiele.

[[Low-Code]] bedeutet, dass vieles visuell erledigt wird, Du aber bei Bedarf eigenen [[Code]] ergänzt. Das ist nützlich, wenn Du schnell starten, aber später mehr Kontrolle haben möchtest.

[[Code]]-basierte Werkzeuge wie [[Phaser]] oder [[p5.js]] verlangen mehr Programmierarbeit, geben Dir dafür aber viel direkte Kontrolle über die Logik.

{{BR}}
= Entscheidungskriterien =

Ob eine Alternative zu [[p5.js]] für Dich besser ist, hängt stark vom Ziel ab. Für ein Unterrichtsprojekt mit einer einfachen Animation ist [[p5.js]] oft ideal. Für ein [[Jump ’n’ Run]] mit Leveln, Gegnern, Menü und [[Android]]-Export ist [[GDevelop]], [[Construct 3]] oder [[Godot]] meistens sinnvoller. Für ein professionelles 3D-Projekt ist [[Unity]] oder [[Godot]] geeigneter.

{{BR}}
== Worauf Du achten solltest ==

# [[Zielplattform]]: Soll Dein Projekt im [[Browser]], als [[App]], als [[Desktop-Anwendung]] oder auf einer Spielplattform laufen?
# [[Lernkurve]]: Möchtest Du schnell loslegen oder bewusst eine professionelle Engine lernen?
# [[Programmieranteil]]: Willst Du mit [[Code]], [[Blockprogrammierung]] oder [[No-Code]] arbeiten?
# [[2D]] oder [[3D]]: Brauchst Du nur zweidimensionale Grafik oder auch dreidimensionale Welten?
# [[Export]]: Gibt es einfache Wege zu [[Android]], [[iOS]], [[Web]], [[Windows]], [[macOS]] und [[Linux]]?
# [[Kosten]]: Ist das Werkzeug frei, kostenpflichtig, teilweise kostenpflichtig oder an eine Lizenz gebunden?
# [[Unterrichtseinsatz]]: Funktioniert das Werkzeug auf Schulgeräten, Tablets, iPads oder nur auf starken Rechnern?
# [[Datenschutz]]: Müssen Lernende ein Konto erstellen oder kann lokal gearbeitet werden?
# [[Teamarbeit]]: Kann ein Projekt gemeinsam bearbeitet, versioniert oder dokumentiert werden?

{{BR}}
= Vergleich der wichtigsten Alternativen =

{| class="wikitable"
! Werkzeug
! Besser als p5.js für
! Vorteile
! Grenzen
! Besonders geeignet für
|-
| [[GDevelop]]
| [[2D-Spiel|2D-Spiele]], [[No-Code]], [[App-Export]]
| Visueller Editor, Ereignissystem, Vorlagen, einfache Veröffentlichung, Web-App, Desktop-App und mobile Nutzung
| Für sehr komplexe Speziallogik weniger flexibel als reine Code-Lösungen
| Schule, schnelle Spielprojekte, Prototypen, Lernspiele
|-
| [[Phaser]]
| Professionelle [[HTML5]]-Spiele mit [[JavaScript]]
| Szenen, Sprites, Physik, Asset-Loader, WebGL und Canvas, gute Kontrolle durch Code
| Kein klassischer visueller Editor wie bei vielen Engines
| Webspiele, Code-Unterricht, Fortgeschrittene
|-
| [[Godot]]
| Freie professionelle [[2D]]- und [[3D]]-Entwicklung
| Open Source, Szenensystem, Node-Struktur, GDScript, Export auf mehrere Plattformen
| Einarbeitung anspruchsvoller als bei p5.js oder Scratch
| Größere Spiele, Apps, 2D und 3D, langfristige Projekte
|-
| [[Construct 3]]
| Browserbasierte Spiele ohne viel Code
| Läuft im Browser, Event-Sheets, schneller Einstieg, Export auf mehrere Plattformen
| Viele professionelle Funktionen sind abhängig von Lizenz und Workflow
| iPad-nahe Browserarbeit, Schule, schnelle 2D-Spiele
|-
| [[Unity]]
| Große [[3D]]-Produktionen, professionelle Spiele, [[XR]]
| Sehr mächtige Engine, C#, Asset Store, viele Plattformen, große Community
| Hohe Komplexität, Lizenzfragen und stärkere Hardware-Anforderungen
| Professionelle Entwicklung, 3D, Apps, Simulationen
|-
| [[MakeCode Arcade]]
| Einfache Retro-Spiele mit Blöcken und JavaScript
| Sehr niedrige Einstiegshürde, Block- und Textcode, gut für Unterricht
| Eher für kleinere Arcade-Spiele gedacht
| Unterstufe, Einstieg, schnelle Lernspiele
|-
| [[Scratch]]
| Kreativer Einstieg für Kinder und Anfänger
| Visuelle Blöcke, große Community, Geschichten, Animationen und Spiele
| Für professionelle App-Veröffentlichung nicht gedacht
| Grundschule, Unterstufe, erste Programmiererfahrungen
|-
| [[TurboWarp]]
| Erweiterte Scratch-Projekte
| Schnellerer Player, Packager-Möglichkeiten, Scratch-ähnlicher Einstieg
| Nicht dasselbe wie eine professionelle Game-Engine
| Scratch-Fortsetzung, Präsentationen, exportierbare Lernprojekte
|}

{{BR}}
= GDevelop: Die beste Alternative für schnelle Spiele mit App-Gefühl =

[[Datei:GD-logo-big.png|500px|rahmenlos|zentriert]]

[[GDevelop]] ist eine [[Open Source|quelloffene]] [[No-Code]]- und [[Low-Code]]-Engine für Spiele und interaktive Anwendungen. Der große Vorteil gegenüber [[p5.js]] liegt darin, dass viele typische Spielbestandteile bereits vorbereitet sind. Du arbeitest mit [[Szene|Szenen]], [[Objekt|Objekten]], [[Verhalten]], [[Ereignis|Ereignissen]], [[Animation]], [[Kollisionserkennung]], [[Benutzeroberfläche]] und [[Export]]-Optionen.

In [[GDevelop]] musst Du nicht jede Spiellogik komplett selbst programmieren. Du kannst zum Beispiel einem Objekt ein Plattform-Verhalten geben, eine Kollision mit einem Gegner prüfen, Punkte erhöhen oder eine Szene wechseln. Für Lernende ist das oft motivierend, weil sehr schnell ein spielbares Ergebnis entsteht.

{{BR}}
== Vorteile von GDevelop gegenüber p5.js ==

# [[Visueller Editor]]: Du kannst Szenen und Objekte direkt sehen und anordnen.
# [[No-Code]]: Logik wird über Ereignisse erstellt, nicht nur über Textcode.
# [[App-Export]]: Projekte können leichter für [[Web]], [[Desktop]], [[Android]] und je nach Workflow auch [[iOS]] vorbereitet werden.
# [[Vorlagen]]: Es gibt Beispiele für Plattformspiele, Top-Down-Spiele, Quizspiele und andere Genres.
# [[Unterricht]]: Lernende können sich stärker auf [[Game Design]] und [[Logik]] konzentrieren, ohne sofort an Syntaxfehlern zu scheitern.

{{BR}}
== Wann GDevelop besonders sinnvoll ist ==

[[GDevelop]] ist besonders sinnvoll, wenn Du ein Spiel mit mehreren Leveln, Menüs, Punktestand, Gegnern, Kollisionen, Touch-Steuerung und einfachen Veröffentlichungsmöglichkeiten bauen möchtest. Wenn Du mit einer Lerngruppe arbeitest, ist [[GDevelop]] oft leichter zu erklären als eine reine Code-Lösung. Für [[Projektarbeit]], [[Medienbildung]] und [[Informatikunterricht]] ist es daher eine sehr starke Alternative.

{{#ev:youtube|https://www.youtube.com/watch?v=XxeD_2nTyHI|500|center}}

{{BR}}
= Phaser: Die beste Code-Alternative zu p5.js =

[[Datei:Phaser Logo.png|500px|rahmenlos|zentriert]]

[[Phaser]] ist ein [[HTML5]]-[[Game-Framework]] für [[2D-Spiel|2D-Spiele]] im [[Browser]]. Es ist besonders interessant, wenn Du weiterhin mit [[JavaScript]] arbeiten möchtest, aber mehr echte Spielstruktur brauchst als bei [[p5.js]]. Während [[p5.js]] allgemein für kreative Skizzen, Animationen und Experimente gedacht ist, ist [[Phaser]] direkt auf Spiele ausgerichtet.

[[Phaser]] arbeitet mit [[Szene|Szenen]], [[Sprite|Sprites]], [[Asset-Loader]], [[Animation]], [[Physik]], [[Kollision]], [[Kamera]], [[Input]] und [[Tilemap|Tilemaps]]. Damit ist es für klassische 2D-Webspiele meist besser geeignet als [[p5.js]].

{{BR}}
== Vorteile von Phaser gegenüber p5.js ==

# [[Szenenmanagement]]: Startbildschirm, Spielszene und Game-Over-Szene lassen sich sauber trennen.
# [[Asset-Loader]]: Bilder, Spritesheets, Sounds und Daten können gezielt geladen werden.
# [[Physik]]: Kollisionen, Schwerkraft und Bewegung sind leichter umzusetzen.
# [[Performance]]: Phaser nutzt je nach Umgebung Canvas und WebGL.
# [[JavaScript]]: Du bleibst in einer Sprache, die Du aus p5.js bereits kennst.

{{BR}}
== Wann Phaser besonders sinnvoll ist ==

[[Phaser]] ist ideal, wenn Du mit [[Code]] arbeiten und ein gutes [[Webspiel]] entwickeln möchtest. Für Lernende, die nach [[p5.js]] den nächsten Schritt gehen wollen, ist [[Phaser]] eine sehr gute Brücke: Es bleibt bei [[JavaScript]], führt aber stärker in echte [[Softwarearchitektur]], [[Szenenlogik]] und [[Game Development]] ein.

{{#ev:youtube|https://www.youtube.com/watch?v=2roOcOSTeuM|500|center}}

{{BR}}
= Godot: Die beste freie Profi-Engine =

[[Datei:Godot logo.svg|500px|rahmenlos|zentriert]]

[[Godot]] ist eine freie und quelloffene [[Game-Engine]] für [[2D]], [[3D]] und [[XR]]. Sie ist deutlich mächtiger als [[p5.js]] und eignet sich für größere Spiele, Apps, Simulationen und interaktive Anwendungen. Godot arbeitet mit einem [[Node|Knoten]]- und [[Szene|Szenen]]-System. Das bedeutet: Spielfiguren, Kameras, Lichter, Kollisionen, Benutzeroberflächen und Skripte werden als Bausteine organisiert.

Die wichtigste Skriptsprache in Godot ist [[GDScript]]. Sie ist vergleichsweise gut lesbar und wurde speziell für die Arbeit mit Godot entwickelt. Zusätzlich gibt es je nach Projekt auch Möglichkeiten mit anderen Sprachen wie [[C Sharp|C#]].

{{BR}}
== Vorteile von Godot gegenüber p5.js ==

# [[2D]] und [[3D]]: Godot ist nicht nur für flache Canvas-Grafik gedacht.
# [[Editor]]: Szenen, Animationen, Kollisionen und Benutzeroberflächen können visuell erstellt werden.
# [[Open Source]]: Die Engine ist frei und quelloffen.
# [[Export]]: Projekte können für mehrere Plattformen vorbereitet werden.
# [[Struktur]]: Größere Projekte lassen sich sauberer organisieren als in einem einfachen p5.js-Sketch.

{{BR}}
== Wann Godot besonders sinnvoll ist ==

[[Godot]] ist sinnvoll, wenn Du langfristig echte [[Game Development|Spieleentwicklung]] lernen willst. Es ist stärker als [[p5.js]], aber auch anspruchsvoller. Für ein einfaches Unterrichtsbeispiel kann [[Godot]] überdimensioniert sein. Für ein Jahresprojekt, ein größeres Lernspiel, ein 2D-Abenteuer, ein 3D-Experiment oder eine eigenständige App ist es eine sehr gute Wahl.

{{#ev:youtube|https://www.youtube.com/watch?v=4EhcfH_YpNg|500|center}}

{{BR}}
= Construct 3: Spieleentwicklung direkt im Browser =

[[Datei:Construct 3 Logo.svg|350px|rahmenlos|zentriert]]

[[Construct 3]] ist eine browserbasierte [[Game-Engine]] für [[2D-Spiel|2D-Spiele]]. Besonders auffällig ist das [[Event Sheet]]: Spielregeln werden als Ereignisse und Aktionen formuliert. Dadurch können Lernende relativ schnell Spiele bauen, ohne zuerst eine Programmiersprache vollständig zu lernen.

Der Vorteil gegenüber [[p5.js]] liegt vor allem im visuellen Workflow. Objekte werden auf einer Oberfläche platziert, Eigenschaften eingestellt und mit Ereignissen verbunden. Exportmöglichkeiten für [[Web]], [[Android]], [[iOS]] und Desktop-Wrapper machen Construct 3 für Projekte interessant, die über eine einfache Browser-Skizze hinausgehen.

{{BR}}
== Wann Construct 3 besonders sinnvoll ist ==

[[Construct 3]] ist besonders geeignet, wenn eine Lerngruppe im [[Browser]] arbeiten soll und schnelle Ergebnisse wichtig sind. Es ist auch interessant, wenn Geräte nicht frei installiert werden dürfen. Im Vergleich zu [[GDevelop]] ist Construct 3 stark browserorientiert und sehr ausgereift, aber je nach Nutzung stärker an Lizenzmodelle gebunden.

{{BR}}
= Unity: Mächtig, professionell, aber komplex =

[[Datei:Unity 2021.svg|500px|rahmenlos|zentriert]]

[[Unity]] ist eine der bekanntesten professionellen [[Game-Engine|Game-Engines]]. Sie wird für [[2D]], [[3D]], [[Mobile Games]], [[Desktop-Spiele]], [[XR]], [[Simulation]] und viele kommerzielle Projekte eingesetzt. Programmiert wird typischerweise mit [[C Sharp|C#]]. Unity bietet viele Werkzeuge: [[Szeneneditor]], [[Physik]], [[Animation]], [[Lighting]], [[Asset Store]], [[UI-System]], [[Build Pipeline]] und Export auf zahlreiche Plattformen.

Gegenüber [[p5.js]] ist [[Unity]] viel mächtiger. Gleichzeitig ist es deutlich komplexer. Wer nur ein kleines Unterrichtsprojekt, eine einfache Animation oder ein erstes Webspiel erstellen möchte, ist mit [[p5.js]], [[GDevelop]] oder [[Phaser]] oft schneller. Wer aber 3D-Spiele, mobile Apps oder professionelle Produktionen anstrebt, sollte Unity kennen.

{{BR}}
== Wann Unity besonders sinnvoll ist ==

[[Unity]] ist sinnvoll, wenn Du ernsthaft in professionelle [[Spieleentwicklung]], [[3D-Modellierung]], [[App-Entwicklung]], [[Virtual Reality]] oder [[Augmented Reality]] einsteigen möchtest. Für Anfängerinnen und Anfänger kann Unity jedoch überfordernd sein, wenn noch keine Grundkenntnisse in [[Programmierung]], [[Koordinatensystem]], [[Objektorientierte Programmierung|objektorientierter Programmierung]] und [[Softwareprojekt|Projektstruktur]] vorhanden sind.

{{BR}}
= MakeCode Arcade und Scratch: Für den Einstieg oft besser als p5.js =

[[Datei:Scratch Logo.svg|500px|rahmenlos|zentriert]]

[[MakeCode Arcade]] und [[Scratch]] sind besonders für jüngere Lernende oder absolute Anfänger geeignet. Beide Werkzeuge setzen auf visuelle Programmierung mit Blöcken. Dadurch steht nicht die genaue Syntax im Vordergrund, sondern das Denken in [[Algorithmus|Algorithmen]], [[Ereignis|Ereignissen]], [[Schleife|Schleifen]], [[Bedingung|Bedingungen]] und [[Variable|Variablen]].

[[MakeCode Arcade]] ist stärker auf kleine Retro-Spiele ausgelegt. Du kannst mit Blöcken starten und später zu [[JavaScript]] wechseln. [[Scratch]] eignet sich sehr gut für Geschichten, Animationen, Lernspiele und kreative Experimente. Für professionelle App-Veröffentlichung sind beide nicht die erste Wahl, aber für einen motivierenden Einstieg sind sie hervorragend.

{{BR}}
= Weitere Alternativen =

Neben den großen Alternativen gibt es weitere Werkzeuge, die je nach Ziel nützlich sein können. [[PixiJS]] ist stark für schnelle 2D-Grafik im Web. [[Three.js]] eignet sich für 3D-Grafik im Browser. [[Babylon.js]] ist eine mächtige 3D-Engine für Web-Anwendungen. [[Defold]] ist eine kompakte Engine für 2D-Spiele mit Export auf mehrere Plattformen. [[Unreal Engine]] ist sehr stark für High-End-3D, aber für einfache Schulprojekte meist zu komplex.

Diese Werkzeuge sind nicht automatisch besser als [[p5.js]]. Sie sind besser, wenn ihr Schwerpunkt zu Deinem Projekt passt. Die wichtigste Frage lautet daher nicht: '''Was ist die beste Alternative?''' Die wichtigste Frage lautet: '''Welche Umgebung passt zu meinem Ziel, meinem Können und meiner Plattform?'''

{{BR}}
= Entscheidungsbaum =

{| class="wikitable"
! Ziel
! Empfehlung
! Begründung
|-
| Ich möchte kreative Grafiken, Animationen und Experimente im Browser erstellen.
| [[p5.js]]
| Sehr schneller Einstieg, ideal für Creative Coding.
|-
| Ich möchte ein 2D-Spiel mit Leveln, Menüs und wenig Code erstellen.
| [[GDevelop]] oder [[Construct 3]]
| Visuelle Werkzeuge, Ereignissysteme und Exportmöglichkeiten.
|-
| Ich möchte mit JavaScript echte Webspiele programmieren.
| [[Phaser]]
| Mehr Spielstruktur als p5.js, aber weiterhin codebasiert.
|-
| Ich möchte eine freie professionelle Engine lernen.
| [[Godot]]
| Open Source, 2D, 3D, Szenensystem, gute Projektstruktur.
|-
| Ich möchte professionelle 3D-Apps oder Spiele entwickeln.
| [[Unity]]
| Sehr mächtig, viele Plattformen, große professionelle Nutzung.
|-
| Ich unterrichte Anfängerinnen und Anfänger in der Unterstufe.
| [[Scratch]] oder [[MakeCode Arcade]]
| Niedrige Einstiegshürde, Blöcke, schneller Lernerfolg.
|}

{{BR}}
= Beispiel: Von p5.js zur Game-Engine =

Stell Dir vor, Du hast in [[p5.js]] ein einfaches Ausweichspiel gebaut. Eine Figur bewegt sich mit den Pfeiltasten, Hindernisse fallen von oben herab, und bei einer Kollision ist das Spiel vorbei. In [[p5.js]] musst Du dafür viele Dinge selbst programmieren: Positionen, Geschwindigkeiten, Trefferprüfung, Neustart, Punktestand und Bildschirme.

In [[GDevelop]] würdest Du Objekte anlegen, Bewegungen als Verhalten definieren und Ereignisse für Kollisionen erstellen. In [[Phaser]] würdest Du Szenen, Sprites und Physik verwenden. In [[Godot]] würdest Du eine Player-Szene, eine Hindernis-Szene und eine Hauptszene bauen. In [[Unity]] würdest Du GameObjects, Komponenten und C#-Skripte einsetzen.

Das gleiche Spiel kann also in verschiedenen Werkzeugen entstehen. Der Unterschied liegt in der Arbeitsweise. [[p5.js]] trainiert stark das direkte Programmieren. [[GDevelop]] trainiert das Denken in Ereignissen. [[Phaser]] trainiert professionelle Webspiel-Architektur. [[Godot]] und [[Unity]] trainieren den Umgang mit großen Engines.

{{BR}}
= Medien zum Einstieg =

{{BR}}
== p5.js kennenlernen ==

{{#ev:youtube|https://www.youtube.com/watch?v=yPWkPOfnGsw|500|center}}

{{BR}}
== GDevelop kennenlernen ==

{{#ev:youtube|https://www.youtube.com/watch?v=XxeD_2nTyHI|500|center}}

{{BR}}
== Phaser kennenlernen ==

{{#ev:youtube|https://www.youtube.com/watch?v=2roOcOSTeuM|500|center}}

{{BR}}
== Godot kennenlernen ==

{{#ev:youtube|https://www.youtube.com/watch?v=4EhcfH_YpNg|500|center}}

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}

'''Wofür eignet sich p5.js besonders gut?'''
(Creative Coding und schnelle visuelle Experimente)
(!Komplexe 3D-Open-World-Spiele ohne zusätzliche Werkzeuge)
(!Automatische Veröffentlichung im App Store)
(!Professionelle Konsolenentwicklung ohne Exportprozess)

'''Welche Alternative ist besonders geeignet, wenn Du mit JavaScript bessere 2D-Webspiele entwickeln willst?'''
(Phaser)
(!Scratch)
(!Unity)
(!MakeCode Arcade)

'''Welche Engine ist frei und quelloffen und eignet sich für 2D und 3D?'''
(Godot)
(!PowerPoint)
(!Excel)
(!Audacity)

'''Welche Alternative arbeitet stark mit Ereignissen und eignet sich gut für No-Code-Spielentwicklung?'''
(GDevelop)
(!p5.js)
(!WordPress)
(!LibreOffice Writer)

'''Was ist ein wichtiger Vorteil einer Game-Engine gegenüber p5.js?'''
(Sie bietet oft Editor, Szenen, Export und Spielwerkzeuge)
(!Sie verhindert jedes Debugging)
(!Sie braucht nie Speicherplatz)
(!Sie ersetzt jede kreative Idee automatisch)

'''Welche Umgebung ist besonders geeignet für junge Lernende und Blockprogrammierung?'''
(Scratch)
(!Phaser)
(!Unity Hub)
(!Visual Studio Code)

'''Welches Werkzeug ist besonders mächtig für professionelle 3D-Produktionen, aber auch komplexer?'''
(Unity)
(!p5.js)
(!MakeCode Arcade)
(!TurboWarp)

'''Was bedeutet Export im Zusammenhang mit Spielentwicklung?'''
(Ein Projekt für eine Zielplattform ausgeben)
(!Eine Figur schneller laufen lassen)
(!Eine Farbe in eine andere Farbe umwandeln)
(!Eine Datei löschen)

'''Warum ist Phaser für Webspiele oft strukturierter als p5.js?'''
(Es bietet Szenen, Sprites, Asset-Loader und Physik)
(!Es funktioniert nur ohne Code)
(!Es kann keine Bilder verwenden)
(!Es ist ausschließlich für Textverarbeitung gedacht)

'''Welche Aussage ist am treffendsten?'''
(Die beste Alternative hängt vom Ziel des Projekts ab)
(!p5.js ist in jedem Fall schlechter als alle Alternativen)
(!Unity ist immer die einfachste Lösung)
(!Scratch ist eine professionelle 3D-Engine)

{{E}}
<br>

{{BR}}
== Memory ==

<div class="memo-quiz">
{|
|-
| p5.js || Creative Coding
|-
| GDevelop || No-Code-Spielentwicklung
|-
| Phaser || JavaScript-Game-Framework
|-
| Godot || Open-Source-Engine
|-
| Construct || Browser-Editor
|-
| Unity || C Sharp
|-
| MakeCode Arcade || Blockprogrammierung
|-
| Scratch || Visuelle Lernumgebung
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''p5.js'''
| Kreative Programmierung im Browser
|-
| '''GDevelop'''
| No-Code-Entwicklung mit Ereignissen
|-
| '''Phaser'''
| JavaScript-Framework für 2D-Webspiele
|-
| '''Godot'''
| Freie Engine für 2D und 3D
|-
| '''Unity'''
| Professionelle Engine für viele Plattformen
|-
| '''Scratch'''
| Blockbasierter Einstieg in Programmierung

|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| Phaser || Welches JavaScript-Framework eignet sich besonders für 2D-Webspiele?
|-
| Godot || Welche freie Open-Source-Engine ist stark für 2D und 3D?
|-
| Unity || Welche bekannte Engine wird häufig für professionelle 3D-Projekte genutzt?
|-
| Scratch || Welche visuelle Lernumgebung arbeitet mit Blöcken?
|-
| Canvas || Welche Zeichenfläche wird häufig im HTML5-Umfeld verwendet?
|-
| Export || Wie nennt man das Ausgeben eines Projekts für eine Zielplattform?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Alternativen+zu+p5js </iframe>

{{BR}}
== Lückentext ==

<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
[[p5.js]] eignet sich besonders gut für { Creative Coding }. Eine vollständige { Game-Engine } bietet oft Werkzeuge für Szenen, Objekte und Export. [[Phaser]] ist besonders interessant, wenn Du bei { JavaScript } bleiben und bessere Webspiele entwickeln möchtest. [[GDevelop]] arbeitet stark mit { Ereignissen } und ist deshalb für No-Code-Projekte geeignet. [[Godot]] ist eine freie Engine für { 2D } und 3D. [[Unity]] ist sehr mächtig, aber auch deutlich { komplexer } als p5.js. Für junge Lernende ist { Scratch } oft ein guter Einstieg in Programmierlogik. Die beste Wahl hängt immer vom { Projektziel } ab.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===
# [[Vergleichstabelle]]: Erstelle eine kleine Tabelle mit drei Werkzeugen aus diesem aiMOOC und notiere jeweils einen Vorteil und eine Grenze.
# [[Mini-Interview]]: Frage zwei Mitschülerinnen oder Mitschüler, ob sie lieber mit Code, Blöcken oder einem visuellen Editor arbeiten würden, und fasse die Antworten zusammen.
# [[Projektidee]]: Beschreibe eine einfache Spielidee und entscheide, ob Du sie eher mit p5.js, GDevelop oder Scratch bauen würdest.
# [[Begriffskarte]]: Zeichne eine Begriffskarte mit den Wörtern Bibliothek, Framework, Game-Engine, Export, Szene und Sprite.

{{BR}}
=== Standard ===
# [[Werkzeugtest]]: Probiere p5.js und ein weiteres Werkzeug aus und dokumentiere, welches Dir beim Einstieg leichter fällt.
# [[Prototyp]]: Plane ein kleines Ausweichspiel mit Spielfigur, Hindernis, Punktestand und Game-Over-Bildschirm. Entscheide begründet, welches Werkzeug Du nutzen würdest.
# [[App-Planung]]: Entwickle eine Checkliste für ein Lernspiel, das später auf einem Smartphone funktionieren soll.
# [[Videorecherche]]: Sieh Dir ein Tutorial zu GDevelop, Phaser oder Godot an und notiere fünf Dinge, die gegenüber p5.js anders gelöst werden.

{{BR}}
=== Schwer ===
# [[Migrationskonzept]]: Wähle ein bestehendes p5.js-Projekt und beschreibe, wie Du es nach Phaser, GDevelop oder Godot übertragen würdest.
# [[Entscheidungsmatrix]]: Bewerte p5.js, GDevelop, Phaser, Godot und Unity nach Lernkurve, Export, Kosten, 2D, 3D, App-Tauglichkeit und Unterrichtseinsatz.
# [[Didaktisches Konzept]]: Entwirf eine Unterrichtsstunde, in der eine Lerngruppe entscheidet, welches Werkzeug für ein bestimmtes Spielprojekt am besten geeignet ist.
# [[Technische Analyse]]: Vergleiche die Begriffe Szene, Sprite, Objekt, Kollision und Asset in zwei verschiedenen Entwicklungsumgebungen und erkläre Gemeinsamkeiten und Unterschiede.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =

# [[Begründete Werkzeugwahl]]: Du sollst ein Lernspiel für Tablets entwickeln. Vergleiche p5.js, GDevelop und Godot und begründe, welches Werkzeug Du wählen würdest.
# [[Transferaufgabe]]: Ein p5.js-Spiel wird unübersichtlich, weil alle Spiellogiken in einer Datei stehen. Erkläre, wie Szenenmanagement in Phaser oder Godot helfen könnte.
# [[Unterrichtsszenario]]: Eine Klasse hat kaum Programmiererfahrung, soll aber in zwei Wochen ein spielbares 2D-Spiel präsentieren. Entwickle eine Empfehlung mit Begründung.
# [[App-Strategie]]: Ein Team möchte ein Spiel zuerst im Browser testen und später als App veröffentlichen. Beschreibe Chancen und Risiken verschiedener Werkzeuge.
# [[Kritische Bewertung]]: Erkläre, warum die Aussage „Unity ist besser als p5.js“ zu ungenau ist. Formuliere eine differenzierte Antwort.
# [[Projektreflexion]]: Beschreibe, welche Kompetenzen Lernende bei p5.js stärker üben und welche Kompetenzen sie bei einer Game-Engine stärker üben.
# [[Vergleich von Lernwegen]]: Vergleiche den Lernweg Scratch → p5.js → Phaser mit dem Lernweg Scratch → GDevelop → Godot. Für welche Lernenden passt welcher Weg besser?

<br>
<br>

{{BR}}
= OERs zum Thema =

<iframe> https://de.m.wikipedia.org/wiki/P5.js </iframe>

<iframe> https://de.m.wikipedia.org/wiki/Spiel-Engine </iframe>

<iframe> https://de.m.wikipedia.org/wiki/JavaScript </iframe>

<iframe> https://de.m.wikipedia.org/wiki/Godot_(Spiel-Engine) </iframe>

<br>

{{BR}}
= Weblinks und Quellen für die Weiterarbeit =

# [[p5.js]]: https://p5js.org/
# [[GDevelop]]: https://gdevelop.io/
# [[Phaser]]: https://phaser.io/
# [[Godot]]: https://godotengine.org/
# [[Construct 3]]: https://www.construct.net/
# [[Unity]]: https://unity.com/
# [[MakeCode Arcade]]: https://arcade.makecode.com/
# [[Scratch]]: https://scratch.mit.edu/

{{BR}}
= Links =

{| align=center
{{:D-Tab}}
'''[[Alternativen zu p5.js]]'''
# [[p5.js]]
# [[Creative Coding]]
# [[JavaScript]]
# [[Game-Engine]]
# [[GDevelop]]
# [[Phaser]]
# [[Godot]]
# [[Construct 3]]
# [[Unity]]
# [[Scratch]]
# [[MakeCode Arcade]]
# [[App-Entwicklung]]
# [[2D-Spiel]]
# [[3D-Spiel]]
# [[Export]]
# [[No-Code]]
# [[Low-Code]]
# [[HTML5]]
# [[WebGL]]
# [[Canvas]]
|}

[[Kategorie:Informatik]]
[[Kategorie:Medienbildung]]
[[Kategorie:Programmieren]]
[[Kategorie:Spielentwicklung]]
[[Kategorie:App-Entwicklung]]
[[Kategorie:JavaScript]]
[[Kategorie:Digitale Bildung]]
= aiMOOC-Projekte =
{{TM}}
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]

Mit KI-Code Spiele entwickeln - Versionsgeschichte

Glanz: /* Einleitung */