Games [XUI2D] Limit the ScreenAABB edges not crossing the world edges

[Gunther]

Hi,

I am wonder if there is an easy way to limit the screen to display regions outside of the tiles layers?

Greetings, Gunther

 

[Erel]

Moved to the game forum.

Please provide more information (a screenshot will also be useful).

 

[ilan]

Hi,

I am wonder if there is an easy way to limit the screen to display regions outside of the tiles layers?

Greetings, Gunther

Have a look at my breakout example.
I am limiting the movement there but there is a much simpler way. Just create a chainbody as a big rect as your world frame or use 4 lines for that. Like this they will stop your bodies from crossing the screen frame.

 

[Gunther]

Dear Erel, Dear Ilan,

yes, this already done. The objects limiting by lines(objects at the Map edges like the 'LeftEdge' in the mario example) is not an issue.

It is more or less that the screen is showing the blue part (background) with is not the area of the tiles.

So, clipping the screen inside the Tiles is needed.

 

[ilan]

You can either change the ratio value from 1.33 to 1.78 (IN DESIGNER SCRIPT) it will fit most devices (except ipads or tablets where the screen ratio is more a rect) or you could set the background color to black and use the empty space for your game states like lifes, score, level number etc. You can add b4x views like labels and use the designer to fit the correctly.

 

[Gunther]

Dear Ilan,

not exactly to do with the ratio.
If the the little guy is jumping than the blue background gets bigger since the World is sinking down. Or if ihe goes down the world the one can see the blue part below the world. Sure at the sides the same.

Means this world is not only bigger horizontally also vertically and therefore vertical scrolling is needed, too.

here the example for moving around in both directions but the screen doesn't stop at the world edge.

' ####################################################
    Dim WorldFixX As Float, WorldFixY As Float
    ' horizontal
    If bw.X2.ScreenAABB.TopRight.X - bw.Body.WorldCenter.X < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixX = MIN_DISTANCE_TO_SIDES - (bw.X2.ScreenAABB.TopRight.X - bw.Body.WorldCenter.X)
    Else If bw.Body.WorldCenter.X -  bw.X2.ScreenAABB.BottomLeft.X < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixX = -(MIN_DISTANCE_TO_SIDES - (bw.Body.WorldCenter.X - bw.X2.ScreenAABB.BottomLeft.X))
    End If
    ' vertical
    If bw.X2.ScreenAABB.TopRight.Y - bw.Body.WorldCenter.Y < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixY = MIN_DISTANCE_TO_SIDES - (bw.X2.ScreenAABB.TopRight.Y - bw.Body.WorldCenter.Y)

    Else If bw.Body.WorldCenter.Y -  bw.X2.ScreenAABB.BottomLeft.Y < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixY = -(MIN_DISTANCE_TO_SIDES - (bw.Body.WorldCenter.Y - bw.X2.ScreenAABB.BottomLeft.Y))
    End If
    '
    If WorldFixX <> 0 Or WorldFixY <> 0 Then
        'update the screen center
        Dim center As B2Vec2 = bw.X2.ScreenAABB.Center
        If WorldFixX <> 0 Then center.X = center.X + WorldFixX
        If WorldFixY <> 0 Then center.Y = center.Y + WorldFixY
       
        bw.X2.UpdateWorldCenter(center)
      
'        bw.mGame.WorldCenterUpdated(WorldFix)
    End If
  
    ' ###################################################

Greetings.

 

[ivan.tellez]

Have a look at my breakout example.
I am limiting the movement there but there is a much simpler way. Just create a chainbody as a big rect as your world frame or use 4 lines for that. Like this they will stop your bodies from crossing the screen frame.

He is not talking about limiting the character. His game map it is bigger than the screen and the character can move left, right, Up and down (walk/Jump/fall)

I think he wants to keep the character close to the middle of the screen, except if it is close to the edge of the map, in that case, the map should stop moving at the edge and the character start moving towards the edge.

Is this what you want @Gunther ?

 

[ilan]

Dear Ilan,

not exactly to do with the ratio.
If the the little guy is jumping than the blue background gets bigger since the World is sinking down. Or if ihe goes down the world the one can see the blue part below the world. Sure at the sides the same.

