npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@slippilab/create-animations

v0.0.3

Published

Create .svg paths for ssbm character animations

Downloads

3

Readme

Adding a character:

One time setup

  1. Get student license with .edu email and download Maya 2018 (not newer)
  2. Download "New and Improved Animation Pack" and "Animation_Pack"
  • https://www.mediafire.com/file/cmasv6kab9271p0/New_and_Improved_Animation_Pack.zip/file
  • http://www.mediafire.com/file/b9yyt3dd2ll1dzv/SSBMelee_Animation_Model_Pack.zip/file

Step 0: Render animations with Maya

  1. Open character scene in Maya (from New and Improved Animation Pack)
  2. Set side camera environemnt background color to white
  3. Set framerate to 60
  4. Delete all the textures:
  • Window -> Rendering Editors -> Hypershade, Edit -> Delete All By Type -> Textures
  1. Set render settings to match vectorize command and render to check
  2. Adjust the step0renderAnimations.mel script to your character and input/output directories
  3. Run script
  4. Delete any animations you don't care about:
  • Heavy*, Item*, and PlyTaro thrown animations should not be needed

Step 1: Trace .bmp's into .svgs (adjust step1 input directory in package.json first)

yarn packages/create-animations step1

Step 2: Optimize svgs with SVGO

yarn packages/create-animations step2

Step 3: Collect path strings from SVGs into a single .json for each animation

yarn packages/create-animations step3

Step 4: Compress all the .json files into a single .zip

yarn packages/create-animations step4

Step 5: Move the .zip file to the zips directory

cp packages/create-animations/.out/step4/animations.zip packages/viewer/src/animations/zips/$CHARACTER.zip

Step 6: Add the character's stats and action state <-> animation mapping

Copy an existing character for the new character

cp packages/viewer/src/characters/mario.ts packages/viewer/src/characters/$CHARACTER.ts

Adjust the mappings for:

  • Taunts (Appeal vs AppealL vs AppealR)
  • Wait animation (Wait vs Wait1)
  • Forward tilt / Forward smash (some characters can be angled, some cannot)
  • Specials
  • Anything else unique (example: air tethers)

Specials/other unique animations: https://docs.google.com/spreadsheets/d/1Nu3hSc1U6apOhU4JIJaWRC4Lj0S1inN8BFsq3Y8cFjI/preview#gid=517965147

Model scaling and shield size: https://docs.google.com/spreadsheets/d/1JX2w-r2fuvWuNgGb6D3Cs4wHQKLFegZe2jhbBuIhCG8/preview#gid=21

If an animation cannot be found it will use Appeal, so play some replays to identify incorrect or missing mappings.

Step 7: Add the character to be usable:

packages/viewer/src/characters/index.ts supportedCharactersById function packages/viewer/src/animations/index.ts importAnimation function

External character ID list: https://docs.google.com/spreadsheets/d/1JX2w-r2fuvWuNgGb6D3Cs4wHQKLFegZe2jhbBuIhCG8/preview#gid=20