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

Discussion in 'Game Development' started by Gunther, Sep 24, 2018.

  1. Gunther

    Gunther Member Licensed User

    Hi,

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

    Greetings, Gunther
     
  2. Erel

    Erel Administrator Staff Member Licensed User

    Moved to the game forum.

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

    ilan Expert Licensed User

    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.
     
  4. Gunther

    Gunther Member Licensed User

    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.

    blue background.PNG
     
    Last edited: Sep 25, 2018
  5. ilan

    ilan Expert Licensed User

    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.
     
  6. Gunther

    Gunther Member Licensed User

    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.
    Code:
    ' ####################################################
        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.
     
    Last edited: Sep 25, 2018
  7. ivan.tellez

    ivan.tellez Active Member Licensed User

    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 ?
     
  8. ilan

    ilan Expert Licensed User

    Can u upload your project so we can test it.

    Have u changed the size of the tilemap from the mario example?
     
  9. Gunther

    Gunther Member Licensed User

    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
     

    Attached Files:

    Last edited: Sep 26, 2018
  10. Gunther

    Gunther Member Licensed User

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

    textures.png
     
  11. Gunther

    Gunther Member Licensed User


    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.

    Code:
    ' ###################################################
     
        
    ' linker Rand or rechter Rand
        
        
    If (x2.ScreenAABB.BottomLeft.X >= 0 And bw.Body.WorldCenter.X < x2.ScreenAABB.Width/2Or _
              (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.
     
    Last edited: Sep 26, 2018
  12. ilan

    ilan Expert Licensed User

    ok i understand now your question.

    the right code should be this:

    Code:
    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?

    Code:
    TileMap.SetSingleTileDimensionsInMeters(0.50.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.
     

    Attached Files:

  13. Gunther

    Gunther Member Licensed User

    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.
     
  14. ilan

    ilan Expert Licensed User

    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.
     
  15. Gunther

    Gunther Member Licensed User

    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:

    Code:
    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.
     
    Last edited: Sep 27, 2018
  16. ilan

    ilan Expert Licensed User

    Can u make a screenshot?
     
  17. Gunther

    Gunther Member Licensed User

    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:
    Code:
    Dim minY As Float = (Main.WorldHeight/vYratio) + 0.5
    plus 0 dot 5.PNG = with black space in y-direction




    With new +2.0:
    Code:
    Dim minY As Float = (Main.WorldHeight/vYratio) + 2.0
    plus 2 dot 0 .PNG = good, no space anywhere

    Greetings.
     
  18. ilan

    ilan Expert Licensed User

    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.
     
  19. Gunther

    Gunther Member Licensed User

    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.
     
  20. ilan

    ilan Expert Licensed User

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

    mario2.jpg
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice