X Minus 2 Customs Card Creator - VERSION 1.1 IS OUT

[Xorlof]

THE X-2 CARD CREATOR (X2CC)

The x2cc lets you create high quality card images for your Heroscape customs using your web browser. It focuses on ease-of-use and Hasbro-quality text rendering.

>>> LOAD X2CC <<<​

INSTRUCTIONS
1) Load the app by going to www.heroscapers.com/xorlof/x2cc.
2) Select the appropriate template, and the type in your card's text (overwriting the sample text).
3) Hit Save.

Text placement, sizing and flow issues are handled automatically. Right now you have to add in the miniature image and hitzone images in a separate program. (Loading and manipulating those graphics will be added to this app in a later release.)

SYSTEM REQUIREMENTS
If you use a reasonably recent browser on your phone, tablet, or computer, you're good-to-go. If you want tech support from me, use one the two most recent versions of Chrome, Firefox, or Safari running on one of the two most recent versions of Windows*, MacOS, Android, Ubuntu, or iOS. (*For support purposes, I'm pretending Windows 8 doesn't exist. I will support Windows 7 and 10. I suspect it works just fine on Windows 8, but do no testing with Windows 8.)

NOTABLE CHANGES IN THIS VERSION (1.1)
- Fixed issues with Chrome/Edge not displaying card text
- Fixed issues with Chrome/Edge not allowing the template to be changed
- Dropped support for Internet Explorer. Microsoft no longer supports it so neither do I. It might still work for now (untested).

REQUESTED FEATURES on the to-do list, in no particular order

Spoiler Alert!

- Loading miniature, hitzone graphics
- Applying miniature 'fog' effect
- Create-your-own card colors option
- Better "squeezing" for long text placed in the left attributes area
- Streamline on-screen appearance of text edit boxes
- Add distressing to border area
- Marvel, HoSS, rectangular, and AotP templates
- Considering creating new from-scratch vector-based templates?
- Loadable custom symbols
- Special power reference

CREDITS
Miniature background graphics created by @Mooseman and @robbdaman. The default card text in this preview is @IshMEL's entry in @Dr.Goomonkey's June custom contest. Valkrill logo created by @Leaf_It. (The other general logos were sourced from various Hasbro pdfs).

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

KNOWN ISSUES, ETC.
-Valkrill template uses the incorrect texture.
-See also browser and operating-specific minutiae in the spoiler.

Spoiler Alert!

Supporting many browsers and operating systems means some minor variations in look or functionality will exist; it's pretty much a given. I've worked the big issues to provide an overall very consistent experience. However, here is a catalog of the small variances that still exist:

Right now, Firefox provides the best overall experience with this app. It's super fast and the text weights are rendered consistently on all platforms, closely matching Hasbro weights.

