1
NGUI 3 Support / Re: Placing Adjacent Sprites by Their Edges
« on: March 18, 2016, 04:38:13 AM »
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.
The InitialGUI is the screenshot of the sprites while they are not playing. 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.
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.
The InitialGUI is the screenshot of the sprites while they are not playing. 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.
- /**
- * function to a activate highlighter with the following position and size
- */
- public void Highlight(float xPos, float yPos, int width = 0, int height = 0, float fadeDuration = 0.2f) {
- this.highlightWidget.alpha = 0f;
- NGUITools.SetActiveSelf(this.highlightWidget.gameObject, true);
- NGUIMath.OverlayPosition(this.highlighter.transform, new Vector3(xPos, yPos, this.highlighter.transform.position.z), GameObject.FindObjectOfType<UICamera>().cachedCamera);
- this.highlighter.width = width;
- this.highlighter.height = height;
- Vector3 localPos = this.highlighter.transform.localPosition;
- localPos.x = Mathf.RoundToInt(localPos.x);
- localPos.y = Mathf.RoundToInt(localPos.y);
- this.highlighter.transform.localPosition = localPos;
- DOTween.To(() => this.highlightWidget.alpha, a => this.highlightWidget.alpha = a, 0.9f, fadeDuration);
- }
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.
