search

gespo89 / PAXSignatureGenerator

PAX Forum Signature Generator
2 stars 5 forks source link

Refactor: Separate badge flares (like MDA) from base badges #8

Open mddburgess opened 7 years ago

mddburgess commented 7 years ago

I'm thinking we should separate the badge types (the media ribbon, omeganaut overlay, etc) from the base badges themselves and then draw them on as needed, like the numbers. This should allow us to more easily add on new badge types (like BYOC) or flare variants (like a black stripe for [E] on a base badge) in the future.

broadstone commented 7 years ago

@mddburgess I'd like to know how you picked the colors of the omeganaut stripes that come off the omeganaut symbol. It is close to pure white(255,255,255) at 60% transparency over the background color of the badges, but not quite. If I can know how you made those colors, I can make a generic omeganaut ribbon we can put on top of any badge.

Otherwise, again, the closest I can get is RGBA(255,255,255,153) for a partially opaque ribbon color.

broadstone commented 7 years ago

Anyways I made this: pax_combo

It is the bare bones bits. As a throwback, I used the classic magic pink color for the recolorable elements. The lower right omeganaut symbol is actually translucent and is RGBA(255,255,255,153) as in my previous comments. EDIT: And nearly impossible to see on a white background, but it will overlay on a badge to look nice.

Presuming one can replace all pink color while not touching the alpha itself, you can recolor the badge to anything else and then put whatever strip on it is needed. Only this data and a bit of color info is needed to generate all possible badges. The color info being white color for text or a badge base color for anything else.

broadstone commented 7 years ago

So I did end up making this. Here's the final arrangement: pax_combo

In the thing I pushed attached to this for the javascripty part, I recolor the badge to the correct color, along with the text. There's no white text because I recolor it on the fly too. The rows in the column beneath a normal or future badge are the ribbons for that badge.

It does create some new patterns as a result, like these two: index

Demonstration here: https://broadstone.github.io/PAXSignatureGenerator/src/main/webapp/index2.html