Sie sind hier
E-Book

Kids programmieren 3D-Spiele mit JavaScript

Spannende 3D-Welten mit JavaScript. Mit vielen coolen Ideen.

AutorChris Strom
VerlagO'Reilly Verlag
Erscheinungsjahr2014
Seitenanzahl344 Seiten
ISBN9783955614973
FormatPDF/ePUB
Kopierschutzkein Kopierschutz/DRM
GerätePC/MAC/eReader/Tablet
Preis21,99 EUR
Programmierenlernen ist wirklich nicht schwer. Du wirst erstaunt sein, wie einfach es ist, interaktive Welten und lustige Spiele zu entwickeln. Und du wirst garantiert viel Spaß dabei haben! Du lädst dir schnell den ICE Code Editor als Browsererweiterung herunter, mit dem du auch offline arbeiten kannst, und los geht's. Alles was du programmierst, siehst du direkt im Code Editor: animierte Figuren, deinen eigenen Avatar, der Radschlagen kann, oder dein eigenes Spiel mit Obstmonstern, Höhlenpuzzlen und Floßfahrten. Wenn du wissen willst, was es mit dem ganzen Code so auf sich hat, wird dir das ganz genau erklärt. Wenn du dich aber lieber auf die Praxis konzentrieren willst, kannst du die Theorie außen vor lassen. Warum 3D-Spiele? Weil das Programmierenlernen damit besonders großen Spaß macht, denn, Hand aufs Herz, wer spielt nicht gern Computerspiele? Und so macht das Lernen nicht nur riesigen Spaß, wir programmieren dabei auch jede Menge tolle Sachen: Du stellst coole Spielfiguren her und Welten, in denen du spielen kannst, du programmierst deinen eigenen Avatar, bastelst lila Monster und erzeugst Weltraumsimulationen. Warum mit JavaScript? JavaScript ist die Sprache des World Wide Web und die einzige Programmiersprache, die alle Webbrowser ohne zusätzliche Software verstehen. Wenn du gelernt hast, in JavaScript zu programmieren, kannst du nicht nur solche Spiele programmieren, wie du in diesem Buch kennenlernen wirst. Du kannst auch alle möglichen Websites programmieren. Außerdem zeigen wir dir, wie du anschließend deine Spiele mit deinen Freunden teilen und sie auf deiner eigenen Website einbinden kannst. Und dann erzählst du all deinen Freunden: 'Das hab' ich gemacht!' An wen richtet sich dieses Buch? Obwohl für Kinder geschrieben, können auch Erwachsene hiermit das Programmieren erlernen. Es richtet sich an Programmieranfänger von 11 bis 99.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

Kapitel 1. Projekt: Einfache Formen Herstellen


WENN DU DIESES KAPITEL GELESEN HAST, DANN

  • weißt du, was ein Codeeditor ist und wie du ihn zum Programmieren benutzt

  • weißt du, wie man verschiedene 3D-Formen herstellt

  • kannst du einfaches JavaScript programmieren

  • verstehst du, wie man 3D-Formen dazu bringt, sich zu bewegen

Wir haben später in diesem Buch noch genügend Zeit für Erklärungen. Fangen wir jetzt erst mal zu programmieren an!

Programmieren mit dem ICE Code Editor


Wir benutzen in diesem Buch den ICE Code Editor zum Programmieren. Der ICE Code Editor läuft direkt in einem Browser. Wir können unseren Programmcode eintippen und sehen sofort die Ergebnisse.

Öffne zuerst den ICE Code Editor unter http://gamingJS.com/ice mit dem Webbrowser Chrome von Google. Das sollte dann ungefähr so aussehen:

Abbildung 1.1 Der ICE Code Editor in Google Chrome

Das sich drehende Ding mit den vielen Seitenflächen ist ein Beispiel für die Sachen, die wir in diesem Buch machen wollen. In diesem Kapitel legen wir ein neues Projekt namens Formen an.

Um im ICE Code Editor ein neues Projekt anzulegen, klicken wir auf den Menü-Button in der oberen rechten Ecke des Bildschirms (das ist das Kästchen mit den drei waagerechten Strichen) und wählen New aus dem Menü.

Abbildung 1.2 Das geöffnete Menü

Tippe den Namen des Projekts, Formen, in das Textfeld ein und klicke dann auf Save. Das Template (ein Template ist eine Vorlage) lässt du einfach auf 3D starter project stehen.

Abbildung 1.3 Wir legen ein neues Projekt an.

Denk dran, dass die Projekte in diesem Buch nicht funktionieren, wenn du den ICE Code Editor im Internet Explorer benutzt. Einige der Übungen klappen zwar mit Mozilla Firefox, am besten wäre es aber, wenn du für alle unsere Projekte bei einem einzigen Browser (Google Chrome) bleibst.

Mit dem ICE Code Editor programmieren


