Circle.png is not centered

[edwinbradford]

Hi, I am experimenting with Mantra and Stylie. The circular shape within circle.png is not centered within the png. When you apply a z-rotate this causes the circle to wobble. It should rotate around its center. Recreating the .png with the circle centered will fix this. I've attached a screenshot with the png selected in Chrome so you can see the offset.

[jeremyckahn]

Hi @edwinbradford, thanks for letting me know about this! I'm in the process of upgrading Rekapi for both Mantra and Stylie (though nothing has been pushed to Github yet), which is a little involved, but once that is stable I will fix the image and make sure that it gets out in the next release. I will also fix the image in Stylie.

[edwinbradford]

Hi Jeremy,

Is this any use? I corrected the image myself. I just downloaded it, fixed it in Photoshop and re-exported it. I'm a UI Designer working for a video games company. We're making our UI with a new tool that uses HTML and CSS and I'm exploring using Mantra and Stylie as my main animation tools trying to avoid Adobe bloatware :)

I hope it helps.

Edwin

• + + + + + + + + + + + + + + + +

Email: edwinbradford@gmail.com

Tel.: +44 7981 873 771

• + + + + + + + + + + + + + + + +

2016-05-17 14:25 GMT+01:00 Jeremy Kahn notifications@github.com:

Hi @edwinbradford https://github.com/edwinbradford, thanks for letting me know about this! I'm in the process of upgrading Rekapi for both Mantra and Stylie (though nothing has been pushed to Github yet), which is a little involved, but once that is stable I will fix the image and make sure that it gets out in the next release. I will also fix the image in Stylie.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jeremyckahn/mantra/issues/1#issuecomment-219716363

[jeremyckahn]

It looks like the image file wasn't attached to the Github comment — I guess the email-based issue responses don't support that. You can attach a file to the comment directly via Github's interface, though.

What you're working on sounds really cool! Game design and development is what I'm hoping to use Mantra and Stylie for in the long term, so I'm happy to see that someone else is doing it too. Please keep me in the loop with how that progresses, and if I can do anything to help!

[edwinbradford]

I edited it directly in GitHub. Hopefully you have it? Really happy to keep you updated and send feedback. Both Mantra and Stylie are potentially useful for me. There's going to be a potential trend towards HTML and CSS in AAA game development because Flash is being deprecated.

[jeremyckahn]

Very cool! I agree that there is a huge opportunity for AAA games to be built on top of web standards. I'm very interested in seeing how that develops.

Your image attachment came through, so thanks for fixing that up. However, I noticed that the shadow was cropped off a bit, and I would like to keep that in the image. Instead, I would like to add a little more padding to the top and left sides of the circle image in order to center it.

Don't feel that you need to do this yourself if you don't want to. I can make the edit in GIMP or something, which I should have time for tomorrow.

[edwinbradford]

No problemo my bad. I'm not spending much time on these because we're under a deadline but if you can use them you're welcome.

This image is now 48px with your original shadow.

This image is the same size with a centered shadow I recreated. Bear in mind that a z-rotation will rotate the shadow so if you don't want that use this image.

Do you know this company http://coherent-labs.com/ they are developing a UI tool for games based on HTML and CSS. I thought it might interest you just in case you weren't aware of them.

[jeremyckahn]

Wow, thanks for taking care of that! I'm not great with image editors, so we're both probably better off that you took care of it. ;-)

I'll play with both of these images and see which one works better in practice. However, since you are a UI designer and also a user of Mantra/Stylie do you have a preference for the full-shadow image or the off-center one? My thinking is that the off-center image might be better for clearly seeing rotation changes, but I'm sort of on the fence.

I will check out Coherent Labs for sure, thank you!

[edwinbradford]

Glad to help. It's your editor so you should ultimately decide but usually we wouldn't rotate an offset shadow probably because it wouldn't normally happen in nature. You have that very clever cut through the circle so you can see it rotating with or without the shadow.

Please decide which you prefer and if you want any amends let me know. If you have a layered master file I can do any edits easily. Does Photoshop open Gimp files? I can't remember. I expect Adobe will say no just to be awkward.

[jeremyckahn]

That all makes sense. Thanks for your input! Though Mantra and Stylie are tools for designers, I am not a designer myself so I don't have all of the necessary sensibilities to make decisions like this with confidence.

The original assets were actually made in Photoshop, but I'd have to dig around for the original source files. Mantra's overall look and feel was extrapolated from Stylie's (which is an older project), which was designed by the brilliant @jonvictorino a few years back. If necessary, the circle image shouldn't be too hard to recreate.

I won't have time to make this change today, but I will update this thread as soon as I have a chance to do so!

[edwinbradford]

Thanks Jeremy. I'll hopefully be using Mantra and Stylie over the next month so I'll pass you any feedback. If you need any art support let me know.

[jeremyckahn]

The image has been updated and the change has been pushed to develop. This is definitely better than before, when the image was off-center:

Here's the same onion-skinned straight line with your new image:

It's looking much better! I think it could even be perfectly straight if the image was retina-friendly, but that's a task for another day. It's actually something I'd like to do for both Mantra and Stylie, but that's a fairly high-effort task (also I don't totally know how to do it...), and it hasn't been a high priority relative to the other features and improvements I'd like to make.

