Resizing elements to screen size within Arrays

Unity Engine
1

Hey all,

I’m having no luck with this question in Unity Answers, so maybe the forum is a more appropriate place for it, and maybe expand on what I’m asking.

I’ve been recently making GUI elements change according to screen size using something like the following:

hudWindowRect = Rect((hudWindowRectX / 100) * Screen.width, (hudWindowRectY / 100) * Screen.height, (hudWindowRectW / 100) * Screen.width, (hudWindowRectH / 100) * Screen.height);

This is working for me fine. Each element in the Rect has its own variable worked as a percentage, so I can move elements around while in play mode until they’re where I want them, I then copy the component and paste in the values outside of play mode. And because they’re percentages, it adjusts to screen size.

But I have two problems. The main one is working out to to do this in arrays. I’m working on a shop at the moment and I’ve made a pretty extensive inventory for a different project and they both use arrays of rects for button and label elements. So I can’t (or don’t know how) to get into each individual one to resize it according to screen size.

Example of my code:

var index=0;
 
    for(var a in shipsToBuy){
 
       if(GUI.Button(shipsToBuyPosition[index],shipsToBuy[index].shipIcon, "ShipButtonStyle")){
 
}

Secondly, things are getting unwieldy already, with a lot of variables (4 for each element). So if I could work this method into arrays, I can see it becoming almost unworkable. Rects are nice and handy in the inspector the way you can show and hide them, but my method means each one must have 4 separate variables, so after 5 or 6 elements, it’s very easy to get lost.

So, main question is, is there a more elegant solution for this? I’ve seen a lot of answers to the broad question of resizing, but can’t find anything related to arrays of rects, or much that doesn’t just say ‘work it out as a percentage’.

I’m coding in Javascript, suppose my level could be described as an intermediate beginner. Any help or even discussion would be appreciated.

2

You’re not increasing the index value anywhere. Either use a standard for loop (recommended), or increase it in the for/in loop.

–Eric

3

Thanks for the reply, Eric, but I mustn’t have made myself clear enough.

I realise that, this is just a small snippet of the code to show where I’m using the Rect array. The array and loops are working fine in my project, it’s just that because I’m using an Rect array and not individual Rects for my buttons, I don’t know how to make them resize along with the screen with the method I outlined above, assuming that’s the right method to use. Which I think it’s probably not, because like I said, it’s very awkward when using multiple elements.

4

Just an update to this. I’ve been playing around with it for a few hours, and I’ve figured out one way of getting each element in the Rect array to resize with the screen. It works in pretty much the same way I was doing above, I just discovered how to get into each individual Rect array element.

This is the window function:

function DisplayBagAInventoryWindow (windowID :int){
	
	for(var index = 0; index < bagSlotA.bagSlots; index++){
	
		inventorySlots[index].width = inventorySlotWidth;
		inventorySlots[index].height = inventorySlotHeight;
		
		inventorySlots[0].x = inventorySlot0X;
		inventorySlots[0].y = inventorySlot0Y;
		inventorySlots[1].x = inventorySlot1X;
		inventorySlots[1].y = inventorySlot1Y;
		inventorySlots[2].x = inventorySlot2X;
		inventorySlots[2].y = inventorySlot2Y;
		inventorySlots[3].x = inventorySlot3X;
		inventorySlots[3].y = inventorySlot3Y;
		inventorySlots[4].x = inventorySlot4X;
		inventorySlots[4].y = inventorySlot4Y;
		// etc, etc
			
		if(GUI.Button(inventorySlots[index],"Slot: " + index)){
	
		}	
	}
}

And then inside the update function:

inventorySlotWidth = (inventorySlotWidthPercent / 100) * Screen.width;
	inventorySlotHeight = (inventorySlotHeightPercent / 100) * Screen.height; 
	
	inventorySlot0X = (inventorySlot0XPercent / 100) * Screen.width;
	inventorySlot0Y = (inventorySlot0YPercent / 100) * Screen.height; 
	
	inventorySlot1X = (inventorySlot1XPercent / 100) * Screen.width;
	inventorySlot1Y = (inventorySlot1YPercent / 100) * Screen.height;
	
	inventorySlot2X = (inventorySlot2XPercent / 100) * Screen.width;
	inventorySlot2Y = (inventorySlot2YPercent / 100) * Screen.height; 
	
	inventorySlot3X = (inventorySlot3XPercent / 100) * Screen.width;
	inventorySlot3Y = (inventorySlot3YPercent / 100) * Screen.height;

//etc, etc

This works. I can resize the elements in play mode like I need to and they resize with the screen. But I’m sure you can imagine it’s a bit of a mess to code and the inspecter for this .js file is very awkward to read. In the actual .js file the array has 12 rects, so it goes on even longer; I’ve just deleted most of them here as they’re not needed to get the point across.

Surely there’s a better way of doing this, no? That’s not massively complicated code wise. Getting things to resize with resolution is something every game needs, I’d be surprised if Unity hasn’t a less messy way of doing it. I could probably make it a bit simpler, resize it by rows and columns (many of the X Y values are the same in the end) but it still feels like an awkward workaround as opposed to a solution.