Saturday, May 12, 2007

Danc's Miraculously Flexible Game Prototyping Tiles

RPGs love PlanetCute

So do platformers...

One of the commenters on the SpaceCute posts wondered what would happen if you visited one of those delightful spa-like planetoids that decorate our little galaxy of cuteness. Well, now you know. Here is a new set of graphics I'm dubbing "PlanetCute"

These are Lowest Common Denominator graphics. I put the challenge to myself: "What is a graphical style that is attractive, but are useful to both the widest range of developers and game genres?" Here's what I came up with for an answer.

Useful to the widest range of developers
Very few indie developers want to spend time figuring out how to use a set of graphics for their prototype. Often a developer would rather build their own format specific to their design and hire some to make graphics to spec or horrendously mangle free graphics to fit their needs. For completely original graphics, MS Paint in all its heavenly glory, is a extremely popular choice.

Some of the fault lies with the existing graphics, be they free sets scrounged from the internet or leftovers from a previous project. 3D graphics are notoriously difficult to convert between formats, are optimized for use on a specific platform and often present a confusing technological challenges to student developers. What coordinate system are they in? How are they grouped? How are they animated? Perhaps Collada will make it all seamless one day, but we aren't there yet.

Even 2D graphics are tricky. I've seen a simple system like auto-tile confuse new developers. There is typically a whole class of rules associated with any set of 2D graphics. What pieces go together? What is the render order? A set of a hundred graphics presents a puzzle that surprisingly few are willing to decipher.

The PlanetCute set attempts to wiggle past many of those problems.
  • Building blocks, not tilesets: Instead of having complex tilesets, each block stacks nicely with pretty much any other block. If you can understand Legos, you can understand how to put together these graphics. These tiles should be useful to children, not just uber-elite game gods.
  • Standardized format: All the graphics are uniform sized PNGs. The graphics will also work in almost any graphics engine out there that can do 2D sprites. Once you get your offsets right once, you never have to change them again.
  • Source files included: If you do need to make changes, I've included the source files. If you really need to change a color, go for it. If you need a big gem, just scale up the original. Everything is a vector so you'll alway end up with clean results.