Means this world is not only bigger horizontally also vertically and therefore vertical scrolling is needed, too.

here the example for moving around in both directions but the screen doesn't stop at the world edge.

' ####################################################
    Dim WorldFixX As Float, WorldFixY As Float
    ' horizontal
    If bw.X2.ScreenAABB.TopRight.X - bw.Body.WorldCenter.X < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixX = MIN_DISTANCE_TO_SIDES - (bw.X2.ScreenAABB.TopRight.X - bw.Body.WorldCenter.X)
    Else If bw.Body.WorldCenter.X -  bw.X2.ScreenAABB.BottomLeft.X < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixX = -(MIN_DISTANCE_TO_SIDES - (bw.Body.WorldCenter.X - bw.X2.ScreenAABB.BottomLeft.X))
    End If
    ' vertical
    If bw.X2.ScreenAABB.TopRight.Y - bw.Body.WorldCenter.Y < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixY = MIN_DISTANCE_TO_SIDES - (bw.X2.ScreenAABB.TopRight.Y - bw.Body.WorldCenter.Y)

    Else If bw.Body.WorldCenter.Y -  bw.X2.ScreenAABB.BottomLeft.Y < MIN_DISTANCE_TO_SIDES Then
        '
        WorldFixY = -(MIN_DISTANCE_TO_SIDES - (bw.Body.WorldCenter.Y - bw.X2.ScreenAABB.BottomLeft.Y))
    End If
    '
    If WorldFixX <> 0 Or WorldFixY <> 0 Then
        'update the screen center
        Dim center As B2Vec2 = bw.X2.ScreenAABB.Center
        If WorldFixX <> 0 Then center.X = center.X + WorldFixX
        If WorldFixY <> 0 Then center.Y = center.Y + WorldFixY
      
        bw.X2.UpdateWorldCenter(center)
     
'        bw.mGame.WorldCenterUpdated(WorldFix)
    End If
 
    ' ###################################################

Greetings.

Can u upload your project so we can test it.

Have u changed the size of the tilemap from the mario example?

 

[Gunther]

Dear Ilan,

here the ZIP without the texture since they are 1.6Mb. The code of concern is in the Tick of mario.bas.

Please use for that 'textures.png' 1024x1408 px that will work from the next post.

Greetings

 

[Gunther]

Here a small version of the textures which you may scale back to 100%. This attached one is 25% of the original.

 

[Gunther]

He is not talking about limiting the character. His game map it is bigger than the screen and the character can move left, right, Up and down (walk/Jump/fall)

I think he wants to keep the character close to the middle of the screen, except if it is close to the edge of the map, in that case, the map should stop moving at the edge and the character start moving towards the edge.

Is this what you want @Gunther ?

Dear Ivan, exactly! That is what I want to do and it should be very common task to do.

Directly below the active code is a one which doing that quite good but only the horizontal movements.

    ' ###################################################
 
    ' linker Rand or rechter Rand
    
    If (x2.ScreenAABB.BottomLeft.X >= 0 And bw.Body.WorldCenter.X < x2.ScreenAABB.Width/2) Or _
          (x2.ScreenAABB.TopRight.X >= Main.WorldEdges.Right And bw.Body.WorldCenter.X > Main.WorldEdges.Right-x2.ScreenAABB.Width /2)

        x2.UpdateWorldCenter(x2.CreateVec2(x2.ScreenAABB.Center.X,  bw.Body.WorldCenter.y))
    Else
        x2.UpdateWorldCenter(x2.CreateVec2(bw.Body.WorldCenter.X, bw.Body.WorldCenter.y))
    End If

which you may test by removing and setting the remaks.

Greetings.

 

[ilan]

ok i understand now your question.

the right code should be this:

    Dim vXratio As Float = x2.BCPixelsToMeters(60*64)/Main.WorldWidth
    Dim vYratio As Float = x2.BCPixelsToMeters(30*64)/Main.WorldHeight
    Dim minX As Float = (x2.BCPixelsToMeters(60*64)/vXratio)/2
    Dim maxX As Float = x2.BCPixelsToMeters(60*64)/vXratio
    Dim minY As Float = (Main.WorldHeight/vYratio) + 0.5
    Dim maxY As Float = (x2.BCPixelsToMeters(30*64)/vYratio) - minY

    Dim CameraPos As B2Vec2
    CameraPos.X = Max(minX,(Min(maxX,bw.Body.WorldCenter.X)))
    CameraPos.y = Max(minY,(Min(maxY,bw.Body.WorldCenter.y)))
    x2.UpdateWorldCenter(x2.CreateVec2(CameraPos.X, CameraPos.y))
    bw.mGame.WorldCenterUpdated(GS)

