Habitica: Mounts Page images are all off

[bTackt]

As I presume it was mostly skinned from the pets page, the mounts page is off. See here:

In the red, I write how many mounts I have unlocked in each row. Due to the head sprites being significantly larger than pets, the corresponding black paw prints are not the same size. There needs to be uniformity in the head sprite size and black paw prints (I don't know if each type of mount has the same width/height though, I didn't check), otherwise, this ghastly (gasp! :P) misalignment occurs.

Solution proposed: enlarge pawprints to a "mount size" for this page.

Also, it has been mentioned in #3397, but only using the head sprites is a bit disconcerting. Not only is it off center due to the inherent nature of the sprites, some mounts look disfigured (the dragons, for example, I believe, have an addition wing). This also makes one need to click on each to test out the effect of the appearance of the avatar; you can't just look and choose, like pets. It is also to be noted that since yall are fixing things like sidesaddling problems, the head sprites for wolves, at least, is going to look extra bizarre.

Solution proposed: Either use both head and body sprites together, or have another sprite sheet (this doesn't take too much effort/space, I presume...right?) with just heads (no wings, half-wolf bodies, etc.) which are centered.

Of course, the heads-only solution is much more complicated, as all the extra mounts other than the 90 would need redos. Head and body is a better solution, but in #3397 Alys mentioned something about creating new images (but wait, sprites don't create new images...you just position them with CSS? perhaps I'm wrong. Can you not load a singular sprite sheet image into a page more than once? sorry rusty HTML). In addition, one would have to worry about total mount size being uniform to keep the grid format (which I'm not sure if they're uniform; for one thing, wolves just feel like they're much longer horizontally).

^sorry long and possibly complicated ramble

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[crookedneighbor]

I'm glad I'm not the only one that is bugged by this.

I don't think displaying the full mount is a good idea, mostly because of the amount of real estate it would take up. Though, maybe we could add the full mount image in the popover that displays the name. That could be cool!

@lemoness What do you think about having separate head only images of the mounts? I'd like to make these all a consistent size, and the dragon and flying pig wings have always bugged me. Now, with the new mount images to fix the side-saddling look, it'll look like we cut those mounts in two using the current method.

Isolating the heads for the few mounts that require it is simple enough pixel work that I think I could make the adjustments. It'd just be a matter of requiring future mount art contributions to include a head only version of the image (which in many cases will likely be a duplicate file cropped to a specific size and centered).

Obviously, going that route would add a large number of extra sprites. At what point do we split to 7 spritesheets instead of 6?

[lemoness]

So here's the thing - we've already accepted a ton of mounts to the queue.
Right now there are 178 pending individual mounts (not species; individual
files) that have the art submitted but are not in-game, in addition to the
ones that are in-game. So.... we can do this, but it's going to take some
pixel-pushing. If you decide you really want to do this, I can make a new
Trello card for artists to do it and count it towards their contributor
tiers.

On Tue, Feb 3, 2015 at 12:24 PM, Blade Barringer [email protected]
wrote:

I'm glad I'm not the only one that is bugged by this.

I don't think displaying the full mount is a good idea, mostly because of
the amount of real estate it would take up. Though, maybe we could add the
full mount image in the popover that displays the name. That could be cool!

@lemoness https://github.com/lemoness What do you think about having
separate head only images of the mounts? I'd like to make these all a
consistent size, and the dragon and flying pig wings have always bugged me.
Now, with the new mount images to fix the side-saddling look, it'll look
like we cut those mounts in two using the current method.

Isolating the heads for the few mounts that require it is simple enough
pixel work that I think I could make the adjustments. It'd just be a matter
of requiring future mount art contributions to include a head only version
of the image (which in many cases will likely be a duplicate file cropped
to a specific size and centered).

Obviously, going that route would add a large number of extra sprites. At
what point do we split to 7 spritesheets instead of 6?

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-72716472.

[Alys]

@knittingfrenzy18 _" in #3397 Alys mentioned something about creating new images (but wait, sprites don't create new images...you just position them with CSS?"_ No, I said we might _not_ need to create new images because we might be able to use CSS trickery instead. :) https://github.com/HabitRPG/habitrpg/issues/3397#issuecomment-53149901 I don't know much about how sprites work, so this might be impossible, but I was thinking we could just specify different offsets for each mount to display only the head portion, without needing head-only images.