Chrome is also great, but renders some text slightly too bold and some slightly too light (on Windows only. It's fine elsewhere). The difference is small and you probably wouldn't notice it if I didn't point it out. Even with this marginal difference, it is still more Hasbro accurate than any other card creator out there.

Safari won't actually save the card when you hit the button. Instead it will open the card in a new window and you can save it from there. This cannot be fixed without changes to the browser.

iOS edit boxes are poorly aligned with the card. This isn't a big issue because the rendered cards are aligned perfectly.

Internet Explorer and Edge support all the features, but the app has to do a lot more work behind-the-scenes because these browsers don't support certain programming features. That extra work means rendering card text and switching templates is a bit slower with these browsers, possibly taking over a second to do certain things on slower computers. Overall I think the speed is fine, but if you disagree, let me know and I will see what I can do.

Also, the exact combination of Internet Explorer 11 running on Windows 7 has a very weird bug that I had to work around in a manner that could possibly fail on occasion. I don't think it will, but if it you see text rendering with the incorrect font, when running that browser/OS combo, hit refresh and it will probably be fixed.

CHANGELOG

Version 1.1 (Oct 2022)
- fixed issues with Chrome/Edge not displaying card text
- fixed issues with Chrome/Edge not allowing the template to be changed
- dropped support for Internet Explorer

Version 1.0 (Nov 2016)
- fixed Safari save issue
- can now switch templates to create cards for any Classic 'scape general
- IE speed improvements
- misc minor bugfixes

Version 0.6 (November preview)
- added support for all major browsers, not just Chrome and Firefox
- added support for iOS, Android, and some Linux distributions
- faster card rendering
- consistent text placement no matter which browser or operating system
- regression: editing interface isn't as slick

Version 0.5 (October preview)
- initial release, supporting Firefox and Chrome only, running on Windows or Mac only, with only a Vydar template

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

Announcements archive

2016-Nov-18 - November preview released

Spoiler Alert!

I'm pleased to announce the November preview of my web-based customs card creator app. This early preview still won't let you switch templates or load miniature images, but please have a look and let me know what you think! Expect version 1.0 to hit later this month.

NOTABLE CHANGES
- works on all major browsers
- faster card rendering
- text placement is now consistent with all browsers, OSs
- kerning is "different"--better in many spots, worse in others
- regression: editing interface not as slick. (I will try to get it as nice as before, eventually.)
- (under-the-hood: moved from DOM/SVG foreignObject layout to doing it myself)

SYSTEM REQUIREMENTS
If you use a reasonably recent browser on your phone, tablet, or computer, you're good-to-go. If you want tech support for this app from me, use one the two most recent versions of Chrome, Firefox, Internet Explorer, Edge, or Safari running on one of the two most recent versions of Windows(1), MacOS, Android, Ubuntu, or iOS.

KNOWN ISSUES
- Edit boxes aren't well aligned on iOS (but the generated card has perfect alignment)
- Save button doesn't work on Safari. (Workaround: hit preview and right-click save the preview image)

ROADMAP
Major additional features are planned to roll out as follows
- Version 1 (late November): All classic scape templates
- Version 2 (December): Loading graphics
- Version 3 (January): GrabCut, FTW!
- Version 4 (Feb/Mar): Marvel, other templates
- later: collections? online sharing? keywording? Help me decide!

CREDITS
I'm still using @Mooseman's miniature background graphic. The default card text in this preview is @Ninja Status' entry in @Dr.Goomonkey's June custom contest.

FOOTNOTES/MISC
1) For support purposes, I'm pretending Windows 8 doesn't exist. I will support Windows 7 and 10.
2) Macs (any browser) have the most Hasbro-accurate font rendering. It's basically identical. Next is Firefox, IE, or Edge on Windows, and least accurate is Chrome on Windows. Really though, I've got them all very, very close to Hasbro with this version of the card maker. However, I think I can make even more progress in the future, eeking out that extra 1% on Windows to match Macs. (Side note: Chrome on Windows happens to render closest to C3V specs even though C3V doesn't render it's cards on Windows.)

2016-Oct-25 - October preview released

Spoiler Alert!

I'm working on a web app to allow people to create customs cards easily. While I don't even have "version 1" done yet, I want to post a preview so I can get feedback early while it is still easy for me to change direction if I'm headed in an unhelpful direction. Click on the link above the card (NOT the card itself) to go to the preview:

>>> Load the Preview <<<

​

While it may not be obvious on the preview page you can click on any text on the card and start typing to change it. When the card looks how you want, hit the RENDER button (and wait a couple of seconds) to create a preview image below the editing area. (It's just appended to the bottom of the page. That "preview part" is all very unrefined right now). Hit the SAVE button to save a copy to your computer.

A couple of small, but somewhat nifty things:
1) Note that the text size in the special powers area will automatically grow larger and smaller to accommodate the entered text. And it doesn't do it in just a haphazard way. It tries to be somewhat intelligent on how it's going to cram your "I wrote too many words" customs text onto the card. The smallest font size it is allowed to select is the same one used on the Omnicron Repulsors card, but it will cram the text closer together than the Repulsors if it needs to.
2) Also note that in the Move/Range/Attack/Defense area, space/spaces and die/dice is correctly applied, unlike the MSE templates (that's something that has always bugged me).

Remember this is a just a preview version. There's still work to do. An incomplete list of issues/caveats:

1) Only Windows & Mac currently supported, and only if you're using Chrome or Firefox.

Spoiler Alert!

Eventually I intend to support the most recent 2 versions of:
- Chrome on Windows, Mac, and Android
- Firefox on Windows, Mac, and Android
- Safari on Mac and iOS
- Edge on Windows
- Probably at least one browser running on the current version of vanilla Ubuntu and Mint Linux
but there's more work to do to get there.

2) Text is rendered a bit too high on Macs (e.g., things are not centered vertically when they should be)
3) This preview doesn't handle inserting the miniatures or hitzone images yet, but the text it renders should be beautiful and very accurate to Hasbro original cards.

Spoiler Alert!

When you load the preview, you'll find that the text from @Sam's Roman Zakharov already typed in as a sample. It won @Dr.Goomonkey's June contest. The image Sam provided looks like this:

If you type the text into this tool and hit "Save" you get the card shown at the top of this post. Compare the text ("embiggen" both). While Sam did a fine job creating his card, hopefully this tool's version looks more Hasbro-authentic and thus "better" to your eyes (ignoring for now that I don't have mini or hitzone images).

