Danc’s Miraculously Flexible Game Prototyping Graphics for Small Worlds

comments 55
Ported Posts / Uncategorized
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/


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.

    Like

  2. Awesome stuff again, can\’t wait for the plain old PNGs!Thanks for this and all your other hard work!Kev

    Like

  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 πŸ˜› )Kind Regards,Janne Siera

    Like

  4. Anonymous says

    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

    Like

  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

    Like

  6. Open source graphics locked inside proprietary file formats?Thankfully Inkscape was able to open the .ai and save it as an .svg.

    Like

  7. 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 careDanc.

    Like

  8. 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.

    Like

  9. Re: SVGAdobe 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. πŸ™‚

    Like

  10. 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

    Like

  11. 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.

    Like

  12. 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…

    Like

  13. 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..

    Like

  14. 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 πŸ™‚

    Like

  15. 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 careDanc.

    Like

  16. 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.

    Like

  17. @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.

    Like

  18. @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 careDanc.

    Like

  19. 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!

    Like

  20. Anonymous says

    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?

    Like

  21. 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.

    Like

  22. 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.

    Like

  23. 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.

    Like

  24. 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.

    Like

  25. 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!

    Like

  26. 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!

    Like

  27. 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.

    Like

  28. 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.

    Like

  29. 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!

    Like

  30. Anonymous says

    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.

    Like

  31. 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.

    Like

  32. 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.

    Like

  33. Anonymous says

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

    Like

  34. 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.

    Like

  35. 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!

    Like

  36. 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! (:

    Like

  37. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s