Recent Blogposts of Gamedev | Page 3

Behind the Scenes - Poopie: Making Kim Jong Un Cry

Nov. 11, 2015, 4:29 a.m. Behind the Scenes Gamedev Graphic Poopie

Public domain assets pack of the game available at the end of this blogpost!

So I've released a crappy game to the internet. You may be curious about how is the game made. If you are, you probably want to read this blogpost. :3

Note: This game is for entertainment purpose only. No political message intended

Graphic

The graphic is done with Inkscape.

As you may have known, this game is based on my Ludum Dare 33 Entry. Most of the development time are spent on graphical improvement. This section is about the analysis of the graphical changes.

Poopie

Poopie is the main character of the game. The left one is the original Poopie. The right one is the current one.

Old Poopie animation Poopie animation

I've experimented it around for a while before I come up with the current design: Poopie experiments

Compared with the original design, the current design has eyes inclined. The eyes also has eyeball in it.

The shading consists of two elements. First is that in somewhere above the center of the object, a radial gradient is used to make there a bit brighter. This can make the object looks spherical. Second is the bottom of the object is shaded with a darker color. This reproduce the reflection and diffusion property of feather skin.

It would looks wrong without proper shading. For example, the wing on the top-right is shaded as up bright instead of down dark. It causes the wing looks like a piece of plastic or metal or lolipop. Another example is that if you don't shade it, just like the original version of Poopie, then it would looks like a piece of sheet(pun intended).

The shape of the wing is inspired by(a.k.a. stolen from) the number 3 wing from the tutorial here.

Victim

Green Victim animation Worker animation Kim Jong Un animation

We got three victims. You probably expected that. The green clothed victim is weaker. The worker victim is stronger because he got a hard hat. Kim Jong Un is the strongest because he's a leader. And for each victim except Kim, their appearance are different after getting pooped.

Heads

Heads

The first head on the pic is the older version(never released to the public) of the head of green victim. After drawing that, I found that it doesn't look right. Especially the hair. It's just weird. Then I realize that the boundary of the hair shouldn't overlap the one of the head.

To fix it, I scaled the hair to a larger size. In addition of this, I have deformed the head a bit because human head usually isn't a perfect circle.

Non-perfect circle of head

Notice the bottom node. Its left handle is longer so that the head is deformed.

To make the head looks more 3D-ish. I've shaded the following elements of the head:

  • Hair
    • dark shade at the bottom
  • Face
    • lighter in the middle, darker on the sides so that the head looks more spherical
    • dark shade right below the hair and at the bottom of the head.

And that's it for the head of the green worker. A possible improvement is to increase the saturation of the head. It's because it looks too grey.

The worker head is just a recolored variant of green victim. I use black color because the workers are usually exposed under the sun for a long time. Therefore, their skin are usually darker than usual. In addition, using black skin can give the game more diversity. That's why a darker skin is used.

To make it looks even better, I've drawn a hard hat for the worker:

hard hat

Similar to the head, the hard hat is shaded. But the top spherical part of the hat shaded bright on the top instead of shaded dark in the bottom. It's because hard hat is made of plastic. Shading it up bright can make a material looks like plastic.

In the plane part of the hat, it's shaded bright on the top for the same reason. And it's shaded dark at the bottom so that it can shows the thickness of the edge of hat.

For the head of Kim, it's based on the previous version of the game, which is based on this pic.

heads of Kim

The shape is easy. Just embed the pic into Inkscape. Then use path tool to draw the outline of the head. And that's it. The difference between two version is that the new version is shaded. If you observe the pic carefully, you would found that his hair is semi-transparent on the boundary in the new version. Another difference is that Kim is smiling in the new version because it looks more like him when he's smiling.

Body

The shape of the body is a slightly deformed rounded rectangle.

Body

By cloning the deformed shape and using the "Difference" function, the bottom part of the body can be colored differently so that it looks like blue trousers when it is viewed together with his legs.

The shading is just using similar technique I mentioned before. It's gradient and dark shade at the bottom.

Bodies of all three characters

For the body of worker, it's more grey to reassemble the dirts in the construction site. The color of the clothes of Kim is just like the color of his clothes when he appears in the public. And Kim is a bit fatter because he is the boss in the game. Being a bit fat makes him looks stronger.

Combined together

After adding neck, arms and legs and some tedious animation made frame-by-frame, here is how does the victim looks like:

Green Victim animation Worker animation Kim Jong Un animation

To makes it looks better, a variant of victim after being pooped on is also made:

Green Victim got hit animation Worker got hit animation

Maybe it isn't very good. But it's already much better than the original version:

Original victim animation Original Kim Jong Un animation

Police Car

The left one is the original police car, while the right one is the new one.

Original police car animation New police car animation

The shape of the police car is done by referring a few police car images from Google Image Search. For the shading, I just use similar technique as stated above for shading the police car. Except the windows. It has some translucent diagonal lines so that it looks like glares.

The size of the text "POLICE" is reduced because it can increase the area of the paint surface exposed to the viewer. It makes the shading of the paint looks better.

Clouds

Clouds