4) Text typed into the attributes section on the left doesn't shrink to fit the available space (type in "Common Squad" instead of "Unique Hero" to see the problem).
5) Only master/advanced side available.
6) Right now, only Vydar is selectable! (I haven't made templates for the others).
7) Rendered text should be slightly sharper than it is on Chrome.
8) Do NOT copy and paste text into the special powers area. 9 times out of 10, it'll just mess stuff up. Type the text in manually. This will be fixed later. (Remember...only a preview...)
9) So far I've done very little testing on anything other than Chrome/Windows.

So while it is still early-days, I do want feedback. Please test and report problems, suggestions, or other feedback (assuming you're using Chrome or Firefox on a Mac or PC).

Thank you: while I'm not using @Mooseman's full template, I am currently using the blanked miniature background graphic he created for Vydar.

X2CC doesn't meet your needs? Maybe MSE (Windows) or HS-Cards (macOS) will work better for you. There is also an old online card creator here. Heroscape Card Catalog used to be quite popular too.

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

For all both of you keeping an eye on the progress of this project: expect the November preview in the next few days. I've addressed most of the issues mentioned in the post above, except the preview will still only have the Vydar template, and it still only handles the text on the cards. On the plus side: Windows, Mac, phone, tablet--whatever browser you feel like using--it should all work consistently with the November preview.

Expect version 1 in late November which will have a high quality template for all of the generals of classic 'scape. Version 2 in December is when I plan to start handling the miniature and hitzone graphics, but I'm getting ahead of myself...

 

[japes]

Re: X Minus 2 Customs Card CREATOR - Preview

I'm sure there is more than two of us following along.

 

[obfuscatedhippo]

Re: X Minus 2 Customs Card CREATOR - Preview

This is great! I'll keep an eye on your progress.

I played with fields a bit and they work well. The Render button did not work but I was using IE.

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

I'm sure there is more than two of us following along.

Well, with obfuscatedhippo's post, I now have confirmation of at least two! (Admittedly, there isn't much to comment on yet.)

This is great! I'll keep an eye on your progress.

I played with fields a bit and they work well. The Render button did not work but I was using IE.

Yes, that's fixed in the next preview. I had to change how the thing works internally so that IE, Edge, and Safari are supported. That change makes my job of building templates more complicated, but I wanted support for those browsers, and it has some other benefits too.

