{"id":1290,"date":"2016-06-17T08:06:53","date_gmt":"2016-06-17T08:06:53","guid":{"rendered":"https:\/\/anexia.com\/blog\/de\/?p=1290"},"modified":"2022-04-19T12:19:02","modified_gmt":"2022-04-19T10:19:02","slug":"phaser-tutorial-html5-rennspiel","status":"publish","type":"post","link":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/","title":{"rendered":"Phaser Tutorial: HTML5 Rennspiel"},"content":{"rendered":"

Phaser<\/a> bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5\u00a0basierte Spiele zu kreieren. In diesem Tutorial\u00a0m\u00f6chte ich den Einstieg in Phaser anhand\u00a0eines Rennspiels zeigen. Den gesamten Source Code k\u00f6nnt ihr am Ende des Posts finden. Wie das fertige Rennspiel in meinen Fall ausschaut, k\u00f6nnt ihr hier ansehen:\u00a0Anexia Schlepperacer<\/a><\/p>\n

 <\/p>\n

1. Einf\u00fchrung<\/h2>\n

Um Phaser in ein eigenes Projekt einzubinden, kann man es entweder von der offiziellen Seite<\/a> downloaden, oder ein CDN<\/a> verwenden.<\/p>\n

Ich habe in meinen Fall ein CDN verwendet, somit reicht es folgendes Script Tag in das eigene Projekt einzubinden:<\/p>\n

<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/phaser\/2.4.8\/phaser.min.js\"><\/script><\/pre>\n
Achtung: Dieses Script Tag bindet Phaser Version 2.4.8 ein. Checkt bitte zuerst, ob es bereits eine neuere Version gibt!<\/p>\n
Ein Phaser Spiel besteht grunds\u00e4tzlich aus 3 Funktionen: preload, create & update.<\/p>\n
Die preload-Funktion ist der Eintrittspunkt des Spiels und wird als\u00a0erste aufgerufen. Sie ist, wie der Name schon sagt, daf\u00fcr da, Dateien wie Grafiken, Bounding Boxes, Schriften, Scripts, Sounds und \u00c4hnliches zu laden. Eine typische Codezeile in der Preload-Funktion sieht zum Beispiel so aus:<\/p>\n
game.load.spritesheet('map','assets\/map.jpg');\r\n<\/pre>\n
 <\/p>\n
Die create-Funktion wird nach der preload-Funktion aufgerufen. Hier hat man die M\u00f6glichkeit, einmaligen Code auszuf\u00fchren. Der wird erst aufgerufen, wenn bereits alle anderen Daten zur Verf\u00fcgung stehen. Hier spielt sich schon einiges ab. Man f\u00fcgt typischerweise\u00a0die meisten Grafiken, die in der preload-Funktion geladen wurden zum Spiel hinzu, mapt die Bounding Boxes\u00a0zu Grafiken, initialisiert und konfiguriert\u00a0Partikeleffekte und Animationen, schreibt die Physik, setzt Texte oder ladet die Keys der Tastatur. Das ist notwenig, um sp\u00e4ter abfragen zu k\u00f6nnen, ob diese gedr\u00fcckt sind.<\/p>\n
In der update-Funktion findet dann die richtige Action statt. Diese wird beim Rendern eines jeden Frames aufgerufen. Hier werden User Inputs & Kollisionen gehandelt, die Sprites bewegt, usw.<\/p>\n
Um ein Phaser Spiel schlie\u00dflich zu intialisieren, muss man nur folgende Zeile JavaScript ins Projekt einbinden:<\/p>\n
var game = new Phaser.Game(1280, 839, Phaser.AUTO, 'main_game', { preload: preload, create: create, update: update });<\/pre>\n
Die ersten zwei Parameter geben die H\u00f6he und Breite des Spiels in Pixel an. Man kann die Gr\u00f6\u00dfe aber auch nachtr\u00e4glich \u00e4ndern, um das Spiel auf verschiedene Aufl\u00f6sungen anzupassen, ohne das sich die Sprites im Spiel \u00e4ndern.<\/p>\n
Mit den 3. Parameter kann man einstellen, wie das Spiel gerendert werden soll (WebGL oder Canvas). Normalerweise setzt man dies auf Phaser.AUTO, das WebGL verwendet, falls es verf\u00fcgbar ist. Sonst wird auf Canvas.<\/p>\n
Der 4. Parameter ist die ID des Div, in dem sich das HTML Element des Spiels befinden soll. Man kann diesen Parameter auch leer lassen, solange keine HTML properties ben\u00f6tigt werden.<\/p>\n
Im letzten Parameter werden dann noch unsere preload, create und update Funktionen an Phaser \u00fcbergeben. (Lasst die 3 vorerst einfach leer)<\/p>\n
 <\/p>\n
2. \u00a0Auto & Map initialisieren<\/h2>\n
F\u00fcr unser Rennspiel ben\u00f6tigen wir zuerst eine Map auf der das Auto fahren kann, und nat\u00fcrlich ein Auto. Ab hier wird ein Webserver verwendet, da der Browser nicht berechtigt ist, auf lokale Dateien am PC zuzugreifen. Also am einfachsten XAMPP oder je nach System und Geschmack \u00e4hnliches installieren.<\/p>\n
Hier ist die von mir verwendete Map mit unserem B\u00fcrogeb\u00e4ude:<\/p>\n
\"map\"<\/a><\/p>\n
Das Auto ist unserem Anexia Lieferwagen nachempfunden:<\/p>\n
\"car\"<\/a><\/p>\n
Um die Grafiken in unser Spiel zu laden, m\u00fcssen wir sie zuerst in unserer preload Methode laden:<\/p>\n
function preload() {\r\n    game.load.spritesheet('map','assets\/map.jpg');\r\n    game.load.spritesheet('car','assets\/car.png');\r\n}<\/pre>\n
Der erste Parameter kann beliebig gew\u00e4hlt werden. Er sorgt daf\u00fcr, dass sp\u00e4ter auf die Grafik zugegriffen werden kann.<\/p>\n
Der zweite Parameter gibt den Pfad zur Datei an.<\/p>\n
Nun ist die Grafik geladen, wir m\u00fcssen sie aber noch ins Spiel einbinden. Dies machen wir in der create-Funktion:<\/p>\n
function create() {\r\n    \/*Adding Map*\/\r\n    var map = game.add.sprite(0,0,'map');\r\n    \/*Adding car*\/\r\n    car = game.add.sprite(570,100,'car');\r\n}<\/pre>\n
Die ersten 2 Parameter hier geben die Koordinaten (X,Y) an, wo die\u00a0Grafik plaziert werden soll, der 3. gibt an wie sie hei\u00dft. Der Name muss der gleiche sein, wie der, in der preload-Funktion verwendete.<\/p>\n
F\u00fchrt man nun das Spiel aus, sieht man das Auto mit der Map als Hintergrund.<\/p>\n
Als n\u00e4chstes gehen wir zur Steuerung des Autos.<\/p>\n
 <\/p>\n
3. Auto Steuerung<\/h2>\n
Damit wir wissen in welche Richtung das Auto fahren soll, m\u00fcssen wir zuerst die Eingaben auf der Tastatur abfragen. Hierf\u00fcr m\u00fcssen wir zuerst Phaser sagen, von welchen Tasten wir Daten brauchen.<\/p>\n
Legen wir zuerst eine globale Variable „cursors“ an:<\/p>\n
var cursors;<\/pre>\n
Mit folgender Zeile k\u00f6nnen wir Phaser in der create-Funktion sagen, dass wir alle „Cursor-Keys“ (also alle Pfeiltasten) ben\u00f6tigen:<\/p>\n
cursors = game.input.keyboard.createCursorKeys();<\/pre>\n
Anschlie\u00dfend k\u00f6nnen wir in der update-Funktion mit z.B.<\/p>\n
if (cursors.up.isDown) {\r\n}<\/pre>\n
abfragen, ob die Pfeil-oben Taste gedr\u00fcckt ist.<\/p>\n
Um den Auto nun eine Geschwindigkeit zu geben, m\u00fcssen wir eine Physik Engine einschalten. Phaser kommt mit mehreren Physik Engines. Am h\u00e4ufigsten sieht man im Internet die Arcade Engine, welche wir aber nicht verwenden werden, da diese keine komplexen Bounding Boxes unterst\u00fctzt. Die P2 Engine unterst\u00fctzt diese. Um sie zu starten, f\u00fcgen wir folgende Zeile in der Create-Funktion hinzu:<\/p>\n
game.physics.startSystem(Phaser.Physics.P2JS);<\/pre>\n
Jetzt ist die Physiks Engine gestartet, wir m\u00fcssen ihr aber noch sagen, dass unser Auto Teil der Engine sein wird:<\/p>\n
game.physics.p2.enable(car,false);<\/pre>\n
Jetzt drehen wir erstmal das Auto so, dass es entlang der Strecke steht:<\/p>\n
car.body.angle = 90;<\/pre>\n
Jetzt wird es endlich Zeit dem Auto eine Geschwindigkeit zu geben. Legen wir hierf\u00fcr eine globale Variable an die zu Beginn 0\u00a0ist:<\/p>\n
var velocity = 0;<\/pre>\n
Jetzt geht es an den Code der das Auto steuert:<\/p>\n
if (cursors.up.isDown && velocity <= 400)\r\n        velocity+=7;\r\nelse {\r\n    if (velocity >= 7)\r\n        velocity -= 7;\r\n}\r\n                        \r\ncar.body.velocity.x = velocity * Math.cos((car.angle-90)*0.01745);\r\ncar.body.velocity.y = velocity * Math.sin((car.angle-90)*0.01745);\r\n                \r\nif (cursors.left.isDown)\r\n    car.body.angularVelocity = -5*(velocity\/1000);\r\nelse if (cursors.right.isDown)\r\n    car.body.angularVelocity = 5*(velocity\/1000);\r\nelse\r\n    car.body.angularVelocity = 0;<\/pre>\n
Das Ganze ist eigentlich ganz einfach:<\/p>\n
if (cursors.up.isDown && velocity <= 400)\r\n        velocity+=7;\r\nelse {\r\n    if (velocity >= 7)\r\n        velocity -= 7;\r\n}<\/pre>\n
Ist die Pfeil-oben Taste gedr\u00fcckt und die Geschwindigkeit kleiner als 400 Pixel\/Sekunde (maximale Geschwindigkeit) , wird sie erh\u00f6ht. Ist die Taste nicht gedr\u00fcckt, wird das Auto langsamer.<\/p>\n
Dannach wird aus der Geschwindigkeit berechnet, wie gro\u00df die Geschwindigkeit auf der X und Y Achse ist:<\/p>\n
car.body.velocity.x = velocity * Math.cos((car.angle-90)*0.01745);\r\ncar.body.velocity.y = velocity * Math.sin((car.angle-90)*0.01745);<\/pre>\n
Zuerst zieht man vom Winkel des Auto 90 ab. (Wir haben es ja vorhin um 90 Grad gedreht, f\u00fcr das Programm ist die Front des Autos sonst auf der rechten Seite.) Dadurch haben wir den echten Winkel des Autos, welchen wir dann in Radiant umwandeln (*0.01745). Nehmen wir davon die Cosinus Funktion, erhalten wir davon den X-Vector, der angibt, wieweit wir das Auto auf der X-Achse verschieben m\u00fcssen. Diesen Multiplizieren wir dann mit der gesamten Geschwindigkeit und setzen dies als X Geschwindigkeit.<\/p>\n
Die Berechnung f\u00fcr die Y-Achse funktioniert gleich, nur mit der Sinus Funktion.<\/p>\n
Dannach setzten wir noch die Rotation des Autos:<\/p>\n
if (cursors.left.isDown)\r\n    car.body.angularVelocity = -5*(velocity\/1000);\r\nelse if (cursors.right.isDown)\r\n    car.body.angularVelocity = 5*(velocity\/1000);\r\nelse\r\n    car.body.angularVelocity = 0;<\/pre>\n
Die Geschwindigkeit der Rotation ist abh\u00e4ngig von der Geschwindigkeit des Autos,\u00a0ist das Auto langsam, lenkt es auch langsam.<\/p>\n
Da der Code mittlerweile schon etwas komplexer geworden ist, hier nochmal der ganze:<\/p>\n
<html>\r\n    <head>\r\n        <title>Tutorial<\/title>\r\n        <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/phaser\/2.4.8\/phaser.min.js\"><\/script>\r\n    <\/head>\r\n    <body>\r\n        <script>\r\n            \r\n            var game = new Phaser.Game(1280, 839, Phaser.AUTO, 'main_game', { preload: preload, create: create, update: update });\r\n            \r\n            function preload() {\r\n                game.load.spritesheet('map','assets\/map.jpg');\r\n                game.load.spritesheet('car','assets\/car.png');\r\n            }\r\n            \r\n            var cursors;\r\n            var velocity = 0;\r\n            function create() {\r\n                \/*Enable Phyics Engine*\/\r\n                game.physics.startSystem(Phaser.Physics.P2JS);\r\n                \/*Adding Map*\/\r\n                var map = game.add.sprite(0,0,'map');\r\n                \/*Adding car*\/\r\n                car = game.add.sprite(570,100,'car');\r\n                game.physics.p2.enable(car);\r\n                car.body.angle = 90;\r\n                \r\n                cursors = game.input.keyboard.createCursorKeys();\r\n            }\r\n            \r\n            function update()\r\n            {\r\n                \/*Update Velocity*\/\r\n                if (cursors.up.isDown && velocity <= 400) {\r\n                        velocity+=7;\r\n                }\r\n                else {\r\n                    if (velocity >= 7)\r\n                        velocity -= 7;\r\n                }\r\n                        \r\n                \/*Set X and Y Speed of Velocity*\/\r\n                car.body.velocity.x = velocity * Math.cos((car.angle-90)*0.01745);\r\n                car.body.velocity.y = velocity * Math.sin((car.angle-90)*0.01745);\r\n                \r\n                \/*Rotation of Car*\/\r\n                if (cursors.left.isDown)\r\n                    car.body.angularVelocity = -5*(velocity\/1000);\r\n                else if (cursors.right.isDown)\r\n                    car.body.angularVelocity = 5*(velocity\/1000);\r\n                else\r\n                    car.body.angularVelocity = 0;\r\n            }\r\n        <\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
<\/h2>\n
4. Kollisionen<\/h2>\n
Als n\u00e4chstes k\u00fcmmern wir uns um die Kollisionserkennung. Hierf\u00fcr habe ich den Physics Editor<\/a>\u00a0verwendet. Ich werde hier\u00a0nicht genauer auf die Bedienung eingehen, es gibt da bereits relativ viele Informationen im Netz. Der Physics Editor generiert eine JSON Datei, welche alle Bounding Boxes\u00a0beinhaltet. Diese Datei laden wir in der Preload-Funktion mit:<\/p>\n
game.load.physics(\"collision\",\"assets\/collision.json\");<\/pre>\n
Ich werde hier das Erzeugen einer Kollision mit dem Geb\u00e4ude in der Mitte erkl\u00e4ren,\u00a0mit den restlichen Objekten funktioniert es aber \u00e4hnlich.<\/p>\n
Da das Geb\u00e4ude dreidimensional aus der Map sticht, wollte ich, dass das Auto „unter“ das Ge b\u00e4udefahren kann. Das Ganze sollte ungef\u00e4hr so aussehen:<\/p>\n
\"car<\/a><\/p>\n
 <\/p>\n
Daf\u00fcr schneidet man das Bild dementsprechend aus, und speichert es als PNG Datei mit transparenten Hintergrund ab. Wir f\u00fcgen nun das Geb\u00e4ude gleich wie die anderen Grafiken am Ende der create-Funktion hinzu. Damit die Grafik des Autos unter der des Geb\u00e4udes liegt, m\u00fcssen wir die Grafik des Geb\u00e4udes nach der des Autos hinzuf\u00fcgen.<\/p>\n
Zuerst m\u00fcssen wir Collision Groups f\u00fcr die Objekte erzeugen:<\/p>\n
var carCollisionGroup = game.physics.p2.createCollisionGroup();\r\nvar buildingCollisionGroup = game.physics.p2.createCollisionGroup();\r\ngame.physics.p2.updateBoundsCollisionGroup();<\/pre>\n
Dann f\u00fcgen wir das Geb\u00e4ude hinzu (nachdem wir es in der preload-Funktion geladen haben):<\/p>\n
var building = game.add.sprite(640,420,'building');\r\n<\/pre>\n
Wir schalten die Physik-Engine f\u00fcr das Geb\u00e4ude ein:<\/p>\n
game.physics.p2.enable(building);\r\n<\/pre>\n
Dann stellen wir noch ein, dass das Geb\u00e4ude kein bewegliches Objekt ist:<\/p>\n
building.body.kinematic = true;\r\n<\/pre>\n
Wir l\u00f6schen die Bounding Box die standardm\u00e4\u00dfig auf den Geb\u00e4ude liegt:<\/p>\n
building.body.clearShapes();\r\n<\/pre>\n
Und laden unsere eigene Bounding Box aus der vom Physics Editor exportierten Datei:<\/p>\n
building.body.loadPolygon('collision','building');<\/pre>\n
Jetzt sagen wir noch, welchen Collision Groups das Auto und das Geb\u00e4ude angeh\u00f6ren:<\/p>\n
car.body.setCollisionGroup(carCollisionGroup);\r\nbuilding.body.setCollisionGroup(buildingCollisionGroup);<\/pre>\n
Und schlussendlich sagen wir, dass das Geb\u00e4ude und das Auto kollidieren sollen:<\/p>\n
car.body.collides([carCollisionGroup,buildingCollisionGroup]);\r\nbuilding.body.collides([buildingCollisionGroup,carCollisionGroup]);<\/pre>\n
Hinweis: Habt ihr Probleme mit der Bounding Box, versucht folgendes:<\/p>\n
game.physics.p2.enable(building,true);<\/pre>\n
Gebt ihr hier „true“ als 2. Parameter mit, wird die Bounding Box des Geb\u00e4udes angezeigt. Das hilft beim Debuggen. \ud83d\ude09<\/p>\n
Habt ihr alles richtig gemacht, solltet ihr jetzt das Grundger\u00fcst f\u00fcr euer eigenes Rennspiel haben!<\/p>\n
Falls nicht, gibt es hier nochmal das gesamte Spiel zum Download:\u00a0HTML5 Racing Game<\/a><\/p>\n
Falls ihr noch Fragen habt, schreibt mir einfach eine E-Mail<\/a>.<\/p>\n
Ihr wollt wissen, was in meinem Fall aus dem Spiel geworden ist?<\/p>\n
Besucht doch einfach den Anexia Schlepperacer<\/a>\u00a0auf Facebook und seht es euch an, bis 1. Juli 2016 k\u00f6nnt ihr dort ein iPad Air 2<\/b> gewinnen!<\/p>\n
Ihr wollt eure eigene Social Media Applikation, aber seit euch nicht sicher\u00a0wie man den Weg dorthin findet?<\/p>\n
Wir von Anexia\u00a0realisieren liebend gerne eure Social Media Applikationen, besucht uns einfach hier<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.<\/p>\n","protected":false},"author":20,"featured_media":1447,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[297,294,14,293,296,295,292],"yoast_head":"\nPhaser Tutorial: HTML5 Rennspiel - ANEXIA Blog<\/title>\n<meta name=\"description\" content=\"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Phaser Tutorial: HTML5 Rennspiel - ANEXIA Blog\" \/>\n<meta property=\"og:description\" content=\"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/\" \/>\n<meta property=\"og:site_name\" content=\"ANEXIA Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/anexiagmbh\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-17T08:06:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-19T10:19:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1066\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Daniel Wuggenig\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:site\" content=\"@_ANEXIA\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Wuggenig\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/\",\"url\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/\",\"name\":\"Phaser Tutorial: HTML5 Rennspiel - ANEXIA Blog\",\"isPartOf\":{\"@id\":\"https:\/\/anexia.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg\",\"datePublished\":\"2016-06-17T08:06:53+00:00\",\"dateModified\":\"2022-04-19T10:19:02+00:00\",\"author\":{\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/6f0e77d2bc1f23f7e353f1e6e2f2acfd\"},\"description\":\"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.\",\"breadcrumb\":{\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage\",\"url\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg\",\"contentUrl\":\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg\",\"width\":1600,\"height\":1066,\"caption\":\"Phaser-Titelbild\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/anexia.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Phaser Tutorial: HTML5 Rennspiel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/anexia.com\/blog\/#website\",\"url\":\"https:\/\/anexia.com\/blog\/\",\"name\":\"ANEXIA Blog\",\"description\":\"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/anexia.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/6f0e77d2bc1f23f7e353f1e6e2f2acfd\",\"name\":\"Daniel Wuggenig\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c60eb93ac799bb6eaada1b39ebd15b85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c60eb93ac799bb6eaada1b39ebd15b85?s=96&d=mm&r=g\",\"caption\":\"Daniel Wuggenig\"},\"url\":\"https:\/\/anexia.com\/blog\/author\/dwuggenig\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Phaser Tutorial: HTML5 Rennspiel - ANEXIA Blog","description":"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/","og_locale":"de_DE","og_type":"article","og_title":"Phaser Tutorial: HTML5 Rennspiel - ANEXIA Blog","og_description":"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.","og_url":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/","og_site_name":"ANEXIA Blog","article_publisher":"https:\/\/www.facebook.com\/anexiagmbh\/","article_published_time":"2016-06-17T08:06:53+00:00","article_modified_time":"2022-04-19T10:19:02+00:00","og_image":[{"width":1600,"height":1066,"url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg","type":"image\/jpeg"}],"author":"Daniel Wuggenig","twitter_card":"summary_large_image","twitter_creator":"@_ANEXIA","twitter_site":"@_ANEXIA","twitter_misc":{"Verfasst von":"Daniel Wuggenig","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/","url":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/","name":"Phaser Tutorial: HTML5 Rennspiel - ANEXIA Blog","isPartOf":{"@id":"https:\/\/anexia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage"},"image":{"@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage"},"thumbnailUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg","datePublished":"2016-06-17T08:06:53+00:00","dateModified":"2022-04-19T10:19:02+00:00","author":{"@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/6f0e77d2bc1f23f7e353f1e6e2f2acfd"},"description":"Phaser bietet Einsteigern in der Spieleentwicklung die M\u00f6glichkeit, HTML5 basierte Spiele zu kreieren. In diesem Tutorial m\u00f6chte ich den Einstieg anhand eines Rennspiels zeigen.","breadcrumb":{"@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#primaryimage","url":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg","contentUrl":"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2016\/06\/Phaser-Titelbild.jpg","width":1600,"height":1066,"caption":"Phaser-Titelbild"},{"@type":"BreadcrumbList","@id":"https:\/\/anexia.com\/blog\/de\/phaser-tutorial-html5-rennspiel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/anexia.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Phaser Tutorial: HTML5 Rennspiel"}]},{"@type":"WebSite","@id":"https:\/\/anexia.com\/blog\/#website","url":"https:\/\/anexia.com\/blog\/","name":"ANEXIA Blog","description":"[:de] ANEXIA Blog - Technischen Themen, Anexia News und Insights [:]","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/anexia.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/6f0e77d2bc1f23f7e353f1e6e2f2acfd","name":"Daniel Wuggenig","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/anexia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c60eb93ac799bb6eaada1b39ebd15b85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c60eb93ac799bb6eaada1b39ebd15b85?s=96&d=mm&r=g","caption":"Daniel Wuggenig"},"url":"https:\/\/anexia.com\/blog\/author\/dwuggenig\/"}]}},"lang":"de","translations":{"de":1290,"en":6937},"amp_enabled":true,"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/1290"}],"collection":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1290"}],"version-history":[{"count":69,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/1290\/revisions"}],"predecessor-version":[{"id":6939,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/posts\/1290\/revisions\/6939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media\/1447"}],"wp:attachment":[{"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}