Page 1 of 1

Javascript card builder

PostPosted: 23 Sep 2010, 02:02
by Incantus
I had some free time recently and have been wanting to learn a bit of HTML5. After some playing around with javascript I built an interactive card creator. You can try it out at http://incant.us/creator/. Note: this needs a fairly modern browser (chrome, firefox or safari), and might not work in IE since it uses HTML5.

Thanks go to the MSE project, especially for the new MSE style frames, fonts and symbols.

Card images are of the form:

images/[set code]/[set code]-xxx.jpg where xxx is a number.

Unfortunately the export doesn't work yet. Let me know if you have any suggestions.

Re: Javascript card builder

PostPosted: 23 Sep 2010, 02:11
by Huggybaby
Wow, that's cool. I esp. like the immediate feedback with changes.

The symbols are quite aliased. Have you looked at the assets in the Nate's Deck Builder package?

<edit> Also need formatting for font size and italics, etc.

Re: Javascript card builder

PostPosted: 23 Sep 2010, 02:40
by Incantus
By chance what browser are you using? In Chrome or Safari (any webkit based browser i guess) I get the following image:
Image

What do you mean by options for font sizes? The name, typeline and text box use the same font size as the actual cards (as near as I can tell), although the textbox doesn't automatically shrink the size if there is too much text.

Edit: I tested in Firefox and it seems that Firefox's canvas support isn't quite there yet (for example, with a 2 color card you should see a blended frame).

Re: Javascript card builder

PostPosted: 23 Sep 2010, 03:31
by Huggybaby
I'm using Firefox. I tried IE8 and got an error that Canvas wasn't supported, but I didn't see the aliasing.

I was indeed talking about the ability to make text smaller. Aren't italics necessary too?

It's good that you've got the Chrome and Safari users covered. Now you're 15% of the way to total coverage.

Re: Javascript card builder

PostPosted: 23 Sep 2010, 17:17
by Incantus
Huggybaby wrote:I'm using Firefox. I tried IE8 and got an error that Canvas wasn't supported, but I didn't see the aliasing.

I was indeed talking about the ability to make text smaller. Aren't italics necessary too?
Yeah, italics are needed for the flavor text. Unfortunately I can't seem to find the font used for it.

Huggybaby wrote:It's good that you've got the Chrome and Safari users covered. Now you're 15% of the way to total coverage.
Haha, true. Those 'other' browsers just need to catch up and fully support HTML5. I'm sure Firefox will work soon, but Microsoft seems to have dropped the ball with regards to HTML5.

Re: Javascript card builder

PostPosted: 23 Sep 2010, 17:39
by Snacko
You can emulate canvas in IE7/8 with excanvas, however it isn't 100% the same, ex. you can't copy from such canvas to other canvas.