messy sizing?

[Mark]

[It will be a long post, sorry about that but I want to give as much details as I can. I'm stuck with the issue below... baaadly... so any comments/notes are much appreciated]
hi guys,

I bumped into an issue in openFL and this thing is driving me crazy... Trying to resize on Event.RESIZE, but the screen gets messy (items misplaced).
When the app initially starts, both the game area and left and right "black bars" I place, are in position and look perfectly fine, as well as their values (x, y, width and height). Resizing window, or going full screen and back to normal, however, messes up everything even though, the same 'resize code' is running behind.

Here's the flow and results:
1. ALT+ENTER to full screen: almost OK (left & right bars are visible, world is visible), but pushed a little to the right of the screen (i.e. right black bar is much thinner than left).
Could be miscalculation, but based on trace data, my calculations are right.

2. ALT+ENTER back to "normal" (initial) screen size: the 'world' is a small cube in the upper area of the screen (i.e. it's about 160, 0, 300, 200 rect).

(Doing the above again gives consequently the same results, so the screen will never be perfect again, as it was when the application started).


The numbers are:
1. AFTER INIT (window size: 1280x720; all values below are perfect)
stage data: 1280x720; scaleX, Y: 1, 1
tileSize:           64; //calculated var
world width:       960; //calculated var
black bars' width: 160; //calculated var

Sprites (x, y; width, height)
World:            160, 0; 960, 720
left black bar:     0, 0; 160, 720
right black bar: 1120, 0; 160, 720


2. After ALT+ENTER to full screen
stage data: 1920x1080; scale: 0.6666666667 (perfect values)
tileSize:           85.33333333; //from calc. variable, perfect value
world width:       1280;         //from calc. variable, perfect value
black bars' width:  320;         //from calc. variable, perfect value

Sprites (x, y; width, height)
World:            320, 0; 1706.666626, 1620 //??? - after it was set to   1280x1080!
left black bar:     0, 0;  640*,       1620 //was also set to a calculated 320x1080!
right black bar: 1600, 0;  320*,       1620 //same as above

* -> The funny thing is, that left bar's width is 640, while right bar's is 320, however, both come from the same variable, just a few lines of code away from each other, within the same function, and the source variable's value is not touched anywhere here!

Code snippet:

(...)
border_Left.width  = Cmn.myWorld.visibleRect.x; //traced value: 320, value set: 640 == NOK
//(...) setting rest of border_Left Sprite's values, then:
border_Right.width = Cmn.myWorld.visibleRect.x; //traced value: 320, value set: 320 == OK
//and again, the value of 'visibleRect.x' was not changed between these two lines of code


3. After ALT+ENTER back to normal screen (compare to #1, this one here is messy)
stage data: 1280x720; scale: 1  //OK as always
tileSize:           64; //calculated, value is perfect (based on stage data)
world width:       960; //calculated, value is perfect ..same
black bars' width: 160; //calculated, value is perfect ..same

Sprites (x, y; width, height)
World:            160, 0; 720, 480 //wrong. again, after setting it to the right values
left black bar:     0, 0; 160, 720 //OK
right black bar: 1120, 0; 160, 720 //OK



The good news(ish) is the messiness is consequent from this point, so #2 and #3 repeats going to/from full screen.


Bad coding, I would say, however, the values I calculate are correct - on the other hand, applied to Sprites' properties (width/height), the values returned by the Sprite are crazy. Such as in the above snippet with the "black bar", or as well as here:

//sprWorld is a Sprite
//setting x, y, and then the width, right before height:
sprWorld.width = worldWidth; //worldWidth is a float var, it's value is exactly 960
Sys.println(sprWorld.width); //RESULT: 1706.666626 - ?????? not very good....
//x and y retvals however are consequently correct

It feels like Sprites have some built-in auto-size mechanism or something, and whatever value I set, it is just an approximate value for something calculated, and over that I have no control. However, if that's the truth:
a) how to turn it off?
b) how to handle this?
-more importantly-
c) why doesn't this happen to border_Left and border_Right?

Please note that I commented most of my 'world code' and now just drawing a simple rectangle for testing, instead of tile sheets, map data, entities, etc. So I get the results above just with a plain Rectangle.


Thank you for reading the long post and thank you for all the trouble in advance!


Cheers,
Mark

p.s.: using "stage.scaleMode = openfl.display.StageScaleMode.NO_SCALE;"

[Hugh]

Hi,

I may have glossed over the details here, but some general advice:

 - Use StageScaleMode.NO_SCALE - check

 - Do not set/use the "width" member - this depends on what is drawn, and the scale.  Just use "scaleX" and "scaleY".

 - Set your background to black (for black bars)

 - You can stick your whole world in container sprite, or "recycle" the Lib.current sprite, which does not do much else.

    - Set the x/y/scaleX,scaleY of this container sprite (not width/height)

        - you may want to round the x and y in integer values to get sharper lines in some cases.

    - Set the scollRect if you want clipping

    - Use   container.globalToLocal(  new Point(event.stageX, event.stageY) ) to convert to "world" coordinates.

Hugh

[Mark]

hi Hugh,

You saved me! (This was not the first time! Are you a superhero or something? :).

So, for other newbie-to-gamedev folks out there who might happen struggling with sizing/positioning and end up here, the big lesson is:
business dev: calc. new size, resize, re-position, InvalidateRect (as we know :), however,
game dev: scale and position only, size and redraw are done 'automatically' by the environment! (at least for haxe/openfl/etc combo :)

Working with width/height as if they were read-only properties (which they actually should be, though...) and change scaling, 'x' and 'y' only == things work like a charm!
Some side note to those slippin' in my boots: One also has to set

this.stage.align = openfl.display.StageAlign.TOP_LEFT; //TOP_LEFT, nothing else!

otherwise the "black bar" on the left will always seem to be mispositioned / oversized in windowed mode (as there's no "CENTER" alignment, I went for "TOP" the first time, which is also buggy, so in windowed-mode the game area was shifted outside the screen on the right, while it was centered perfectly in full screen - this was very confusing... and annoying after a while :).


Thank you for the help again!

Cheers,
Mark

[BP]

Hey... great you got this working... You should put together a super simple example and throw it up on Github somewhere... then it'd be 10x easier for someone else to pick it up and use it too!