Sprite Width/Scaling calculation

Questions & Answers
,
1

I have an issue with Sprite Scaling calculation for a while now and i’m not able to solve it correctly.

I’m doing a puzzle game. So I want to create a jigsaw puzzle out of pieces, whereby the amount of pieces may vary. Like 6, 8, 10 per Row.

My Sprite sheet has a width/height of 2000px and Pixels per Unit is also set to 2000
The game is supposed to be for Mobiles, so the scren width is 1080px (I use 980px to save 50px on each end for padding)

I’m using this code, which works pretty fine for 6 Pieces per row.

PuzzlePieceSize = MathF.Round((980f / columns), 0);
Scaling =  Camera.main.ScreenToWorldPoint(new Vector2(PuzzlePieceSize, PuzzlePieceSize)) * 2;

But if I increase the pieces (so, e.g. 8 per Row), the pieces get’s larger… not smaller?

Any idea what the problem is here?

2

I feel like the problem is somewhere else, can you share the whole Code?

3

Hi @Tidali,

yes, sure.

After the scaling is calculated, I create the pieces likes this - the value for “Scaling” is what was calulated before.

        var puzzlePiece = new GameObject();
        puzzlePiece.transform.parent = PuzzleCanvas.transform;
        puzzlePiece.transform.localScale = new Vector3(Math.Abs(Scaling.y), Math.Abs(Scaling.y), Math.Abs(Scaling.y));
        puzzlePiece.name = location.ToName();

        var renderer = puzzlePiece.AddComponent<SpriteRenderer>();
        renderer.sortingOrder = 10;
        renderer.sprite = puzzlePieceSprite;
        renderer.color = new Color(renderer.color.r, renderer.color.g, renderer.color.b, 1);

And once this is done, the position for the pieces is calculated as follows:

        var xOffset = (Camera.main.pixelWidth / 2) - (PieceSize / 2);
        var yOffset = (Camera.main.pixelHeight / 2) - (PieceSize / 2);

        var halfCol = TotalColumns / 2;
        var halfRow = TotalRows / 2;

        float xPos = halfCol > piece.Location.Column
            ? xOffset + (PieceSize * (piece.Location.Column - halfCol))
            : xOffset - ((halfCol - (piece.Location.Column)) * PieceSize);
        float yPos = halfRow < piece.Location.Row
            ? yOffset - (PieceSize * (piece.Location.Row - halfRow))
            : yOffset + ((halfRow - (piece.Location.Row)) * PieceSize);

        return Camera.main.ScreenToWorldPoint(new Vector3(xPos, yPos, 10));

“PieceSize” is the value which was calculated in the previous post.

Thank you for assisting!

4

Not a solution to the root problem, but an idea:

Try manipulating this line:

PuzzlePieceSize = MathF.Round((980f / columns), 0);

Make your columns accessible in the inspector ([SerializeField] for private).

Assign the scaling process in the Update method and try changing the columns value at runtime.

Then you change the math behind this for a fix (neither the best solution or the solution for the root bug).

It could look something like this:

PuzzlePieceSize = MathF.Round((980f / (12 - columns), 0);

Having a set pixel ratio on the canvas can help.

5

Hi @Tidali ,

thank you for your help - actually I tried the idea with the Update method and than figured out that the Scaling is basically

         Scaling = new Vector3(PuzzlePieceSize / ScaleFactor, PuzzlePieceSize / ScaleFactor, PuzzlePieceSize / ScaleFactor);

Whereby ScaleFactor is 19,5. This value came from a Test-Excel-Sheet where I played around with the values (which I extracted, when manually scaling everything correctly) and checked if I may find a common formula.

Thanks and have a great day.