Wir benutzen in diesem Buch den ICE Code Editor. Du musst nur beim ersten Aufruf von http://gamingJS.com/ice/ Zugang zum WWW haben. Nach dem ersten Besuch ist der ICE in deinem Browser gespeichert, sodass du auch dann damit arbeiten kannst, wenn du nicht mit dem Internet verbunden bist.

Wenn der ICE ein neues 3D-Projekt öffnet, gibt es in der Datei schon eine Menge Code. Wir schauen uns diesen Code später genauer an. Im Moment wollen wir jedoch unser Programmierabenteuer auf Zeile 20 beginnen. Suche nach der Zeile, auf der START CODING ON THE NEXT LINE steht.

Abbildung 1.4 Hier legst Du los.

Tippe in Zeile 20 Folgendes ein:

var shape = new THREE.SphereGeometry(100); var cover = new THREE.MeshNormalMaterial(); var ball = new THREE.Mesh(shape, cover); scene.add(ball);

Sobald du damit fertig bist, solltest du etwas Cooles sehen:

Abbildung 1.5 Hier hat sich schon etwas getan.

Der Ball, den wir eingetippt – der Ball, den wir programmiert – haben, ist im ICE aufgetaucht. Herzlichen Glückwunsch! Du hast gerade dein erstes JavaScript-Programm geschrieben!

Mach dir erst einmal keine Sorgen um die Struktur des Codes. Du wirst dich in Kapitel 7, damit vertraut machen. Im Moment wollen wir die 3D-Programmierung betrachten, die wir gerade durchgeführt haben.

3D-Dinge bestehen aus zwei Teilen: der Form und etwas, das diese Form bedeckt. Die Kombination aus beidem, der Form und ihrer Umhüllung, trägt in der 3D-Programmierung einen besonderen Namen: Mesh (Gitter oder auch Gewebe).

Mesh ist ein schickes Wort für ein 3D-Ding. Meshes brauchen Formen (manchmal als Geometrie bezeichnet) und etwas, um sie zu umhüllen (sogenanntes Material). Wir schauen uns in diesem Kapitel verschiedene Formen an. Zu unterschiedlichen Umhüllungen für unsere Formen kommen wir erst in Kapitel 12, Mit Licht und Material arbeiten.

Sobald wir ein Mesh haben, fügen wir es der Szene hinzu. Die Szene ist die Stelle in der 3D-Programmierung, an der gezaubert wird. Es ist die Welt, in der alles passiert. In diesem Fall ist es der Ort, an dem unser Ball herumlungert und auf Freunde wartet. Fügen wir der Szene einige weitere Formen hinzu, damit der Ball nicht so allein ist.

Deine Arbeit wird automatisch gesichert


Deine Arbeit wird automatisch gesichert, du musst das also nicht selbst machen. Falls du deinen Code trotzdem selbst speichern möchtest, klickst du im ICE auf den Menü-Button mit den drei Linien und wählst den Save-Befehl. Ganz einfach!

Formen mit JavaScript herstellen


Bisher haben wir nur eine Art von Form gesehen: eine Kugel. Formen können einfach sein: Würfel, Pyramiden, Kegel und Kugeln. Formen können aber auch komplexer sein, wie Gesichter oder Autos. In diesem Buch bleiben wir bei einfachen Formen. Wenn wir so etwas wie Bäume bauen, kombinieren wir einfache Formen, wie Kugeln und Zylinder miteinander.

Kugeln herstellen


Bälle werden in der Geometrie und der 3D-Programmierung als Kugeln (oder mathematisch korrekt als Sphären) bezeichnet. Es gibt zwei Möglichkeiten, die Form einer Kugel in JavaScript zu kontrollieren.

Größe: SphereGeometry(100)


Zunächst einmal können wir eine Kugel kontrollieren, indem wir beschreiben, wie groß sie ist. Wir schufen einen Ball, dessen Radius 100 war, als wir new THREE.SphereGeometry(100) sagten. Was passiert, wenn du den Radius auf 250 änderst?

var shape = new THREE.SphereGeometry(250); var cover = new THREE.MeshNormalMaterial(); var ball = new THREE.Mesh(shape, cover); scene.add(ball);

? An dieser Stelle müsstest du die Größe der Kugel ändern.

Sie sollte jetzt viel größer werden:

Abbildung 1.6 Die Kugel ist gewachsen.

Was passiert, wenn du die 250 zu 10 änderst? Wie du sicher erraten hast, wird sie viel kleiner. Das ist also eine Möglichkeit, um die Form einer Kugel zu kontrollieren. Welche andere Möglichkeit hast du?

Nicht klobig: SphereGeometry(100, 20, 15)


Wenn du auf den Hide Code-Button im ICE klickst, bemerkst du sicher, dass unsere Kugel eigentlich kein wirklich glatter Ball ist:

Abbildung 1.7 Eigentlich keine Kugel, sondern ein kugelförmiges Gebilde aus Flächen

