Scaling tiles

Unity Engine
1

Hi,

I started using Unity recently and as my first project, I tried to create Jigsaw Puzzle game. All logic works, managed to load a series of tiles with separate textures and bump-maps.

These textures are generated from a Photoshop plugin I have. Note that these textures have different widths.

I created a prefab (just a plane) with scale (1, 1, 1). Each time I load a new texture I scale the tile according to the size of the texture and the screen resolution.

var yScale = (((puzzleTexture.height * 1.0) / (Screen.height * 1.0)) * 5.0);
var xScale = (((puzzleTexture.width * 1.0) / (Screen.width * 1.0)) * 8.0);

Note that (8.0, 5.0) is the scale of the board (used as a background for the puzzle) as my reference. If I keep that aspect ratio (16:10) while I play the puzzle the graphics are displayed correctly. As soon as I use a different aspect ratio or free aspect, the graphics are scaled incorrectly.

Is there a way to show the graphics nicely on different aspect ratios? How can I get rid of the scaling and just load the textures?

Regards,
Clayton

2

What I actually need is to be able to apple a texture on a plane using the texture’s actual size! So if I am using a 240px * 165px texture, the tile on screen will have exactly that size!

Thanks,
Clayton

3

I don’t get the idea of scaling the plane for different resolutions.

Shouldn’t be done automatically as long as the plane is a Mesh?

Also, I’m not sure about your algorithms, but wouldn’t this be the same (and simpler to read)?

var yScale = (puzzleTexture.height / Screen.height) * 5.0); 
var xScale = (puzzleTexture.width  / Screen.width) * 8.0);
4

Thanks for posting.

So I created a prefab consisting of just a plane mesh. The default scaling for this mesh is 1, 1, 1. Now I have a set of different textures with different sizes. If I apply the textures directly using the following code,

go.renderer.material.SetTexture("_MainTex", puzzleTexture);

the texture looks squarish (since the plane is a square)! So I think that the plane should be scaled to match the aspect ratio of the texture so that it is displayed correctly! This is a sample code from the script;

for(var x:int = 0; x < horizontalTiles; x++){
		for(var y:int = 0; y < verticalTiles; y++){
			print(puzzleFolder + ((y * horizontalTiles) + x));
			var puzzleTexture : Texture = Resources.Load(puzzleFolder + ((y * horizontalTiles) + x));
			var bumpTexture : Texture = Resources.Load(puzzleFolder + ((y * horizontalTiles) + x) + "_bump");
			
			var position = Vector3(Random.Range(-2.5, 2.5), Random.Range(-1.5, 1.5), 9.9);
			var yScale = (((puzzleTexture.height * 1.0) / (Screen.height * 1.0)) * 5.0);
			var xScale = (((puzzleTexture.width * 1.0) / (Screen.width * 1.0)) * 8.0);

			
			var go = Instantiate(tile, position, Quaternion.identity);
			
			go.transform.localScale = Vector3(xScale, 1, 1);
			go.name = ((y * horizontalTiles) + x) + "";
			
			go.renderer.material.shader = Shader.Find("Transparent/Cutout/Bumped Diffuse");	
			go.renderer.material.color = Color.white;
			
			go.renderer.material.SetFloat("_Cutoff", 0.50);
			go.renderer.material.SetTexture("_MainTex", puzzleTexture); 
			go.renderer.material.SetTextureScale("_MainTex", Vector2(-1.0,-1.0));
			go.renderer.material.SetTexture("_BumpMap", bumpTexture);
			go.renderer.material.SetTextureScale("_BumpMap", Vector2(-1.0,-1.0));
			
			go.AddComponent(TileController);
		}
	}

Thanks for you help

Regards,
Clayton

5

I would go with a simpler approach and use a Mesh that has its Aspect Ratio matching the one from the texture.

I don’t see the point of making all this process through scripting.

Just create a prefab.

If you have two different texture ratios, create two prefabs, one for 16:9 and one for 4:3, for instance.

If you still want to do the coding, and you need the plane to match the aspect ratio of the texture, just create a variable with that aspect ratio.

i.e. (pseudocode):

var aspect = texture_width / texture_height;

And then scale the plane accordingly (pseudocode):

plane.scale.x /= aspect;

Or something like that.