[crookedneighbor]

@Alys I don't think that method would be impossible, but you'd have to do all kinds of crazy routing with the css templating in the grunt task and it would have to be specialized for each set of heads. Personally, I don't think it's worth it. Plus, we'd still have the half-a-wolf problem once the new mount art gets merged in.

Adding the heads a second time with correct cropping and positioning would bloat the size of the images, but create less of a headache for maintainability and creating new sprites in the future. (You'd have to edit the grunt file every time a new mount got added if going the pure css route). So that's my vote.

@SabreCat, have any thoughts?

@lemoness If we decide to go the extra-mount-head-image route, let's hold off on adding a trello card until the existing mounts are done. I want to make sure it's doable and is actually an improvement before putting the call out.

[SabreCat]

A head-only image might be nice to have; I like that solution. I wonder a bit about file size, but I do recall @lefnire saying at one point that image loading is thus far a relatively minor consideration with respect to performance.

[lefnire]

Perf is all user.batchUpdate(). 99%

[TheHollidayInn]

Hello,

I have been working with this ticket and #4803 . I have been able to align the mounts by doing the following:

1. Adding bootstrap column class to the li.customize-menu under the .pets div
2. Adding bootstrap column class to the div template for the actual mount
3. Using a text-align: center property and value pair on the div above
4. Adding margin:auto property value pair on the button that holds the mount image.

Now, this almost completes the request above, except for the image is not centered on the button. This can be solved two ways:

1. Center the image using css (there seems to be a class per a mount)
2. Center and align the sprites on the sprite sheet (which would also require a mandate of max proportions on pixel art for mounts.)

Does this sound like the correct direction? And, does anyone have input if so.

[lemoness]

So, we already have enough completed mount art for the next two years, so
changing the proportions now would be a massive hassle that would require
redoing a lot of the art. Also, wouldn't changing the mount CSS alter where
avatars are sitting on the mounts?

On Tue, Mar 10, 2015 at 1:13 PM, TheHollidayInn [email protected]
wrote:

Hello,

I have been working with this ticket and #4803
https://github.com/HabitRPG/habitrpg/issues/4803 . I have been able to
align the mounts by doing the following:

1. Adding bootstrap column class to the li.customize-menu under the
   .pets div
2. Adding bootstrap column class to the div template for the actual
   mount
3. Using a text-align: center property and value pair on the div above
4. Adding margin:auto property value pair on the button that holds the
   mount image.

Now, this almost completes the request above, except for the image is not
centered on the button. This can be solved two ways:

1. Center the image using css (there seems to be a class per a mount)
2. Center and align the sprites on the sprite sheet (which would also
   require a mandate of max proportions on pixel art for mounts.)

Does this sound like the correct direction? And, does anyone have input if
so.

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-78137854.

[crookedneighbor]

@lemoness Not if the change was made specific to the stable page, ie: .stable-page-class .wolf-class, then it would just affect the sprites in the stable page.

[joyheron]

Just want to mention that this is same issue as in #2084.

[joyheron]

I think that the alignment of most of the mount heads could be improved with css magic. You could just copy the css class for the head image to a class .mount-class-centered and manipulate the background position numbers so that the heads are then aligned. I'm thinking of playing around with the idea, and if it looks good, doing a pull request.

[crookedneighbor]

@joyclark Yes, that's one route to go. The big problem right now is that the mount images are not consistent. Some mounts are just the head, and some are parts of the head and the body. It's done that way so that the avatar's are sitting on the right spot on the mount.

If we decide to create custom images for the mount selection page, whether it's mount heads or mini versions of the mounts, this problem will be solved because each will be the same dimensions and centered.

But, if we decide to live with it as is, manipulation the positioning of the heads via css is definitely the route to go. And if you do that, create a new .styl file in website/public/css to do it. That way, we can easily remove the styles if we decide to eventually replace them with unique images.

Does that make sense?

[crookedneighbor]

@joyclark if you want to adjust a few, say 3, and submit a PR, I'll be happy to check your work and make sure it's on the right track.

[joyheron]

Sounds good. =)

[lemoness]

Note that we have a ton of completely redone art for all the mounts save a
few of the wolves, which are upcoming, so I am not sure this is a good use
of time.

