Upcoming Events! Community Event Calendar

Bugsmashers: Episode 40 Written Wednesday 4th of January 2017 at 12:00pm by StormyWinters

Mark Abent is here with another Bugsmashers, check out how the latest bug gets smashed!

As per usual, anything said during the show is subject to change by CIG and may not always be accurate at the time of posting. Also any mistakes you see that I may have missed, please let me know so I can correct them. Enjoy the show!

TL;DR (Too Long; Didn't Read)

  • When using a weird screen resolution when activating the mobiGlas the edges get offset and cut  

  • What the UI team have done is based on the renderer resolution or aspect they will scale it, scale down/up depending on your screen width/height

  • Once scaling is fixed this causes the close button to not highlight because it needs to be moved down, this happens because they take into account the width and height but not the viewport offset(X/Y)

  • This was fixed by taking into account the position change of the flash so it offset correctly

Full Transcript

Mark Abent: Hey everyone, welcome to Bugsmashers, I’m your host Mark Abent. I’m a Gameplay Programmer here at CIG, Los Angeles and I’m here to show you behind the scenes of some bugs and how we smash them. Let’s take a look.

Hey everyone, we’re here in my fancy, dancy test level and we have a fun UI problem with the mobiGlas, as you can see I always use a weird screen resolution and it always tends to make the HUD go funky, dunky you can kind of see it with the visor right now and when you pop up the mobiGlas as you can see the edges tend to get offset and cut. If my resolution was little bit wider I would be able to see the actual extent of the mobiGlas. So the UI guys are like, “well, we can’t have this we need it to work on well, all resolutions so it scales correctly on the screen’ and so that’s what the good old UI folks in the UK office have done.

So here is our original code for our mobiGlas instance and we have a standard scale that the designers set up which for all intents and purposes worked for the scale that they were working in in their resolution, however it doesn’t work in this crazy resolution that I have of 1280 x 960 because I’m weird. I like to see my code on my left and right side and it causes all sorts of fun problems such as this resolution shenanigans.

So what the UI guys have done is based on the renderer resolution or aspect they will scale it, so it will scale down or up depending on how crazy your screen width and height are. So, let’s activate that code to see what happens, bam. So we take our original scale, we get the rendering and we scale it based on the renderer width and height so that if the aspect is slightly wider or slightly taller it will try to focus it more onto the centre of the screen. All right, let’s hit the magic recode button and see what that does.

All right, as you can see recode is finished and our scaling has worked pretty nicely in my crazy resolution it actually shrinks it down so that I can see the whole thing of mobiGlas and the only other problem that exists is here’s the close button and as you can see it’s not highlighting cause I have to move it down a bit… where is it, where is it, somewhere around here.    

There it is, so as you can see there’s quite a bit offset from here to here. Let’s see what they did to fix that, so here in flash UI element, this is where it takes the mouse input and send it off to our flash elements and this specific region of code it’s getting our mouse coordinate sand it’s getting the viewport of the renderer and the flash and it’s trying to see where it should send the mouse input. As you can see we have for our X and Y we’re taking into account the width and height but we’re not taking into account the viewport offset which is the X and the Y.

So, if that button was at 0,0 way up at the top we would be able to click it because there was no X/Y offset but however we have an X and Y offset for where we are to where this button is and we’re not taking into account of that offset. So, let’s do that...let’s see what happens.

This recode should go by pretty quickly but if we have a little box and we have another like, we can use that, square here. Our mouse input for… I should say this position is going to be this X offset and that’ll be that position. For this position right here, it’s going to be this X offset plus this size and what this code was doing was taking into account this position and not the this offset. So, we do both of these and now we can click here.

All right, recode has been done and we should be able to… voila. Click on the magical button so now everything scales correctly and I can click on buttons as you would expect because well we’re taking into account all the offsets. Hope you guys enjoyed.

So, today’s bug was something to do with the mobiGlas, you pop it up and oh no, if you have a crazy resolution... mobiGlas right in your face and you can’t see on this side or this side because it’s clipping or it’s really, really small. It was just an issue with not, you know, scaling the thing based on the resolution. So the good old UA… UI programmers in the UK made it so it scales depending on your resolution and now it looks pretty great even if you do some crazy high resolution or some low resolution and it’s not all in your face or really, really tiny.

Then the other thing that they fixed was they had a little button and if you clicked on the button it wouldn’t, you know, work because it was actually offset and it was just a small little thing to take into account the position change of the flash so that it offset correctly so when you hit the button it was actually right here instead of down here. Hope you guys enjoyed, til next time.


Director of Fiction

Moonlighting as a writer in her spare time StormyWinters combines her passion for the written word and love of science fiction resulting in innumerable works of fiction. As the Director of Fiction, she works with a fantastic team of writers to bring you amazing stories that transport you to new places week after week.