Skip to Content

Rapid prototyping tool

6 replies [Last post]
zmobie
zmobie's picture
Offline
Joined: 11/19/2008

I made a tool for generating prototype cards for tabletop games.

https://github.com/zmobie/PrototypeCard

My design process includes a lot of spreadsheets. I make a spreadsheet for every card game I've ever created. The problem is that I have all these spreadsheets, and don't have an easy way to take the data from a spreadsheet, and put it in a page layout program. I've tried just doing it manually, but editing layers of gimp documents to change a 2 to a 3 and the wording of one card is a total nightmare. Any resistance I have to making a new set of cards will hinder my design process, so I needed a better solution.

I know there is some neat functionality with Adobe InDesign, but I'm not a designer or a student, so it's not economically feasible for me to buy a license for that program... so I figured... I'm a programmer, I could probably whip something up for myself.

I made a simple local html doc with some javascript that can import a CSV file, and a CSS file and generate pages of cards for you. If you use spreadsheets for cards (and don't mind learning a bit of CSS), this tool should be useful for you.

Today I printed cards for a game I came up with, played the game, made a bunch of changes during playtesting, edited my spreadsheet, and printed new cards for the next version of the game within an hour.

Instructions: Go to the above link and click "Download zip", then unizp the folder. Then you should be able to find an index.html in there somewhere... Open that up. Then you need your CSV file. Use any spreadsheet editing software and find the option to export your spreadsheet as a CSV file. (note: read the README for some formatting hints for your spreadsheet. You need to have row one be a list of all the fields of your cards. Type, Number, Damage, etc... all the other rows are the specific cards)

Then, after you open the CSV file in the little app I made, you can style it using the in-browser inspector. I use chrome and liberally use the right click -> inspect element tool. You can then add styles to your card elements. (Tip: the fields of your cards, Type, Number, Damage, etc, are the classes of the divs used in the individual cards. So adding a style to .Type will do the trick)

After you get it looking how you want it, you can save the stylesheet to its own file somewhere, and load it up again next time you want to generate some cards.

I hope someone else finds this useful. It's in a pretty rough state right now, and if anyone wants to help me work on it, please clone it on github and send me a pull request! Thanks!

zmobie
zmobie's picture
Offline
Joined: 11/19/2008
Example

Updated the github repo with an example csv and css file.

entwater
Offline
Joined: 10/12/2013
sweet idea

Interesting... I'll have a look at it. I've been banging my head against the prototyping wall for cards, and this might hit the sweet spot. It's hard to keep the creative juices flowing when I have to click around on a computer for hours.

JewellGames
JewellGames's picture
Offline
Joined: 06/03/2012
Easier interface?

Is there a way to host the index.html page instead of us having to download the zip and fend for ourselves? I want a tool were we just have to link the csv and it immediately creates the deck. Also I would want some functionality with the deck once created.

My friend (grumpywookiee) and I have been working on customroll for dice and planned to do something similar with cards and csv files called customshuffle.

With customroll you just add the full link of your dice image (72x432 for a d6 since each face represents 72x72 of that image) the dice size of that image (d6 for our example) and number of dice you want created for that image all separated by pipes in a web link.

So for example, goto the customroll site then copy this and add it to the web address:
?module=http://www.nostalgiantgames.com/roll/img/dungeondice.jpg|d6|3 and it instantly creates 3 dice based on your image that you can roll and manipulate. I would want the same exact thing for cards if possible.

*You can hover your mouse over one of the mini icons in the dice pool for 3 seconds to display the full 72x432 image by the way.

zmobie
zmobie's picture
Offline
Joined: 11/19/2008
JewellGames wrote:Is there a

JewellGames wrote:
Is there a way to host the index.html page instead of us having to download the zip and fend for ourselves? I want a tool were we just have to link the csv and it immediately creates the deck. Also I would want some functionality with the deck once created.

I can probably work on a hosted version.

JewellGames wrote:
My friend (grumpywookiee) and I have been working on customroll for dice and planned to do something similar with cards and csv files called customshuffle.

With customroll you just add the full link of your dice image (72x432 for a d6 since each face represents 72x72 of that image) the dice size of that image (d6 for our example) and number of dice you want created for that image all separated by pipes in a web link.

So for example, goto the customroll site then copy this and add it to the web address:
?module=http://www.nostalgiantgames.com/roll/img/dungeondice.jpg|d6|3 and it instantly creates 3 dice based on your image that you can roll and manipulate. I would want the same exact thing for cards if possible.

*You can hover your mouse over one of the mini icons in the dice pool for 3 seconds to display the full 72x432 image by the way.

I eventually want to roll in some kind of card shuffling and manipulation at some point because I think a lot of people would use that... that said, I don't think I would use it that much myself. I really prefer to make tabletop games by printing and playing games at the tabletop, so this is currently geared for that.

Another thing that'd really make this useful for me would be to make it a chrome plugin that can somehow hookup to the google drive api, so all you have to do is click one button and it generates cards for you. I think that would be pretty nice.

fredrikvestin
fredrikvestin's picture
Offline
Joined: 04/03/2013
I use this

I'm using this as we speak.

I'm a programmer as well, if you add some issues in github I can look into it.

zmobie
zmobie's picture
Offline
Joined: 11/19/2008
Nice!

Nice! I hope you find it useful. I just added 2 quick issues that I haven't had a whole lot of time to get to, that I've noticed would help me.

Syndicate content


forum | by Dr. Radut