Card Creator

(Name)
(Description)
(Flavour text)
1
2
3
4
5
6
1
2
3
4
5
6
(Name)
CMD
10
ARM
10
DEF
10
RAT
10
MAT
10
STR
10
SPD
10


L
(Weapon)
POW
10
AOE
-
ROF
1
RNG
10


R
(Weapon)
POW
10
AOE
-
ROF
1
RNG
10


L
(Weapon)
POW
10
AOE
-
ROF
1
RNG
10


R
(Weapon)
POW
10
AOE
-
ROF
1
RNG
10


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Card Generator created by Soul Samurai. No copyright infringement intended.
(Name)
Card Generator created by Soul Samurai. No copyright infringement intended.

(Name)
(Unique Ability)
Card Generator created by Soul Samurai. No copyright infringement intended.
(Name)
SPELLS
COST
RNG
AOE
POW
UP
OFF

(SPELL NAME)
-
-
-
-
NO
NO

(Details)













Card Generator created by Soul Samurai. No copyright infringement intended.


Suggested Colours:


Icons:
Thanks to MuseOnMinis for these icons. To use, right-click on an icon and select "copy link location" or whatever your browser's equivalent is, then click on the appropriate location on the the card and paste the URL into the dialogue box.



And here's some of my own:


You can save and load the card in your browser (HTML5 only):

Alternately you can generate a string containing all the card attributes which you can save in a text file and then load back into the system later:

Or you can copy the entire HTML string, paste it in a new file and save it as an HTML file. This will allow you to open it later in any browser, or paste it back here to continue to edit:

You can also rotate the cards to make it easier to take zoomed in screenshots:



Introduction
I wrote this card creator in HTML and Javascript for creating homebrew characters for tabletop games. It has some issues, the biggest one being that you're dependent on screenshots or your browser's html-to-pdf conversion ability in order to actually save the card. Still, I think it's pretty good overall.

Instructions
To add or edit text, just click on a text area or label. It actually just inserts html, so you can use html tags to insert bold, underlined, or italic text and newlines, and can even insert icons using the "img" tag. Be careful though, as it's easy to break the document if you have a stray brace lying around.

You can add icons or pictures by clicking on a circular area (except the top right circle, which is for things like "mana" stats) and specifying a URL. If you click on an icon circle but don't give it a URL, the circle will disappear, but you can still click on the same space to add an icon later. If you save then load the card data it will automatically hide all empty icons, so that's a way to avoid doing it manually.

You can hide almost any element on the front card by clicking the empty space to the left or right. For example, you can hide either damage grid by clicking on the few pixels to the left of each.

You can block out lifebar boxes by clicking on them, and damage grid boxes by clicking and entering "-" as the text. The small boxes underneath the lifebar can be clicked on to add text, and expand as needed. Each one can be hidden by clicking on the area to the right of it. There's room on the spell card for 7 spells, you just have to click around in order to set them.

Finally, you can manually set the background colour of each card by clicking on the disclaimer box, or set an image by clicking on the small area above the name box (at the very top of the card).

You can save the card data in your browser using that save button, so long as your browser supports HTML5. Use the "load" button to reload the card. You can only save one card at a time this way, however you can also generate a text string containing all the card data, which you can save in a text file and reload as needed, using the "Get" and "Set" button.

Known Bugs
Getting this thing into Blogger was harder than I expected. In the end I managed it, but for some reason trying to set a large image doesn't work very well. Stick to smaller images if you have trouble.

I've tried to explicitly set most element properties so that the cards will look right in different browsers, but I haven't exactly tested it extensively, so I make no promises. If you're going to take a screenshot, I recommend doing it in a multiple of 100% zoom (so at 100%, 200%, or 300%), as elements can get a little out of alignment at other zoom levels.

No comments:

Post a Comment