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

Gunther · Sep 24, 2018

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 · Sep 25, 2018

Moved to the game forum.

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

ilan · Sep 25, 2018

Gunther said:
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 · Sep 25, 2018

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 · Sep 25, 2018

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 · Sep 25, 2018

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.

B4X:

' ####################################################
    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 · Sep 26, 2018

ilan said:
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 · Sep 26, 2018

Gunther said:

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.

B4X:

' ####################################################
    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 · Sep 26, 2018

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 · Sep 26, 2018

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

Gunther · Sep 26, 2018

ivan.tellez said:
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.

B4X:

    ' ###################################################
 
    ' 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 · Sep 26, 2018

ok i understand now your question.

the right code should be this:

B4X:

    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?

B4X:

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 · Sep 26, 2018

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 · Sep 26, 2018

Gunther said:
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 · Sep 27, 2018

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:

B4X:

    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 · Sep 27, 2018

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

Can u make a screenshot?

Gunther · Sep 27, 2018

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:

B4X:

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

= with black space in y-direction

With new +2.0:

B4X:

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

= good, no space anywhere

Greetings.

ilan · Sep 27, 2018

Gunther said:
Dear Ilan,

here the two screenshots.

With your +0.5:

B4X:

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

View attachment 72602 = with black space in y-direction

With new +2.0:

B4X:

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 · Sep 27, 2018

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 · Sep 27, 2018

Gunther said:
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

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

Active Member

B4X founder

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Attachments

Active Member

Active Member

Expert

Attachments

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency