Batman Miniatures Game Card Creator


The Batman Miniatures Game uses unique character cards. I decided that I wanted to be able to carry the cards in standard card cases and card binders. So I went ahead and designed my own card template that could be printed as a regular-sized card. The idea is that, rather than lining up counters on the card, you line them up alongside it. All the information that you need while playing is on one side, along with a small picture for identification. The other side has a large picture and the stats you need while building your army.

Pretty much everything in the card is editable by simply clicking on it. I have embedded a base64 image as a texture, but this can be changed by clicking on the space above the Alias field on each card (please be patient; because of the embedded image data the dialogue can take several seconds to show). The texture can be moved, scaled and flipped by clicking on the black borders. The images on each side can be set by clicking on the blank space and pasting an image address embedded base64 image data. The image can be manipulated by clicking on the area around it. For both the background textures and the images, clicking on the corners of the surrounding area will scale and flip the image (the bottom left corner allows you to specify the exact position and size), while the long areas between the corners will move the image.

The cards can be rotated to make it easier to take screenshots by clicking on the bottom right corner of the textured area (inside the black borders). I recommend taking screenshots at either 100%, 200% or 300% zoom etc, because small errors in alignment can occur at other zoom levels. To save the cards as a stand-alone html file that you can view and continue to edit later, click on the small area at the very bottom of the second card (just above the black border) or on the save button under the cards. Again, because of embedded image data the dialogue can take a long time to open. Once the dialogue is opened, save the text in the text field then paste it in a new text file. Change that file's extension to HTML and you will be able to open it in a browser.

ALTERNATELY use the "open in new window" button. This will open the final HTML file in a new window. This will make it easier to print or save to a PDF. Depending on the browser, you may be able to save the HTML page using file-save. If not, you can probably still copy the HTML using "view page source" or "inspect element" (depending again on your browser), which you can manually copy to an empty text file and save with the extension ".html".

To convert an image to base64, simply find an online converter (search for "base64 image converter" and you will find plenty), follow the instuctions, and paste the image data in the dialogue box that appears when you click above the Alias field or the dialogue box that appears when you click on an image area. Note that embedding image data that way creates a stand-alone file that can be viewed offline, but the file is obviously much larger than if you just link to images.

Here is a sample card to demonstrate where I see everything going: