DIY Unit Graphics

[cybertuna]

One suggestion on this front:

I was at one time enamored (and still am, although finding opponents is all but impossible) with a game designed by BTRC (Blacksburg Tactical Research Center, and indie game company run by Greg Porter, the creator of Macho Women with Guns, EABA, f*ck this!, along with a few other classics). The game is called Infinite Armies. It's a customizable, non-collectible card game. The concept is a customizable PDF, editable using Acrobat Reader (although it could only be printed, not saved). He uses Javascript and some fancy PDF design to make it work. It's actually a pretty ingenius idea. The game's mechanics uses ro-sham-bo (rock-scissors-paper) to determine supremecy. Some of the hotspots on the cards are clickable, changing between rock to scissors to paper back to blank with each click. Check it out!

http://www.btrc.net/html/iarmies.html

If you were interested in releasing a "custom" unit sheet, it might be cool to use a customizable PDF like this. The only problem is editing graphics to go on the cards. If you want to include images on your cards, the images have to be in PDF format, which kinda sucks if you are a PC user. Mac users (like Gary, BTW) don't have a problem, since you can easily save images to PDFs using the built-in Preview app in OSX. However, all things considered, it is a very easy way to build customizable, professional quality cards.

When I was playing actively, I built a Starship Troopers themed deck set with one deck of humans and one of bugs. It was awesome, because it was easy to build and very fun to play. Now that I'm thinking on it, I think I'm gonna have to re-build those decks and find some fresh meat...<grin>

[Curufea]

Raising a topic from the dead!

Anyhow, I've made a start on an SVG unit card.  You can find it here-


The basic premise is a machine writeable card that can be printed out to scale (hence SVG).  It will be fairly simple to create a form to customise this card to whatever stats you like.

FYI - it's 52 lines of SVG code. As Internet Explorer is not W3C compliant, you'll need to use a different browser to view it (such as Firefox) - or install the add-on to IE published by Adobe.

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--  Created by Peter Cobcroft (curufea@yahoo.com)-->
<!--  25/3/2010 -->
<svg width="3.5in" height="2.5in" xmlns="http://www.w3.org/2000/svg"
    version="1.1">
    <g id="card">
        <rect fill="#24d361" fill-rule="evenodd" fill-opacity="1" stroke="black" stroke-width="1"
            id="grass" width="3.5in" height="2.5in" x="0" y="0" ry="34.285713" rx="34.285713"/>
    </g>
    <g id="image">
        <rect fill="#34e371" fill-rule="evenodd" fill-opacity="1" id="unit" width="3.25in"
            height="2.25in" x="0.125in" y="0.125in" ry="34.285713" rx="34.285713"/>
    </g>
    <g id="statusbar">
        <rect stroke="black" stroke-width="1" fill="#e4e371" fill-rule="evenodd" fill-opacity="1"
            id="bar" width="3in" height="0.4in" x="0.25in" y="2in" ry="20" rx="20"/>
        <text x="1.6in" y="2.15in" textLength="3.25in" lengthAdjust="spacing" text-anchor="middle"
            font-family="Verdana" font-size="10" fill="black">
            <tspan font-weight="bold" fill="red">Att</tspan> (5)3/3 <tspan font-weight="bold"
                fill="red">Def</tspan> 2/1 <tspan font-weight="bold" fill="red">Rng</tspan> - <tspan
                font-weight="bold" fill="red">Mr</tspan> 12 <tspan font-weight="bold" fill="red"
                >Mv</tspan> 3.5" </text>
        <rect stroke="black" stroke-width="1" fill="#dddddd" fill-rule="evenodd" fill-opacity="1"
            id="titlebar" width="0.9in" height="0.15in" x="1.15in" y="1.89in"  />
        <text x="1.6in" y="2in" textLength="3.25in" lengthAdjust="spacing" text-anchor="middle"
            font-family="Verdana" font-size="10" fill="black">Name of Unit</text>
        <circle cx="3.1in" cy="2.125in" r="0.25in" fill="white" stroke="black" stroke-width="2"/>
    </g>
    <g id="hitpoints" stroke="black" stroke-width="1">
        <defs>
            <linearGradient id="GreenHealth" gradientTransform="rotate(90)">
                <stop offset="5%" stop-color="#6F0"/>
                <stop offset="95%" stop-color="#060"/>
            </linearGradient>
            <linearGradient id="YellowHealth" gradientTransform="rotate(90)">
                <stop offset="5%" stop-color="#FF0"/>
                <stop offset="95%" stop-color="#660"/>
            </linearGradient>
            <linearGradient id="RedHealth" gradientTransform="rotate(90)">
                <stop offset="5%" stop-color="#F00"/>
                <stop offset="95%" stop-color="#600"/>
            </linearGradient>
        </defs>
        <rect fill="url(#GreenHealth)" x="0.4in" y="2.2in" width="0.125in" height="0.125in"/>
        <rect fill="url(#YellowHealth)" x="0.6in" y="2.2in" width="0.125in" height="0.125in"/>
        <rect fill="url(#RedHealth)" x="0.8in" y="2.2in" width="0.125in" height="0.125in"/>
    </g>
    <g id="halfwaymarks" stroke="red" stroke-width="2">
        <line x1="1.75in" y1="0" x2="1.75in" y2="0.25in"/>
        <line x1="1.75in" y1="2.5in" x2="1.75in" y2="2.25in"/>
        <line x1="0" y1="1.25in" x2="0.25in" y2="1.25in"/>
        <line x1="3.5in" y1="1.25in" x2="3.25in" y2="1.25in"/>
    </g>
