Rick
Topic Author
Posts: 50
Joined: 26 Nov 2013, 15:35

Element sizing with different resolutions [Updated w/pics]

21 Apr 2015, 02:06

So things are progressing for my trial version fairly nicely. I have event binding from Lua and they get to the generic functions and passed to Lua nicely (not all events implemented/tested yet).

My next, and one of the biggest reasons for looking at a 3rd party GUI, is handling anchoring and control size relative to the screen resolution.

I have an image that will act as the health to my character. I wish this to be anchored at the bottom left of the screen and I wish it to adjust correctly in width and height to the screen resolution. I was wondering if anyone could point me into the right direction on how to accomplish anchoring and sizing of game UI.

I'm looking at the MainMenu example and tried it in 800x600 and 1920x1080 and everything about it is the same size. Ideally everything would scale up from 800x600 when it's displayed in 1920x1080 but still keep it's ratio so it doesn't look stretched, but it would take up the same screen real estate on the screen.
Last edited by Rick on 21 Apr 2015, 18:50, edited 1 time in total.
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: Anchoring and element sizing with different resolutions

21 Apr 2015, 02:57

First at all, I recommend reading carefully the Tutorial about Panels.

The things you need from that tutorial to achieve resolution independent layouts are Grids with ColumnDefinitions using Auto and the ViewBox. You can use them separately or even a combination of both, as shown in the examples.

Which one is the MainMenu example?
 
Rick
Topic Author
Posts: 50
Joined: 26 Nov 2013, 15:35

Re: Anchoring and element sizing with different resolutions

21 Apr 2015, 03:07

Thanks for the tips. I'll check that one out and see if I have any questions. The Dock container looks interesting too.

I probably renamed the example but it's the one with 4 buttons (Normal, Press, Hover, Repeat) and 2 sliders at the bottom and like a progressbar or something on the right side.
 
Rick
Topic Author
Posts: 50
Joined: 26 Nov 2013, 15:35

Re: Anchoring and element sizing with different resolutions

21 Apr 2015, 18:47

So using grids inside of grids and Uniform stretching with images inside those grids I was able to get most of our HUD for the game setup so that it scales really well. Below are images of a 1024x768 and 1920x1080 and I think they scale nicely.

https://dl.dropboxusercontent.com/u/129 ... 24_768.png

https://dl.dropboxusercontent.com/u/129 ... 0_1080.png


I do have a question though on inventories and how to structure them. As you can see I have a backpack and a fridge. These are inventories. I always have the backpack on the left and the item I'm looking on the right. I need grids/tiles/squares/slots inside those inventories. Our game uses a Diablo like system where item icons can take up multiple "slots".

First thing I had trouble with is getting a grid to scale with the inventory images correctly. It obviously has to match the background image perfectly no matter the screen resolution but grid controls don't have a scaling property like images do.

Any ideas on how to handle a Diablo grid like inventory as far as the presentation goes? What works well for this in Blend that would sit on top of my inventory background images? I'm guessing since we can drag and drop items to and from I would want some sort of control to be a slot so I can capture that drag and drop event? Any ideas would be much appreciated.

