Author Topic: DIY Unit Graphics  (Read 25227 times)

cybertuna

  • Full Member
  • ***
  • Posts: 145
Re: DIY Unit Graphics
« Reply #30 on: March 07, 2008, 09:56:07 AM »
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

  • Full Member
  • ***
  • Posts: 113
    • Curufea's Uber Website
Re: DIY Unit Graphics
« Reply #31 on: March 24, 2010, 07:04:33 PM »
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>
« Last Edit: March 24, 2010, 07:27:41 PM by Curufea »
im in ur boardz addin content

RushAss

  • Administrator
  • Hero Member
  • *****
  • Posts: 3837
  • Eat your beets - Recycle!
    • My Facebook.  Where you can see my, uh... face.
Re: DIY Unit Graphics
« Reply #32 on: March 25, 2010, 09:55:21 AM »
Great work Curufea!  A friend of mine is developing a faction and I can help him develop his cards with these.
"You can never break the chain - There is never love without pain
A gentle hand, a secret touch on the heart
A healing hand, as secret touch on the heart"
-Rush, Secret Touch

lazyj

  • Playtester
  • Hero Member
  • *****
  • Posts: 839
Re: DIY Unit Graphics
« Reply #33 on: March 25, 2010, 02:12:37 PM »
This is great. Well done! Any advice on displaying / printing multiples? Just copy / paste the same code.

Curufea

  • Full Member
  • ***
  • Posts: 113
    • Curufea's Uber Website
Re: DIY Unit Graphics
« Reply #34 on: March 25, 2010, 09:52:16 PM »
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
« Last Edit: March 25, 2010, 10:10:28 PM by Curufea »
im in ur boardz addin content

leemie

  • Playtester
  • Sr. Member
  • *****
  • Posts: 298
    • my fan made stuff
Re: DIY Unit Graphics
« Reply #35 on: August 14, 2011, 03:17:42 AM »



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

  • Administrator
  • Hero Member
  • *****
  • Posts: 4197
  • From the RUSH faction
    • Meditations on Brain Injury
Re: DIY Unit Graphics
« Reply #36 on: August 14, 2011, 05:35:03 PM »
This'll be great! :)
"Rules are only as good as the book they're bound in."
http://gullsbattleground.blogspot.com/

leemie

  • Playtester
  • Sr. Member
  • *****
  • Posts: 298
    • my fan made stuff
Re: DIY Unit Graphics
« Reply #37 on: August 14, 2011, 11:09:17 PM »


here is a unit i made

elgin_j

  • Playtester
  • Hero Member
  • *****
  • Posts: 661
Re: DIY Unit Graphics
« Reply #38 on: August 15, 2011, 04:08:53 AM »
toodle pip

leemie

  • Playtester
  • Sr. Member
  • *****
  • Posts: 298
    • my fan made stuff
Re: DIY Unit Graphics
« Reply #39 on: August 15, 2011, 01:10:27 PM »
Thanks.

gull2112

  • Administrator
  • Hero Member
  • *****
  • Posts: 4197
  • From the RUSH faction
    • Meditations on Brain Injury
Re: DIY Unit Graphics
« Reply #40 on: August 15, 2011, 05:02:09 PM »
Very cool! Nothing like an example of usefull something could ultimately be!
"Rules are only as good as the book they're bound in."
http://gullsbattleground.blogspot.com/

BubblePig

  • Guest
Re: DIY Unit Graphics
« Reply #41 on: August 16, 2011, 04:07:41 PM »
Great stuff! Later this week I will probably try these to make some playtest proxies and also proxies for Lowblood Levies and Scutarii.

leemie

  • Playtester
  • Sr. Member
  • *****
  • Posts: 298
    • my fan made stuff
Re: DIY Unit Graphics
« Reply #42 on: August 18, 2011, 01:05:57 PM »

Torrg

  • Playtester
  • Sr. Member
  • *****
  • Posts: 328
Re: DIY Unit Graphics
« Reply #43 on: August 18, 2011, 10:21:52 PM »
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?
An armed society is a polite society. Manners are good when one may have to back up his acts with his life.
Robert A. Heinlein

leemie

  • Playtester
  • Sr. Member
  • *****
  • Posts: 298
    • my fan made stuff
Re: DIY Unit Graphics
« Reply #44 on: August 19, 2011, 03:41:44 PM »
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.