Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Setting page elements to scale with background...
Essential notes:
Building in Jonah story format.
Is there a better way to set the location of elements on a page so they're where you want them in relation to a background, regardless of differing user resolutions? Currently I'm running my tests off of elements that look fine in 1600x900, but I'm pretty sure they'll not appear as well in higher/lower resolutions. Considering that, I've been looking into how to get them to scale better, yet I've not found much that helps guide me, at least where Twine is concerned. I think position: relative; might be what I'm looking for, except that it's intertwined with a parent element that I'm not sure how to make references to. #passages, maybe?
I think this is the last major hurdle for what I'm working on, as I could go with what I have now, write up what I want and release it, but knowing that it might not display correctly because I couldn't figure out how to scale the various elements for differing resolutions seems like a major loss, not to mention a killer for its appeal.
Edit: As a small example, if it remains unclear...
The problem I'm running into is:
I want the page elements on top of the background to match with it.
So imagine if you have a background of a landscape with a volcano top right and plains at its foot in the foreground and you want triceratops to stay at plains, pterodactyls staying in the sky near the volcano in the background of the landscape.
However, let's say the background fits their screen, but having triceratops and pterodactyls set to fixed positions wouldn't keep them in the right position atop the background, resulting in triceratops in a volcano and pterodactyls somewhere way off screen in space or something. Not ideal (albeit space pterodactyls are, as Ridley proves, rather amazing).
Building in Jonah story format.
Is there a better way to set the location of elements on a page so they're where you want them in relation to a background, regardless of differing user resolutions? Currently I'm running my tests off of elements that look fine in 1600x900, but I'm pretty sure they'll not appear as well in higher/lower resolutions. Considering that, I've been looking into how to get them to scale better, yet I've not found much that helps guide me, at least where Twine is concerned. I think position: relative; might be what I'm looking for, except that it's intertwined with a parent element that I'm not sure how to make references to. #passages, maybe?
I think this is the last major hurdle for what I'm working on, as I could go with what I have now, write up what I want and release it, but knowing that it might not display correctly because I couldn't figure out how to scale the various elements for differing resolutions seems like a major loss, not to mention a killer for its appeal.
Edit: As a small example, if it remains unclear...
The problem I'm running into is:
I want the page elements on top of the background to match with it.
So imagine if you have a background of a landscape with a volcano top right and plains at its foot in the foreground and you want triceratops to stay at plains, pterodactyls staying in the sky near the volcano in the background of the landscape.
However, let's say the background fits their screen, but having triceratops and pterodactyls set to fixed positions wouldn't keep them in the right position atop the background, resulting in triceratops in a volcano and pterodactyls somewhere way off screen in space or something. Not ideal (albeit space pterodactyls are, as Ridley proves, rather amazing).
Comments
Edit:
In the meantime, if anyone has some more advice from where they've done something similar, I'd definitely appreciate it too. This is going to take me a bunch of throwing stuff together to see what sticks.