Trying to create a 4 by 2 cell grid

Not sure how to approach this in Unity, kind of new.



The grid represents 2 teams in a top versus bottom fashion comprising of 8 players in a 4 v 4 setup.

The functionality of the grid:
A. The initial grid layout is balanced for all players.


B. The inner lines of the grid (one line across segmented into 4 parts and 3 lines vertical each segmented into 2 parts) are solely affected by the player's area changing.

1. Cell flexing is needed to keep balance between the cells when the health of players changes. All players start with 100%. If your enemy directly above or below you has 90% health and you have 110%, the horizontal line between the two of you should change and your cell area would increase in height,. Etc.
2. Additionally, the inner lines double as fixed paths for items to move across.
3. When a player's area is destroyed, one or more lines will come in contact with the outer frame and must be deleted to avoid item obscurity when only half or none of the icon is visible.​

C. The outer lines (the stage frame) are fixed to the resolution of the screen and scales everything within it but are not affected by the player's area changing.

1. Additionally, the outer lines and the stage frame housing them do not take up the entire screen. They share the screen with a 48 pixel high bar at the bottom that is used for the menu, scoring, and health/shield status.​

There is more to this than what is explained here as I am only giving a fraction of what the game's structure is about. Honestly, it is suppose to be a simple game but the more I think about it, it gets more complicated when you break it down. But if I can get this part down, then I am in business.

Same thread on Gamedev:
http://www.gamedev.net/topic/675102-trying-to-create-a-4-by-2-cell-grid/

 

You're going to need to ask a more simple and specific question if you're expecting some advise. Like you said, since there's much more to the game than what you've explained, I don't think anyone will be able to tell you a good way to approach developing it.

Simply put this is information overload for anyone reading.

Start at the beginning. Do you know how you're going to display your grid? Sprites? Dynamic line drawing? UI overlay?

 

I built a frame layout in HTML and CSS just to get an idea of where everything goes. The UI and displays are wrong, I have updated since i Unity but not on the HTML file.

 

Well, you can definitely use the UI system for this. For the flexible grid cells you could use 9-sliced images. To get them laid out correctly you could have a horizontal layout panel representing all the columns, then inside that have several vertical panels, each of which holds two cells, which are 9-slice images.

I wouldn't use a Grid Layout component because your grid cells aren't uniform in size.

I imagine it like this:

Code (CSharp):

1. Canvas - Overlay, Scale to screen size
2. + Panel - Horizontal Layout Group (fit height and width)
3. ++ Panel - Vertical Layout Group (fit width) // x4
4. +++ Image - Layout Element (set preferred size) // x2
5. ++++ Text
6.  

You can use the default sprite background image to prototype, it is already setup for slicing.

Player health could map to preferred size.

 

That could work.

I have a bigger concern with the first child of the Canvas when it comes to changing screen site as I do not know how it would interact with the HTML on the page, but that is a bridge I can cross on my own.

Thanks for the help.