Unity UI Combine UI and prefabs in different screen sizes

I am developing a mobile based Solitaire game for fun. In this game I have the following setup:


- Background is a sprite, which include painted “boxes” for the deck and Aces, see picture

- Cards are GameObjects/Prefabs

- Buttons are ofc UI


My challenge here is how to keep the graphics together when screen size change for different phones. Background is stretching, and cards do not really land at correct places etc.. Using only UI component would fix the problem but that is not how I have developed it. I guess change the background to UI image will help, and stretch, the background. Tested that but have some challenges getting the cards on top and on correct locations.


What I would like to ask for is some tips and recommendations how I deliver a design, so I keep it all together with the combination of UI and prefabs. As an example, I have thought of changing the “boxes” to GameObject images and place them relative to the width of the screen and then use them as starting coordination for the cards.


I would appreciate some ideas, and help, how to best solve this problem.


Attached is a picture of the background sprite.

 

Hi,

In your case it doesn't really make sense to mix UI and non-UI stuff.
I am not sure what you mean with "GameObjects / Prefabs" -- uGUI stuff is also using game objects and can be prefabs...
however, I assume you mean non-uGUI with that.

Either if you go for uGUI for the game screen or some other approach (Unity 2D or Untiy 3D) you should do the background and the cards with the same approach.
I would recommend to have the "boxes" on the background as independent objects.

If you go for the non-uGUI approach: you can set the cards position to the position of the respective box.

If you go for the uGUI approach: you should make sure that your boxes have the anchors right (e.g. in the middle of the box). Then you can set the anchors of the cards to the same anchors (it is kind of the same as with the position approach but with relative coordinates which is better for different screen sizes).
If the boxes and the cards have different parents, make sure that both parents have the same location and size (best: anchor min = {0, 0} / anchor max = {1, 1}).
If your anchors are in the middle of the boxes / cards (as I suggested above) you should make sure that the size will be scaled with the screen resolution. To do this, you have to either write your own script or use the "Transform Scaler" component of my Asset "Better UI" (see signature).