{"author_name":"colincapurso","cat":"October Challenge 2012","comments":[],"epoch":1350449040,"likes":3,"metadata":{"p_key":"51218","p_author":"colincapurso","p_authorkey":"7205","p_urlkey":"86911","p_title":"2 Thirds October Challenge","p_cat":"October Challenge 2012","p_event":"LD24","p_time":"1350449040","p_likes":"3","p_comments":"0","p_status":"UPD5","us_key":"7205","us_name":"colincapurso","us_username":"colincapurso","event_start":"1345766400","event_key":"12","event_name":"LD24"},"text":"<h1>2 Thirds October Challenge<\/h1>\n \n <style type='text\/css'>\n #gallery-1 {\n margin: auto;\n }\n #gallery-1 .gallery-item {\n float: left;\n margin-top: 10px;\n text-align: center;\n width: 25%;\n }\n #gallery-1 img {\n border: 2px solid #cfcfcf;\n }\n #gallery-1 .gallery-caption {\n margin-left: 0;\n }\n \/* see gallery_shortcode() in wp-includes\/media.php *\/\n <\/style>\n <div id='gallery-1' class='gallery galleryid-185778 gallery-columns-4 gallery-size-thumbnail'><dl class='gallery-item'>\n <dt class='gallery-icon portrait'>\n <a href='http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/www.colincapurso.comprototypeseven-Google-Chrome_2012-10-17_16-38-58.png'><img width=\"150\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/www.colincapurso.comprototypeseven-Google-Chrome_2012-10-17_16-38-58-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Basic Graphics\" \/><\/a>\n <\/dt><\/dl><dl class='gallery-item'>\n <dt class='gallery-icon portrait'>\n <a href='http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-36-24.png'><img width=\"150\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-36-24-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Tiles and Pandas!\" \/><\/a>\n <\/dt><\/dl><dl class='gallery-item'>\n <dt class='gallery-icon portrait'>\n <a href='http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-35-52.png'><img width=\"150\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-35-52-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Re-Coded Game\" \/><\/a>\n <\/dt><\/dl><dl class='gallery-item'>\n <dt class='gallery-icon portrait'>\n <a href='http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-35-39.png'><img width=\"150\" height=\"150\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/index.html-Google-Chrome_2012-10-17_16-35-39-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"First Prototype\" \/><\/a>\n <\/dt><\/dl><br style=\"clear: both\" \/>\n <\/div>\n \n <p>At the time of writing this, we are 2\/3 of the way through October.<\/p>\n <p>I started developing my game on October 1st and I would say\u00a0I&#8217;m\u00a0am actually about 2\/3 of the way to completing the game.<\/p>\n <p>This is a sort of log of what I went through to get to this stage.<\/p>\n <h3>Week 1<\/h3>\n <p><strong>Idea<\/strong><\/p>\n <p>Not much time was spent thinking of an idea. I was determined this time to make a game that I myself want to play even if it was an existing game. With that in mind, I chose the game mechanic (drop7 by Zynga, originally from area\/code) and thought about what I&#8217;d like it to have to be more appealing to me.<\/p>\n <ul>\n <li>More colour<\/li>\n <li>More character<\/li>\n <li>More particles<\/li>\n <li>Adventure Mode<\/li>\n <\/ul>\n <p>The first 3 are just visual things, but they make a difference to the feel of the game and as a graphic designer\/illustrator it&#8217;s kind of important to me.<\/p>\n <p><strong>Adventure mode<\/strong>: I&#8217;ve yet to implement this as\u00a0I&#8217;ve\u00a0had many many ideas on how to do it. I know how I want the player to feel. I want them to want to progress, to want to beat levels and explore the world\u00a0I&#8217;ll\u00a0make for the game.<\/p>\n <p><strong>Platform<\/strong><\/p>\n <p>It&#8217;s definitely a mobile game. I intend it to be played in short bursts, 5\u00a0minutes\u00a0here or there. Options:<\/p>\n <ul>\n <li>iOS (iPhone, iPad, iPod Touch)<\/li>\n <li>Android (Phones, Tablets)<\/li>\n <li>Windows Phone<\/li>\n <\/ul>\n <p>These were the 3 platforms I was thinking of. I&#8217;d love to do a windows phone, but not owning one means testing is just can&#8217;t happen.<\/p>\n <p>That leaves iOS and Android. Now, I have a couple of really old iOS devices to play with but developing for iOS will cost me $99. That is $99 I don&#8217;t have. So, we&#8217;re down to Android, a mere $25.<\/p>\n <p>So I&#8217;m developing for Android. That will require me to know Java. Which I don&#8217;t know well.<\/p>\n <p>There are a few other options for developing for Android, the 2 I looked at were<\/p>\n <ul>\n <li>Phone Gap<\/li>\n <li>Unity<\/li>\n <\/ul>\n <p>I don&#8217;t know Unity and I don&#8217;t want to spend too much time learning something new when I only have 1 month to complete my game.<\/p>\n <p>From what I understand about PhoneGap, it throws HTML5\/JS into a webkit browser on your phone as if it were it&#8217;s own app.<\/p>\n <p>Well, I&#8217;m very familiar with javascript, so I&#8217;ll give PhoneGap a go. (Spoiler: it doesn&#8217;t work out)<\/p>\n <p><strong>Time to get started.<\/strong><\/p>\n <p>Coding went pretty smooth for my first prototype. I had much of the game working by the end of the week.<\/p>\n <p>The code itself was a huge mess. I was just learning about MVC architecture and attempted to implement it as I went \u00a0along. BAD MOVE. The code just got worse and worse and became unworkable.<\/p>\n <h3>Week 2<\/h3>\n <p><strong>Rebuild!<\/strong><\/p>\n <p>My code was a mess. At this stage in my life as a game developer,\u00a0I&#8217;ve\u00a0gotten\u00a0accustomed\u00a0to re-writing all my code from scratch and that&#8217;s exactly what I did.<\/p>\n <p>I re-coded the whole thing in about a day. It went amazingly well. I changed the grid model from something overcomplicated (list of tile entities) to something super simple (jagged array with integers) and wow was that the best thing I ever did. Coding from here on out was a breeze.<\/p>\n <p>By the end of the week, the game was working and had the added benefit of being able to change the grid size on the fly. I played around with 4-10 grid sizes. Funny thing, 7 grid spaces was the magic number in terms of fun and difficulty.<\/p>\n <p>I tested the game on various browsers and touch device browsers. Turns out Safari is a dick and doesn&#8217;t support &#8220;.bind()&#8221; which a significant part of my event system. That was a pain to sort out, but I ended up adding some code so that it would work on browsers that don&#8217;t support it.<\/p>\n <p>Weird thing, the game worked super fast on my old iPad 1 (Safari) but slow on my Nexus S (Chrome). Craziness.<\/p>\n <p>Time to test out Phone Gap. I copied my files over into Eclipse. Tested it. It didn&#8217;t work. Crap.<\/p>\n <p>Turns out, requestAnimationFrame won&#8217;t work. That&#8217;s an easy fix, I switched over to my teeny setTimeout loop.<\/p>\n <pre>(function loop(){ setTimeout(function(){update(), draw(), loop()}, 1000\/FPS)})();<\/pre>\n <p>It is my prototyping game loop. If I have to write something from scratch really quickly, I use this.<\/p>\n <p>Back to the Phone Gap test. It works!<\/p>\n <p>I started working on the graphics, which took no more than an hour or so. (It is my\u00a0speciality\u00a0after all).<\/p>\n <p>Coded my new view class and test it.<\/p>\n <p>It works!<\/p>\n <p>but&#8230;<\/p>\n <p>slowly.<\/p>\n <p>Well.. that sucked.<\/p>\n <p>I implemented all the performance improving hacks I could think of (FYI working in canvas no CSS3).<\/p>\n <ul>\n <li>~~ Double Not. Rounded out all my draws coords (canvas hates decimal numbers)<\/li>\n <li>Pre-rendering. All my sprites were resized and pre-rendered into their own canvases.<\/li>\n <li>Non-full screen clearRects. I only re-drew things on the screen that changed.<\/li>\n <li>Layered Canvas and draws on their own layers. Turns out this actually made things slower despite there being significantly less re-draws.<\/li>\n <li>Frame skipping. Well.. this really had the same effect, everything was just as choppy as before.<\/li>\n <\/ul>\n <p>Well, clearly javascript was just not going to cut it.<\/p>\n <p>Now, this isn&#8217;t to say PhoneGap is terrible for games (it is), I had right from the very beginning a particle system that I was unwilling to part with. It added some 100+ particles on the screen every time something happened and is the sole reason for laggy perfomance.<\/p>\n <p>oh and I want my game to run at 60 FPS. None of this flimsy 30 FPS.<\/p>\n <p><strong>Week 3<\/strong><\/p>\n <p>Hey that&#8217;s this week!<\/p>\n <p>I decided to re-write the whole thing over in Java.<\/p>\n <p>I knew that the hardest part of this would be getting the thing up and running because really, to me, regardless of the language, all games are the same thing.<\/p>\n <ul>\n <li>Game Loop<\/li>\n <li>Game Logic<\/li>\n <li>Game Rendering<\/li>\n <\/ul>\n <p>The things that were different were;<\/p>\n <ul>\n <li>Game Loop Code. Involves pausing threads and what not.<\/li>\n <li>Event system. Turns out you can&#8217;t pass a method reference as an argument. There are work arounds and I ended up passing anonymous functions but I wasn&#8217;t happy with it and ended up scrapping my whole event system. I didn&#8217;t actually need, it was more a proof of concept.<\/li>\n <\/ul>\n <p>As for the game logic, it just so happens I write my Javascript like I write my C#\/Java. So it was mostly just copying and pasting with some type declarations.<\/p>\n <p>I&#8217;ve just finished writing much of the code for rendering\/drawing.<\/p>\n <p>It works! and fast! and that&#8217;s just in the emulator, on my crappy old phone it&#8217;s super awesome.<\/p>\n <p>So that&#8217;s where I&#8217;m at right now.<\/p>\n <p>Things on my to do list:<\/p>\n <ul>\n <li>Particle system<\/li>\n <li>Title Screen<\/li>\n <li>Score Keeping\/Submission<\/li>\n <li>Implementing ads for free version<\/li>\n <li>Adventure Mode<\/li>\n <li>Hats<\/li>\n <\/ul>\n <p>I expect to have the game ready for submission some time next week. Initial version won&#8217;t have adventure mode. It&#8217;s not a vital part of the game, just a bit of variety\/fun.<\/p>\n <p>So yep, this has been my process for making one of the\u00a0simplest\u00a0of simple game development over-complicated.<\/p>\n <p>There should be screenshots of the progress.<\/p>\n <p>Oh and the name of my game will be <strong>Panda7<\/strong>.<\/p>\n \n <p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/7\/\" rel=\"tag\">7<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/app\/\" rel=\"tag\">app<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/chrome\/\" rel=\"tag\">chrome<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/dare\/\" rel=\"tag\">dare<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/development\/\" rel=\"tag\">development<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/drop7\/\" rel=\"tag\">drop7<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/game\/\" rel=\"tag\">game<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/gamedev\/\" rel=\"tag\">gamedev<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/google\/\" rel=\"tag\">Google<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ios\/\" rel=\"tag\">iOS<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ipad\/\" rel=\"tag\">iPad<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/java\/\" rel=\"tag\">java<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/javascript\/\" rel=\"tag\">javascript<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ludum\/\" rel=\"tag\">ludum<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/nexus\/\" rel=\"tag\">nexus<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/october-challege\/\" rel=\"tag\">october challege<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/panda\/\" rel=\"tag\">panda<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/particles\/\" rel=\"tag\">particles<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/phonegap\/\" rel=\"tag\">PhoneGap<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/play\/\" rel=\"tag\">play<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/port\/\" rel=\"tag\">port<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/safari\/\" rel=\"tag\">safari<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/screenshots\/\" rel=\"tag\">screenshots<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/store\/\" rel=\"tag\">store<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/windows-phone\/\" rel=\"tag\">windows phone<\/a><\/p>","time":"October 16th, 2012 11:44 pm","title":"2 Thirds October Challenge"}