Thanks
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Element sizing with different resolutions [Updated w/pic

22 Apr 2015, 16:20

Hi Rick,

If you want to fit your inventory inside an image, you can set the size of the inventory root panel in pixels, and then wrap both Image and root panel in a Viewbox, something like this:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  ...
  <Grid.RowDefinitions>...</Grid.RowDefinitions> <!-- Screen layout -->
  <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions> <!-- Screen layout -->
  ...
  <Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform"> <!-- Inventory -->
    <Grid Width="200" Height="400">
      <Image Source="Images/Bag.png" Stretch="Uniform"/> <!-- your bag background image -->
      <Grid Margin="53,121,53,48"> <!-- inventory root can use margin to fit inside the image -->
        <Grid.RowDefinitions>...</Grid.RowDefinitions> <!-- Inventory slot layout -->
        <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions> <!-- Inventory slot layout -->
        ...
        <!-- inventory slots -->
      </Grid>
    </Grid>
  </Viewbox>
  ...
</Grid> 
 
Rick
Topic Author
Posts: 50
Joined: 26 Nov 2013, 15:35

Re: Element sizing with different resolutions [Updated w/pic

22 Apr 2015, 17:23

OK, I'll give this a try. I've just been using Grids inside Grids and it seems to give a similar result but maybe if I need the internal grid to scale uniformly with the image the Viewbox is needed.

Any tips on how these inventory slots should be handled? Should they be shapes so they get click & drag and drop events? I assume grid row/col's alone don't trigger click events or drag and drop events?
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Element sizing with different resolutions [Updated w/pic

22 Apr 2015, 21:35

Grid cols/rows are only layout properties, so you will need actual controls/shapes inside the Grid to draw the inventory slots. I think the easiest option to begin with is to define a ControlTemplate you can reuse for all slots:
<Grid ...>
  <Grid.Resources>
    <ControlTemplate x:Key="SlotTemplate" TargetType="ContentControl">
      <Border...>
        ...
        <ContentPresenter/>
      </Border>
    </ControlTemplate>
  </Grid.Resources>
  ...
      <Grid Margin="53,121,53,48"> <!-- inventory root can use margin to fit inside the image -->
        <Grid.RowDefinitions>...</Grid.RowDefinitions> <!-- Inventory slot layout -->
        <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions> <!-- Inventory slot layout -->
        ...
        <!-- inventory slots -->
        <ContentControl Grid.Row="0" Grid.Column="0" Template="{StaticResource SlotTemplate}">
          <!-- Icon image/shape -->
        </ContentControl>
        <ContentControl Grid.Row="0" Grid.Column="1" Template="{StaticResource SlotTemplate}">
          <!-- Icon image/shape -->
        </ContentControl>
        ...
      </Grid>
  ...
</Grid>
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: Element sizing with different resolutions [Updated w/pic

22 Apr 2015, 22:39

Also, the Drag&Drop sample maybe useful for you.
 
Rick
Topic Author
Posts: 50
Joined: 26 Nov 2013, 15:35

Re: Element sizing with different resolutions [Updated w/pic

23 Apr 2015, 20:16

OK, so I added a Viewport then grid to that and filled the "slots" with rect's at 25% transparency and it scales and works great!

The main difference between your drag and drop example and my game is that my game is more diablo style where items can take up more than 1 slot. In reality these rect slots act as just visuals and positioning controls.

So I see you used Border control with images in it from an atlas. You created 1 floating one that is the one you are dragging and set the icon and show it when moving and hide it when mouse up. This works great when icons are all the same size. With mine being variable size let me know if my thinking of a way to do this would work please:

- I'll make an atlas as well and define the items out
- In my C++ project I'll manage linking item name to size so I know that
- In my C++ project I'll have 2D array that is the inventory so I can know what slots are taken by what so when trying to place items I can check if they'll fit (they aren't overlapping anything else)

- Because I can have various amounts of icons at various sizes I'm thinking about dynamically creating Border controls (1 for each item) and resizing them at run-time to match the size of the icon (by size I mean is it 1x1 or 1x4). The actual size of the Border control I'll fine the size of 1 rectangle and use that for width and height.

- I'll use your idea with mouse down/up/move for moving these Border's (icons) around.

Does this sound reasonable? Are there any issues with dynamically creating Border controls at run-time to do this? Should I be doing that given my requirements?
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Element sizing with different resolutions [Updated w/pic

23 Apr 2015, 20:33

Yes, you can create Borders (and any UI element/control you want) at runtime, and set the size and content you need. Then you can add the border to the appropriate container so it gets rendered.

Looking at Diablo inventory I understand what you want to do, and your solution seems ok to implement it.

Who is online

Users browsing this forum: Google [Bot] and 1 guest