Useful to the widest range of genres
These terrestrial tiles that be used to prototype a shockingly wide spread of popular 2D genres. Some that come to mind include:
  • Console RPG
  • Platformer
  • 2D brawler
  • Pacman
  • Sokoban (Please don't make this game again)
  • Match-3
  • Populous
  • Syndicate
  • Pong
  • Arkanoid
  • Marble Madness
I imagined that a basic engine that can deal with stacking blocks and a bit of collision detection could be easily adapted to new game types as desired.

This set is also quite amendable to original games. What could you make with destructible terrain, crowd AI and ancient treasures hidden several layers deep in the earth? I don't know, but I suspect it would be a heck of a lot more interesting than yet another Match-3 game. :-) And this set can handle all those technologies with delightfully low-fi aplomb.

Why does the world need nice graphics for prototyping?
The whole goal is to get you to focus on building up your game mechanics, not on polishing your graphics engine.

Many developers are driven to improve their graphics. There is a common moment that is seared into most developers brains. Do your remember that time you were working on a new idea for days, perhaps weeks. Finally you showed it to your friend. Your code was tight. The idea amazing. Yet your friend took one look at the command line interface and the rectangular graphics and his eyes glazed over. He was bored before you even complete your first sentence. That moment can be devastating.

For the follow up, you spent half your time making your prototype pretty. Unfortunately, to be overly blunt, you suck at drawing. You spent untold hours on something that didn't quite meet your vision. As a result, you didn't get a chance to polish and balance the game mechanics. You know...the part that makes a game fun. There is only so much time in your day and you wasted a good chunk of it on getting past that first 15 second impression.

The next time you make a prototype, use these graphics. If you can reduce the time you spend on futzing with graphics from 40% to 5%, you can put more time into those fun game mechanics you've been dreaming about. The magic is that your graphics will now look good enough to get you through the first 15 seconds of your demo. Your friend will perk up and stay engaged long enough to give you feedback all the wonderful work that you've put into your prototype.

Let me know if there is anything major missing. These were surprisingly fun to draw.

take care,
Danc

Download 'em here
Vectors: Ideal for Silverlight or WPF experimentation
Bitmap: Good for that vast world of pixel engines

76 comments:

  1. Beautiful as always Danc. I definitely agree with you on the need for more free prototyping graphics. However, I would go further than that. The world needs more free commercially useful graphics. There are certain parties who would benefit from having a large number of independent game designers having access to all the tools they need to make those games. This means simplifying the process of programming, art, sound, all of it. Just let the game play shine through. I'm all about promoting the development of new and interesting types of games, but there's money to be made by throwing the best of these on a server for five dollars a shot.

    ReplyDelete
  2. oh! the little bush! nicest bush ever :)

    slick work, good sir.

    can't wait for the day your artwork actually comes to life in a functioning, complete game.

    peace!

    ReplyDelete
  3. Great stuff! Thanks for these.

    I've posted a link over at Socoder.co.nr, so maybe one of the coders there will pick these up and make something great with them! You never know..

    ReplyDelete
  4. PlanetCute is so awesome! I have only one issue - and its one that plagues so many of us who are art challenged. There's no inhabitants of PlanetCute! I see only landscape in the tiles.

    So, could you, would you please create some characters, baddies, bunnies, fishies, etc? I know someone could get SpaceCute and manipulate the graphics, but it wouldnt work quite right and it'd end up looking again like a mishmash of artwork.

    ReplyDelete
  5. Andrew, those are great ideas. I'll convert some of the space cute characters over. Sans helmets.

    take care
    Danc.

    ReplyDelete
  6. A short moment passes...

    Alrighty, the graphics are now updated with several characters for you to mess about with. These all use the same offset as the other graphics and are scaled to fit.
    - 5 people including a boy, a princess and a bunny girl.
    - A dangerously cute bug monster.

    Enjoy!
    Danc.

    ReplyDelete
  7. That's the coolest thing I've seen in a very very long time! This makes me even more inspired to create the greatest Cute RPG ever... :) Thank you for the characters - that really completes the picture.

    ReplyDelete
  8. BTW what license does this artwork have?

    ReplyDelete
  9. Awesome! This is utterly perfect for a workshop I'm doing about game AI this weekend. Need to put together a framework people can mess around in, now it doesn't have to look like a programmer made it. Thanks! :)

    ReplyDelete
  10. Excellent set !
    Just one thing is missing : the profile view and back view of the characters.

    It is so good we have decided to use it for our prototype. ( We'll send you screenshots during the next week or so. )

    By the way, what license is this set under ? We would like to keep *some* elements for the final.

    ReplyDelete
  11. Not to be greedy, but...

    A few more tiles come to mind: ice, sand (I suppose I could just modify the water one), lava would just about cover the basic terrain types you'd see in most games (assuming you'd just use the dirt with rocks all stacked up to form mountains).

    Regardless, I really like this set -- as someone who just got done creating some really craptastic prototype art I can't thank you enough for providing stuff like this. It's always frustrating to get to a point in a prototype where you have to just bite the bullet and spend hours or days generating stuff that'll a) not look great anyhow and b) be tossed later. This'll prevent that from happening.

    I'll still have to create some of my own characters / fauna and flora since some of what I'm doing is probably too specific to be of general use. I may try and create it in the PlanetCute style (though not quality, I'm sure). I'll send it along in case you wanted to rework any of it and add it to the base set.

    (If this double posts I apologize...)

    ReplyDelete
  12. For a long time I've struggled with the amount of time I spend futzing with images. It could often be as much as forty percent of my time, or more! Now, thanks to Danc, my futzing is down a shocking 35%. With all that savings I can improve my prototypes and still have time to make love to my wife!

    ReplyDelete
  13. Hahahaha!! Danc, PlanetCute is too classic! You rock!

    --Ray

    ReplyDelete
  14. Dude thats some really cool piece of artwork!!
    I agree with BigWeather, it would be AWSOME if your characters had more views, or pehaps animation (whoa...)
    I would be REALLY cool if you could pack some different colored gems. I'm clueless. Hope I'm not the only one.

    ReplyDelete
  15. the only think i think it needs are corner pieces for the ramps

    so you can make terrain , you can't do Populous without the corner pieces

    i hope you know what i mean ?

    oh and more creatures / monsters

    ReplyDelete
  16. Corner pieces for the ramps would be a good addition.

    In terms of making Populous, I don't think you need to use the ramp pieces at all. If you use a back to front rendering system, you can make 'stacks' of blocks move smoothly along their vertical axis. This opens up all sorts of fun things such as elevators or 'smooth' terrain modification.

    You'd have to update your movement system so that character know to 'hop' up the small stair steps between blocks, but that is relatively simple.

    I should post an example picture since this technique opens up the type of terrain that you can make quite nicely.

    take care
    Danc.

    ReplyDelete
  17. Danc you're amazing!

    Any chance of getting the vector art in SVG pretty please? :)

    ReplyDelete
  18. I agree with Richard Jones, it would be great if you could provide these in a more standard format than the one used by Ms Expression Design. Like maybe SVG or EPS or Flash file.

    Cheers

    PS: Unless of course it's an evil plan to make us download and use Ms Expression Design.

    ReplyDelete
  19. the ramp peices would be really nice though

    i agree having the blocks have pixel accurate Y axis movement helps i don't know if the resolution in Y movment would be good enough to show hills and things all on one screen without jumps of say 8 pixels

    ReplyDelete
  20. @bigweather:

    As you mentioned with water-to-sand, it's pretty simple to modify tiles in this set to create many other types of terrains like the ones you mentioned. By changing the hue/saturation/etc, here is ice, sand, and lava.

    ReplyDelete
  21. As already mentioned, but it would be really awesome if you could choose a standard license, for example a creative commons license:
    http://creativecommons.org/
    (preferable a CCA or CCA-SA one) for *all* your free game art on your page!
    This way we could also add your work to out database of free game art:
    http://freegamearts.myexp.de/

    Thanks

    ReplyDelete
  22. These look great :-)
    Do you know of any decent free tutorial sites for those of us that suck at drawing but would like to learn how to do it better?

    ReplyDelete
  23. dude,

    I'm his (Danc's) wife, and I can assure you he works on this blog in his own time - not working for The Man - often neglecting trash to be taken out. He likes to dabble w/ his product to get a user's perspective I think. :-)

    (And he was making a note to himself it should be easier to export stuff from MsED, hehehe.)

    ReplyDelete
  24. @derek

    Thanks a ton! I may dabble with them some to make some as I need them, just generally shy of all things graphical. =)

    ReplyDelete
  25. Thanks for the info aya :)

    I'm going to try to get MsED running under Wine tonight. Fingers crossed...

    ReplyDelete
  26. DanC - just like how you solicited contributions of games to your spacecute project, I wonder if you might think about setting up some site to let folks add tiles to your planetcute one. Or better yet - imagine this (pie in the sky) you could easily be a catalyst for creating a site that let's artists contribute artwork for gamers in an open and expandable fashion!

    It could be as simple as a web board where artists post links to artwork and gamers post resulting games that feed back into the artwork and vice versa....

    ReplyDelete
  27. Wow... These graphics rock!

    I'd love to have a right/left and back view for each character so that you can make them face different directions - especially for RPGs. (Maybe a very simple walk cycle?)

    Where do we send you prototypes that use your artwork?

    ReplyDelete
  28. Well to be honest Ms Expression Design is a little different from the more usual graphic programs out there, maybe it's because we are all used to flash and other similar tools with similar interfaces,

    /techy/

    as I'm a graphic designer I usually take the pixel images he provides and reproduce the entire drawing in flash using several layers and transparent fills, etc, and it comes pretty close to the actual vector data in Expression Design (I did it for the space cute characters), I do that as an exercise and to see if there's something I can't reproduce using flash tools.

    /techy/

    Hopefully Danc will make us use Ms Expression Design more whether we like it or not in order to check his amazing designs :)

    But it wouldn't be a bad idea to have the vector data in different formats too. :)

    ReplyDelete
  29. Wow... I love this.
    As someone who's nearly uncontrollable creative process is constantly frustrated by a lack of either a) convenient & readily available form of output or, much more commonly, b) lack of concentration and dedication to sit down and manually pump out said output, this is truly an inspiring piece of work...
    Seeing this immediately brought back memories and feelings of the simple and yet very expressive playsets of childhood. And immediately following that, you've brought my mind to the idea of a fusion of that childhood simplicity and the complex "creative-scapes" of my mind today...
    The only thing that would make this blow me away is if there was a simple app. attached that would bring life to these "toys..." Just a program that would animate these type of things into virtual building blocks and all the interactivity implied, just like something you'd find in a toybox...
    Somebody needs to stick the finger to Bill Gates and build a friggen computer right for once... something that isn't stifling to creativity through its immovable confidence and blind faith in the gospel of numbers.

    ReplyDelete
  30. I threw together an RPG prototype/playground thing.
    Download: http://www.corsix.org/misc/planetcute.rar
    Screenshot: http://www.corsix.org/misc/Planetcute.jpg
    To install: extract all files, make sure DX9 is intalled
    To run: double click EXE
    To use:
    Arrow keys: Move active character
    b: Change active character
    1 though 6: Load premade levels
    To manipulate the terrain:
    Click on terrain in top left, click one of the blocks across the top to select it, click on a block in the level to set it to that block. Click and hold a block, and drag up/down to move the block up/down.
    To manipulate objects:
    Click on objects in top left, click one of the objects across the top to select it, click somewhere in the level to place it. Only one object can be present on each block. To delete an object, select the object across the top then click on the object in the level.
    To manipulate people:
    Click on people in the top left, works same as objects.

    ReplyDelete
  31. Great prototype corsix, a few issues with the depth sorting when walking on the ramps but I could definitely see a casual-rpg game with these kind of graphics.

    ReplyDelete
  32. I have put a little try on my new blog. It's a Platformer made with mmf2.
    It's a no-scrolling platformer and you can test only the select screen and one level game.

    You can see more and screenshot on http://prissille.blogspot.com/

    Download for Windows: http://dubromelle.free.fr/mmf2/pm.zip

    Instructions : Extract Exe File and Double click.

    Arrow : Move character
    Shift : Jump / Open door

    ReplyDelete
  33. Hi Danc, have you thought of geting involved with any of the OLPC project's python based game projects? http://hackronym.com/olpc/gamejam/ Also, have you made any multicultural PlanetCute character avatars?

    ReplyDelete
  34. I went for a sokoban(sorry)/multi-level/gem-match/platform simple game. 6 development hours later:

    Screenshot

    Java WebStart Cute Planet

    Thanks for the awesome graphics! You really do rock :)

    Kev

    ReplyDelete
  35. Sorry, webstart link should have been:

    Cute Planet Webstart

    Should have clicked on the preview link! :)

    Kev

    ReplyDelete
  36. Hi Dan,

    I've just started playing with your tileset to try and get a little game idea I've had stuck in my mind out into something I can get other people to play with.

    Currently the gaps I can see in the graphics are as follows:

    * Multiple keys / doors / chests (keys of different colours, and doors/chests that match)

    -- I'm trying to make a game that uses as little language as possible, so want to make it visually obvious which key is needed to open which thing.

    * Trapdoors and ladders (I've found that the perspective of the graphics basically limits you to putting exits in the top or bottom walls of a room, so being able to go up or down would make it a bit more interesting!)

    * A second spiky(?) speech bubble - something that can indicate "Not want" (e.g. Can't follow you because I'm afraid of the monsters) - again this is because of the "no language" aim - The player needs to be told the goal of the puzzle without words

    More characters? Ideally an "Identicute" system that'd let us bolt together bodies heads and faces into different characters

    * A dog/cat/companion animal (something obviously cute and friendly) - I guess I could use the catgirl for this, but an actual friendly animal would seem better

    * Identifiable "pushable" blocks - If the player can push a block around, I want it to be visually distinctive, and obvious from the outset (they shouldn't have to accidentally discover that certain blocks move, they should see a new block and realise its unique)

    Thanks for the great graphics (and a great blog!) - I'll keep you posted as soon as I've got something playable to demo :)

    ReplyDelete
  37. Funny coincidence - I was just thinking about trying Design to make game art for RPGs. A less-cute / less-3D version of cute was one of the look and feels I was originally considering. Deconstructing your Design project definitely helps, but what other resources did you use to get up to speed on using Design as a drawing tool?

    ReplyDelete
  38. Glad the sample .design files were helpful. The original SpaceCute graphics also ship in the sample folder if you want to play with them.

    I designed much of Expression Design 1.0. That gives me perhaps an unfair jump on learning the app.

    If you are interesting in learning more about vector illustration techniques, almost any book on drawing using Illustrator will teach you fundamentals that are applicable to Design. Most of the official books don't show up until January 2008. There is also the Expression blog at http://blogs.msdn.com/expression/

    take care
    Danc.

    ReplyDelete
  39. Those are very cool graphics and I'd love to use them. Please set a Creative Commons license for them.

    ReplyDelete
  40. Here's the game I made with your tiles. http://playmockingbird.com/games/557 Thanks, Danc!

    ReplyDelete
  41. For those who want this tiles as
    SVG get latest Inkscape, it can open the grafics really well :)

    And then you can save to svg or render to png with diferent sizes

    ReplyDelete
  42. Hi, I was searching for some pretty good tiles and came across these....I was wondering if I can use these tiles for my Mmorpg....Ijust want to know if its cool

    ReplyDelete
  43. Hi, your graphics are excellent.

    I used your graphics in a game.
    http://roestenburg.agilesquad.com/2008/07/simple-xna-game.html

    Thanks, Danc!

    ReplyDelete
  44. Will kittens die if I make Sokoban again?

    I see your request to not make Sokoban again, but I'm learning homebrew Wii development and already started on a Sokoban clone.

    I think this engine could be extended to add different puzzle types. Also, I created Isometric tile versions of these graphics if anyone wants them.

    ReplyDelete
  45. There's a black border around the bottom of the block tiles that are not visible in the mockups - how do I avoid that?

    ReplyDelete
  46. Danc,

    would you mind to tell me if these beautiful tiles are ok for a commercial game, say, write for iphone?

    thanks.

    ReplyDelete
  47. Thank you for the tiles.

    Bill if you read the other sections on the site the tiles are released under the rule that you give credit back to this site. You cant claim the graphics as your own.

    On a side note I dont suppose it would be possible for you to create a menu / boarder box that text can be overlay on in a simalar style? I want to use it for player health / attack info

    ReplyDelete
  48. Great thanks for the tiles.

    I used a subset of the tiles in a rpg game - wiki hybrid.
    http://www.atavismo.org
    The site is under deployment actually. I would like to ask you to verify credits in the project.

    Best regards.

    ReplyDelete
  49. Hi Danc!

    First of all, thanks for sharing this wonderful stuff.
    It's helping me a lot.

    I am developing a game based on your graphics and the mechanics from your CuteGod design. I would like to discuss with you about quality of the game and credits.

    Best regards

    ReplyDelete
  50. Hi Danc;

    I used the grass and heart tiles from planet cute in a snake game I made for the iPhone, imaginatively called "A Snake".

    1.6 million downloads so far - your tiles are a big hit!

    Shen

    ReplyDelete
  51. Hi Danc

    Thank you for sharing your images, they are fantastic.

    Kind regards
    Jimmy Daniels
    www.itbodies.co.uk

    ReplyDelete
  52. Hi Danc,

    Again, thanks for the Planet Cute tileset, used them for a ball bouncing puzzle game called 'Boinga' I did for the iPhone.

    http://itunes.apple.com/hk/app/boinga/id397219578?mt=8

    ReplyDelete
  53. Daniel is a great guy!

    Its so fun to see all those games made by his tileset. Myself made an iPhone / iPad game called Woolcraft. If anyone is curious read more here:

    www.woolcraft.net

    Thanks again, Danc!

    /Patrik, sweden

    ReplyDelete
  54. Wait a min.. that cat girl isn't really a cat, she's just wearing a hat.

    Err, anyways, searched for free sprites for prototyping my RPG and found these. Thank you, these are just lovely and perfect for what I need.

    ReplyDelete
  55. Geeh, this thing is 4 years old and still going strong. Nice.

    ReplyDelete
  56. Hey, I want to thank you for the excellent tile set. I began a tower defense game 3 weeks ago and this art is a lifesaver. Normally I'd spend more time messing around in Photoshop than coding, but this time around I was able to skip that part almost completely and focus on what I love, writing code!

    Anyways, check it out if you have the time. It's still a work in progress, but the main foundation of the game is complete. It's 100% original code.

    http://tndportfolio.com/TowerDefenseBlogPart3.aspx

    ReplyDelete
  57. Wow, what an amazing graphic set, I've edited several of the blocks hue/saturation/lightness to "create" several versions of things, such as autumn, winter, different coloured keys/stars/gems/hearts/stones/wood, lava, sand, mud, and a glass block which may or may not work.

    here's the download link if anyone is interested http://www.multiupload.com/2LSGYFVLPE

    ReplyDelete
  58. THANK YOU! You are amazing! May you be blessed beyond imagining <3

    ReplyDelete
  59. very awesome tileset, i use it for my projet (it will be a multi user online lego game where the players can modify the environment). it's possible to you to provide more view for the caracter (i mean left,right, and up)

    ReplyDelete
  60. This post is a gem. Found it just when I was in the exact same position you mention, even started doing my own art as I work fast. Thanks so much. ! :)

    ReplyDelete
  61. I've never made a game before, but I have a concept for a mobile turn based strategy I want to explore. I have complete capability with everything except the art and I've been scared to show my concept because of it. This is perfect, Thank you very much.

    One question, what is the reasoning behind the chosen 101x171 dimension of the tiles? Still have much to learn with graphics UI...

    ReplyDelete
  62. Was there ever any png's made of the characters in orientations other than facing forward?

    ReplyDelete
  63. You can now also add Planet Defense to that list as well! :D I just made a shooter from the CutePlanet collection. I'd been trying to make a game from those graphics for a while and finally I did it! Please take a look if you have the time ^^
    You can find it here: http://www.scirra.com/arcade/addicting-rotary-games/796/tinyplanet
    Thanks Danc, for your insightful blog too. I'm just starting, but I'm already learning heaps of new things in relation to game design! :D

    ReplyDelete
  64. Thanks for the generous offer.
    Your explanation and intention for them is exactly what I want them for. Good Man! :)

    ReplyDelete
  65. We will shortly be launching issue #1 of an online magazine for Adobe Flash Games Programming.

    We need you to get involved in any of the following areas:-

    Articles
    Programming Tips
    Tutorials
    Graphics

    If you think you can help, e-mail me idget.fish@gmail.com

    ReplyDelete
  66. I am making a point and click adventure.

    I have now got the shadows displaying so all you need to do too display it it load a map and it will automatically display it.

    Features included are:
    -continuous borders(it automatically loads the last tile if you go over the boundary)
    -shadows automatically are shown.

    It is programed in irrlicht and c++.

    The engine is at http://catprog.org/Games/Kitsune/Download.html

    ReplyDelete
  67. Hey I love this graphic set! I used them this summer to make a video game for my girlfriend to propose to her with! It was an awesome special day and there is know way it would have looked nearly as nice without these graphics that you provided so thanks a lot!!!

    check out the vid here
    http://www.youtube.com/watch?v=xvYRKm57a9I&feature=g-upl

    ReplyDelete
  68. I know I'm late to this party, but this is awesome and generous. Thanks so much! (I'm also another one who'd love to have character side/back views, but I figure if it hasn't happened by now it's probably not going to.)

    ReplyDelete
  69. Can we have some left right and back variations for each character?
    We need them for development and I can't do that myself as I can't even draw them using Pen and Paper!

    Expect a good and positive reply from you...

    ReplyDelete
  70. Thank you for this very cool tileset!
    We are using it in our game Blockoban.
    A puzzle game which makes certain things different and maybe better than other games.

    The goal of the game is easy. You have to build ways for your nameless hero by moving blocks to collect all the gems on the playfield. There are a lot of features like switches, water holes, and more, which you have to use cleverly, in order to finish the levels.

    The game is easy to learn but hard to master. You can try to beat the records in all the levels and to earn special stars.

    Check it out here:
    bit.ly/V5ebiG

    ReplyDelete
  71. Thanks a ton Daniel..
    Great Work!!

    ReplyDelete
  72. You're a rockstar, seriously. I'm a 45 yo mom just now teaching myself game design and C#. I don't have time to teach myself to draw as well :) Thank you for helping me get an amazing head start. You don't know how much you've done to help me impress my 13 yo gamer son :) As soon as I get a working prototype, I'll drop the name to you. Thanks again!

    ReplyDelete