{"id":1055,"date":"2013-02-18T21:52:54","date_gmt":"2013-02-18T20:52:54","guid":{"rendered":"http:\/\/mehm.net\/blog\/?p=1055"},"modified":"2013-08-21T21:27:42","modified_gmt":"2013-08-21T20:27:42","slug":"breakoutpong-project-setup","status":"publish","type":"post","link":"https:\/\/mehm.net\/blog\/?p=1055","title":{"rendered":"Breakout\/Pong Project – Setup"},"content":{"rendered":"

While I’m working on the game design for the Breakout\/Pong hybrid<\/a> in Unity, I’m starting to set up the development for HTML 5. I have to admit, a lot has changed since I last had a look in this sector. When I was looking for the last time, there were the first fledgeling HTML 5 game engines. Now, if you search for the term, you get dozens of engines!<\/p>\n

But, as I want the pure, intense and gritty experience of doing everything by hand, I’m going to skip all that and do it myself! Maybe a general-purpose javascript library if the language itself gets too confined, but apart from that, I’m on my own.<\/p>\n

IDE<\/strong><\/p>\n

I’ve had a cursory glance at IDEs for javascript, and I’ve decided to go for Brackets<\/a>. Notably, it doesn’t have autocompletion for javascript, but since the purpose of this whole exercise is to learn it better, I think it’s not necessarily a bad idea to live without it. This way, you actually have to learn the API and not glance at what your IDE suggests you use.<\/p>\n

First steps<\/strong><\/p>\n

I was following this tutorial<\/a> on\u00c2\u00a0James Litten’s blog for getting the keyboard inputs in HTML 5 and got a super basic website going that logs what key you have pressed. It’s certainly not rocket science, but it’s one of the foundations for game development :-)<\/p>\n

The next step was to put this code into a nice class that goes into a separate file. No huge, hundred-classes-in-one-file web page for me, thank you. Currently I’ve got the paddle controls and the ball physics implemented, after which will be the Breakout bricks. The whole things still has a really classic Pong look (black and white shapes), nice sprites and animations will be added later on.<\/p>\n

Reading<\/strong><\/p>\n

Playing the first prototype got me interested in the game mechanics of Breakout. A search found me this gem<\/a> on Gamasutra by Mark Nelson which I’ve been reading. One major insight is that a Breakout-style game really benefits from a level editor to create interesting levels. Which is why I’ve expanded a bit on the web-based game idea and am currently also working on an editing mode to have the level editor also web-based. For this goal I’m also going into PHP for the server-side code for storing levels in a database.<\/p>\n","protected":false},"excerpt":{"rendered":"

While I’m working on the game design for the Breakout\/Pong hybrid in Unity, I’m starting to set up the development for HTML 5. I have to admit, a lot has changed since I last had a look in this sector. When I was looking for the last time, there were the first fledgeling HTML 5 […]<\/p>\n","protected":false},"author":2,"featured_media":1174,"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\/1055"}],"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=1055"}],"version-history":[{"count":7,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":1063,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1055\/revisions\/1063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=\/wp\/v2\/media\/1174"}],"wp:attachment":[{"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mehm.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}