Saturday, March 14, 2009

Danc's Miraculously Flexible Game Prototyping Graphics for Small Worlds

Don't you think it is time for some new free graphics?

The originals
The original set of miraculously flexible prototyping graphics have been out there for a couple of years now. In that time, they've been used in mini-MMO's, shooters, RPGs, platformers and dozens of various projects that lurk in the dark squishy nooks of the ever fermenting, communal indie mash.

However, they had some issues.
  • They were in a format that wasn't readily accessible to most users. In particular Flash games didn't make as wide a use of them as I would have liked.
  • They required a rather tricky placement system that most tile based engines had difficulty handling.
  • Very few games used the shadows system and without the shadows, they tend not to look very good.
There were also a couple other areas I wanted to explore.
  • HD pixel art: There is an emerging artistic style that showed you could keep the intricate iconic style found in pixel art, but modernize it in such a way to take advantage of the crispness found in modern high resolution displays. The result found in games like Pixel Junk Monsters, Patapon, and Loco Rocco is distinctly game art. It tends to be 2D and highly evocative. But is also is information dense and full of distinct iconic symbols that have meaning during game play. When there is a trade off between realism and functionality, functionality wins.
  • Vector art: I've done immense amounts of raster art over the years, but lately I've been playing with more vector art. The tools have gotten to the point where you can do some pretty nice stuff rather rapidly without needing to ever go to bitmaps. They are rendered natively in Flash or Silverlight and you can play with scaling without worrying about loss of detail.
  • Arbitrary placement: Once upon a time, you needed to use little square tiles for everything. Nowadays, there is no real need to make a tile based 2D engine. With arbitrary images with full alpha and lots of fill rate, you can put together a game like a sticker book. Drop down your graphics at arbitrary positions and layer like a madman. Games like Aquaria look great and tiles are nowhere to be seen. There's a good tutorial on the topic here: http://gametuto.com/in-game-c-map-editor-tutorial-with-indielib-engine-that-dosent-use-tiles-but-pieced-images-like-in-braid-or-aquaria-games/



Small World

So I started a new graphics set that took all these into account. The theme I chose was the 'Small World', an intimate place of green trees and blue ocean seen from above. For ages I've been fascinated by tiny worlds that you could imagine keeping like a bonsai garden on a table top.

What types of games can the Small World graphics be used for?
  • Turn-based strategy games
  • Real time strategy games
  • RPG's
  • God and Sim games
  • Tower defense (the original inspiration for this set was Pixel Junk Monsters)
  • Crazy innovative games that will shock and amaze the world.
What does the set include?
  • 70 high quality sprites
  • The original Illustrator CS4 .AI file
  • The exported Flash CS4 .FLA file
  • The exported Flash CS3 .FLA file
  • The exported Flash 10 .SWF file (with linkages)
  • Land
  • Forests
  • Buildings
  • Dialogs and buttons
Having the source files allows you to easily manipulate and edit the graphics so you can make variations or combine pieces together. You should have enough pieces to easily prototype attractive little worlds full of forests, fields and cities.

What doesn't this set include?
  • I have some characters that fit this set, but those will be coming along at a later point.
  • I haven't had time to cut out all the bitmaps. This is coming shortly unless someone else cuts them out first.
  • Other formats: In general there are a billion minor formats that all have their passionate proponents. Convert at will. :-)
The License
Much of the email I get involves questions about how various graphics can be used. Though I love hearing from you, it has become apparent that the license needs to be clarified so that I can spend more time making stuff for you and less time writing back about the legal issues.

A second issue is that there have been some unfortunate incidents where players have taken talented developers publicy to task for 'stealing' my artwork or 'copying' game designs. 'Open source game designs' are admittedly a cutting edge concept in our IP-clutching world, so there is some education to be done.

As of today, I've created a separate Lost Garden Licensing page that outlines the license for these graphics. If you plan on using these graphics, be sure to read it. The basics are that they are free to use in both commercial and hobby projects under a standard Creative Commons Attribution license.

The goods
So what are you waiting for?

I'll be releasing some prototyping challenges that make use of these graphics in the future, but for now just have fun and give them a shot. They were a blast to make.

take care
Danc.

PS: I also included graphics that allow you to make arbitrarily sized islands composed of splotches of land stuck together. This is a tricky technique that only advanced users will undertake. First lay down the water. Then lay down all the Land-Bottom graphics. Then lay down all the Land-Mid graphics. Finally draw all the Land-Top graphics. By layering the graphics in this order, you can create islands that merge together visually.

