Page 1 of 1

Generating shadowed/outlined glyphs with a font

Posted: 2011-01-25T01:39:29-07:00
by hagabaka
I'm generating "font textures" for a game, which are images containing rendered characters and a text files describing the rectangles of each character in the image. The game requires a plain font, and a shadowed and outlined font. To be able to get the size of each character, I'm generating an image for each character, and montaging them into the textures. The following are the commands I'm using:

Code: Select all

# Plain character
convert -background transparent -fill '#f5f5f5' label:'c' c.png

# Outlined character
convert -size 300x300 xc:transparent \
        -fill '#550b0b' -annotate +51+49 'c' \
                        -annotate +49+51 'c' \
                        -annotate +51+51 'c' \
                        -annotate +49+49 'c' \
        -fill '#e9f9f9' -annotate +50+50 'c' \
        -trim c-outlined.png

# Shadowed character
convert -size 300x300 xc:transparent \
        -font 'font' -pointsize 12 \
        -fill '#000000' -annotate +50+51 'c' \
        -fill '#ffffff' -annotate +50+50 'c' \
        -trim c.shadowed.png

# Montage into texture
montage -label '' -background transparent -gravity SouthWest \
        -geometry '1x1+0+0<' ?.png texture.png
The outline and shadow characters are not aligned correctly since I'm just trimming their images, while the plain font does not have this problem. Would generating the outline and shadow images using label: instead of -annotate be a good solution? How can I do it without writing multiple images for each character?

Re: Generating shadowed/outlined glyphs with a font

Posted: 2011-01-25T10:36:48-07:00
by hagabaka
Using three commands like this works for the outline font:

Code: Select all

character='C'
convert -background transparent \
        -fill '#550b0b' label:"$character" outline.png
convert -background transparent \
        -fill '#e9f9f9' label:"$character" body.png      
convert -background transparent \
        -page -1-1 outline.png \
        -page -1+1 outline.png \
        -page +1+1 outline.png \
        -page +1-1 outline.png \
        -page +0+0 body.png \
        -layers merge +repage result.png
How can I make it avoid writing the intermediate outline.png and body.png and/or simplify the commands? I need to do this for over 1000 characters. I think I can use label: directly in the merging command, but I can't set different fill colors for each label, can I?

Re: Generating shadowed/outlined glyphs with a font

Posted: 2011-01-25T10:50:06-07:00
by fmw42
See parenthesis and clone processing at http://www.imagemagick.org/Usage/basics/#image_seq

try this


convert \( -background transparent -fill '#550b0b' label:"$character" \) \
\( -background transparent -fill '#e9f9f9' label:"$character" \) \
-background transparent \
-page -1-1 -clone 0 \
-page -1+1 -clone 0 \
-page +1+1 -clone 0 \
-page +1-1 -clone 0 \
-page +0+0 -clone 1 \
-delete 0,1 -layers merge +repage result2.png

Re: Generating shadowed/outlined glyphs with a font

Posted: 2011-01-25T15:53:00-07:00
by anthony
Imagemagick allows you to stroke fonts!!!

However for many different methods look at IM Examples, Compound Fonts...
http://www.imagemagick.org/Usage/fonts/#stroke

Re: Generating shadowed/outlined glyphs with a font

Posted: 2011-01-25T20:55:30-07:00
by hagabaka
anthony wrote:Imagemagick allows you to stroke fonts!!!

However for many different methods look at IM Examples, Compound Fonts...
http://www.imagemagick.org/Usage/fonts/#stroke
Yeah, I tried the -stroke option, but the result was ugly for Chinese/Japanese text. That page also says the method of shifted copies is better for fonts with very sharp edges.
fmw42 wrote:See parenthesis and clone processing at http://www.imagemagick.org/Usage/basics/#image_seq
try this
convert \( -background transparent -fill '#550b0b' label:"$character" \) \
\( -background transparent -fill '#e9f9f9' label:"$character" \) \
-background transparent \
-page -1-1 -clone 0 \
-page -1+1 -clone 0 \
-page +1+1 -clone 0 \
-page +1-1 -clone 0 \
-page +0+0 -clone 1 \
-delete 0,1 -layers merge +repage result2.png
This works perfectly, and now I think I finally understand how to use the parentheses. Thanks!