Anyways, thanks for your help! I will close this issue once I do a deploy, which I am waiting do once I've finished updating some of Mantra's dependencies (specifically the work I am doing in rekapi-timeline, which is the timeline UI of Mantra). Hopefully that shouldn't be too far off!

[edwinbradford]

There shouldn't be any wobble if the image is centered. I remade the image at home from a new master file and checked it's properly centered. You should see a straight line with onion skinning turned on. The onion skinning is a very interesting feature I'd forgotten by the way. If it's not a straight line with this image I'll have to look into why. The slot in the original circle was 3px which doesn't center pixel perfect in an 48px image so I changed the slot size to the nearest even number 4px.

I've just figured out how to use GitHub for another project so I could fork it and push uploads if it becomes really useful to us. Anyhow I hope this is better.

[jeremyckahn]

Thanks for taking another pass! It may not be a problem with the image itself, but rather a 1-pixel CSS issue. I should have time to look into this more closely over the next day or two.

You may have noticed that I don't have a lot of time to work on Mantra (or any of my open source projects) very much lately, but rest assured that GitHub issues like this are my top priority! Thanks for your patience.

[jeremyckahn]

I figured it out. Sure enough, the issue was a simple (if obscure) CSS rendering quirk. You can see the fix in the commit referenced above. Here's how it looks now:

CSS is a strange and mysterious beast! In any case, this will be a part of the next release. I will also make this fix for Stylie. I'm glad you prompted me to go back and revisit this, so thanks for that!

[jeremyckahn]

Oh, and I didn't use your most recent circle.png file because the rendering seems to be pixel-perfect without it. Considering that, it's best not to make unnecessary image changes because of the inefficient way that Git versions binary files — doing so would permanently bloat the repo size a bit.

[edwinbradford]

I've used font-size: 0 in the past to fix cross platform bugs but it makes me feel uncomfortable as font-size should not control space around an image.

I had a look at your css in Chrome developer tools. The only thing that I noticed was you have font attributes set on the html element. I'm not sure if that would cause an issue, usually they're set on the body element.

Anyway in case it's useful I got a perfect rotating circle with the existing live image by adding the following:

.preview-view .actor { transform-origin: 22px 20px 0; }

I'm not sure what .preview-view .actor would equate to in your precompiled source code but I'm sure you know. transform-origin: x y z is probably more reliable than font-size but I haven't tried it in other browsers.

With the new centered image you're using you would just need to adjust those x y z values by maybe one pixel and ignore the font discrepancy which is probably due to something css doesn't like elsewhere.

[jeremyckahn]

Regarding the font-size: 0, I don't know what issues having it set on the html instead of the body element might have. I'd be open to changing that, so long as it doesn't break anything. Moving the font settings around didn't seem to make a difference in my limited experimentation, so I'm inclined to just leave it as-is for the moment. I'd be open to a pull request to change the styles to conform to best practices, though.

As far as using font-size to fix this issue, I can understand your ambivalence. It doesn't seem like it should fix this issue, but I think it's actually quite safe in this case. The rule is scoped quite low in the DOM and shouldn't affect any actual text, just the actor images. My guess is that font-size: 0 is removing any space around the image that comes as a result of a font baseline size that is larger than 0. I bet someone with a deeper knowledge of the mechanics CSS font styles would know more.

In any case, I feel that the font-size: 0 approach is safer than setting a transform-origin because it's the normalization of a style rather than an offset based on the size of the actor image. This is significant not only for maintenance reasons, but because the transform properties can change quite a bit based on the animation. Depending on the transforms applied by the user, a non-normalized transform-origin can result in an inaccurate animation preview. I know you were only able to modify the transform-origin value in the devtools, but here's what I saw when I made the change you suggested in the source SASS file:

Perhaps I missed or misunderstood something, but I think the current fix is the safest way to ensure an accurate animation preview. It seems to work as expected in modern versions of Chrome, Firefox and Safari (the browsers that I test Mantra and Stylie in).

[edwinbradford]

Maybe transform-origin in the sass is applied to more than one element in the output css. No matter, if font-size works and you feel more confident in the reliability I don't see any problem. I'll feedback more on Mantra and Stylie once I've had more experience with them. I'm not sure how much time you want to devote to them.

[jeremyckahn]

I work on my various open source projects slowly, but steadily. I don't have much time for open source these days, but I do set aside some amount of time during each week for it. I may not be able to implement larger changes quickly, but feedback from users is invaluable and will help me to focus on the most important things over the long term. Please don't be shy about opening up new issues for bugs, feature requests, comments, and questions!

[jeremyckahn]

This has finally been deployed, along with a number of small performance and usability improvements elsewhere in the app, in 0.7.0. Stylie has also been updated and deployed with the new circle.png image. Thanks again for contributing, @edwinbradford!

[edwinbradford]

You're welcome. At the moment we're using css transitions rather than keyframe animations on our project but I'm hoping to produce more complex keyframe animations before long and Mantra and Stylie will be my starting point. Thanks for all your hard work Jeremy.