Posts Tagged ‘safari’

2 Thirds October Challenge

Posted by (twitter: @colincapurso)
Tuesday, October 16th, 2012 11:44 pm

2 Thirds October Challenge

At the time of writing this, we are 2/3 of the way through October.

I started developing my game on October 1st and I would say I’m am actually about 2/3 of the way to completing the game.

This is a sort of log of what I went through to get to this stage.

Week 1

Idea

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’d like it to have to be more appealing to me.

  • More colour
  • More character
  • More particles
  • Adventure Mode

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’s kind of important to me.

Adventure mode: I’ve yet to implement this as I’ve had 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 I’ll make for the game.

Platform

It’s definitely a mobile game. I intend it to be played in short bursts, 5 minutes here or there. Options:

  • iOS (iPhone, iPad, iPod Touch)
  • Android (Phones, Tablets)
  • Windows Phone

These were the 3 platforms I was thinking of. I’d love to do a windows phone, but not owning one means testing is just can’t happen.

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’t have. So, we’re down to Android, a mere $25.

So I’m developing for Android. That will require me to know Java. Which I don’t know well.

There are a few other options for developing for Android, the 2 I looked at were

  • Phone Gap
  • Unity

I don’t know Unity and I don’t want to spend too much time learning something new when I only have 1 month to complete my game.

From what I understand about PhoneGap, it throws HTML5/JS into a webkit browser on your phone as if it were it’s own app.

Well, I’m very familiar with javascript, so I’ll give PhoneGap a go. (Spoiler: it doesn’t work out)

Time to get started.

Coding went pretty smooth for my first prototype. I had much of the game working by the end of the week.

The code itself was a huge mess. I was just learning about MVC architecture and attempted to implement it as I went  along. BAD MOVE. The code just got worse and worse and became unworkable.

Week 2

Rebuild!

My code was a mess. At this stage in my life as a game developer, I’ve gotten accustomed to re-writing all my code from scratch and that’s exactly what I did.

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.

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.

I tested the game on various browsers and touch device browsers. Turns out Safari is a dick and doesn’t support “.bind()” 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’t support it.

Weird thing, the game worked super fast on my old iPad 1 (Safari) but slow on my Nexus S (Chrome). Craziness.

Time to test out Phone Gap. I copied my files over into Eclipse. Tested it. It didn’t work. Crap.

Turns out, requestAnimationFrame won’t work. That’s an easy fix, I switched over to my teeny setTimeout loop.

(function loop(){ setTimeout(function(){update(), draw(), loop()}, 1000/FPS)})();

It is my prototyping game loop. If I have to write something from scratch really quickly, I use this.

Back to the Phone Gap test. It works!

I started working on the graphics, which took no more than an hour or so. (It is my speciality after all).

Coded my new view class and test it.

It works!

but…

slowly.

Well.. that sucked.

I implemented all the performance improving hacks I could think of (FYI working in canvas no CSS3).

  • ~~ Double Not. Rounded out all my draws coords (canvas hates decimal numbers)
  • Pre-rendering. All my sprites were resized and pre-rendered into their own canvases.
  • Non-full screen clearRects. I only re-drew things on the screen that changed.
  • Layered Canvas and draws on their own layers. Turns out this actually made things slower despite there being significantly less re-draws.
  • Frame skipping. Well.. this really had the same effect, everything was just as choppy as before.

Well, clearly javascript was just not going to cut it.

Now, this isn’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.

oh and I want my game to run at 60 FPS. None of this flimsy 30 FPS.

Week 3

Hey that’s this week!

I decided to re-write the whole thing over in Java.

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.

  • Game Loop
  • Game Logic
  • Game Rendering

The things that were different were;

  • Game Loop Code. Involves pausing threads and what not.
  • Event system. Turns out you can’t pass a method reference as an argument. There are work arounds and I ended up passing anonymous functions but I wasn’t happy with it and ended up scrapping my whole event system. I didn’t actually need, it was more a proof of concept.

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.

I’ve just finished writing much of the code for rendering/drawing.

It works! and fast! and that’s just in the emulator, on my crappy old phone it’s super awesome.

So that’s where I’m at right now.

Things on my to do list:

  • Particle system
  • Title Screen
  • Score Keeping/Submission
  • Implementing ads for free version
  • Adventure Mode
  • Hats

I expect to have the game ready for submission some time next week. Initial version won’t have adventure mode. It’s not a vital part of the game, just a bit of variety/fun.

So yep, this has been my process for making one of the simplest of simple game development over-complicated.

There should be screenshots of the progress.

Oh and the name of my game will be Panda7.

[cache: storing page]