Text box always appear on top though on lower layer

Get help using Construct 2

Post » Wed May 17, 2017 1:44 pm

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?
B
8
S
1
Posts: 86
Reputation: 618

Post » Thu May 18, 2017 7:17 am

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
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
80
S
34
G
40
Posts: 3,029
Reputation: 30,393

Post » Thu May 18, 2017 1:12 pm

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.
B
8
S
1
Posts: 86
Reputation: 618

Post » Fri May 19, 2017 12:59 am

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
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
80
S
34
G
40
Posts: 3,029
Reputation: 30,393

Post » Fri May 19, 2017 3:21 am

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
B
67
S
28
G
24
Posts: 970
Reputation: 18,675

Post » Fri May 19, 2017 3:01 pm

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.
B
8
S
1
Posts: 86
Reputation: 618

Post » Fri May 19, 2017 3:12 pm

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!!!!
B
8
S
1
Posts: 86
Reputation: 618

Post » Fri May 19, 2017 3:49 pm

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?
B
8
S
1
Posts: 86
Reputation: 618

Post » Fri May 19, 2017 4:42 pm

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 :
Code: Select all
floor(value) & "." & zeropad(round((value * 100) % 100), 2)
B
67
S
28
G
24
Posts: 970
Reputation: 18,675

Post » Fri May 19, 2017 5:24 pm

Thanks. That's great!
B
8
S
1
Posts: 86
Reputation: 618


Return to How do I....?

Who is online

Users browsing this forum: wenwen11212016, Yahoo [Bot] and 7 guests