hmm... image layering...

silentgator
I am curious if there is any current way to use layering inside quest for images, IE have a avatar image, and clothing images, and being able to apply the avatar image below and the clothing images ontop etc etc?

The Pixie
You can certainly do that in a browser with CSS, using absolute positioning, so I would guess you can in Quest too.

qroft
Maybe if you create several PNGs with transparency and whatever armor or weapon someone has, you can load that PNG on a predfined z-index !

silentgator
Hmm, alright ill take a look at both possibilities myself first to try and learn as am, and if i need some help ill post back here with what im having issues with, not very good with HTML/CSS but ill give it a go, and see if i can magic somthing up, here's hoping, but if i cant figure it out, or cant come up with something, ill reply back for any tips, or possibly some starter code to show me how to set somthing basic up that i can use to learn and create what im looking for, thanks for the pointers.

The Pixie
It is more complicated than just HTML and CAS, you will need JavaScript/JQuery too. I had a quick play around, and got this to work. You should create a function called InitUserInterface, and put this code in it. I had done a similar thing in Twine (not simple there either), and had some images to try it with. All the images are PNGs, and the higher ones obviously need transparent regions. They are all the same size too.
JS.eval ("$('<div id=\"imagediv\" />').insertBefore('#status');")
JS.eval ("$('#imagediv').html('<img src=\"" + GetFileURL("mbase.png") + "\" id=\"image1\" /><img src=\"" + GetFileURL("m_red_cape.png") + "\" id=\"image2\" /><img src=\"" + GetFileURL("m_green_uw.png") + "\" id=\"image3\" />')")
JS.eval ("$('#image1').css('position', 'fixed')")
JS.eval ("$('#image1').css('top', '0px')")
JS.eval ("$('#image1').css('left', '0px')")
JS.eval ("$('#image2').css('position', 'fixed')")
JS.eval ("$('#image2').css('top', '0px')")
JS.eval ("$('#image2').css('left', '0px')")
JS.eval ("$('#image3').css('position', 'fixed')")
JS.eval ("$('#image3').css('top', '0px')")
JS.eval ("$('#image3').css('left', '0px')")

The first line creates a new HTML DIV element, into which the images will go.
The second line puts content into that DIV, specifically three images. Each image is grabbed using the GetFileURL function, and the bottom image must be first. Each image is given its own "id"; image1, image2, image3.
The remaining lines set CSS properties on each image, setting the position to absolute, and placing each in the top left corner. As each is positioned at the same place, they go over each other.

silentgator
Hmmm, i see, i think i may have to read up alot on CSS and HTML, the java bit, well im sure i can deal with easily, but the CSS and html stuff always confuses me, ill use your code bit as a starting reference though, Im guessing the "InitUserInterface" function is a already made function im just cutting into yes? or am i going to need to apply it to somthing internal?

The Pixie
InitUserInterface is a function already in Quest, but empty by default. At the bottom left, you can have Quest show library objects/functions/etc. to find it, then top right there is a copy function to put it into your own game. You can then paste in the code.

It is JavaScript, not Java by the way. They are not at all the same. And I would say JavaScript is much more confusing than HTML/CSS.

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums