Wireframe

Die einzelnen Abschnitte des Wireframes 1-7 werden nun erklärt.

1. App- und Werkzeugleiste Die Leiste ganz oben ist eine App- und Werkzeugleiste. Ganz links steht das Logo von Zaubercode. Dann kommen einige Icons, die den Editor betreffen. Die Pfeile machen Aktionen rückgängig oder wiederholen diese. Die Lupen sind zum rein- und rauszoomen und das Icon daneben, um so weit rauszuzoomen, dass alle Objekte sichtbar sind. Ganz rechts befindet sich das Profilbild des Nutzers mit weiteren Aktionen, wie z.B. sich abzumelden oder das Profil zu bearbeiten.

2. Bausteine Links werden alle Bausteine aufgelistet, die standardmäßig vorhanden sind und die kombiniert werden können, um eigene Bausteine zu erstellen. Um sie in der Szene zu platzieren, müssen sie per Drag And Drop in die Szene gezogen werden. Je nachdem, um welchen Baustein es sich dann handelt, ploppt dann noch ein Erstellfenster auf. Wenn z.B. ein Bild reingezogen wird, wird der Nutzer gefragt, ob er ein vorgefertigtes Bild verwenden möchte, ein Bild von der Festplatte oder über eine URL importieren möchte. Schließlich wird der Baustein an die Stelle platziert, wo der Benutzer ihn hingezogen hat.

3. Eigene Bausteine Dies sind die eigenen Bausteine des Nutzers. Wenn der Nutzer ein Objekt im Editor komponiert hat, so kann er dieses auswählen und per Drag And Drop zu den eigenen Bausteinen ziehen, wo es dann gespeichert wird. Wird es reingedroppt, muss der Nutzer einen Namen für diesen Baustein angeben. Der Name darf als Bausteinname noch nicht exisitieren. Der Name ist nämlich gleich dem Typnamen im Code. Über das Kontextmenü per Rechtsklick kann der Baustein gelöscht werden. Außerdem soll der Name auch umbenannt werden können.

4. Welt-Editor Hier baut der Nutzer seine Welt und seine eigenen Bausteine oder Spiele zusammen. Mit Doppelklick wird ein Baustein ausgewählt und unten im Explorer angezeigt. Wenn ein Baustein ausgewählt ist, erscheint eine Bounding-Box um den Baustein herum. Diese Bounding-Box wird automatisch auf die Kind-Bausteine.

5. Baustein-Explorer Im Baustein-Explorer werden Informationen zu dem ausgewählten Baustein angezeigt. Zudem gibt es einige Eigenschaften, die eingesehen werden können, wie z.B. der Name, die Position, die Rotation und die Größe. Auf der anderen Seite sind alle Aktionen aufgelistet, die der Baustein enthält. Diese sind unterteilt in den Standard-Aktionen, die für den primitiven Baustein, aus dem der komplexere Baustein zusammengesetzt wurden, definiert sind. Zudem gibt es die eigenen Aktionen, die der Nutzer im Aktionen-Code-Editor definiert. Die Aktionen könnten bspw. über eine Combobox angezeigt und ausgewählt werden. Über den Play-Button kann die Aktion gestartet werden, sodass der ausgewählte Baustein die Aktion ausführt. Bei den eigenen Aktionen kann es außerdem noch ein Code-Icon geben, welcher den Aktionen-Editor dann in die Zeile springen lässt, wo die Aktion definiert ist. Zudem gibt es die Ereignisse, die analog zu den Aktionen funktionieren. Zudem sollen neue Ereignisse wie z.B. ein Klick-Ereignis für ein Baustein hinzugefügt werden können. Der Code für diese wird dann automatisch im Ereignis-Code-Editor angelegt.

6. Aktionen-Code-Editor Im diesem Code-Editor werden Aktionen geschrieben, die für den eigenen Baustein angelegt werden.

7. Ereignis-Code-Editor In diesem Code-Editor werden Ereignisse geschrieben, auf die der eigene Baustein reagiert.

Die Code-Editoren sollen mindestens die Standard-Features besitzen, wie Zeilenangaben und Syntax-Hervorhebung. Zudem sollten Syntaxfehler (rot) und Typfehler (blau) im Editor unterkringelt hervorgehoben werden und über ein Popup beim Hovern der Maus erklärt werden.