A tool for creating custom Skullgirls Mobile fighter cards. It performs best in Google Chrome and works in Safari both on desktop and on mobile devices. It should also work for Firefox, but I have not tested the website in any other browser.
The official design of cards has changed slightly in version 3.1.0 of Skullgirls Mobile. I presume this is part of the optimizations as noted in the patch notes.
This website was made during version 3.0.0 and thus generates cards consistent with the designs of 3.0.0. I do not plan on updating the look of the cards, partially because I prefer the old look.
In the card preview area, you can modify the card text (fighter score, level, variant name, and character name). The text will automatically reduce in font size to fit within its designated area.
You can also move, scale, and rotate your uploaded image by interacting with the card background.
Clicking on the top, left, right, or bottom area of the card will activate a mask that crops out the parts of your uploaded image which lie beyond the top, left, right, or bottom edge of the card.
You can choose the tier, element, and energy type of the card and you can upload an image to use as card art.
With your uploaded image, you have the option to edit it using the text inputs or by selecting the move, scale, or rotate tool and then interacting with the card preview area. You can also specify whether the image should overlap the top border of the card.
If the dimensions of your image is 360x340px, it is assumed to be from the SGM Palette Editor. The optimal position parameters will be automatically set.
If your image's file name follows the Palette Editor naming scheme, the card character name will also be automatically set.
The custom gradients allow you to override the default colors specified by the tier and element options.
You can select one of the familiar presets or you can make your own gradient by using the text input or the interactive preview bar.
For text input, your gradient must be formatted as a list of paired values COLOR BRIGHT%, where COLOR is the color name or hex code and BRIGHT is the brightness value onto which the color will be mapped.
This website supports the creation of animated cards (somewhat) thanks to the following libraries:
- buzzfeed/libgif-js for converting gif frames to canvas context
- jnordberg/gif.js for encoding canvas animations to gif data
- Stuk/jszip for creating a zip file of multiple frames
- eligrey/FileSaver.js for downloading heavy files
All animated cards are rendered with a frame delay of one millisecond. They also have a lower image quality and an opaque black background. The frame rate, quality, and transparency are not adjustable because GIFs are a pain and the HTML Canvas doesn't play well with GIFs.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}