NOGDUS

Articles, Tutorials, and other things. => Game Artwork => Topic started by: Richard Marks on November 08, 2008, 11:10:35 PM



Title: Creating Game Artwork with ImageMagick
Post by: Richard Marks on November 08, 2008, 11:10:35 PM
This is something I just figured out how to do, and I'm sharing it with you. (Please excuse the rhyming, I'm short on timing..gah I did it again.) ;D

Okay, first let me show you the final image:

(http://www.ccpssolutions.com/storage/richard/imagick/title.png)

Not a bad start for some cool game right? ;D
Okay, here is the cool part. I didn't draw any of it with any tools like GIMP, PhotoShop, etc.
I used a killer command-line program called ImageMagick which you should have guessed from the title of this post.

Okay, so lets get down to business.
First, we need to create the background image.
This is a two step process.

Code:
$ convert -size 640x480 plasma:fractal bg.png

Results in:

(http://www.ccpssolutions.com/storage/richard/imagick/bg.png)

Code:
$ convert bg.png -blur 0x5 -normalize -fx g -sigmoidal-contrast 15x50% -solarize 50% bg2.png

This gives us:

(http://www.ccpssolutions.com/storage/richard/imagick/bg2.png)

Next, we add our title text to the image:

Code:
$ convert bg2.png -font DejaVu-Sans-Condensed-Bold -pointsize 72 -draw "gravity North fill grey10 text 0,70 'Game Title' fill white text 8,78 'Game Title'" temp.png

And we get this:

(http://www.ccpssolutions.com/storage/richard/imagick/temp.png)

Last we add the sub-texts to the image to finish the image.

Code:
$ convert temp.png -font DejaVu-Sans-Condensed-Bold -pointsize 24 -draw "gravity South fill grey10 text 0,90 'Press Spacebar to Play' fill white text 8,98 'Press Spacebar to Play'" -draw "gravity South fill grey10 text 0,140 'Press ESC to Quit' fill white text 8,148 'Press ESC to Quit'" title.png

The final image can be seen at the top of this post.

To use the image in my game engine (which is based on Allegro and likes Windows BMP files)

I use these two commands:

Code:
$ pngtopnm title.png > title.pnm
$ convert title.pnm title.bmp

And there we go!
If you want to know how it all works in more detail, read the ImageMagick documentation.
Thats what I did. ;D

Oh yeah, and if you want to just clean up afterwards and not keep the intermediate files:

Code:
$ rm -f bg.png bg2.png temp.png title.png title.pnm

Have fun! 8)


Title: Re: Creating Game Artwork with ImageMagick
Post by: WhoNeedszzz on November 08, 2008, 11:17:36 PM
Wow! :o That's quite amazing. I'll be sure to mess around with it.


Title: Re: Creating Game Artwork with ImageMagick
Post by: WhoNeedszzz on November 08, 2008, 11:39:08 PM
Here's my rendition of this awesomeness:

Code:
$ convert -size 1400x900 plasma:fractal fractal-t.png;convert fractal-t.png -blur 0x5 -normalize -sigmoidal-contrast 15x50% -solarize 50% fractal.png

(http://img224.imageshack.us/img224/4917/fractalvu5.png)


Title: Re: Creating Game Artwork with ImageMagick
Post by: Richard Marks on November 09, 2008, 11:14:27 AM
Here is a more complicated game screen. A credits screen.

(http://www.ccpssolutions.com/storage/richard/imagick/credits.png)

And here is the command-line that I used (its very long, so it is broken into several lines using the \ character.
This is interpreted as a single command-string.
Notice that there is only a single $ linux prompt character.

Code:
$ convert -size 640x480 plasma:fractal png:- | convert png:- -blur 0x5 -normalize -fx g -sigmoidal-contrast 15x50% -solarize 50% png:-| \
convert png:- -font DejaVu-Sans-Condensed-Bold -pointsize 72 \
-draw "gravity North fill grey10 text 0,70 'Game Title' fill white text 8,78 'Game Title'" png:-| \
convert png:- \
-font DejaVu-Sans-Condensed-Bold -pointsize 26 \
-draw "gravity North fill navy text 0,150 'Design and Programming' fill gold text 2,152 'Design and Programming'" \
-font DejaVu-Sans-Condensed-Bold -pointsize 20 \
-draw "gravity North fill grey10 text 0,180 'Richard Marks' fill white text 2,182 'Richard Marks'" \
-font DejaVu-Sans-Condensed-Bold -pointsize 26 \
-draw "gravity North fill navy text 0,210 'Music and Sound FX' fill gold text 2,212 'Music and Sound FX'" \
-font DejaVu-Sans-Condensed-Bold -pointsize 20 \
-draw "gravity North fill grey10 text 0,240 'Richard Marks' fill white text 2,242 'Richard Marks'" \
-font DejaVu-Sans-Condensed-Bold -pointsize 26 \
-draw "gravity North fill navy text 0,270 'Development Tools' fill gold text 2,272 'Development Tools'" \
-font DejaVu-Sans-Condensed-Bold -pointsize 16 \
-draw "gravity North fill grey10 text 0,300 'Ubuntu, GNU g++, ImageMagick, Rosegarden, ESpeak, Allegro' fill white text 2,302 'Ubuntu, GNU g++, ImageMagick, Rosegarden, ESpeak, Allegro'" \
-draw "gravity North fill grey10 text 0,360 'Copyright 2008, CCPS Solutions' fill white text 2,362 'Copyright 2008, CCPS Solutions'" \
-draw "gravity North fill grey10 text 0,380 'http://www.ccpssolutions.com' fill white text 2,382 'http://www.ccpssolutions.com'" \
credits.png

Coolness right?