1 (edited by zedexnz 2021-09-21 20:21:13)

Topic: [SOLVED] Dynamic Map Size and placement

I havent quiet worked out how to position my 2D map on the my screen.
I have a canvas which is using a canvas scaler withw reference resolution of 320x480. This is to allow for me to build for a SD resolution phone. The scaler is set to match the width.

I have a panel in my UI which has the map as a child of it, as well as some other objects. The onlinemap transform appears in the bottom left hand corner of my scene.

Depending on the resolution of the screen, the map will with fill the entire screen which is fine, or be way way too small, or not be centered. As the map is a 3d transform (even though I only using it as a 2D) how do I set it to align in the center of the panel.

Thank you.

Re: [SOLVED] Dynamic Map Size and placement

Hello.

To dynamically set the size of the map use OnlineMapsTileSetControl.Resize.
https://infinity-code.com/doxygen/onlin … c7221feeac

The easiest way to center map is to add a Camera Orbit component.
Or you can do it manually using OnlineMapsControlBaseDynamicMesh.center.
https://infinity-code.com/doxygen/onlin … 0eea084310
In addition, you will need to calculate the best camera distance. See the OnlineMapsAdjustToScreen component for an example.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

3 (edited by zedexnz 2021-09-18 10:05:34)

Re: [SOLVED] Dynamic Map Size and placement

Thanks Alex, I think I may have explained it incorrectly.
I dont need to center the map as such, as I am putting myself in the center and then using the OnlineMaps.instance.position to do that.

What I am refering is the "container" object that the map appears in. See the attached examples in three different working resolutions. It

You can see in the lowest resolution, the map is not filling to size.

Post's attachments

Attachment icon DM1.jpg 93.66 kb, 54 downloads since 2021-09-18 

Re: [SOLVED] Dynamic Map Size and placement

Unfortunately, in your screenshot I cannot see which Control you are using.
As I understand you, you want the map to be full screen and centered, right?!

If you are using Tileset Control, just add Adjust To Screen and Camera Orbit components.
If you don't want the map to rotate use Camera Orbit / Lock Tilt - ON, Lock Pan - ON.
By the way, keep in mind that a Tileset is not a UI element and cannot be placed inside a Canvas.

If you are using some other Control and do not want / cannot use Tileset (recommended in most cases), then of the rest, UI Raw Image Control will suit you best. You just place it on Raw Image GameObject, set the Anchor - Center, and add the Adjust To Screen component.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

5 (edited by zedexnz 2021-09-20 07:55:46)

Re: [SOLVED] Dynamic Map Size and placement

Alex once again thank your for your promptness and my silly novice questions. I am glad I invested in your asset, as the time you have spent helping me out thus far is worth every cent.

Attached is my current components which has been working, although not exactly right. I did try and add the camera orbit and adjust to screen components, but they had no affect other than squishing down the height of the map and altering the ratio.

Adding a raw UI and pointing the texture works as expected, and I can then locate the UI where I would like it, but obviously looses the ability to pan around on the map. Zooming in and out still works.

Post's attachments

Attachment icon DM2.jpg 96.41 kb, 55 downloads since 2021-09-20 

Re: [SOLVED] Dynamic Map Size and placement

Camera Orbit requires a Tileset, and will not work with other Controls (SpriteRenderer Control in your case).

Most likely you did something wrong with the UI Raw Image Control.
Actually, everything is very easy here, step by step:
1. Disable the current Map GameObject.
2. GameObject / Infinity Code / Online Maps / Map Wizard.
3. Type of map - 2D, Control - UIRawImage, Parent - PanelDash (most likely if it has RectTransform), Create.
4. Copy the components and settings from the old map to the new one, and if you no longer need the old map, you can delete it.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: [SOLVED] Dynamic Map Size and placement

Thanks Alex worked exactly as I wanted. I am not sure what I did worng there as I did use the wizard to create it in the first place. I might try retrace my steps and see where I went wrong.