On Mon, May 11, 2015 at 11:09 AM, joyclark [email protected] wrote:

Sounds good. =)

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-101002272.

[deilann]

All of the mounts?

Including the quest mounts? If the quest mounts aren't included, they could be worked on first.

I mean, the T-Rex mounts are so awful that they take up two rows:

[lemoness]

Nope, just base mounts - so you could definitely start with quest mounts!
But I wouldn't touch the base mounts until that art is changed.

On Mon, May 11, 2015 at 11:39 AM, deilann [email protected] wrote:

All of the mounts?

Including the quest mounts? If the quest mounts aren't included, they
could be worked on first.

I mean, the T-Rex mounts are so awful that they take up two rows:
[image: image]
https://cloud.githubusercontent.com/assets/6274734/7572357/53415060-f7d2-11e4-85f9-192891532aa1.png

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-101012566.

[joyheron]

Ok, so I just saw this and already did an experiment for the first five base mounts. Whoops! Just for reference, here are before and after screenshots:

Before:

After:

I still went ahead and did a pull request, because I figured I would try to fix the quest mounts in the same way.

[joyheron]

Essentially, I figured out how wide each of the mount heads themselves were, and edited the gruntfile.js so that when sprites are generated a second class .Mount_Head_Type-centered is generated which differs in the width of the sprite image (I set the width to the width of the actual head image) and then added a margin to either side so that the whole class fills the desired 105px.

If this is a good idea (and I really don't know if it is), I could go ahead and do the same for the quest mounts (and remove the styling from the normal mounts if we want to wait for the new artwork).

The skeleton heads are still a bit off because they are thinner than the other head images of their type.

[lemoness]

If you've already done it, no need to revert - I just wanted to save you
time :)

On Mon, May 11, 2015 at 12:36 PM, joyclark [email protected] wrote:

Essentially, I figured out how wide each of the mount heads themselves
were, and edited the gruntfile.js so that when sprites are generated a
second class .Mount_Head_Type-centered is generated which differs in the
width of the sprite image (I set the width to the width of the actual head
image) and then added a margin to either side so that the whole class fills
the desired 105px.