I'll be sure to tag you when I post the preview with IE support. Officially, I plan to provide support for the two most recent versions of IE, Edge, Safari, Chrome, and Firefox. In your case (IE), that means if you have IE 10 or 11, you should probably fine. Unofficially, IE9 might work too, but IE8 definitely won't (sorry Windows XP users, but you can't still download and use Firefox or something).

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

This is great! I'll keep an eye on your progress.

I played with fields a bit and they work well. The Render button did not work but I was using IE.

And by the way, I just recalled that if you're using IE, that means it isn't showing you the correct font or font sizes in this preview! Trust me, things will look much nicer for you soon.

 

[keglo]

Re: X Minus 2 Customs Card CREATOR - Preview

Very nice! And thank you for doing this Xorlof.

Any plans for doing something similar for AotP card?

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

Very nice! And thank you for doing this Xorlof.

Any plans for doing something similar for AotP card?

Most likely. However, Marvel/comic templates will probably come next after Valhalla. After that, the order for adding templates is up for grabs and will be mostly based on requests. AoTP templates may get moved a notch or two later in the queue than it otherwise would just because I have to deal with different card dimensions for it.

 

[keglo]

Re: X Minus 2 Customs Card CREATOR - Preview

Very nice! And thank you for doing this Xorlof.

Any plans for doing something similar for AotP card?

Most likely. However, Marvel/comic templates will probably come next after Valhalla. After that, the order for adding templates is up for grabs and will be mostly based on requests. AoTP templates may get moved a notch or two later in the queue than it otherwise would just because I have to deal with different card dimensions for it.

Nice. I think that I like your order just fine

 

[Leaf_It]

Re: X Minus 2 Customs Card CREATOR - Preview

I've been keeping tabs on this since I found out about it.

Will you add support for HoSS cards? I assume the answer is "eventually".

Btw, I almost posted in here multiple times, but it was just to say that Valkrill is spelled wrong in the preview. I assumed it was something obvious, so I never did it.

 

[superfrog]

Re: X Minus 2 Customs Card CREATOR - Preview

Could you apply the text resizing to the left box stats as well? For example, if I put in "Uncommon Hero", the O gets cut off.

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

Will you add support for HoSS cards? I assume the answer is "eventually".

Btw, I almost posted in here multiple times, but it was just to say that Valkrill is spelled wrong in the preview. I assumed it was something obvious, so I never did it.

HoSS cards will come earlier than most since the hi-res blank by @A3n is available and the general layout is similar to others. Before AotP.

Will fix Valkrill spelling in next release. Thanks!

Could you apply the text resizing to the left box stats as well? For example, if I put in "Uncommon Hero", the O gets cut off.

Yep, see #4 from the OP. The goal is for the system to eventually be basically auto-everything as much as possible. You give the text and images and it makes your card look good. I have already added this to the next preview where the tracking/letter spacing gets adjusted to make the left attributes fit. That is enough to make uncommon hero fit, but I still want to also make the system also "squeeze" the font if there is too much text placed there. I don't yet support that type of font hackery in my under-the-hood typeface manipulation code. When it can do that, it will make thing like 'uncommon hero' look another notch better than what the next preview will do.

Thanks for the feedback guys!

 

[CrazyTankster]

Re: X Minus 2 Customs Card CREATOR - Preview

I went to print CV3/SOV cards Red Ants of wherever, xalituca fira ants and the varja and they were not in the X Minus 2 app to print. Just an fyi. Thanks!

 

[Son of Arathorn]

Re: X Minus 2 Customs Card CREATOR - Preview

This is the second-coolest thing I've seen all week (I watched Game 7 of the World Series). I can't wait to get new templates! This is something I've wanted since I joined HeroScapers!

 

[A3n]

Re: X Minus 2 Customs Card CREATOR - Preview

I'm watching now. Have you worked out a way to change the colour of the border & panels for Marvelscape?

 

[Xorlof]

Re: X Minus 2 Customs Card CREATOR - Preview

I'm watching now. Have you worked out a way to change the colour of the border & panels for Marvelscape?

YES! NO! Maybe! What I mean is that that I'm working on it. Recoloring the two color regions of the hi-res Skahen card that Hasbro released is actually how I plan to make the templates for this system for Valhallascape (and appears to be how Mooseman did it in the past). I haven't put much work into that yet though. Assuming I get it working well, the exact same principle should be able to allow people to custom mix colors for both the Marvelscape cards and the classic cards.

For a not-meant-for-public-consumption look at what I mean, have a look at this page.

On the page you will see two images--the Skahen card without text on the left, and a very colorful mask image I made on the right. In the mask image:
- purple represents areas where the Skahen image need to be re-colored in one way (the border and specs area),
- blue needs recoloring in another way (inset colored areas),
- green areas are to be left alone (special power, hitzones areas, etc.), and
- black is the area that needs to be completely cut out (the miniature image area).
Make sense?

Well, on that page, I have two input boxes that let you change the hue of the two recolorable areas (border and panels). Again, as I said, not meant for public consumption, but to start with leave the values at their defaults and hit the GO button. Using the source (Skahen) image, the mask image, and the hue values entered, a recolored template image is generated (it takes several seconds, particularly on mobile). Try different hues and hit GO again and you'll get a different image. (For example, put in 0.5 for both values and you'll see that both the inner and outer parts become the same bluish-green).

So if I take a high-res Marvelscape template (most likely @GreyOwl's since those are the best ones I know of!) and make a new mask, we can do the same sort of recoloring with them. Obviously a simple hue shift like in the demo page isn't enough to do a quality or correct recoloring, but I think you get the idea that I'm working on it!

When done, you should be able to have pretty much any color combination you want with both Marvel and classic templates.

 

[Xorlof]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

I'm pleased to announce the November preview of my web-based customs card creator app. This early preview still won't let you switch templates or load miniature images, but please have a look and let me know what you think! Expect version 1.0 to hit later this month.

NOTABLE CHANGES
- works on all major browsers
- faster card rendering
- text placement is now consistent with all browsers, OSs
- kerning is "different"--better in many spots, worse in others
- regression: editing interface not as slick. (I will try to get it as nice as before, eventually.)
- (under-the-hood: moved from DOM/SVG foreignObject layout to doing it myself)

SYSTEM REQUIREMENTS
If you use a reasonably recent browser on your phone, tablet, or computer, you're good-to-go. If you want tech support for this app from me, use one the two most recent versions of Chrome, Firefox, Internet Explorer, Edge, or Safari running on one of the two most recent versions of Windows(1), MacOS, Android, Ubuntu, or iOS.

KNOWN ISSUES
- Edit boxes aren't well aligned on iOS (but the generated card has perfect alignment)
- Save button doesn't work on Safari. (Workaround: hit preview and right-click save the preview image)

ROADMAP
Major additional features are planned to roll out as follows
- Version 1 (late November): All classic scape templates
- Version 2 (December): Loading graphics
- Version 3 (January): GrabCut, FTW!
- Version 4 (Feb/Mar): Marvel, other templates
- later: collections? online sharing? keywording? Help me decide!

CREDITS
I'm still using @Mooseman's miniature background graphic. The default card text in this preview is @Ninja Status' entry in @Dr.Goomonkey's June custom contest.

FOOTNOTES/MISC
1) For support purposes, I'm pretending Windows 8 doesn't exist. I will support Windows 7 and 10.
2) Macs (any browser) have the most Hasbro-accurate font rendering. It's basically identical. Next is Firefox, IE, or Edge on Windows, and least accurate is Chrome on Windows. Really though, I've got them all very, very close to Hasbro with this version of the card maker. However, I think I can make even more progress in the future, eeking out that extra 1% on Windows to match Macs. (Side note: Chrome on Windows happens to render closest to C3V specs even though C3V doesn't render it's cards on Windows.)

 