PPS: The trees in this art set were very much inspired by the art in PixelJunk Monsters. Such a lovely game.  I owe the artist a beer or three. 

55 comments:

  1. Dan, thank you for your generous creativity and your creative generosity. I can't wait to see what I and others can make with these!

    Jason out.

    ReplyDelete
  2. Awesome stuff again, can't wait for the plain old PNGs!

    Thanks for this and all your other hard work!

    Kev

    ReplyDelete
  3. Hey,

    That's some great work! I recently discovered your blog, and I think it's wicked awesome! I've read a few of your posts already, and I like every single one of them. Only one question, what happened to space crack?

    About these graphics, I might use the store for a prototype of a game I hope to finnish in the near future. But it would really just be for the prototype, and not be included in the final release.

    A link to my blog about it, if you would be intrested to know more about this game I'm creating: http://ceastertrade.blogspot.com/
    ( Though I didn't post much lately :P )

    Kind Regards,
    Janne Siera

    ReplyDelete
  4. Awesome, but can you make the .fla available for an early version of Flash? I have CS3 and I can't open it. I suspect it was saved in CS4 format?

    Thanks SO much for these, can't wait to use 'em!

    Yours,
    Lars Doucet

    ReplyDelete
  5. Fantastic, Dan! I've enjoyed playing with your tiles in the past, and I look forward to trying out the new ones. If others have requested .png -- I might like to stick my oar in for .svg (as that's what I've enjoyed using in my Flash games, and I can import them easily into other vector editors).

    Thanks again so much for your generosity!

    --clint

    ReplyDelete
  6. Open source graphics locked inside proprietary file formats?

    Thankfully Inkscape was able to open the .ai and save it as an .svg.

    ReplyDelete
  7. Thanks Danc. Hemebond, how did you get something useful out of Inkscape? My poor laptop dies trying to get something useful :(

    ReplyDelete
  8. Glad folks liking the graphics.

    The CS3 .FLA is now up as part of the zip.

    SVG is an interesting one. It isn't used by any platforms that I am personally interested in or have seen gain any meaningful traction in the market. It has long struck me as yet another 'standard' that was invented despite the existing market determined standards.

    Out of curiosity, why do you use SVG? No major art tools support it, so it must be rather hard getting decent art in it. My assumption is that it has made its way as a cheap vector solution into low cost engines for downloadable games and so there is a coder-driven demand for it.

    I highly encourage people who don't see the graphics in their favorite format do to what Hemebond did and convert them.

    take care
    Danc.

    ReplyDelete
  9. Richard Jones: I opened Inkscape and dragged the .ai onto it. It almost killed my computer too. Once it's imported I saved as an .svg.

    Danc: Standards are only useful if everyone can use them. SVG is an open format and support is very good under GNU/Linux; and other non-Windows operating systems too probably.

    ReplyDelete
  10. Re: SVG
    Adobe claims that Illustrator CS4 supports it, actually. Firefox can also display it in-browser.

    Also, yeah, it's gotten a lot of acceptance with Linux users, of which I number among.

    ---
    Inkscape grinds to a screeching halt when I try to pick the image apart. I'ma have to wait for someone else to separate everything also. :-)

    ReplyDelete
  11. Thank you for sharing these, they're fantastic :)

    ReplyDelete
  12. Danc,

    Bitmap versions for the unwashed finite resolution masses. Though, I can personally wait until there is a design to go along with the graphics, but no longer.

    -Harold

    ReplyDelete
  13. Brilliant work as usual. Thanks, Danc.

    ReplyDelete
  14. Beautiful work. As always.

    Also, a heads up that I've been using some of the original PlanetCute graphics in a DS graphical rogue-like I'm working on -- trying to animate some of the characters you created, but maybe not doing them justice. Check it out at http://www.youtube.com/user/espectraa1s

    ReplyDelete
  15. I only have Flash 8 :(
    Would you mind terribly providing a Flash 8 version?

    Thank you :))

    ReplyDelete
  16. On Topic: Hey, good free graphics. Hope somebody use them.

    A Little Off-Topic: Hi, this is a mysterious person who just found your website, while looking for stuff on the game known as OASIS.

    As I don't know where you can email, I might as well speak it right here.

    You mentioned about how Oasis failed because you managed to beat the game within 50 mintues, while a good "Shareware Game" should show 1/3rd of your game in the demo and promise 2/3rds more content if they buy the final game.

    I'm a demo whore too, and I'm upset with those stupid nag screen telling me, "HEY! LOOK! We purposely made this demo very ugly, but if you pay us money, you would get something awesome! We swear!" This usually puts me off the game forever.

    I loved Oasis, and even though I do agree that the lure of beating Oasis again disappers when you realizes you already beaten it once. That being said, I did eventually buy the game, but only at $5. The game was too overpriced at $20, so I'm pretty sure Mind Control Games isn't running an effective business model, I agree with you.

    But I don't agree with stripping features out of demos to try to get me to buy the full game. If that happens, I get so offended I won't buy the game at all. Show me all the features of the game, and if the game interests me, and if it is cheap enough, I'll buy it.

    There. Sorry for the huge rant.

    ReplyDelete
  17. To be fair, the reason I did buy Oasis was partly so I wouldn't have to redownload Oasis if I ever want to beat Oasis again. Mostly for casual replay.

    The game promotion did also mention about "super-puzzles" such as metors, plagues and spies, so maybe they DID engage in such a thing you stated...

    ReplyDelete
  18. I also tried to import it into Inkscape, but unfortunately it didn't work completely. The background is too blurry and one building is missing. (Or the .ai file doesn't contain all objects.)

    See this post for preview and download link.

    Author and license info are inside the SVG file.

    Danc: It might be better for us Inkscape-folks to have the objects, (without shadows?) split in smaller sets.. But hopefully someone will be able to do a full import..

    ReplyDelete
  19. Danc, I find it interesting that you're quite happy to provide Creative Commons licensed free art, but are providing that art in closed, proprietary formats (even if those are what most computer artists would use).

    For hobbyist developers (who are surely the audience for these releases) free tools such as Inkscape (and The GIMP) are our only option, and thus SVG is ideal (since support for closed, proprietary formats is tricky to get right). Of course it's not well-supported in [choose your commercial product] since that'd lessen the product lock-in.

    Please don't take this as a personal jab, more as an encouragement to go all the way down the opening up of your art, rather than half-way :)

    ReplyDelete
  20. Now that James let me know that CS4 can export SVG, I will upload an SVG version. :-)

    Unfortunately, there are substantial issues with the conversion. The SVG exporter from Illustrator doesn't appear to support transparent gradient stops, a feature which I use liberally. It also seems to rasterize various elements. The result is that the conversion looks...unpleasant. This is common when converting between vector formats.

    I spent a couple years building vector drawing tools. Converting between vector formats, particularly Adobe closed formats is quite difficult. It is a hard problem since the exact code in the display client is just as important as the data in the file. And you have to go back to AI 3 before you find an open spec.

    I admit that it would be wonderful if all art file formats were open and standardized. However, this is not the world that millions of artists live in. If you, as a programmer, decide to shut yourself off from that established and vibrant ecosystem (proprietary or not), then it will be more difficult for you to gain access to high quality artwork. C'est la vie.

    It is an interesting problem. Should artists meet the needs of the programmer or should programmers meet the needs of the artist? In the open source (code) world, it is almost always the artist who is expected to adapt. "Just use GIMP!"

    I see it as a classic culture clash based off learned skills. Programmers have years of labor invested in their mastery of their coding stacks. This is the case for both FOSS and Windows...neither is better than the other in this arena. To change to some artist friendly pipeline like Flash would mean a massive learning curve and a large portion of coders recoil at the thought.

    Yet, artists are in the same boat. They too have invested years of labor in mastering their tools. Their investment is equally valid and meaningful. If you think moving from Illustrator is easy, it is the equivalent of asking a coder to give up Linux (or computers in general for that matter).

    I've heard the cost argument...that people can't afford to take part in the Adobe stack because the tools cost too much. Yet this is false. Something like Flash Develop is 100% free and will work on the files I've provided. As such, I can only assume that it is a matter of personal preference, comfort level and a limited urge to gain access to competent art.

    And I'm totally cool with that. A little variety in world views is a good thing. :-)

    So...

    I will be providing the bitmaps shortly. And I'll even provide the SVG files. Though it pains me as an artist to release ugly, poorly converted graphics. It is like running running your lovely code through an automatic Visual Basic code generator. :-) The biz guy, who doesn't give a damn about code, loves it, but you are left crying on the inside.

    As a side note, I hope to see at least some users will happy to see that the original artwork is available in its original format at its original quality free for use, reuse and manipulation. It is, in my opinion the absolutely best way to provide art to the community. It is always better to provide the negatives even when all you are asked for is a cheap photocopy.

    take care
    Danc.

    ReplyDelete
  21. These graphics look great and I've been planning on making a small Flash based RTS. Thanks for letting us use your graphics and looking forward to another prototyping challenge :)

    As far as Flash being too proprietary, you don't actually need the Flash editor to be able to build a game in Flash. I use FlashDevelop (http://flashdevelop.org) and Flex to build Flash games. FlashDevelop shows the list of assets that have linkage ids set in the swf. The linkage id can be used to embed the assets from the swf directly into your game swf. So hobbyist developers can easily use these graphics using only free tools.

    Although it would be nice if all of the assets in the swf had unique linkage ids. Right now all the trees have a linkage id of "Tree", so they cannot be imported using this method.

    ReplyDelete
  22. @Danc thanks for the effort, it really is appreciated :)

    For what it's worth I'm usually both artist and programmer, and invariably I'm using the tools I can afford (without stealing them).

    I guess I'm just a little sad I won't be able to use these graphics (except perhaps the lesser-quality SVG or rasterised version) in my next game for pyweek ;)

    @pcmccull thanks for that info; if I ever decide to go down the path of Flash I'll keep it in mind.

    ReplyDelete
  23. @pcmccull: I uploaded a new .swf with linkages enabled. Let me know if you can access the files correctly in FlashDevelop.

    @Richard Jones and James: I also uploaded a new .svg file exported from Illustrator. I'm not sure if it is salvageable, but it may be worth taking a look.

    take care
    Danc.

    ReplyDelete
  24. The links work now, thanks for the update.

    ReplyDelete
  25. For everybody waiting for the .png files, I exported them using Inkspace, have fun. download here.

    ReplyDelete
  26. I have a small question about that flah actually. It's just somehting I haven't found a clear answer on. To develop games, what are the pros and cons of flash and javascript? Is there much that you can't do with js but can with flash?

    And I'm also going to repeat a question I asked in an earlier comment: what happened to Space Crack?

    Thanks for hearing me out, and thanks for the graphics again!

    ReplyDelete
  27. Danc, thanks for the SVG!!! You rock even more!!! :)

    ReplyDelete
  28. Hi, I'm currently trying to import the file into expression design 2, but I can't find a way to get graphics into it. Has anybody found a way or know a way to get the data in?

    ReplyDelete
  29. Great graphics set. Any chance of saving it in the Flash 8 format? There are many developers who still use flash 8 and it would help your graphics spread.

    ReplyDelete
  30. Thanks for putting these together Danc. Just ignore the critics ("YOU ARE GIVING ME SOMETHING FOR FREE THAT CLEARLY TOOK A HUGE INVESTMENT OF TIME! HOW DARE YOU DON'T GIVE IT TO ME EXACTLY HOW I WANT IT"). Seriously people, get over yourselves. Too much of that crap and Danc is just gonna say "screw this, these ingrates don't deserve squat". I, for one, don't want that to happen. Thanks for your hard work and awesome artwork you've provided over the years.

    ReplyDelete
  31. David: I don't see anyone making demands; stop exaggerating. Some of us have merely requested these fantastic images be made available in an open format so that everyone has the opportunity to use them.

    ReplyDelete
  32. I do agree that jumping things like .ai to .svg files is kind of like telling a programmer switching operating systems and platforms, but it happens. I prefer Linux as my platform, but my job requires me to use Windows. Outside of work though, I use Windows maybe an hour every other month at the most. Just the nature of things.

    Now, what would be cool is someone would just create a place for your graphics. A clearing house of some sort where others can upload converted versions of your file or maybe even try to expand and add more elements/images and let the community rate them against their Danc-ness.

    I know with my efforts with CuteGod, I wanted to add a few more elements to the game. I liked having plants on the water and the like and I thought animation looked a bit nicer on the screen. But, it didn't look as good as yours. Imagine that. :) In the process of doing that, I converted your PlanetCute images to SVG because I happen to prefer it. While I was doing it, I was half wondering about creating a style repository to let others add more things. Then, I figured it wasn't that important in general.

    But, it might handle the discussions of SVG and other file formats, or even expanding on your elements. Create a community and a repository for images and let others upload and get them rated?

    Just an idea.

    ReplyDelete
  33. Extra cute, as the previous ones ! Thx for your work !

    ReplyDelete
  34. Thanks Danc!

    Hey, do you think you could also save it as Illustrator CS3? I only have CS3 and don't plan to upgrade any time soon since I don't need 4, but it won't open the newer .ai file correctly. Thanks!

    ReplyDelete
  35. D. Moonfire: Now, what would be cool is someone would just create a place for your graphics. A clearing house of some sort where others can upload converted versions of your file or maybe even try to expand and add more elements/images and let the community rate them against their Danc-ness.

    Really good idea! I could and would work on this!

    ReplyDelete
  36. Very pretty, Danc, me old nibs. One heads up: opening the .ai in CS4 on the Mac and zooming in real close like shows all shadows in glorious smooth gradient but the pine tree's. It's shadow is a feast of mighty throwback pixelation.

    (To be clear, I'm referring to the object named "Icon Wood" in your ridiculously well-named array.)

    Which, upon further spelunking, seems technically appropriate as it happens to be implemented as an image. Just seemed surprisingly out of place in the land of near-infinite precision.

    ReplyDelete
  37. I love the pictures but would really like them as seperate pngs, seperate svgs would even be good. You said about your previous graphics that "They were in a format that wasn't readily accessible to most users", but that is true currently with them only in vector formats, it pretty much limits us to flash, especially as four out of the five versions of this are in adobe formats.

    Also the svg doesn't work properly for me, it won't open with paths included in GIMP, and when I tried to open it in firefox, firefox crashed.

    I believe having each image available as a seperate svg would be best since there are svg libraries for most languages we could use, and I don't understand how you're supposed to get the seperate images from the composite.

    ReplyDelete
  38. I love the graphics, and plan on using them for a turn-based strategy game I'm developing. Any idea when the characters will be up? I can use the ones from Planet Cute, but I'd really like them in .ai or .fla format where I can edit them with Flash.

    Thanks a lot for your great work!

    ReplyDelete
  39. Thank you so much! I can do dialogue like nobody's business, but I can't draw to save my life, so I'm thrilled to see your graphics. I greatly appreciate your kindness and generosity.

    ReplyDelete
  40. Great work,

    Awesome graphics to kickstart one of my flash game ideas.

    I'll keep you posted really soon.

    Just a heads up, and congrats on the brilliant work, mate.

    ReplyDelete
  41. Hey thanks a lot for these. These will hopefully be useful in a future project for prototyping. Stumbled on to this while looking for graphics to prototype a 2D side scroller though so if you ever get a wild hair to do that style I am sure there are plenty of people who would love you for it.

    ReplyDelete
  42. Great set thanks.
    Could you please consider providing in XAML format

    ReplyDelete
  43. Just wanted to say thanks for the graphics. I haven't even looked at the zip file yet and there's a good chance I won't even use them but it's one less excuse I have for not getting certain projects to at least prototype stage. The world might not revolve around people like you but you do help it spin just that little bit faster.

    ReplyDelete
  44. These are amazing. I'm so glad I found your site. I would literally murder for some wall tiles. ;)

    ReplyDelete
  45. What amazing your artwork is ... and you too, Dan !
    ^^

    ReplyDelete
  46. Hi there!

    I just bumped into this blog, and there's quite a few interesting this around there!

    I was wondering could you provide the resources for SmallWorld in XAML format? Haven't seen XAML resources around much, but I saw you did just that for PlanetCute, and I've found it quite neat to integrate :)

    Cheers!

    ReplyDelete
  47. Hi dan,

    Great blog and gorgeous artwork, we've referenced your work/site in our own blog: http://www.wildbunny.co.uk/blog/

    :)

    Cheers, Paul.

    ReplyDelete
  48. your graphics are amazing! (: are there characters that will fit this world? you seem to mention it in your blog but i havent seen them around.. would love to see them! (:

    ReplyDelete
  49. I haven't quite figured my way around yet, but I've been here long enough to see that you are one hell of a guy, Dan, if I may say so. I think it's pretty incredible that you give your time to help out the gaming community with graphics like you do.. and even just your tutorials. I stumbled on this site while doing a search for how-tos on creating sprites. A group of friends and I hope to make our own games one day, and to have resources like this.. wow, I can't even begin to say how much it means. I'm sure you've heard many an accolade by now though.

    ReplyDelete
  50. The article mentions png updates, but I did not notice any pngs in the zip file. What am I missing?

    ReplyDelete
  51. I just ran across this sprite mapping too. seem a good fit for this.

    http://www.spritecow.com/

    ReplyDelete
  52. love the graphics... i'll surely be making something with them. I'll put you in the credits for sure!

    Thanks!

    ReplyDelete