For both black clouds and white clouds, four variants are drawn. A random white/black cloud graphic is used whenever a in-game cloud is spawned. It's because the game has a lot of clouds. It would looks dull if every single cloud are identical.

It's rather simple to shape the clouds. Just use multiple ellipse and stack them together. Then Union it in Inkscape. Behold a cloud before union operation:

A cloud before union operation

After unioning them, draw a tiny straight line. Then make it a curve by dragging it using path tool. Then make a few variants of it and put it into the cloud. Finally, shade it dark at the bottom. That's how the cloud is made.

Comparing with the original cloud, the new one is much better! :)

Original clouds

Upgrade Buttons

Original upgrade buttons New upgrade buttons

Obviously, the top row is the original upgrade buttons. The bottom row is the new one.

Not much to say about upgrade buttons. The new one just added shading. And I've changed the icon of flying speed upgrade.

Background

Here's the old background image:

Original background image

And here's the new background image:

New background image

The main changes is that in the old one, I used pencil tool to create the outline of the mountain. It looks ugly like mspaint art. That's why I used a deformed rectangle for the mountain in the new one. It looks much better. :)

Win Scene

And finally, the win scene shown after winning the game! The original one comes first:

Original win scene

Behold the new one:

New win scene

The new one is better because it looks more funny. Poopie literally makes Kim a shithead(for entertainment purpose only, no political message intended).

A few graphic enhancement was also done. It includes the text "You Win". The new one is shaded like that it's made of glass. The tear steam also has a little bit shading. And most importantly, the new Kim looks much better than the stick man Kim.

The empty space in the new win scene has a few buttons(twitter, facebook, Sadale.net and replay) in the real game.

And that's it for the Graphic part!

Sound effects

Poop Sounds

The poop sound was made, uh, manually. I voice acted the poop with my mouth xD. And I used Audacity to do the processing like amplification and removing the silent part of the sound.

Audacity screenshot

The poop sounds was recorded by a headset comes with my phone. Maybe I'll buy a better one some day later :P. Four variants of poop sounds were made. Whenever Poopie poops, a random poop sound is played.

Siren

