User blog:Taldin/Tinker's Blog, Part 4: Spritesmithing Gryphons

One of the things I'd always wanted to try my hand at is adding to the graphics repository. It's always been pretty daunting-looking, since the setup has these coordinates for each graphic item in there, and it looks pretty tough to add something in the right spot. The .css files for the graphics have specific coordinates that each item is assigned based on its location in the PNG sprite 'map', so you don't have to load a ton of assets every time, just the one PNG file and only pick up what's at the one location. (It's an old trick that's been around since the 8 bit days.)

Turns out it may not be so scary after all. Seems that the procedure used to be to use a utility called 'spritesmith' to collect stuff together.

I've been informed that the command has changed, but the principle is the same:
 * 1) Get graphics.  Copy into position.  Looks like there's a naming convention involved.
 * 2) Run 'npm run sprites'.
 * 3) Check to see if it worked.

Let's get started, shall we?

First of all, remember to update from /develop so we're working off of an up to date source, rather than my slightly out of date branch I was developing the health in party page fix on last weekend. Someone is always coding in Habitica, so it's really good practice to start with the most recent code. git checkout develop git fetch upstream git rebase upstream/develop git push

Today's bug fix is https://github.com/HabitRPG/habitrpg/issues/6356, where all that needs doing is copying a bunch of graphics over from the issue into the right spot. No coding required!

In this case, the mounts in habitrpg/common/img/sprites/spritesmith/stable/mounts need to be updated.
 * 1) Before I do anything at all, I make a new branch. (Remember, never do any code changes in develop to avoid conflicts when you try and check your code in.)   I click the fork button to the left of the 'develop' button in GitShell, enter in the new name "gryphon_fix" and now I have a branch copy of develop.
 * 2) I downloaded each of the pictures from the issue, and copied them onto the right griffon picture. I wound up doing a side-by-side comparison and picked each image very carefully.
 * 3) I went over to the habitrpg/common/img directory (not the img/sprites/spritesmith directory) and entered: npm run sprites Github_npm_run_sprites.png
 * 4) I checked my work afterwards by first looking at the altered spritesmith-main-6 and spritesmith-main-8 png files. Then I went back into my test database and hatching 10 gryphons, then turned them into mounts (thankfully there's a +10 gem button in the debug menu)
 * 5) Looks good, so time to create a pull request!