How to make a Blob Monster!

Every so often i get an email or comment asking me if i can do a tutorial on how i make games, or if i can tutor someone in the ancient art of game making in return for some cash or whatever. My typical response is to respectfully decline their request or offer, and add a link that i’ve copied from a Google search for “how to make games” as a suggestion of a starting point on their road to making their first international mega hit.

I got another such email a couple of weeks ago, and while my response was the same as usual, i took a look at the content of some of the tutorials i found in my Google search results. While there are one or two interesting ones dotted about, a lot of the seem to be, as the friendly Byron pointed out when i was mumbling on Twitter earlier this week, guides on how to use OpenGL or DirectX with C++ or C# and XNA or whatever. This is fine, and if you are going down the programming route rather than the Unity or Gamemaker route you’ll find this sort of thing super useful, but it’s not an actual game making tutorial.

Thing is, i really don’t think there’s a better way to learn making games than by getting it wrong a few times. So long as you learn from your mistakes you’ll get the hang of what’s actually required to make games. Also, i doubt there’s a tutorial that teaches you how to make a super fun or interesting game mechanic, or make the controls and interface feel natural and good, those are the things that you just have to work out by yourself. Sure, there are game engines and code frameworks out there that can help you structure your project, you still have to do the hard bit, making the game, all by yourself.

Initially, i thought maybe i’ll write a really simple game, a Space Invaders clone, or Breakout or something like that, and break each part down and explain it all nicely and show how all the different bits work together as a whole. But i actually don’t think that’s what people want. I doubt very few people get into making games because they want to write such simple games, even if they end up making something similar. I also remember these sort of tutorials being extremely tedious when i was learning, i wanted to do all sorts off cool stuff and have bits exploding and a million baddies and online cooperative multiplayer and audio reactive hats in the background and… well, you get the idea. Re-writing Pong just didn’t do it for me.

I personally got into it because i love visual arts and music, and game creation was a neat way of combining the two. The only problem was that i had no idea how to actually achieve the sort of thing i desired, so I spent lot’s of time learning how to program. After a while i’d learned how to get the ideas in my head onto the screen in some form. I’m still learning too. I doubt i’ll ever stop. Practice makes perfect, and the more i practice the closer the on screen representation gets to the mental image.

I actually think writing games is a great way of learning how to program, the fact that your game will need to updated sixty times a second or whatever means you will learn fast how to make code that is fairly well optimised. You will however need to learn a programming language, so part 1 of this tutorial is for those of you who don’t know how to program at all is to go and find a tutorial on how to program, and do that. There are tonnes of these online, so find one you like and think you can learn from and have a go. I find this sort of thing very horses-for-courses, so i won’t suggest a specific language or tutorial. It’s not too important which language you choose to learn with, it’s the concepts and the logic that you’ll get the most from in the long run. I learned Pascal to start with, and no one uses that much any more.

Casting my mind back to when i was starting out, one thing i wish i could have been able to learn quicker was how to code trig, and understand how to use the sin, cos and tan functions to get lovely smooth animations going on. I knew i could do it, but it took a long while to click. So i’ve made a code tutorial for this exact thing. The aim was to make something that is interesting AND would hopefully teach people at the same time.

If you’ve played my Irukandji game, you hopefully have gone coo at the little animated monsters that you have to shoot. All these little fellows were animated in code using trig, and all using the same image file. Here it is:



Even the crab boss is made using this image! In fact, aside from the rocks, the little heart thing for the life counter and the font, all the imagery in Irukandji is created using blob.png! Here’s a video of Irukandji and the sort of blob moster i’m talking about. The crab is at the end:

So, below is a link to some code i hope will teach you how to make your own Irukandji style blob monsters, and help you learn how to use trig functions to animate stuff. It’s written using the Blitzmax programming language, which i like very much. It is unfortunately a commercial language, but you can, if you so desire, download a demo copy from here, compile the code below and start noodling around and changing stuff. It’s available for Mac OS X, Windows and Linux, and the code below will require no changes to run on any of those platforms, how neat is that?!

If you’re not a Blitzmax fan, then i hope i’ve kept the code neat enough for you to be able to convert it to whatever language you prefer. The only thing you’ll need to make sure you can do is draw a textured quad, and apply rotation, scaling and blending. The actual syntax itself is fairly easy to understand. If you do convert the code to another language, please, please let me know, and i’ll add it the the zip file for others to use. I guess i could maybe give you a free game or something for your troubles too!

Grab the code file from here: http://www.charliesgames.com/blobmostertutorial.zip this contains the Blitzmax source code and the blob.png image it needs.

Hopefully, once you’ve either compiled this code in Blitzmax, or converted it to your language of choice, you should see something like this:

Hopefully this is something that you folks will like. I’d genuinely love to hear your thoughts as I’d like to do some more tutorials in the future. Let me know what you think!

