Positioning Objects in a Per-Pixel Basis

Good day, this question is something related to NGUI and I already posted in their forums, but I'm taking my chances here too since the concept is somehow applicable to general positioning of objects.

We have a tutorial wherein only part of the screen is emphasized and the rest will be covered with a translucent overlay. The way I did that is by placing a center sprite with a transparent circle and surround it with rectangles (top, bottom, left, and right). See the mask attachment to see the visual representation of what I'm describing.

We were able to make progress and the sprites seem to be in their appropriate positions in their initial state. However, we're still encountering the gaps in certain tutorial steps. Our understanding is that it's because of half-pixel problem or something related to the position not exactly compliant to per pixel local position of the sprites. Please see the following screenshots.

Each cover that surround the center sprite has their own anchors as shown in the screenshots. The Highlighter is the center sprite while the InputBlockerPanel is the UIPanel of the entire overlay. The center sprite has no anchor at all since it's the one that should move and resize freely to highlight a part of the screen. The Line screenshot shows the sample of a line gap while the game is running.

Here is my code on how I move and resize the center sprite.

Code (CSharp):

1. /**
2. * function to a activate highlighter with the following position and size
3. */
4. public void Highlight(float xPos, float yPos, int width = 0, int height = 0, float fadeDuration = 0.2f) {
5.         this.highlightWidget.alpha = 0f;
6.         NGUITools.SetActiveSelf(this.highlightWidget.gameObject, true);
7.  
8.         NGUIMath.OverlayPosition(this.highlighter.transform, new Vector3(xPos, yPos, this.highlighter.transform.position.z), GameObject.FindObjectOfType<UICamera>().cachedCamera);
9.         this.highlighter.width = width;
10.         this.highlighter.height = height;
11.         Vector3 localPos = this.highlighter.transform.localPosition;
12.         localPos.x = Mathf.RoundToInt(localPos.x);
13.         localPos.y = Mathf.RoundToInt(localPos.y);
14.         this.highlighter.transform.localPosition = localPos;
15.  
16.         DOTween.To(() => this.highlightWidget.alpha, a => this.highlightWidget.alpha = a, 0.9f, fadeDuration);
17.     }

Pardon the UICamera not being cached. I'll clean that part. Here, the highlightWidget is the parent of the highlighter sprite. I've also rounded the local positions coordinates to the nearest integer since as far as I understand, NGUI components use sizes and positions on a per-pixel basis. Is there anything I can add here to achieve the ideal dimensions so that no gaps will be shown in between the sprites? If this is the wrong approach for overlaying, can you suggest a correct implementation? Thank you very much.

 

I can only upload up to 5 images in the post so I'm adding the last inspector screenshot here