{"id":1060,"date":"2013-02-24T17:28:47","date_gmt":"2013-02-24T16:28:47","guid":{"rendered":"http:\/\/mehm.net\/blog\/?p=1060"},"modified":"2013-07-23T15:34:41","modified_gmt":"2013-07-23T14:34:41","slug":"pongbreakout-progress","status":"publish","type":"post","link":"https:\/\/mehm.net\/blog\/?p=1060","title":{"rendered":"Pong\/Breakout – Progress"},"content":{"rendered":"

Not that much to show at the moment for the Pong\/Breakout<\/a> game, as the first milestone I’m aiming for is a black and white version including the web-based editor, with fancier graphics being added in a second step.<\/p>\n

The screenshot here is from the editor part, featuring PowerPoint-style alignment lines to help you align bricks with each other.<\/p>\n

\"pongout_editor\"<\/a><\/p>\n

PHP<\/strong><\/p>\n

Actually this is my first time programming PHP, but despite my impression that the language was haphazardly built and adapted whenever a need for changes became clear, at least for such a small project I like it and actually prefer it to Ruby, my only other experience of server-side programming so far. I’m running xampp<\/a> which allows me to quickly test everything locally with minimal time spent for setup. A pretty cool feature of Brackets<\/a> is the live preview which figured out that I had pages that needed to be served to make use of the PHP bits and automatically loaded them from the local xampp http server.<\/p>\n

Actually, really working on the details of the server-client connection and AJAX made me realize that starting out with Ruby is a bit like learning to run before you can walk. It’s a powerful tool, but if you don’t know where it’s coming from you’re left in the dark about the things that Ruby handles for you in the background.<\/p>\n

Fancy HTML 5<\/strong><\/p>\n

My rendering code so far isn’t doing that much fancy things with HTML 5, but for the editing code I’ve thought of a nifty way of saving a preview image so you can see your levels when choosing which one to edit or play.<\/p>\n

The magic happens in the Canvas.toBlob()<\/a> function, which saves the content of a HTML 5 canvas to an image file that can be uploaded to a server. Below is the code that does this conversion and upload. With the same system, the relevant parameters of the level are saved and serialized to a JSON file, which is also uploaded as a file.<\/p>\n

\r\n\r\nfunction blobEncoded(blob) {\r\nvar fd = new FormData(document.forms[0]);\r\nvar xhr = new XMLHttpRequest();\r\n\r\nxhr.onreadystatechange = function () {\r\nif (xhr.readyState == 4 && xhr.status == 200) {\r\n\/\/ Handle the upload\r\n}\r\n}\r\n\r\n\/\/ Save all relevant variables from the arrays "paddles", "balls" and "bricks"\r\nvar level = { "paddles": paddles, "balls": balls, "bricks": bricks };\r\n\r\n\/\/ Convert it to json\r\nvar json = JSON.stringify(level);\r\n\r\n\/\/ Upload the json as a file\r\nvar jsonBlob = new Blob([json], { type: "text\/json;charset=" + document.characterSet });\r\n\r\nfd.append("levelFile", jsonBlob);\r\nfd.append("preview", blob);\r\nfd.append("id", id);\r\nxhr.open('POST', 'uploadLevel.php', true);\r\nxhr.send(fd);\r\n}\r\n\r\nfunction saveLevel() {\r\n\/\/ Initiate the encoding of the canvas to a blob\r\ncanvas.toBlob(blobEncoded);\r\n}\r\n\r\n<\/pre>\n
Since all of this is still so new not all browsers support it. This is where the development community and the so-called “polyfills” come in, libraries which provide the missing functions in those browsers that have not yet implemented them. In this case, the necessary libraries are canvas-toBlob.js<\/a> as well as Blob.js<\/a>. With this, the whole thing runs on the current versions of Chrome and Firefox (with Firefox being seriously slower though – there will be some optimization coming my way I guess. But that is a different topic…)<\/p>\n","protected":false},"excerpt":{"rendered":"
Updates to the editor and background info on the server and client programming.<\/p>\n","protected":false},"author":2,"featured_media":1137,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,3],"tags":[94,95,96,97,93],"_links":{"self":[{"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1060"}],"collection":[{"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1060"}],"version-history":[{"count":10,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1060\/revisions\/1134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/media\/1137"}],"wp:attachment":[{"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}