so what i do is i calculate the width of the tilemap (60 tiles x 60pixels) and then i calculate the ration of your world setup (14 meters * 1.33333)

so now i can set the xLimits and the yLimits so the screen will not scroll if you reach them.
the xlimit works fine but the ylimits not. i assume the world is not drawn in the middle so something wrong with x2 library or you have changed something.

why you have called this twice with different values?

TileMap.SetSingleTileDimensionsInMeters(0.5, 0.5)

One in game_initialize and one in game_startgame?
TileMap.SetSingleTileDimensionsInMeters(TileSizeMeters, TileSizeMeters)

i think it is also wrong because u set the same value for x and y.

 

[Gunther]

Dear Ilan,

thanks for checking that. Twice calling of TileMap.SetSingleTileDimensionsInMeter is due to the copy and paste.

But the limit the x-direction I was able to do but the y-direction is problematic as well. I didn't changed the X2. this remain original unchanged.

Greetings.

 

[ilan]

But the limit the x-direction I was able to do but the y-direction is problematic as well. I didn't changed the X2. this remain original unchanged.

i didnot get the result you want with the code you sent me.
have you tried the example i have uploaded? it works with the x and y axis.

 

[Gunther]

Dear Ilan,

yes sure I loaded your example and it looks like my one. in the Y-direction the outer world is still to see.

by modifying for code to the following one is looks as intended:

    Dim vXratio As Float = x2.BCPixelsToMeters(60*64)/Main.WorldWidth
    Dim vYratio As Float = x2.BCPixelsToMeters(30*64)/Main.WorldHeight
    Dim minX As Float = (x2.BCPixelsToMeters(60*64)/vXratio)/2
    Dim maxX As Float = x2.BCPixelsToMeters(60*64)/vXratio
'    Dim minY As Float = (Main.WorldHeight/vYratio) + 0.5
    Dim minY As Float = (Main.WorldHeight/vYratio) + 2.
    Dim maxY As Float = (x2.BCPixelsToMeters(30*64)/vYratio) - minY

For my understanding X direction and y-direction are independent dimensions, e.g. both directions should follow the same mathematics.
Therefore I didn't get why your x-direction is coded diffrently compared to the y-direction (minY and maxY)!?

Why the "+0.5"? Can that be derived from anything?

Could you please enlight me?

Greetings.

 

[ilan]

yes sure I loaded your example and it looks like my one

Can u make a screenshot?

 

[Gunther]

Dear Ilan,

here the two screenshots. The black space is there but the screen doesn't go up as much as before. So it is limited already.



With your +0.5:

Dim minY As Float = (Main.WorldHeight/vYratio) + 0.5

= with black space in y-direction




With new +2.0:

Dim minY As Float = (Main.WorldHeight/vYratio) + 2.0

= good, no space anywhere

Greetings.

 

[ilan]

Dear Ilan,

here the two screenshots.



With your +0.5:

Dim minY As Float = (Main.WorldHeight/vYratio) + 0.5

View attachment 72602 = with black space in y-direction




With new +2.0:

Dim minY As Float = (Main.WorldHeight/vYratio) + 2.0

View attachment 72603 = good no space anywhere

Greetings.

i get in phone (galaxy s8) like the second image so i guess you wont get the same result on each phone.


PS: btw. the physics settings are really bad for such a game. it doesn't feel well when playing.

 

[Gunther]

Hi,

but also in your version the black space is there. Compare with the second screenshot.

Can you please change it to +2.0 as well and check again?

Physics settings come later. Still learning how to do it. Still a sand box only.


Greetings.

 

[ilan]

but also in your version the black space is there.

note that it is the youtube player frames. there is indeed a small part of black space but smaller then in your first screenshot