Posts Tagged ‘app’

Panda7, my October challenge game is finally finished. Sort of.

I started on 1st October and finished 10 minutes into the 1st of November.

This is the first game I’ve completed and by completed I mean the first game I’ve gotten to a decent playable state.

On Development

I feel like a Java pro.

I learn best by going head first into the unknown and making mistakes and this game was full of mistakes.

I started this project not confident with Java. It was fun and painful learning the quirks and weirdness of Java.

Although similar, Java is not C#. C# makes life a lot easier.

So many code re-writes.

After writing hundreds of lines of code, my brain tells me,

“You know what, I’m only going to tell you after you’ve spent 10 hours on code, a better way to do the whole thing”.

This happened about twice a week and had me moving large chunks of code all over the place. Fortunately, I have a preference for re-writing things rather than fixing them, so this wasn’t too painful and I was used to things now working so no unusual problems there.

The biggest code re-writes were;

Splitting everything into Controller / Input / View.
Moving all my sprite sheet slices and their destination rectangles into a single class. A class made up of nothing but static fields and methods.
Game Logic got re-written a few times. It finally found it’s home in a method that returns after each successful logic execution. Gave my game that staggered one after the other effect.
Removing my event system. The game was too small for an event system and the game logic also doesn’t traditionally run like a normal game. It only executes bit of logic per update (my normal games execute all logic)

Android.. horrible Android

Fragmentation. I know that word gets thrown around a lot with regards to Android.

Some things to know about Android

There are a gazillion different versions
There are a gazillion different screen resolutions
There are a gazillion different screen aspect ratios
All 3 of these are common

Display

Originally I had coded the game to change all my screen elements to different sizes and different spacing depending on the size of the screen.

It worked, but it was messy. The code was messy (I was inconsistent) and the game screens were inconsistent. The last run of coding was re-doing the display system.

Essentially all I’ve done is designed it for a 480×800 screen and linearly scale it for different resolutions. It means it will look a bit silly for the more squarish screens with the extra space on the sides.

Weird bugs and debugging

When I first started making the game for Android I had crashes all the time. I had no idea what caused them and no idea how to fix them. The Internet helped a little. The biggest help was my house mate giving me mini lessons memory address and stack traces (I hadn’t learnt about it before in class, I am a still a current student after all). So thanks house mate for that. It made tracking down bugs a lot easier.

My game has HD and SD graphics. If your device is over 600px wide, the game will switch to HD mode. This was a problem in my emulator which only had 128Mb of RAM. I spent plenty of time fixing it, clearing memory and only loading images that needed it.

For some reason, Android 2.3.3 would constantly throw out of memory errors when loading HD Bitmaps.

Bitmap objects have a method called .recycle(). A lifesaver.

I started coding a screen overlay, a menu with things like “Go to title screen, mute sound/music, restart game”. Mid way through I remembered that Android has a menu button. That was incredibly easy to implement so I used that instead.

I ran into problems towards the end when I found out that later versions of android tablets don’t have menu buttons. It is still a problem I haven’t fixed yet. Not sure what to do.

Graphics

The easiest part of the whole process for me. I spent a couple of hours designing the game visually in Adobe Illustrator. The benefit of working in vector is I can just click on objects and I have the x,y,w,h coordinates immediately.

Rects and Rectangles

The default class Android uses for rectangles is called Rects.

A Rect rectangle is defined by left, top, right, bottom. I think it’s the same in pygame.

I hate it.

I wrote a new Rectangle class which defines a rectangle as x,y,w,h. The way god intended.

It ended up being a great idea, things got done a lot quicker and the code was tidier.

They did a couple of extra things, take in pretty much any data type in the constructor.

They remembered their original size, which allowed me to have a absolute scale method. Very handy.

Adventure Mode

Adventure mode was meant to be a main feature in my game and it’s the thing I wanted to add more than anything but time just didn’t allow for it.

Now that the game is done and it is mostly nice code, it’s doable. So if I have the time I’ll add that.

Ads

My game is a free game. I needed to get some experience with monetization so to start with I’ve got advertisements. They’re horrible and ugly but I’m not going to make a dollar for the October challenge unless I have them.

They were quite a tricky to put in. I’m not familiar with Android and I learnt everything as I went along.

What I think I did was create my game view/surface independent of the typical Android way and I believe the Ads needed the typical way.

I ended up creating a layout Java code, added my Game View and Ad View to that in code.

The ad supplier I used was AdMob by Google. Besides the above, it was a painless procedure.

Publishing to Play Store

Incredibly simple process. I uploaded it at midnight and it didn’t appear on the store before I went to sleep. It was there in the morning so my guess is it takes about 4-8 hours to appear on the store.

That’s it for now.

If you read the whole thing, thanks for reading.

Please feel free to download it and leave positive feedback and click ads.

It’s here and it’s free https://play.google.com/store/apps/details?id=com.handsomegoats.panda7

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.

Pen Study, a fun app with language learning tidbits and mini-games to grow your brain that I write and blog about with Chloe, just entered the Ludum Dare October Project to be ready to earn our first dollar. Are you ready to earn your first dollar? Check out our implementation below.

For this challenge I went with integrating a single ad banner on the menu screen, not the game modes themselves. You can see it at the bottom of this screenshot:

The ad and falling facts game mode.

Screenshots of the app showing fun characters helping the player trace letters.

The tracing game mode.

For high traffic games I use a much more complex solution involving multiple ad providers in AdWhirl and with their own specific integrations. Shout outs go to Millennial Media for paying the most for banner ads so far outside of deals arranged in person, and AppFlood for bringing in the most installs!

This dare is about easily getting unfinished games and challenge entries making money, so here comes a simple single integration with an ad provider I’ve never tried before. Here is an Android layout with the banner:

[stextbox id=”grey”]

<!– Other content goes here. –>

<com.sec.android.ad.AdHubView a:id=”@+id/AdLayout”
a:layout_width=”wrap_content”
a:layout_height=”wrap_content”
a:layout_gravity=”center”
a:visibility=”gone”
a:paddingTop=”10dp”
a:paddingBottom=”10dp”
/>
</LinearLayout>

[/stextbox]

And here is the code that initializes it.

[stextbox id=”grey”]

public class SelectLessonActivity extends DelegatingActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.frame);

final AdHubView adhubView = (AdHubView) callingActivity.findViewById(R.id.AdLayout);
adhubView.setVisibility(View.VISIBLE);
adhubView.init(this, Constants.ADHUB_INVENTORY_ID, AdSize.BANNER
adhubView.setThreadPriority(AdHubView.MIN_PRIORITY);
adhubView.startAd();
}
}

[/stextbox]

Make sure you have the needed permissions in your AndroidManifest.xml:

[stextbox id=”grey”]<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” /> [/stextbox]

And that you have the JAR in your libs:

App libraries.

Coding done! Getting real ads was a little difficult with this provider. I had to post to a market first, then wait for the approval process, and also wait for banking information to be approved. Some other providers let you get going immediately and sort it out later. I did like being able to pick categories of ads that match the app demographic, kids and education games:

A list of categories with checkboxes for what ads to show on an ad network site.

Choosing what type of ads to show.

I feel people will be more likely to click a targeted ad and it has a better chance to be useful and not annoying to them. A targeting method common with other ad providers is specifying keywords. That might be more flexible and powerful. If the ad provider ads a new category, my keywords might match that already, for example. Or they might use smarter algorithms enabled by keywords.

Hope this helps your own projects! Check out Pen Study to feed your brain between coding.

Dream no small dreams for they have no power to move the hearts of men.
– Johann Wolfgang von Goethe

When I was younger that was the motto I lived by. Now that I am a bit older I am finding that there is definitely a place for small dreams. I’d say that small dreams are essential to my survival.

I saw the October Challenge 2011 page late last month and immediately start planning something awesome. I was going to use October to finally learn Flixel, put together something awesome, and submit my first app to the Apple app store. After a week I was still learning the ropes in Flixel, making random art assets for a new game that I hadn’t even finish the design on, and had yet to renew my Apple developer account.

It was time to take a step back and evaluate if maybe I had been dreaming just a bit too big for a 1 month project that was being done in between doing my full time job and raising 3 children under the age of 3. I dug down into my unfinished prototypes directory and found a match game that I had started building to get a free PlayBook from RIM. It was a simple match game that I had designed to help my son learn the alphabet (and distract him when he launched into a terrible-twos induced fit). It had fallen by the wayside because I had decided that I wanted to make an app for Empire Avenue using their API instead.

I converted Monster match Alphabet to an Android project so that it could be brought to market as fast as possible. Then I spent some time working with the art assets and made sure that it played fairly well both on small screens and on tablet sizes.

Several cute monsters standing in a field.

Some of the monsters in Monster Match Alphabet

Is it original? Nope.
Is it epic? No.
Will most people taking part in the October Ludum Dare want to play it? No.
Is it done? YES.
Will my son enjoy playing it? YES.
Is it available on the Android market? YES! Yes indeed it is.

Since there is still some time left in the month I think I might actually try to continue making some changes and testing with the Android version. If I can I’ll also submit it to the PlayBook and Apple app markets, too.

Overall I have to say that this October dare taught me a valuable lesson: sometimes it is better to achieve a small dream than to have an unfulfilled big dream.

A few years ago I wrote a timelapse program for myself so I could take LD timelapses. I wrote something that would only output sequential images, could do picture-in-picture webcam image and ran from console only.

It broke spectacularly a long time ago.

But I just spent the last few hours fixing it ready for this weekend. So if you fancy giving it a go then you can get the source from github: https://github.com/Fiona/pycatcher

One day I’ll package it properly, I promise.

Posts Tagged ‘app’

Panda7 game finished! 10 minutes over deadline.