Troubles with making a Coordinate Plane UI Map using UIGridLayouts and Scrollable Frames

Help and Feedback Art Design Support
, ,
#1

Sorry for the simple question :sweat_smile:

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    I’m making a procedural board game, and I want to create a dynamic minimap for each map based on an XY coordinate graph. This will also hold information like what biome the board space is currently in and where everyone is in relation to the current player, but that’s besides the point.

  2. What is the issue? Include screenshots / videos if possible!

  • I would like to have the UI grid’s padding space filled with a color to make it look more like a coordinate plane, but I don’t know how to do that
  • I made the starting space of the board game the origin point of my graph, but I have no way of putting it at the center without filling half the grid layout with filler space
  • Part eligibility (in the workspace) and optimization-wise, I don’t want to fill my makeshift graph’s blank space with invisible padding frames. Is there a way to “skip” a slot on a UI grid layout?
  • The potential size of the procedurally generated board can be infinite, so it would be convenient for the center of the map to always follow where the player is currently on the map. Is there a way to achieve this with scrollable frames?
  • Another problem with the size of the board being potentially infinite is that infinity is pretty big. Without a way to zoom in/out of the map, it would be frustrating to have to scroll to a specific space. So, how can you implement zooming in and out on a scrollable canvas? I have an idea for a hacky workaround for this, but I’m not sure if there’s an easier way to do this or not Ended up just doing the workaround
  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
  • Putting a UIStroke inside of a UIGridLayout to get its padding to become visible (didn’t work)
  • The workaround for zooming would be to increase/decrease the size of a frame holding all the elements of the scroll frame, but if there’s a property I missed or something that can do this easier, then I’d love to go for it
1 Like