Finally, if you make your own blob monster based on this code, please show me! I’d love to see what you came up with :)

Cheers
Charlie.

EDIT: the super awesome Draknek has ported the blobmonster to Flash! check it out here: http://www.draknek.org/flash/blobmonster/!
Thanks very much Mr. Draknek! He also pointed out that i should mention that the code uses degrees rather than radians, and that the calculate angle function uses the wrong parameters in the atan2 function (should be atan2(y,x) rather than atan2(x,y)), so the angle is 90 degrees out.

This entry was posted in Uncategorized. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

12 Comments

  1. Posted November 20, 2010 at 2:09 am | Permalink

    I really like this, I think it’s just the kind of interesting demo that can get people experimenting with game technology. I’m porting it to Flash/FlashPunk, it’s mostly done but looks a bit different: still need to investigate why that might be.

    A few things I noticed:

    Your code is all using degrees, that’s not a problem but it is something that might be worth pointing out (since a lot of languages force you to use radians).

    Your calculateAngle function returns a result which is 90 degrees out from what I’d expect and I think the code gets clearer when you add 90 degrees in calculateAngle and subtract it in the render code (e.g. the fins are at calculateAngle() – 90 and calculateAngle() + 90 rather than + 0 and + 180). Also atan2 is defined as atan2(y, x) not atan2(x, y) and that’s where the 90 degree difference is coming from. atan2(dy, dx) == -atan2(dx, dy) + 90

    blob.png isn’t symmetrical: I didn’t notice until I added the yellow light but it’s slightly non-centred.

  2. Posted November 20, 2010 at 2:50 am | Permalink

    I finished up my Flash port: http://www.draknek.org/flash/blobmonster/

  3. Posted November 20, 2010 at 8:27 am | Permalink

    Thanks Alan :D

    You know, i’ve been using that same calculate angle function for years and i’d never noticed i’d put the wrong parameters in!

    Cheers
    Charlie

  4. Goran
    Posted November 20, 2010 at 1:11 pm | Permalink

    Just wanted to thank you for putting in the time to write this tut.

    I am making something very similar to it in C++ – a game where complex entities are made entirely out of simple sprite shapes – and this came up during my ‘research’, as it were. I will not use your blobmonster code, but this tutorial was still very useful to me as proof of concept that aggregate shapes can look fairly awesome. It has persuaded me to go through with the design concept.

  5. Posted November 20, 2010 at 7:12 pm | Permalink

    Glad i could help, albeit indirectly! Best of luck with your project :D

    Maybe take a look at my Irukandji game, almost all the visual elements are created using the same blob image. The link is: http://www.charliesgames.com/wordpress/?page_id=11

    Cheers
    Charlie

  6. Pete
    Posted January 8, 2011 at 1:04 am | Permalink

    I’ve just come back to BlitzMax after a long break from doing any serious coding. Thanks to a few friends i’m starting to find my coding motivation coming back and it’s really pushing me to get to grips with the language and start trying to put something together.

    I found this tutorial superb – and it demonstrates what can be done with a simple image and some clever coding.

    The maths side of things has always been difficult for me so it’s nice to see how it can be applied to create such nice effects – if you’ve got any recommended resources in this area then i’d love to hear more about them.

    I’d be really interested in anything else you’d like to share with us – and more tutorials would be really great.

    For now i’m finding my feed with BlitzMax and getting my head around lots of difficult aspects which i’m going to have to address should I decide to go ahead and start putting a game together.

  7. Posted January 8, 2011 at 9:25 am | Permalink

    I’d like to do some more tutorials along these lines. Once i think of something fun i’ll post it here on the site!

    Cheers
    Charlie

  8. Posted February 10, 2011 at 7:59 pm | Permalink

    Hello!
    I’ve ported your code to glBasic. Nice toy you provided!
    http://www.glbasic.com/forum/index.php?topic=5702

  9. Posted February 10, 2011 at 10:56 pm | Permalink

    Wow, that’s great! Thanks a lot :D

    Cheers
    Charlie

  10. Mark
    Posted June 11, 2011 at 6:34 pm | Permalink

    This is a really great tutorial! I’m fond of the kind of games you and e.g. Jeff Minter make, full of eye-candy en colorful screens. This is a good startingpoint for a game I have in mind. Hopefully you publish some more tutorials on your blog, that would be great. Some suggestions: how to code enemy attack waves, particle systems etc. Thanks again for this really great insight!

  11. Mark
    Posted June 14, 2011 at 9:22 am | Permalink

    I’ve a question for you Charlie. Do you first use photoshop to design a visual representation of a blob monster, or do you start right away coding the little monsters?

  12. Posted June 14, 2011 at 9:29 am | Permalink

    Hi Mark,

    I just start coding away! I usually have a rough idea in my head of what i want things to end up looking like though.

    Cheers
    Charlie

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>