JavaScript Lib for Guild Emblem generation

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: mtodor.2356

mtodor.2356

I made small library based on Raphaƫl JavaScript library to generate SVG representation of Guild Emblem based on JSON Object from Guild API.

GW2Emblem
GitHub URL: https://github.com/mtodor/gw2emblem
Demo Page: http://toro-online.net/gw2emblemdemo/

Usage: Create div empty with ID [fe. “gw2embelm-div”] in HTML and execute JavaScript code, for example:

gw2emblem.init('gw2embelm-div', 128); // ID, Size
gw2emblem.drawEmblemGw2({
   "background_id":22, 
   "foreground_id":151,
   "flags":[],
   "background_color_id":85,
   "foreground_primary_color_id":142,
   "foreground_secondary_color_id":1242
});

Argument in gw2emblem.drawEmblemGw2 is “emblem” object from Guild API. Emblem is generated as vector, so it doesn’t depend on size – edges will be smooth and nice looking not matter what size of emblem is (64px or 1024px).

This if first version and there will be a lot of changes in future. If you have some suggestions or you find some issues, be free to comment.

(edited by mtodor.2356)

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: nightzirch.3126

nightzirch.3126

I felt bad that you had made all this work and noone had given you a reply. Then I noticed you posted this today. Still, Ill leave you with a reply.

Awesome job! I was thinking of making a module on my guild site to display some basic information, like the amount of members and also the guild emblem. Basically, what we get from the API. It quickly hit me that the emblem would be a problem since the official wiki only offers them in black/white/red.

I still havent tried your script, but I still see how much work lies behind. I will give this a try when I get a chance

Hi, I’m Chris aka nightzirch
Snow Crows [SC]
Front-end developer – SecretToymaker.com

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: Dr Ishmael.9685

Dr Ishmael.9685

Could you link to an example SVG output (or one converted to PNG) from your script? I’m guessing that, because you’re using SVG approximations of the game textures, it’ll simply have flat colors in the different color zones and ignore any shading/alpha characteristics. Still, some guilds may prefer a stylized emblem for use on their forum/website instead of a game-accurate representation, and this would be just the thing for them.

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: mtodor.2356

mtodor.2356

I can make SVG output or PNG, but I made better solution – Demo Page: http://toro-online.net/gw2emblemdemo/

There is a lot of space for improvement of SVG representations, but that will lead to bigger image definitions in JS → bigger files + longer generation time, etc. I’m making some tweaks (fe. foreground_id=151, there is some kind of color overlapping on quaggan’s belly, also foreground_id=1, there are some shadows on fist). All this can be more detailed, but for initial version I think this works pretty fine.

When I finish loading on-demand (per Emblem foreground/background), then there will be enough space for detailed emblem representations.

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: Dr Ishmael.9685

Dr Ishmael.9685

Hmm, they look better than I expected. Good job! Here’s a few things I noticed:

Based on the background ID numbering, you used my original texture archive to generate your SVGs. Moturdrn discovered that background ID 9 doesn’t exist, so everything 9 and up needs to be incremented by 1 (such that the last background is 28).

I think you might have an error in the SVG for foreground 44. I get the three dots and the center of the triskelion, but the outer arms are simply missing.

An enhancement for the form would be to split the emblem details into separate text boxes, to make it easier to change the individual values and to prevent a user from mucking up the JSON structure.

JavaScript Lib for Guild Emblem generation

in API Development

Posted by: mtodor.2356

mtodor.2356

Thank you!

Also thank you for info with backgrounds – I updated lib and demo. Also Emblem IDs 44 and 37 are tweaked up.

I’ll add some functionality into Demo page, after I finish some things on library. I made that demo in 20mins – I was lazy to make screenshot of emblem for you and it will be helpfull for others to see what exactly library do.