[A3n]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

Looking good.
I can see that you have made a change that causes the kerning to be adjusted if the side text goes too long for the box. Though I think you might need to look at reducing the text size once kerning gets below a certain point as letters can overlap at the moment. e.g. LYCANTHORPE for the species.

 

[Xorlof]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

I think you might need to look at reducing the text size once kerning gets below a certain point as letters can overlap at the moment. e.g. LYCANTHORPE for the species.

Good call. Obviously the app is failing here. I did a bit more research on this, prompted by your post.

I don't think the official cards ever resorted to making the text in that area shorter--they simply adjusted the kerning (what I just added and you noted) and when they got desperate for space, also compressed the letters horizontally. And speaking of lycanthropy, the attached Werewolf Lord card is an excellent example of that. All of the attributes have an uppercase R. Measuring those R's, we see they are all 15 pixels high in this scan. However the width changes from 6.5 pixels (Lycanthrope), to 8 (Uncommon Hero), to 9 (Darklord, Relentless).

I have yet to implement that sort of horizontal typeface "compression," but when I do, like everything else in the app, I will make it automatic. As a related aside--you'll notice in the current preview that if you keep typing text into the special powers area that the text gets smaller and smaller in steps. Several of the steps match the specs for various Wave 9 cards precisely (Gladiators, Mohicans, and Repulors, IIRC) and others are tweened. Once you need more text than the Repulsors spec could provide, I don't shrink the font any further, but do some other sorts of tricks to provide card creators more space for words. However, eventually as you add text, I have the app throw its hands up and color the text red, refusing to shrink any further. I probably should do something similar here--yes, compress the text horizontally for a while, but if you type much beyond "LYCANTHROPE" in that top box, refuse to go further (for risk of making the text unreadable) and require the designer to re-work their text.

Do y'all think that sounds like the right balance here?

(BTW, @A3n, did my reply to your Marvelscape re-coloring post make sense?)

 

[A3n]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

Yeah mate, made perfect sense. Love to see it in action.

 

[TREX]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

Ive been watching this too. This looks like a great resource. I may be trying it soon as well too.

 

[Leaf_It]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

You mentioned that for each general, you would be changing the hue of different parts of the card. This wouldn't work for Valkrill. I'm working on a Valkrill blank using your mask image, and various Valkrill blanks I was able to find on the forums, as well as the Horned Skull Brutes scan that @TREX did for me. This is the outer edge, and the figure stats area, with everything else removed. It's not finished, but maybe it will be useful to you.

EDIT:Uploaded a better version of the Card edge.

 

[Xorlof]

Re: X Minus 2 Customs Card Creator - NEW PREVIEW

You mentioned that for each general, you would be changing the hue of different parts of the card. This wouldn't work for Valkrill. I'm working on a Valkrill blank using your mask image, and various Valkrill blanks I was able to find on the forums, as well as the Horned Skull Brutes scan that @TREX did for me. This is the outer edge, and the figure stats area, with everything else removed. It's not finished, but maybe it will be useful to you.

Yeah, Valkrill's "kitchen counter top" texture is different than the others. The above, with modifications, may prove helpful indeed. Thank you!

Initially, v1.0, will probably be be "faking it" for Valkrill, just choosing an outside border with the right color tone as Valkrill's, but the same texture as the others (i.e., just recoloring like the other generals). I haven't looked yet to see if that would look too weird, though.