If this is a good idea (and I really don't know if it is), I could go
ahead and do the same for the quest mounts (and remove the styling from the
normal mounts if we want to wait for the new artwork).

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-101026892.

[joyheron]

It doesn't actually take that much time. Probably 10 minutes maximum per mount type? It is just a matter of figuring out how wide the mount image is and then the margin size is (105 - head-width)/2. Then just update the file, generate the sprites, and reload to see the results.

It actually takes more time to hatch and saddle all of the mounts for testing purposes.

[joyheron]

It seems to work for TRex's and Penguins as well...

[hairlessbear]

The new wolf mount art is wider than it used to be, causing the wolf mounts to be out of alignment with the rest of the base mounts (which are aligned properly thanks to @joyclark).

[lemoness]

So, we're going to switch over to displaying separate art of the isolated
mount heads in a fixed canvas - the art is currently being generated on the
Pixel Art Trello. I'll post them when they are done! That will fix all
mount page alignment issues.

On Tue, Jun 30, 2015 at 9:11 AM, hairlessbear [email protected]
wrote:

The new wolf mount art is wider than it used to be, causing the wolf
mounts to be out of alignment with the rest of the base mounts (which are
aligned properly thanks to @joyclark https://github.com/joyclark).

[image: selection_013]
https://cloud.githubusercontent.com/assets/7059890/8435739/034e17de-1f21-11e5-9a1f-ea80c2edbc3a.jpg

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-117240952.

[hairlessbear]

Yay!

[zelq]

I cannot express how much my OCD thanks you! (dusted off an old github account just to say this!)

[MaidM]

Further to the 30 June report on the wolf mount art throwing everything out of alignment, are we any closer to a fix on this? It's been driving me mildly nuts for months. Frankly, I'd rather go back to the old style wolf mount heads than have the new more detailed art misaligned to everything else. Keep the same style everywhere, and if you're changing it, wait until they're all ready to change (and also until the artwork doesn't force a wrap to a second line the way the wolves currently do at my max resolution).

[crookedneighbor]

@MaidM It requires pixel art manipulations. It is currently being worked on.

@lemoness Any update on how many are left to do?

[lemoness]

Waiting on a total of 10, with 26 completed.

Of the ones that are currently/about to be in the game, we are missing
seven.

Is this something that can be done piecemeal, or does it need to be all at
once?

On Mon, Oct 19, 2015 at 6:49 AM, Blade Barringer [email protected]
wrote:

@MaidM https://github.com/MaidM It requires pixel art manipulations. It
is currently being worked on.

@lemoness https://github.com/lemoness Any update on how many are left
to do?

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-149218501.

[crookedneighbor]

It can be done a little at a time.

[lemoness]

The art for the currently completed Mount Heads is found on this Trello
card:

https://trello.com/c/8b70B8V6/36-mount-heads

I will post here as more are completed.

The ones that can currently be implemented are:

Cobras - @Rbrinkley

Roosters - @rbrinkley

Whales - @Rbrinkley

Gryphons - @rbrinkley

Tigers - @zorella

Rare Mounts (Polar Bear, Mantis Shrimp, Turkey, Mammoth, and Orca) -
@zorella

Wolves - @rbrinkley

Bears - @zorella

Cheetah - @rbrinkley

Pandas - @leafybear

Horse - @rbrinkley

Rock - @zorella

LIons - @zorella

Mounts for Egg Pets - @zorella

Bunny - @zorella

Marshmallow Slime - @zorella

Deer - @rbrinkley

Hedgehog - @rbrinkley

Foxes - @zorella

Octopus - @rbrinkley

Rats - @rbrinkley

T-Rexes @eevachu

Monkey - @nonight

Spider Mounts @eevachu

Seahorse @eevachu

Penguin @eevachu

Parrot - @eevachu

Sheep - @nonight

Owl @eevachu

On Fri, Oct 23, 2015 at 4:58 PM, Blade Barringer [email protected]
wrote:

It can be done a little at a time.

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-150719917.

[lemoness]

Rooster and Whale mount heads are complete as well! They can be found on the Trello card. I'm editing my previous comment to be up-to-date.

[lemoness]

Cobra heads are done! They can be found on the Trello card. I'm editing my previous comment to be up-to-date.

[lemoness]

With the exception of the spooky mount heads, all of the art is done! https://trello.com/c/8b70B8V6/36-mount-heads

[joyheron]

The artwork looks really good!
Has anyone made a pull request to implement the coding side of this yet? If not, I might give it a stab this weekend.
I don't know exactly every task that needs to get done, but I think the following tasks need to be accomplished:

• Uploading the finished artwork into the repository (renaming the images systematically)
• Check sprite generation and generate css files
• Update mount stable page so that it uses the correct css. I assume we should still have the default mount heads if the new mount heads are not available (for instance for the spooky mount heads).

A question to consider would be how to name the new css classes, since the Mount_Head_ prefix has already been taken.

[crookedneighbor]

@joyclark go for it.

Regarding the naming scheme, I was thinking Mount_Stable_Head_<whatever>

[lemoness]

Another could be Mount_Icon, if you want it to be shorter!

On Fri, Dec 4, 2015 at 6:41 AM, Blade Barringer [email protected]
wrote:

@joyclark https://github.com/joyclark go for it.

Regarding the naming scheme, I was thinking Mount_Stable_Head_

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-161982839.

[crookedneighbor]

I like Mount_Icon!

[joyheron]

I am working on this right now, but I just wanted to mention that there is some artwork which is currently not done:

• the spooky heads (this was already mentioned)
• the phoenix
• some of the gryphons (Red, RoyalPurple, Shade, Skeleton, White, Zombie)
• the frogs

This doesn't mean that they haven't been completed, but I couldn't find the images on the Trello card.

My plan is to copy the existing Mount_Head_ to be the Mount_Icon_ for these ones. Then, when the completed image has been created or found, it should just be a simple matter of inserting the correct image file.

[joyheron]

Oh, and I also could not find the JackOLantern mount

[lemoness]

Thanks for bringing those up! I will add them to the list of needs on that
Trello card.

On Sat, Dec 5, 2015 at 2:06 PM, joyclark [email protected] wrote:

Oh, and I also could not find the JackOLantern mount

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-162252212.

[lemoness]

I've also added a call for the new Peppermint Mount heads.

On Mon, Dec 7, 2015 at 5:20 PM, S Leslie [email protected] wrote:

Thanks for bringing those up! I will add them to the list of needs on that
Trello card.

On Sat, Dec 5, 2015 at 2:06 PM, joyclark [email protected] wrote:

Oh, and I also could not find the JackOLantern mount

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-162252212
.

[joyheron]

Also for future reference, if the images are already labelled as: Mount_Icon_{Animal}-{Color}.png by the pixel artists, that would save some time in the future (it would mean that the coders (or whoever is uploading the images into the repository) don't have to rename every file).

[crookedneighbor]

@joyclark's work has been merged in.

Still needed:

• [ ] frogs
• [ ] phoenix
• [ ] jackolantern

I also noticed that many of the mount icons did not have transparent backgrounds :disappointed: Will work for now, but in the long haul, that should be fixed.

• [ ] flying pigs
• [ ] cactus
• [ ] cuttlefish
• [ ] dragon

[lemoness]

It turns out that files uploaded with dropbox seem to lose their
transparent backgrounds :( I'm talking to the artists about it.

On Sat, Dec 12, 2015 at 3:24 PM, Blade Barringer [email protected]
wrote:

@joyclark https://github.com/joyclark's work has been merged in.

Still needed:

• frogs
• phoenix
• jackolantern

I also noticed that many of the mount icons did not have transparent
backgrounds [image: :disappointed:] Will work for now, but in the long
haul, that should be fixed.

• flying pigs
• cactus
• cuttlefish
• dragon

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-164201496.

[lemoness]

Transparent backgrounds are done, and so are frogs, phoenix, and jackolantern! https://trello.com/c/8b70B8V6/36-mount-heads

Peppermint mount heads and Spooky mount heads are still in progress.

[crookedneighbor]

@lemoness I did the peppermint and spooky mount heads already :)

[lemoness]

Aha! In that case, we should be set. I will notify the artist :)

On Tue, Dec 22, 2015 at 6:23 PM, Blade Barringer [email protected]
wrote:

@lemoness https://github.com/lemoness I did the peppermint and spooky
mount heads already :)

—
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-166789026.

[librarianmage]

What is the status on this issue @Alys?

[Alys]

It looks like the frogs, phoenix, and jackolantern still need to be implemented, with the images being available in the link from lemoness a few comments up.

So, help is welcome now from a coder to fix this.

[librarianmage]

@Alys I can do this

[librarianmage]

@Alys My current understanding of this issue is:

• [ ] Upload all mount images that haven't yet
• [ ] Rename the images to Mount_Icon_{Animal}-{Color}.png
• [ ] Compile sprite images

Is this correct?

[Alys]

@MathWhiz That sounds correct to me.

[librarianmage]

@Alys How do I run the grant-all-mounts script?
On Fri, Apr 15, 2016 at 6:24 PM Alys [email protected] wrote:

@MathWhiz https://github.com/MathWhiz That sounds correct to me.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-210682222

[crookedneighbor]

if you run

node debug-scripts/grant-all-mounts.js

It'll tell you the usage, which is to supply the user id as the final argument

node debug-scripts/grant-all-mounts.js fill-this-in-with-your-local-user-id

[librarianmage]

@crookedneighbor Thanks!
On Wed, Apr 20, 2016 at 2:07 PM Blade Barringer [email protected]
wrote:

if you run

node debug-scripts/grant-all-mounts.js

It'll tell you the usage, which is to supply the user id as the final
argument

node debug-scripts/grant-all-mounts.js fill-this-in-with-your-local-user-id

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#issuecomment-212561110

[librarianmage]

@crookedneighbor Do I need to have npm start running when I run npm run sprites?

[librarianmage]

Frogs:

[librarianmage]

Rare Mounts:

[lemoness]

This looks great! Thank you.

On Thu, Apr 21, 2016 at 6:03 AM, Blade Barringer [email protected]
wrote:

Closed #4618 https://github.com/HabitRPG/habitrpg/issues/4618 via #7094
https://github.com/HabitRPG/habitrpg/pull/7094.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/HabitRPG/habitrpg/issues/4618#event-636120906

[librarianmage]

@lemoness I'm glad you like it!