koobas.hobune.stream
Anchor The Objects.
Hello, I'm trying to develop an game for multiscreen devices. I've got a question about GUI Elements. All of these in below is GameObjects and GUI Textures.
Thoose All GUI elements are badly placed. at 1366x1080 resolution.
At this resolution (my tablet as testing device) all items are perfectly placed. I want to bigger and smaller resolution seems like 1024x600 resolution.
I can't change gameobjects to GUI texture 'cause of Depth factor. There is ducks to be Instantiated. So what should I do ? Designing Levels for all resolutions ? or code piece to anchor objects.
Actually is there a script that i can anchor objects to spesific system position ? (Developers used Visual Studio knows anchor'in objcets to frame position or panel position. ) or resize whole game ? Please Help.
To start with, a camera sees the same amount vertically no matter the resolution. The camera sees a bit more or a bit less horizontally as the resolution changes. So one simple fix for your problem is to put the graphics on a plane in world space rather than using a GUITexture. You would have to construct them so they look okay if the horizontal view was stretched a bit or squeezed a bit (and therefore exposing more drape, or clipping the drape). You can put the drapes near the clipping plane to keep the layers right, or you could have them viewed by a second camera with a higher layer.
But to fix GUITextures. The first issue is positioning. GUITextures live in Viewport space. Viewport space starts at (0,0) in the lower left corner and goes to (1,1) in the upper right corner. Where on the graphic is anchored can be controlled by the (x,y) of the pixel inset.
**To anchor to the upper left of the screen:**
Position (0,1,0)
Pixel Inset XY (0, -height)
**To anchor to the lower left of the screen:**
Position (0,0,0)
Pixel Inset XY (0,0)
**To anchor to the upper right**
Position (1,1,0)
Pixel Inset XY (-width, -height)
**To anchor to the lower left**
Position (1,0,0)
Pixel Inset XY (-width, 0)
**To anchor to the center of the screen**
Position (0.5, 0.5, 0)
Pixel Inset XY -width/2, -height/2)
As for size, you create the graphics for a specific device with a specific resolution. To get it to run on other resolutions, you typically want scale by vertical height ratio:
height = currentScreenHeight / designedForScreenHeight * designedHeight;
width = currentScreenHeight / designedForScreenHeight * designedHeight;
As one example, lets say we are doing the left drape, and we want it anchored in the upper left corner, and sized appropriately for different resolutions. Here is a script to place and size the left drape.
#pragma strict
private var designedHeight = 480.0;
function Start () {
var pixelInset = guiTexture.pixelInset;
var ratio = Screen.height / designedHeight;
pixelInset.height = ratio * pixelInset.height;
pixelInset.width = ratio * pixelInset.width;
pixelInset.x = 0.0;
pixelInset.y = -pixelInset.height;
transform.position = Vector3(0,1,0);
guiTexture.pixelInset = pixelInset;
}
This script is custom for a single drape, but if you add some public variables such as width fraction and height fraction, you can use this same script for multiple objects.