The siren was made with LMMS(I'm proud to have briefly contributed to the development of this project!). It doesn't sound very good. But still, it just works. And it isn't a very important element of the game. Behold screenshot of making siren sound effect.

LMMS screenshot

As you see, the siren sound is made with sfxr synth(I ported sfxr to LMMS!). One track for pitch rise. Another track for pitch drop. Combing them and exporting it as seamless audio. Then I get siren sfx.

Other sound effects

All other sound effects are made with sfxr. It's pretty useful for making 8-bit sound effects. And it's very easy to use. Here's a screenshot of sfxr:

sfxr screenshot

By using the sliders, it's very easy to make the sound effect I want. And that's all about the sound effects!

Programming

The programming of the game is done by using Java programming language with the engine libgdx. The IDE I used was Eclipse. And the build system I used was Gradle.

Libgdx is a pretty good game development engine. The award-winning Android game I made 大團完(Not released to be public) was the first game I used this engine. And it is the preceder the game Fall in Love. One of the very attractive feature of this engine is that it is capable for exporting games to HTML5, iOS as well as desktop(as a .jar executable). That's why I'm using this engine.

Still, one of the flaw of this engine is that its HTML5 support isn't perfect. The main issues that I found was the loading screen. The bright spot in the loading screen was for the logo of libgdx. While I can figure out how to replace the logo, I couldn't figure out how to remove the bright spot at the moment. Another issue is that the sound playback is lazy-loaded. The sound isn't loaded until it's played and it causes delay of sound playback in the first play. There are probably some workaround, tho. I'm just too lazy to find it at the moment :P. Maybe I'll try HaxeFlixel some time later. Mainly because it has better web support(with flash).

Interestingly, programming didn't take much time of the development of the game. The time spent on this game is Graphic > Programming > Sound effects. This is my first project that Graphic takes more times than Programming. It's probably because I decided to dedicate more time on the graphic for this game and hopefully it can make the game looks better.

Special Thanks

  • The developers of the tools I used. It includes Inkscape, LMMS, Audacity, sfxr and libgdx.
  • PuzzlePieces/Kaitlynn/thedandmom/Experiment073 for the tutorial on drawing wings. I found that wing in Google Image Search. It was a repost of Pinterest and it had taken me a while to track down the original source.
  • My cute little sister for providing consultation on graphic. Mainly on quality control of the graphic and shading techniques.
  • The players of the game. There isn't many, tho. :P
  • Anyone who found that the following assets pack useful - Thanks for using it! <3

Assets pack

Here's the assets pack of the game. It's released in public domain. You can do whatever you want with this assets pack. While it isn't a requirement, attribution is appreciated.

Link to assets pack

If you like the game or the assets pack, please follow us in Twitter or like us in Facebook!

Play

You can play it here: HTML5 | Android

Once again, this game is for entertainment purpose only. No political message intended. No real Kim is harmed during the production of this game.


Now on Google Play! Poopie: Making Kim Jong Un Cry

Nov. 8, 2015, 1:09 p.m. Gamedev Poopie Product Release

Previously, I've released the web version of Poopie: Making Kim Jong Un Cry.

Today, I bring Poopie to Google Play! Behold feature graphic for the listing:

Feature Graphic of the game

Let's make Kim cry. Go pooping with your Android phone today!

The game is now available here


Poopie: Making Kim Jong Un Cry

Nov. 3, 2015, 3:20 p.m. Gamedev Poopie Product Release

Hey guys! I've just released a new game. Poopie: Making Kim Jong Un Cry!

It is an enhanced version of my Ludum Dare 33 Entry.

What's new:

  • More upgrades
  • Better graphic
  • Faster start off

Screenshot of the game

The graphic isn't very good. But it's already a big improvement compared with its preceder. Well, my art indeed sucks. But it's getting improved over time. :D So don't complain about it. :P

Rules(New)

  • Move you mouse to control the position of the bird/owl/whatever you call it
  • Click/touch to poop
  • Avoid lightning
  • Poop on people to make money
  • Upgrade with what you've earned
  • Poop on Kim Jong Un to win the game(For entertainment purpose only. No political message intended)
  • Stop pooping when police car is passing by. :P

FAQ: Why does this game has something to do with Kim?

A: Win the game to figure it out! :D

Play

HTML5 version is released. Android version coming soon is now available!


[WIP]Koloniigo - Early Access Version

Oct. 10, 2015, 6:08 a.m. Gamedev Koloniigo Product Release WIP

After two months of work, early access version of Koloniigo is finally available!

[NEW]Tutorial Instruction

A few users has reported that this game is confusing. Therefore, I add a tutorial instruction section here.

  1. Click a red building
  2. Click the attack button on the top-left corner
  3. Click a blue building to send population to it.
  4. You'll see that a red ball is spawn. With the bar changing color
    • The red ball is the population to be sent
    • The bar shows the amount of population inside a building/moving population
  5. Click the next turn button
  6. Repeat until you take control of all buildings

Rules

  • Objective: turn all the building into your color(tutorial: red; random map: red; networked game: either red or blue)
  • Turn based game. It's your turn, enemy's turn, your turn, enemy's turn and so on.
  • In each turn, send population from your building(s) to other building(s). When the population a enemy's building drops to 0, it's yours.
  • Each building has special function shown in speech bubble, e.g. double defense, triple attack, etc.

Mini FAQ

  • Q: What are the color bar above the buildings?
    • A: They're the amount of population inside a building. white~red = 0~10; red~orange = 10~20 and so on. Double thickness means 100+, triple thickness means 200+ and so on.
  • Q: What does the icons in the speech bubbles do?
    • A: It tells you the special function of the building. You can't click on them
  • Q: I've controlled all of the buildings. Why I still can't win?
    • A: It takes time for population to move from a building to other building. The moving population of opponent is hidden by default(unless you got a beacon). If it happen, it means that there're still moving enemy population in the map. Those moving population might be able to take back the control to your building. That's why you aren't regarded as winning until all moving enemy's population is died out..
  • Q: How do I beat tutorial 3?
    • A: First, you need to take control of blacksmith(the thing that looks like an oven). Then make use of the blacksmith for attack because it has 3x attack compared with other buildings.
  • Q: The game freezes in networked game. Is the game broken?
    • A: No. If you can do nothing in networked game, it means that your opponent is making decision on his turn. You have to wait for your opponent to click the next turn button. So just wait.
  • Q: I can't send population in networked game.
    • A: First, ensure that it's your turn. There should be a green check button on the left-bottom. If not, just wait for your opponent to pass the turn to you. Second, in networked game, it may be possible that you're blue instead of red. So click some blue building to check whether you're blue
  • Q: I've more question!
    • A: Ask wherever you can see me. e.g. reddit or freenode

TODOs

  • Change the graphic. The current graphic looks ugly. I'll probably find an artist for help
  • Networked game
    • lobby
    • Multiplayer vs multiplayer
    • Network disconnection handling
    • Tell whether you're red or blue at the beginning of the game
    • Display something interesting when it's opponent's turn
  • Bugfixes :P
  • More gameplay elements

Before doing these, I think I'm going to update this website first. I'm planning to merge this blog with my homepage. and I got tests and exams to do recently. I think I can't work on this game for a month or two. :( Anyway, don't worry. I will complete this game eventually. My project completion rate is pretty high. :)

Click here! to play!


[WIP]Koloniigo - Networked Game Progress

Sept. 30, 2015, 4:28 p.m. Gamedev Koloniigo WIP

Hi. I haven't updated the development progress for a while because I have been busy working on the game. :3

As you might have know, networking is tough. Anyway, I'm getting good progress on it. And I managed to get cross-platform websocket networking working. :D

Here's what networking function currently implemented:

  • Automatically register players(for future use. Mainly for storing player experience)
  • Minimal lobby server. It waits for two players joining a networked game, then redirect the two players to enter a game room.

Here's what still left to be implemented:

  • Actual networked game. (The networking stuffs after the two players entering the game room)

It's midnight here. I'm exhausted. Time to sleep. I'll continue work on this game tomorrow. Good night guys! <3