Have you ever wanted to create your TCG, but struggled with coming up with ideas for cards? Fear no more, this tool will help you in seconds and provide dozens of options for your inspiration. [Best experience in Fullscreen mode]

The Concept

The goal was to design a generator where users could create a fantasy card set with random attributes but still have some control over the card's appearance and characteristics through slider-based inputs. Think of this as a tool for generating cards similar to those in collectible card games (like Magic: The Gathering or Hearthstone). In a blog post I've covered some key concepts, but the project is quite big so feel free to check out the full code. Here's a github project and codepen page.

How to Use the Random TCG Cards Generator

1. Open the card generator interface.
2. Adjust the sliders to control different visual and thematic elements of your cards, such as:
   • Color Palette: Shift from bright to dark colors.
   • Realism vs. Cartoony: Toggle between realistic or cartoonish aesthetics.
   • Technology vs. Nature: Balance the look between technology-driven or nature-inspired themes.
   • Epicness: Define the scale of the events, from minor to epic.
3. You can choose how many cards you want to create (it's 240 by default and 300 is a max).
4. Click the "Generate Card Set" button to create a new set of cards based on your selected parameters. 
5. Once the cards are generated, you can view and filter them by type (creature, spell, event, item) or by rarity (common, rare, epic, legendary).

Example of Generated Cards

Here’s an example of what the generated cards might look like based on your slider settings:

Known Issues

1. Styles are not optimal in non-fullscreen mode on itch.io.
2. Actually instead of grey circles there should be another mask image, that is also chosen based on sliders parameters. Works in another prototype on codepen.
3. Some tooltips are showing missdirectional information.
4. Some names and descriptions are crazy as hell
5. Sword, blade. and some other icons don't look like a proper sword or blade - I can't fix it while on free Font Awesome subscription.

What's next?

I had an idea of exporting cards to XML, but since image generation was implemented it broke. It could enable sharing the results and saving them, as well as a possibility to create descriptions for artists or AI generators.

I have a codepen concept of booster opening mechanic, but it worked with XML, so it's also broken. I wanted to implement mechanic of opening 1 booster, a pack of boosters and a display of boosters.

I wanted to add pagination, so you see a limited amount of cards when you generate entire bunch.

Add generatable card stats and order for numbers as well as "Set name".

I also want to create Full Art. I have a prototype on codepen for it too.

If you have any feedback or suggestions - feel free to leave a comment.