Text box always appear on top though on lower layer

My setup:

layer position and description:

HUD - this layer contains feedback screens (it is a global layer built in a different layout) GAME - this layer contains the input text boxes with submit buttons BG - this layer contains the background

When the student presses the submit button, a feedback screen appears .

Unfortunately though the feedback screen should be on the top to the textboxes since the HUD layer is above the GAME layer, they still appear above the feedback screen.

Does anyone know how to correc this?

Text objects are not drawn the same way that sprites are. They are automatically rendered on top of everything else - it's something to do with the way canvas renders text.

The only thing you can do is make your text invisible when that particular window isn't active, or you can replace the text object with a spritefont object, which will act how you would expect it to (being able to go 'underneath' other objects).

~Sol

I am confused. Can I use spritefont to be input text? I guess I would need to givei it html code to act as input text but I am not really sure how to do that.

I did not realize that the rendering was Canvas so I guess this makes sense though it surprises me since html does have input text.

Yeah sorry, text or input fields... also iframe plugin... really anything that resembles "form data" or anything like that will always be drawn on top.

You have to be clever with making things turn invisible or move off-screen when not being used - or make something using spritefont and custom text field entry. This is not a limitation of Construct 2, it's just how HTML5 works in general. Unfortunately, there's not any "super easy" answer to solve the problem. In the past when I had this issue, I came up with clever ways to simply hide the input fields when they don't need to be used, then display them only when the user has to interact with them.

~Sol

I made this hacky thingy some time ago, maybe it could be of use to you if you want to circumvent form controls limitations.

https://www.dropbox.com/s/82jbyzjymz69d ... .capx?dl=0

Thank you guys. This is kind of what I figure out. Creating a work around is such a pain because I have so many things going on in this project.

Magitross: Thank you for your example. I am going to try and see how I can implement that in my game.

C2 developpers could have given us the ability to set regular text to input text. It was their choice to use canvas which is not the best for that IMHO. I have worked a lot with Adobe Edge Animate and JavaScript and you can use text input object on layers and have layers above without using canvas but plain html/css code.

Magistross.

Fantastic. This is going to correct my problem. I tried it with my 2 layers:

feedback

spritefonts

And it is working perfectly.

THANKS YOU!!!!

BTW I have one more question about the text boxes. When the text is a number with decimals when adding the text to the sprite font it cuts off zero likes $ 10.00 becomes $ 10, 0.70 becomes 0.7.

How do you format the text so it shows correctly?

That's string formatting. Unfortunately, C2 doesn't offer much in that department, you need to be clever and come up with something. If you want to always display a number with 2 decimals, one way to do that would be this expression :

floor(value) & "." & zeropad(round((value * 100) % 100), 2)[/code:yq0rk9s4]

Thanks. That's great!