Conversion of my photoshop-based template for Dropmix musical trading card mockups to a web-based image creator. Made by Adam N. A. (@AdamUnavailable).
The world's first and only Dropmix card mockup template.
- Required changes:
- - Harmonix staff have asked me to remove playlist icons except for the "DM" icon, and suggested adding made-up playlist icons in their place.
- - Harmonix staff also asked me to remove the editable copyright text for legal reasons and to replace it with text stating the card is unofficial.
Overall, it is a good thing that Harmonix has acknowledged the existance of the mockup creator and asked for reasonable changes rather than the alternative of shutting it down. I have fully complied with their requests.
- To do list (loosely in order):
- *Allow uploading card art and moving/resizing/rotating.
*Moving and resizing work as intended.
- Resizing with sliders and text boxes is not as intuitive as I would like. Transform controls overlayed on the image would be ideal.
* Rotation sliders functional but buggy. Disabled for now.
- Shifting rotated images moves them with respect to the rotation, instead of moving straight with respect to the card.
- Resetting or centering a rotated and scaled or flipped image causes skewing - *Allow uploading transparent images as playlist icons, automatically recoloring the non-transparent part to a white silhouette and resizing to approximately the right size
- Reset buttons for each text box
- Draw text as soon as it loads instead of waiting.
- Make the text boxes and other inputs more immediately responsive to changes.
- *Add remaining missing assets if possible.
- *Add mobile support (partially in place).
- All major features work on mobile, but may have issues and be less responsive in updating changes. Tapping/clicking in most places should force it to update.
- Bugs:
- Text doesn't load right away (set to manually draw after 0.25, 0.5, 1, 2, and 3 seconds and if still not loaded by then, draws when edits are made or card preview is clicked.
- Text may break on iOS after switching away from tab and returning. (font/cache-related?)
Kerning is wrong but is correct after soft-refreshing (maybe fonts loaded incorrectly? potentially switch to typekit font loader https://github.com/typekit/webfontloader#custom instead of current "font observer")
- FIXED - Fonts load correctly and don't draw until loaded.Text draws at the wrong size and location if browser zoom is not regular/100%.
- FIXED - Text draws at the same size (or as close an approximation as possible) regardless of browser zoom.Manipulating card art is untested on mobile.
- FIXED - Manipulating card art on mobile is functional. Mouse events were given touch event equivalents.- Probably more.