I’ve been pulling may hair out trying to figure out why the animation of my scene that I’ve added to my html page is not what I created in the editor…I’m totally stumped. Could someone please help?
And here is another screencast showing what it’s like in the browser (I just did a ‘Preview in Browser’).
This is what is different:
When the animation starts, 2 of the puzzle pieces are not visible. Both appear midway through the animation.
Those same 2 puzzle pieces suddenly disappear before their motion ends. They are supposed to slowly fade out after coming to rest.
Three puzzle pieces come to a stop far above the “soil” object (the long, brown shape). They are supposed to stop their motion behind or just slightly above the soil.
I’m attaching this project file in case that helps in troubleshooting. seedhead.hype.zip (51.9 KB)
I did’t have a lot of time to thoroughly run things down but You have your two problem pieces (“Back piece” & “Seed”) set to “Dynamic - Full Physics Body”. (Please see Fig.1 below.)
When I set these two pieces to “Inactive - No physics applied” things appeared to work correctly. You will be a better judge than I, but at the least this insight might help to get your animation working as You envision.
Hype does not factor in the Physics setting until it runs - hence the discrepancy with the “editor” vs. “render”.
Thanks Jim. That did fix that weird behaviour of the two shapes. I was playing around with physics–I wanted to simulate leaves falling to the ground, but abandoned it when it seemed to make no difference. (sigh) I really don’t understand how the physics controls work in Hype.
I still have a problem with positioning of shapes at different viewport sizes. I want everything to scale proportionally when the size of the canvas changes, keeping the same aspect ratio as the design (I can’t understand a use case for NOT having this, so I don’t understand why this doesn’t happen automatically…but I digress).
The problem is that the motion paths don’t scale with the size of the canvas. I have set up everything to scale proportionally as far as I can tell:
Scene inspector:
Every element is set like this:
Here’s how the final frame of the animation looks in the editor (this is how I want it to look in the browser (notice one shape is barely visible, resting on top of the soil) :
But in the browser, that final frame can look like this:
…or this:
And it all depends on the height of the canvas. Why is this, and how do I make it not do this?
The key here is to add your elements to a group and use these Flexible Layout options on that group:
The boundary of the group is important – make sure it lines up with the outer bounds of your scene area to get the head to scale up in reference to all edges of the viewport. For your case, you could make that group boundary smaller but I’m not sure what else you have planned here:
Ok, great, that works beautifully. Appreciate the help, but if you’re looking for feedback, I should say that it’s a lot of hoops to jump through (and also undocumented) for something that should just work. Cheers!