</svg>


[RushAss]

Great work Curufea!  A friend of mine is developing a faction and I can help him develop his cards with these.

[lazyj]

This is great. Well done! Any advice on displaying / printing multiples? Just copy / paste the same code.

[Curufea]

As it's a code, you'll need to modify where it appears on the screen for multiples.

This version shows four cards.  I've basically wrapped the original drawing with a symbol definition and then "use"d this symbol four times.  I've also extended the drawing  area of the SVG to cover the space needed (that's the <svg width="7in" height="5in" part at the beginning).

Bear with me on this, it isn't the most elegant, I only started looking at SVG yesterday.

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--  Created by Peter Cobcroft (curufea@yahoo.com)-->
<!--  25/3/2010 -->
<svg width="7in" height="5in" xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="GreenHealth" gradientTransform="rotate(90)">
            <stop offset="5%" stop-color="#6F0"/>
            <stop offset="95%" stop-color="#060"/>
        </linearGradient>
        <linearGradient id="YellowHealth" gradientTransform="rotate(90)">
            <stop offset="5%" stop-color="#FF0"/>
            <stop offset="95%" stop-color="#660"/>
        </linearGradient>
        <linearGradient id="RedHealth" gradientTransform="rotate(90)">
            <stop offset="5%" stop-color="#F00"/>
            <stop offset="95%" stop-color="#600"/>
        </linearGradient>
        <symbol id="WholeCard">
            <g id="card">
                <rect fill="#24d361" fill-rule="evenodd" fill-opacity="1" stroke="black"
                    stroke-width="1" id="grass" width="3.5in" height="2.5in" x="0" y="0"
                    ry="34.285713" rx="34.285713"/>
            </g>
            <g id="image">

                <rect fill="#34e371" fill-rule="evenodd" fill-opacity="1" id="unit" width="3.25in"
                    height="2.25in" x="0.125in" y="0.125in" ry="34.285713" rx="34.285713"/>
                <image  x="0.125in" y="0.125in" width="3.25in"
                    height="2.25in"
                    xlink:href="http://www.juniorgeneral.org/donated/krein/legionaires3.gif">
                    <title>Unit graphic</title>
                </image>
            </g>
            <g id="statusbar">
                <rect stroke="black" stroke-width="1" fill="#e4e371" fill-rule="evenodd"
                    fill-opacity="1" id="bar" width="3in" height="0.4in" x="0.25in" y="2in" ry="20"
                    rx="20"/>
                <text x="1.6in" y="2.15in" textLength="3.25in" lengthAdjust="spacing"
                    text-anchor="middle" font-family="Verdana" font-size="10" fill="black">
                    <tspan font-weight="bold" fill="red">Att</tspan> (5)3/3 <tspan
                        font-weight="bold" fill="red">Def</tspan> 2/1 <tspan font-weight="bold"
                        fill="red">Rng</tspan> - <tspan font-weight="bold" fill="red">Mr</tspan> 12
                        <tspan font-weight="bold" fill="red">Mv</tspan> 3.5" </text>
                <rect stroke="black" stroke-width="1" fill="#dddddd" fill-rule="evenodd"
                    fill-opacity="1" id="titlebar" width="0.9in" height="0.15in" x="1.15in"
                    y="1.89in"/>
                <text x="1.6in" y="2in" textLength="3.25in" lengthAdjust="spacing"
                    text-anchor="middle" font-family="Verdana" font-size="10" fill="black">Name of
                    Unit</text>
                <circle cx="3.1in" cy="2.125in" r="0.25in" fill="white" stroke="black"
                    stroke-width="2"/>
            </g>
            <g id="hitpoints" stroke="black" stroke-width="1">              
                <rect fill="url(#GreenHealth)" x="0.4in" y="2.2in" width="0.125in" height="0.125in"/>
                <rect fill="url(#YellowHealth)" x="0.6in" y="2.2in" width="0.125in" height="0.125in"/>
                <rect fill="url(#RedHealth)" x="0.8in" y="2.2in" width="0.125in" height="0.125in"/>
            </g>
            <g id="halfwaymarks" stroke="red" stroke-width="2">
                <line x1="1.75in" y1="0" x2="1.75in" y2="0.25in"/>
                <line x1="1.75in" y1="2.5in" x2="1.75in" y2="2.25in"/>
                <line x1="0" y1="1.25in" x2="0.25in" y2="1.25in"/>
                <line x1="3.5in" y1="1.25in" x2="3.25in" y2="1.25in"/>
            </g>
        </symbol>
    </defs>
   
    <use x="0" y="0" xlink:href="#WholeCard"/>
    <use x="3.5in" y="0" xlink:href="#WholeCard"/>
    <use x="0" y="2.5in" xlink:href="#WholeCard"/>
    <use x="3.5in" y="2.5in" xlink:href="#WholeCard"/>
</svg>



If you want to add unit graphics to the card, in the <g id="image"> area, after the <rect> tag that draws the lighter green rounded rectangle, add the following code-

Code: [Select]

                <image  x="0.125in" y="0.125in" width="3.25in"
                    height="2.25in"
                    xlink:href="http://www.juniorgeneral.org/donated/krein/legionaires3.gif">
                    <title>Unit graphic</title>
                </image>

Replace the url with whatever the image's url is.

Here's a demo

[leemie]

This is my template for new units. I just open it in paint and add the text and picture to the front and back. Copy and paste health boxes. The actual soldiers or creatures are more difficult; but if you have minis, or just take overhead screen shots of units in games like age of empires then it works out.

[gull2112]

This'll be great!

[leemie]

here is a unit i made

[elgin_j]

here is a unit i made

Nicely done.

[leemie]

Thanks.

[gull2112]

Very cool! Nothing like an example of usefull something could ultimately be!

[BubblePig]

Great stuff! Later this week I will probably try these to make some playtest proxies and also proxies for Lowblood Levies and Scutarii.

[leemie]

I also made command card templates and generic versions for people who are making their own armies.

http://s1105.photobucket.com/albums/h359/leemie0704/generic%20cc/

http://s1105.photobucket.com/albums/h359/leemie0704/

http://s1105.photobucket.com/albums/h359/leemie0704/battleground%20nture%20faction/

[Torrg]

I also made command card templates and generic versions for people who are making their own armies.

WOW Lemmie
You have some pretty MAD skills, and imagination!!! Your Hired. How did you make these in what program? Did you use the code from Curufea?

[leemie]

No I just scanned in a card and separated it into layers using paint.net which is a free downloadable program. I just tried to upload the template but it is too large a file for the forum.