Du kannst den Code ganz leicht ein- und ausblenden


Wenn du in der oberen rechten Ecke des ICE-Fensters auf den weißen Hide Code-Button klickst, siehst du nur den Spielbereich und die Objekte im Spiel. So wirst du in späteren Kapiteln auch die Spiele bedienen. Um den Code wieder hervorzuzaubern, klickst du auf den weißen Show Code-Button im ICE Code Editor.

Computer sind nicht in der Lage, tatsächlich einen Ball herzustellen. Stattdessen tun sie nur so, indem sie einen Haufen Quadrate (und manchmal auch Dreiecke) so zusammensetzen, dass das Ganze dann aussieht wie ein Ball. Normalerweise erhalten wir die richtige Anzahl an Segmenten, sodass es ähnlich genug wirkt.

Manchmal aber möchten wir, dass der Ball ein bisschen glatter wirkt. Dazu fügen wir auf der SphereGeometry()-Zeile zusätzliche Werte hinzu:

var shape = new THREE.SphereGeometry(100, 20, 15); var cover = new THREE.MeshNormalMaterial(); var ball = new THREE.Mesh(shape, cover); scene.add(ball);

? Die erste Zahl ist die Größe, die zweite Zahl ist die Anzahl der Segmente um die Kugel herum, und die dritte Zahl ist die Anzahl der Segmente nach oben und unten.

Dies sollte eine Kugel ergeben, die viel glatter ist:

Abbildung 1.8 So sieht es schon viel besser aus.

Spiel doch noch ein bisschen mit diesen Zahlen herum. Du lernst gerade eine ganze Menge, und durch ein wenig Experimentieren wirst du noch mehr erfahren!

Ändere die Segmentierung nur, wenn Du unbedingt musst


Die Anzahl der Segmente, die wir erhalten, ohne dass wir SphereGeometry anweisen, mehr zu benutzen, ist vielleicht nicht so toll, aber du solltest sie nur ändern, wenn du unbedingt musst. Je mehr Segmente in einer Form sind, desto schwerer muss der Computer arbeiten, um sie zu zeichnen. Wie du später sehen wirst, ist es meist einfacher für den Computer, etwas glatt wirken zu lassen,...

Blick ins Buch

Weitere E-Books zum Thema: Programmiersprachen - Softwareentwicklung

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

Programmieren lernen in PHP 5

E-Book Programmieren lernen in PHP 5
Format: PDF

Mit der Version 5 erreicht PHP einen bemerkenswerten Reifegrad, der PHP zu einer festen Größe in der Welt der Webprogrammierung macht. Gerade die leichte Erlernbarkeit macht PHP zur idealen…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Weitere Zeitschriften

Burgen und Schlösser

Burgen und Schlösser

aktuelle Berichte zum Thema Burgen, Schlösser, Wehrbauten, Forschungsergebnisse zur Bau- und Kunstgeschichte, Denkmalpflege und Denkmalschutz Seit ihrer Gründung 1899 gibt die Deutsche ...

Das Hauseigentum

Das Hauseigentum

Das Hauseigentum. Organ des Landesverbandes Haus & Grund Brandenburg. Speziell für die neuen Bundesländer, mit regionalem Schwerpunkt Brandenburg. Systematische Grundlagenvermittlung, viele ...

Gastronomie Report

Gastronomie Report

News & Infos für die Gastronomie: Tipps, Trends und Ideen, Produkte aus aller Welt, Innovative Konzepte, Küchentechnik der Zukunft, Service mit Zusatznutzen und vieles mehr. Frech, offensiv, ...

die horen

die horen

Zeitschrift für Literatur, Kunst und Kritik."...weil sie mit großer Aufmerksamkeit die internationale Literatur beobachtet und vorstellt; weil sie in der deutschen Literatur nicht nur das Neueste ...

dima

dima

Bau und Einsatz von Werkzeugmaschinen für spangebende und spanlose sowie abtragende und umformende Fertigungsverfahren. dima - die maschine - bietet als Fachzeitschrift die Kommunikationsplattform ...

IT-BUSINESS

IT-BUSINESS

IT-BUSINESS ist seit mehr als 25 Jahren die Fachzeitschrift für den IT-Markt Sie liefert 2-wöchentlich fundiert recherchierte Themen, praxisbezogene Fallstudien, aktuelle Hintergrundberichte aus ...

VideoMarkt

VideoMarkt

VideoMarkt – besser unterhalten. VideoMarkt deckt die gesamte Videobranche ab: Videoverkauf, Videoverleih und digitale Distribution. Das komplette Serviceangebot von VideoMarkt unterstützt die ...

F- 40

F- 40

Die Flugzeuge der Bundeswehr, Die F-40 Reihe behandelt das eingesetzte Fluggerät der Bundeswehr seit dem Aufbau von Luftwaffe, Heer und Marine. Jede Ausgabe befasst sich mit der genaue Entwicklungs- ...