When i scaled my window, the sprites were a lot smaller, also, sprites do not display after reaching about halfway across the screen. The background color blue still displays but the sprites get cut off.
In the above image as you can see the sprites did not stretch with the screen, and the sprites near the top are being sliced when they reach that part of the screen.
Related
guys! We are developing a 2D game for desktop and mobile. It is grid-based although we decided not to use tilemaps and, instead, create our own grid by code, because we need to program different actions and interactions for each tile. The game UI is on a canvas and that part resizes as we expected. Also, everything already works quite well "functionality-wise" on both, mobile and desktop. The problem is that, as we made the main grid and objects as sprites, it works great on any 16:9 screen, but some of the screen space gets cut when it runs on any wider screen.
How can we resize the whole sprite scene depending on screen size? I guess it has more to do with the camera than with the actual objects but we don´t have a clear clue. We already looked into "pixel-perfect camera" and, although we haven´t dug too deeply into it, it looks like it´s aimed more towards preserving artwork at full resolution and not so much at what we need.
This one is from the PC where we are developing the game and where it looks as it should:
And this one is from a PC with a wider screen (16:10) where the scene gets cropped from the sides (In the previous picture I marked in orange/yellow the columns that are lost in this one)
I guess there should be a way to stretch all sprites to fit the screen, but I think the best way to go would be to get empty horizontal or vertical bars, on top and bottom or to the sides, in order to preserve the exact proportions, and that would be good enough. But how to do it?
Thanks in advance.
Solved! Starting with the great ideas ephb gave me, I finally decided to get a reference percentage between the screen width and height. So, for 1920x1080, which is the resolution I know the game looks correct in, I did a rule of three and got that 1080 is 56.25% of the screen width, and, that in that case, the camera size should be 5.
Knowing those two elements, now I can check the height proportion for the user´s device and, using another rule of three, calculate the correct camera size, like this:
Camera cam;
void Awake()
{
cam = Camera.main;
cam.orthographicSize = GetHeightProportion() * 5 / 56.25f; //1920x1080 reference ---
}
float GetHeightProportion()
{
return ((float)Screen.height * 100) / (float)Screen.width;
}
I think you are looking to resize fore any aspect ration not screen resolution. You use the aspect ratio dropdown of the game window to see how it looks without running it on different computers.
The default setting is that the vertical field of view of your camera stays the same. Since the 16:10 display is taller this results in your image appearing zoomed with the sides being cut off.
Since you are using sprites and you basically have to recreate what the canvas scaler does but in world space.
You could move your camera, change its FOV if it a perspective camera, change its size if it is an orthographic camera or scale your scene. I will describe the first steps.
Get Screen width and height and calculate the aspect ratio.
Compare against your target aspect ratio. (I assume it is 16/9)
Use this multiplier to scale your scene / move your camera / change it's field of view
Illustrating Image:
Ok so my goal is to fill up the sky with blue. I used the tiled draw mode in Sprite Renderer component but it doesn't seem to be a good choice. I thought of creating a blue square and then put it on top of the sky but is there any way to do it automatically? ( I found something called border but I couldn't understand what these green lines mean? )
You first have to set up the image to tile correctly. In the inspector for the image you want to tile, open the Sprite Editor, and move the border (green box) to select the SKY portion of your image. For example:
After doing this, your sprite should tile correctly:
Do Note:
If you're filling in a solid color for the sky, use the Sliced mode instead of Tiled to reduce polygon counts. (Tiled mode will make new quads for each repeated section, while Sliced will stretch the solid color in only one quad):
(Left is Tiled, right is Sliced)
I'm trying to use a 9 slice sprite in unity so that when the image is resized only the center and the sides are scaled, and the corners stay the same anytime.
So I sliced my sprite, set the container (image) type to Sliced.
However when I run my code, the entire sprite suddenly show up in the center slice (so is resized in a weird way) leaving the sides and corners transparent.
What could I be missing ?
It should be the first case but when i run the second case happens :
here is how I sliced the sprite (sorry hard to see but its white corners over a transparent background) :
I have a 2D tile-based lighting system which is drawn onto a Render Target.
I am also drawing a background which involves mountains, sun/moon, and clouds.
There is also the unlit game; blocks, character, etc.
Here is the order in which everything is drawn:
1. Background
2. Game World
3. Lighting
The problem is that the LIGHTING is covering up the BACKGROUND when it's dark:
Although it's perfectly fine in the day because the light is full:
You might ask, well, why don't you just blend each block, not drawing the lighting on a RenderTarget?
Because that would prevent me from performing smooth lighting, as seen in the pictures. To produce the smooth lighting, I draw squares of light onto a RenderTarget, perform a Gaussian blur and then draw that RenderTarget.
How about not drawing a square of light in empty spaces?
The light blurs onto any adjacent blocks, and not all objects in my game affected by lighting are square, so they would look like a sprite with a blurry square on top of it.
Light NOT being drawn in empty spaces:
Light being drawn everywhere:
Is there any way to keep the background visible, or something else that would help my predicament?
I'd suggest you do the following:
Render lighting to rendertarget
Render scene to rendertarget (leave the background transparent)
Multiply scene with the lighting rendertarget
Render background to screen
Render scene (with the lighting already applied) to the screen
Because the background is added after applying the lighting, it will not be affected.
I'm trying to make procedural textures in my XNA 4.0 game, mainly for buttons but for other textures as well. Here's an image describing what I want:
Hope you understand what I want to do, if you don't, heres some words:
I want to make objects in my game. These objects will all use the same texture, but can be resized, and their texture will not be resized so the pixels are "stretched", but procedurally placed.
The general way to do this is to have one texture for the middle, 4 for each corners and 4 for each edges. The vertical edges and middle would be stretched vertically, and the horizontal edges and middle would be stretched horizontally.
You could pack it into 1 texture for easy editing. You'd define the corners and edges implicitly with a border distance, which would define the parts of the texture that should not scale.
I would recommend you to split up the textures in 5 Textures. One for each side and one single-colored texture. You just stretch the one colored texture and draw the frame textures around your stretched colored texture.
I hope I could help you.