{"id":1441,"date":"2015-06-08T14:57:05","date_gmt":"2015-06-08T12:57:05","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=1441"},"modified":"2015-06-11T13:31:13","modified_gmt":"2015-06-11T11:31:13","slug":"persoenlicher-bericht-mein-einstieg-in-die-html5-spieleentwicklung","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=1441","title":{"rendered":"Pers\u00f6nlicher Bericht: Mein Einstieg in die HTML5 Spieleentwicklung mit phaser.io"},"content":{"rendered":"<h1>Intention<\/h1>\n<p>Viele Entwickler, die selber schon leidenschaftlich ein Spiel gezockt haben, tr\u00e4umen von der Umsetzung eigener Spieleideen.<\/p>\n<p>Bei mir ist es hier nicht anders. Ich habe viele Ideen und viele davon sind unsinnig. Man w\u00fcrde sie vermutlich in die Kategorie &#8222;Trash&#8220; stecken. Aber gerade professionell anmutende Spiele mit Trash-Faktor sind es, die viele Spieler fesseln. Die meisten Spiele, die nicht als &#8222;Trash&#8220; gekennzeichnet sind, sind unter reellen Bedingungen absoluter Humbug.<\/p>\n<p>Beispiele:<br \/>\n* Ein Klempner aus Brooklyn der Pilze frisst und auf Schildkr\u00f6ten rumtrampelt<br \/>\n* Eine Steinschleuder die kleine V\u00f6gel auf gr\u00fcne Schweine schie\u00dft<br \/>\n* Pr\u00fcgelnde Kontrahenten, die Energieb\u00e4lle schie\u00dfen und mit Hubschrauberkicks durch die Gegend fliegen<br \/>\n* .. etc<\/p>\n<p>Obwohl diese Spiele absolut unrealistisch sind, haben diese eine &#8222;Spielephysik&#8220;, die aber nicht unbedingt realisitsch sein muss.<br \/>\n* Super Mario springt und f\u00e4llt auch wieder auf den Boden<br \/>\n* Ein Angry Bird schubst Teile seiner Welt an, diese st\u00fcrzen um und schubsen wiederum weitere Teile an, solange bis das Schweinehaus zusammenf\u00e4llt.<br \/>\n* Die Sequenz des Schie\u00dfens bei Ryu\/Ken ben\u00f6tigt eine gewisse Zeit in der sie angreifbar sind. Wenn Chun Li in der Luft ist kann Guile sie mit seinem Flip-Kick unbeschadet runterholen.<\/p>\n<p>Distanziert betrachtet haben mich diese Spiele gefesselt und viel Zeit gekostet, waren aber konzeptuell absoluter Quatsch. Ob ich als Hobbyentwickler\u00a0und Familienvater in meiner Frezeit die Zeit finde, an einem Spiel zu entwickeln, m\u00f6chte ich an diesem Punkt noch bezweifeln aber ich lasse mich jetzt mal \u00fcberraschen.<\/p>\n<p>Aus diesem Grund wollte ich w\u00e4hrend meines Urlaubes den Einstieg in die HTML 5 Spieleentwicklung so hinbekommen, dass ich grunds\u00e4tzlich ein 2D-Spieleentwicklungsproblem angehen kann.<\/p>\n<h1>Idee<\/h1>\n<p>Die erste Idee ist nichts weltbewegendes und sie ist absoluter Quatsch:<br \/>\n<a href=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1442\" data-permalink=\"https:\/\/www.capri-soft.de\/blog\/?attachment_id=1442\" data-orig-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?fit=996%2C279&amp;ssl=1\" data-orig-size=\"996,279\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Beer Througher Professional\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?fit=300%2C84&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?fit=474%2C133&amp;ssl=1\" class=\"alignnone size-full wp-image-1442\" src=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?resize=474%2C133&#038;ssl=1\" alt=\"Beer Througher Professional\" width=\"474\" height=\"133\" srcset=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Beer-Througher-Professional.png?resize=300%2C84&amp;ssl=1 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<p>Wir haben eine Person, die ein Bierglas \u00fcber einen Tisch wirft. W\u00e4hrend das Bierglas \u00fcber den Tisch fliegt, soll die Kamera mitscrollen (wie bei Angry Birds). Am Ende soll die Kamera stehen bleiben, dass Bier auf ein Trampolin fallen (oder auch nicht &#8211; je nachdem wie stark geworfen wurde) und dem Biertrinker, der faul auf der rechten Seite liegt, in den Mund gekippt werden.<\/p>\n<h1>Grundlagenforschung<\/h1>\n<p>Nachdem ich nun Google nach dem Thema &#8222;HTML 5 Canvas Games&#8220; befragte, landete ich in\u00a0dem Forum\u00a0http:\/\/www.html5gamedevs.com in dem ich mich auch prompt registrierte um meine Idee den &#8222;Profis&#8220; vorzustellen. Ich wollte mir Anregungen und Tipps holen, die mich bei\u00a0der Umsetzung dieser Spieleidee als HTML5 Spiel bef\u00e4higen.<\/p>\n<p>Dazu schrieb ich diesen Forenbeitrag:<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.html5gamedevs.com\/topic\/15037-how-to-realize-a-2d-game-idea-graphics-and-physics\/\" width=\"640\" height=\"320\"><\/iframe><\/p>\n<p>W\u00e4hrend ich auf Antwort wartete, st\u00f6berte ich etwas in dem Forum und stie\u00df auf die eigene Forenrubrik &#8222;Phaser.io&#8220;. Hierbei handelt es sich um ein HTML 5 Canvas Spieleframework, welches momentan scheinbar eine relativ weite Verbreitung\u00a0hat.<\/p>\n<p>Meine erster Beantworter\u00a0auf den Forenbeitrag schl\u00e4gt au\u00dferdem die Nutzung einer Bibliothek namens &#8222;PIXI.JS&#8220; f\u00fcr das 2D Rendering vor, die angeblich auch in phaser.io vorhanden ist, ebenfalls wie diverse Spielephysik, auf die man direkt \u00fcber die Phaser-Framework-Methoden zugreifen kann. Desweiteren gibt es Add-Ons, die man zwar f\u00fcr kleines Geld dazukaufen muss, aber welche die Funktionalit\u00e4ten von Box2D hinzuf\u00fcgen:<\/p>\n<p>http:\/\/phaser.io\/shop<\/p>\n<p>Hier ist eine Box2D Wasserpartikeldemo:<\/p>\n<p>http:\/\/google.github.io\/liquidfun\/<\/p>\n<p>Um kleine Javascripte auszuprobieren wurde auf der Seite von phaser.io folgendes Minitool empfohlen:<\/p>\n<p>http:\/\/jsfiddle.net\/<\/p>\n<h1>Entschluss<\/h1>\n<p>Ich werde mich daher in Phaser.io einarbeiten, da es als Werkzeugkasten die meisten Features f\u00fcr die Entwicklung von Spielen bietet.<\/p>\n<p>Phaser kann man im Web unter der folgenden URL finden:<\/p>\n<p>http:\/\/phaser.io\/<\/p>\n<h1>Einstieg in Phaser.io \/ Erfahrungsbericht:<\/h1>\n<h2>Die Entwicklungsumgebung<\/h2>\n<p>Zun\u00e4chst stellt sich die Frage, welche Entwicklungsumgebung man nutzen m\u00f6chte.<\/p>\n<p>Da ich von Online-Quellcodeeditoren wie Codeanywhere begeistert bin, wollte ich die auf der Website phaser.io vorgeschlagene Cloud9-Variante testen. Hierbei handelt es sich ebenfalls um einen Online-Quellcodeeditor<\/p>\n<p>http:\/\/c9.io &lt;- Cloud9 Quellcodeditor<\/p>\n<p>Erste H\u00fcrde: &#8222;First, sign up to the website using GitHub, and once this is completed, you will be redirected to your dashboard.&#8220;<\/p>\n<p>Hierzu musste ich mich erstmal bei GitHub (ja hatte noch keinen Account \ud83d\ude09 ) anmelden und das Hello World Tutorial durchgehen, was mich 20 Minuten gekostet hat. Im Tutorial musste man einen &#8222;Branch&#8220; anlegen und diesen mit dem &#8222;Master&#8220; wieder vereinigen.<\/p>\n<p>Der benannte Vorteil von GitHub: &#8220; You don\u2019t have to worry about losing data on your hard drive or managing a project across multiple computers&#8220;<\/p>\n<p>Es lebe die Cloud!<\/p>\n<p>In GitHub musste ich zun\u00e4chst den Cloud9 Editor authorisieren auf mein Repository zugreifen zu d\u00fcrfen:<br \/>\n&#8222;Authorize application<br \/>\nCloud9 by @cloud9Deploy would like permission to access your account&#8220;<\/p>\n<p>Auf dem Cloud9 Dashboard angelangt, erzeugt man ein neues Projekt von der URL<br \/>\nhttp:\/\/github.com\/photonstorm\/phaser.git<\/p>\n<p>Diese URL scheint das komplette Phaser-Framework zu beinhalten.<\/p>\n<p>Meine erste \u00dcberraschung beim Cloud9 Editor:<br \/>\n* Man kann PHP Code anlegen, der interpretiert wird<br \/>\n* Es gibt eine Ubuntu Command Line Zeile, in der man BASH-Kommandos ausf\u00fchren kann<\/p>\n<p>Der Cloud9 Editor bietet einen Debugger, den hatte ich f\u00fcr PHP schon l\u00e4nger gesucht, allerdings bleibt die Ausf\u00fchrung nicht bei den Breakpoints h\u00e4ngen. Evtl. muss man etwas konfigurieren?<\/p>\n<p>Zur\u00fcck zu phaser.io . Ich will ja erstmal mein Hello World Projekt erstellen :). Also mal gucken ob mir das die eingerichtete kostenlose Umgebung auch erlaubt&#8230;<\/p>\n<p>Ich habe nun den gesammten root-Folder des Phaser-Ordners in den Ordner &#8222;Phaser&#8220; kopiert, da man in der kostenlosen Version von Cloud9 nur einen Workspace nutzen darf.<\/p>\n<p>Da ich mit Chrome arbeite, hat sich zum Switchen zwischen den Tabs (Editor &lt;-&gt; Tutorial &lt;-&gt; WordPress) die Tastenkombination STRG+BILD Hoch \/ STRG+Bild Runter als praktisch erwiesen. Auff\u00e4llig ist, das der Cursorfokus des aktuellen Tabs nicht verloren geht.<\/p>\n<p>Im Ordner phaser\/Ressources\/tutorials befinden sich alle Tutorials, die auf der Seite phaser.io aufgef\u00fchrt sind. Ich hatte den Fehler gemacht \u00fcber die Cloud9-Bashconsole die ZIP-Dateien mit wget runterzuladen und mit unzip zu entpacken. Dies ist unn\u00f6tig.<\/p>\n<p>\u00dcber den RUN-Button des Cloud9-Editors ist schnell eine ge\u00f6ffnete HTML-Datei geladen und mit dem Preview-Button auf den Bildschirm gebracht.<\/p>\n<p>Schnell habe ich die ersten beiden Tutorials durch&#8230;<\/p>\n<p>http:\/\/phaser.io\/tutorials\/making-your-first-phaser-game\/part2<\/p>\n<p>Es ist nicht n\u00f6tig den Run-Button bei jedem Versuch neu zu klicken sondern es reicht aus den Refresh button zu klicken.<\/p>\n<h3>Fazit<\/h3>\n<p>* Die kostenlose Variante von Cloud9 (http:\/\/c9.io) ist sehr zu empfehlen.<\/p>\n<p>* Ich h\u00e4tte das GitHub Tutorial nicht ben\u00f6tigt, da lediglich GitHub f\u00fcr den Login von Cloud9 genutzt wird.<\/p>\n<p>* Ich kann nun relativ schnell rechner- und ortsunabh\u00e4ngig an einem Canvas-Spiel entwickeln<\/p>\n<h2>Erste Schritte mit dem Framework<\/h2>\n<p>Meines Erachtens macht es durchaus Sinn auf der Hauptebene seines Cloud9 Workspace das Phaser-Framework mit den Tutorials als Nachschlagewerk zu nutzen. Die Hauptstruktur eines Phaser-Projektes sieht so aus:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar game = new Phaser.Game(800, 600, Phaser.AUTO, &#039;&#039;, { preload: preload, create: create, update: update });\r\n\r\nfunction preload() {\r\n\r\n    game.load.image(&#039;sky&#039;, &#039;assets\/sky.png&#039;);\r\n    game.load.image(&#039;ground&#039;, &#039;assets\/platform.png&#039;);\r\n    game.load.image(&#039;star&#039;, &#039;assets\/star.png&#039;);\r\n    game.load.spritesheet(&#039;dude&#039;, &#039;assets\/dude.png&#039;, 32, 48);\r\n\r\n}\r\n\r\nvar platforms, player, cursors, stars;\r\nvar score = 0;\r\nvar scoreText;\r\n\r\nfunction create() {\r\n\r\n    \/\/  We&#039;re going to be using physics, so enable the Arcade Physics system\r\n    game.physics.startSystem(Phaser.Physics.ARCADE);\r\n\r\n    \/\/  A simple background for our game\r\n    game.add.sprite(0, 0, &#039;sky&#039;);\r\n\r\n    \/\/  The platforms group contains the ground and the 2 ledges we can jump on\r\n    platforms = game.add.group();\r\n\r\n    \/\/  We will enable physics for any object that is created in this group\r\n    platforms.enableBody = true;\r\n\r\n    \/\/ Here we create the ground.\r\n    var ground = platforms.create(0, game.world.height - 64, &#039;ground&#039;);\r\n\r\n    \/\/  Scale it to fit the width of the game (the original sprite is 400x32 in size)\r\n    ground.scale.setTo(2, 2);\r\n\r\n    \/\/  This stops it from falling away when you jump on it\r\n    ground.body.immovable = true;\r\n\r\n    \/\/  Now let&#039;s create two ledges\r\n    var ledge = platforms.create(400, 400, &#039;ground&#039;);\r\n\r\n    ledge.body.immovable = true;\r\n\r\n    ledge = platforms.create(-150, 250, &#039;ground&#039;);\r\n\r\n    ledge.body.immovable = true;\r\n\r\n    \/\/ The player and its settings\r\n    player = game.add.sprite(32, game.world.height - 150, &#039;dude&#039;);\r\n\r\n    \/\/  We need to enable physics on the player\r\n    game.physics.arcade.enable(player);\r\n\r\n    \/\/  Player physics properties. Give the little guy a slight bounce.\r\n    player.body.bounce.y = 0.2;\r\n    player.body.gravity.y = 300;\r\n    player.body.collideWorldBounds = true;\r\n\r\n    \/\/  Our two animations, walking left and right.\r\n    player.animations.add(&#039;left&#039;, &#x5B;0, 1, 2, 3], 10, true);\r\n    player.animations.add(&#039;right&#039;, &#x5B;5, 6, 7, 8], 10, true);\r\n    \r\n    cursors = game.input.keyboard.createCursorKeys();\r\n    \r\n    stars = game.add.group();\r\n\r\n    stars.enableBody = true;\r\n\r\n    \/\/  Here we&#039;ll create 12 of them evenly spaced apart\r\n    for (var i = 0; i &amp;lt; 12; i++)\r\n    {\r\n        \/\/  Create a star inside of the &#039;stars&#039; group\r\n        var star = stars.create(i * 70, 0, &#039;star&#039;);\r\n\r\n        \/\/  Let gravity do its thing\r\n        star.body.gravity.y = 6;\r\n\r\n        \/\/  This just gives each star a slightly random bounce value\r\n        star.body.bounce.y = 0.7 + Math.random() * 0.2;\r\n    }    \r\n    \r\n    scoreText = game.add.text(16, 16, &#039;score: 0&#039;, { fontSize: &#039;32px&#039;, fill: &#039;#000&#039; });\r\n\r\n}\r\n\r\nfunction update() {\r\n        \/\/  Collide the player and the stars with the platforms\r\n    game.physics.arcade.collide(player, platforms);\r\n    \r\n    \/\/  Reset the players velocity (movement)\r\n    player.body.velocity.x = 0;\r\n\r\n    if (cursors.left.isDown)\r\n    {\r\n        \/\/  Move to the left\r\n        player.body.velocity.x = -150;\r\n\r\n        player.animations.play(&#039;left&#039;);\r\n    }\r\n    else if (cursors.right.isDown)\r\n    {\r\n        \/\/  Move to the right\r\n        player.body.velocity.x = 150;\r\n\r\n        player.animations.play(&#039;right&#039;);\r\n    }\r\n    else\r\n    {\r\n        \/\/  Stand still\r\n        player.animations.stop();\r\n\r\n        player.frame = 4;\r\n    }\r\n\r\n    \/\/  Allow the player to jump if they are touching the ground.\r\n    if (cursors.up.isDown &amp;amp;&amp;amp; player.body.touching.down)\r\n    {\r\n        player.body.velocity.y = -350;\r\n    }    \r\n    \r\n    \/\/ Pr\u00fcfe ob die Sterne auf die Plattform treffen\r\n    game.physics.arcade.collide(stars, platforms);\r\n    \r\n    \/\/ Pr\u00fcfe ob der Spieler mit einem Stern kollidiert, falls ja gehe in die \r\n    \/\/ Funktion collectStar\r\n    game.physics.arcade.overlap(player, stars, collectStar, null, this);\r\n}\r\n\r\nfunction collectStar (player, star) {\r\n\r\n    \/\/ Removes the star from the screen\r\n    star.kill();\r\n\r\n    \/\/  Add and update the score\r\n    score += 10;\r\n    scoreText.text = &#039;Score: &#039; + score;\r\n\r\n\r\n}\r\n\r\n<\/pre>\n<h3>Fazit<\/h3>\n<p>* In der Preload-Methode werden die Grafiken (PNGs) geladen. Spritesheets sind dabei Animationen, die als PNG vorliegen und die einzelnen Frames nebeneinander beinhalten.<br \/>\n* Die Objekte werden mit game.add.sprite in der entsprechenden Reihenfolge in der Create-Methode hinzugef\u00fcgt<br \/>\n* Phaser besitzt 3 Physikengines. wobei Arcade die einfachste sein soll<br \/>\n** Arcade Physics<br \/>\n** Ninja Physics<br \/>\n** P2.JS Full-Body Physics<br \/>\n* Kollisionen werden immer in der Update-Prozedur abgefragt<br \/>\n* Tastatureingaben werden in der Update-Prozedur abgefragt<br \/>\n* Velocity ist die Geschwindigkeit, die ein Objekt bekommt<\/p>\n<h3>Anwendbarkeit<\/h3>\n<p>Wir haben hier eine fixe Welt, ich m\u00f6chte aber sowas wie ein scorllendes Spiel nach dem Angry Birds Vorbild haben. Daf\u00fcr brauche ich ein Beispiel. Die Frage ist, ob man Tilemaps, welche vorwiegend f\u00fcr scrollende Jump-and-runs wie Super Mario oder Giana Sisters verwendet werden benutzen sollte.<\/p>\n<p>Ich suche also ein Beispiel das ich idealerweise nutzen kann&#8230;<\/p>\n<h2>Durchgehen der Phaser.io Examples<\/h2>\n<p>N<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/phaser-schludi.c9.io\/beer-througher\/beerThrougher.1.html\" width=\"800\" height=\"600\"><\/iframe><\/p>\n<h2>Debugging<\/h2>\n<p>Der Cloud9 Editor bietet die M\u00f6glichkeit, Break Points zu setzen. Ob diese Breakpoints nun das PHP oder Javascript debuggen k\u00f6nnen habe ich nicht rausgefunden, da sie keine Auswirkung haben. Allerdings hat mein Google Chrome Debugger auch recht n\u00fctzliche Funktionen f\u00fcr das Debuggen. Nachteil ist, das man die Cloud9 Umgebung kurz verlassen muss. Man kann allerdings die URL (siehe Screenshot) des gestarteteten Webservers einfach in einen neuen Tab pasten.<\/p>\n<p>Hierbei wunder ich mich wie lange dieser Webserver von c9.io laufen wird, da er ja f\u00fcr einen kostenlosen Account massig Systemressourcen frisst.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1458\" data-permalink=\"https:\/\/www.capri-soft.de\/blog\/?attachment_id=1458\" data-orig-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?fit=1091%2C1161&amp;ssl=1\" data-orig-size=\"1091,1161\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Canvas_debugging_with_chrome\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?fit=282%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?fit=474%2C505&amp;ssl=1\" class=\"alignnone size-large wp-image-1458\" src=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?resize=474%2C504&#038;ssl=1\" alt=\"Canvas_debugging_with_chrome\" width=\"474\" height=\"504\" srcset=\"https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?resize=962%2C1024&amp;ssl=1 962w, https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?resize=282%2C300&amp;ssl=1 282w, https:\/\/i0.wp.com\/www.capri-soft.de\/blog\/wp-content\/uploads\/2015\/06\/Canvas_debugging_with_chrome.png?w=1091&amp;ssl=1 1091w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fwww.capri-soft.de%2Fblog%2F%3Fp%3D1441&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px;margin-top:5px;\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>Intention Viele Entwickler, die selber schon leidenschaftlich ein Spiel gezockt haben, tr\u00e4umen von der Umsetzung eigener Spieleideen. Bei mir ist es hier nicht anders. Ich habe viele Ideen und viele davon sind unsinnig. Man w\u00fcrde sie vermutlich in die Kategorie &#8222;Trash&#8220; stecken. Aber gerade professionell anmutende Spiele mit Trash-Faktor sind es, die viele Spieler fesseln. &hellip; <a href=\"https:\/\/www.capri-soft.de\/blog\/?p=1441\" class=\"more-link\"><span class=\"screen-reader-text\">Pers\u00f6nlicher Bericht: Mein Einstieg in die HTML5 Spieleentwicklung mit phaser.io<\/span> weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17,14,30,3,31,26],"tags":[],"class_list":["post-1441","post","type-post","status-publish","format-standard","hentry","category-grafik","category-htmlcss","category-javascript","category-programmierung","category-spass-und-spiel","category-unsinn"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4yGeN-nf","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1441"}],"version-history":[{"count":16,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1441\/revisions"}],"predecessor-version":[{"id":1444,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1441\/revisions\/1444"}],"wp:attachment":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}