"Unity Ngui game Development Three" Tweenposition displacement Animation (ii): Perfect adaptation displacement animation with respect to uianchor at different resolutions

UI in Unity we are using the Ngui,ngui interface displacement animation, we generally use the tweenposition.

One is the simple relative displacement, regardless of the resolution adaptation problem , just need to simple from position A to position B, has been introduced in the article:

"Unity Ngui Game Development II" tweenposition displacement Animation (i): Displacement animation not relative to anchor

The other is to consider the screen resolution adaptation of the displacement animation , most of our game encountered this situation.

eg. we want a UI from the screen to the left edge of the screen to move to the center of the screen, Tweenpositon play animation, under the 960*640 is appropriate from the screen to the screen, then the 1136*640, 2048*2536 and other resolutions are normal or will wear help? The answer is sure to wear help.

Here we extend the tweenposition. We still use the Ngui default solution for screen adaptation.

1. Animation and Anchorstweenposition components do not depend on anchor points. There is a widget control that uses the Uianchor feature (new version 3.8, 3.9 in Uianchor has been discarded, has been inherited into the widget property "anchors"), and uses the Ngui Anchor feature to position the control to the upper-left corner of the screen. Change resolution everything works fine.

When you use Tweenposition to play an animation, move from outside the screen to the screen, Tweenposition needs to Vector3 the starting and ending positions, set as follows:

When the resolution or aspect ratio is changed, the effect is set by the coordinates:

4:3

16:9

The initial and terminating coordinates are calculated by the script according to the resolution, and the effect is not satisfactory.

There is a component tweentransform in Ngui that allows you to move an object from a to B,a, and B to just transform. A and B objects are passed to record the moving target point.

The Uianchor (anchor property) of the object to be moved is removed relative to the position, and the anchor point is set to the A and B objects. Otherwise this object will always be aligned relative to the anchor point, and playing the animation will have no effect.

Change the resolution to see the effect:

4:3 and 16:9

The effect is normal at different resolutions, and then we are the actual application, the project has a bunch of these effects, if each of these sets a, B object, is undoubtedly very cumbersome, here will tweentransform script extension, to achieve an automated processing.

Create an interface script TweenPositonEx.cs, and add it to any control that wants to animate the displacement relative to the screen or parent node. The script interface is simple and requires only a, b two controls.

/** transformpostion Extension: 1. You can play from A to B animations according to the game screen resolution. The UI is moved from the left side of the screen to the screen. The editor is customized in English 2.tweentransformexeditor.cs, enabling automatic function processing and saving development time  Added by Teng. **/using Unityengine; Using System.Collections; [Requirecomponent (typeof (Tweentransform))]public class Tweentransformex:monobehaviour {public Gameobject FromAnchor ;p ublic gameobject Toanchor;}

Next is TweenPositonExEditor.cs, an editor extension of the TweenPositonEx.cs script, which is a bit more complex inside, doesn't need to be concerned with content, or needs to be added to any of the foot lines, just put into the project.

/** to the TweenTransformEx.cs class properties of the editor customization, realize the function of automatic processing, save development time added by Teng.**/using unityengine;using unityeditor;using System.Collections; [Customeditor (typeof (Tweentransformex))]public class Tweentransformhelpereditor:editor {Private Tweentransformex _ tweener;private void Awake () {_tweener = (Tweentransformex) target;} public override void Oninspectorgui () {editorguilayout.beginhorizontal (), if (Guilayout.button ("Create from Anchor")) { Createanchorfrom ();} if (Guilayout.button ("Destroy")) {Destroyanchor (_tweener. Fromanchor);} Editorguilayout.endhorizontal (); _tweener. Fromanchor = (gameobject) Editorguilayout.objectfield (_tweener. Fromanchor, typeof (Gameobject)); Editorguilayout.beginhorizontal (); if (Guilayout.button ("Create to Anchor")) {Createanchorto ();} if (Guilayout.button ("Destroy")) {Destroyanchor (_tweener. Toanchor);} Editorguilayout.endhorizontal (); _tweener. Toanchor = (gameobject) Editorguilayout.objectfield (_tweener. Toanchor, typeof (Gameobject)); Createandapplytweener (); UpdateUI ();} Private VOID Createandapplytweener () {bool Toanchornotequalsnull = _tweener. Toanchor;bool fromanchornotequalsnull = _tweener. Fromanchor;if (!fromanchornotequalsnull) {Editorguilayout.helpbox ("from Anchor not created!", messagetype.warning);} else if (!toanchornotequalsnull) {Editorguilayout.helpbox ("to anchor not created!", messagetype.warning);} else {if (Guilayout.button ("Apply to Tween")) {var tweencomponent = _tweener. Getcomponent<tweentransform> ()?? _tweener.gameobject.addcomponent<tweentransform> (); tweencomponent.from = _tweener. Fromanchor.transform;tweencomponent.to = _tweener. toanchor.transform;tweencomponent.enabled = false;}}} private void UpdateUI () {if (gui.changed) {editorutility.setdirty (_tweener);}} private void Destroyanchor (Gameobject gameobj) {if (gameobj = = null) {return;} Destroyimmediate (gameobj);} private void Createanchorto () {var anchor = Createanchor ("$anchorTo"); _tweener. Toanchor = Anchor;} private void Createanchorfrom () {var anchor = Createanchor ("$anchorFrom"); _tweener. Fromanchor = Anchor;} Private Gameobject Createanchor (string anchorname) {var anchorgameobj = new Gameobject (anchorname); AnchorGameObj.transform.parent = _tweener.transform;anchorgameobj.transform.localposition = Vector3.zero; AnchorGameObj.transform.localScale = Vector3.one;var Widgetscript = anchorgameobj.addcomponent<uiwidget> (); Widgetscript.width = Widgetscript.height = 100;return anchorgameobj;}}

Add the script to the widget as follows:

Click on the widget to play the animation, create Anchorto and Anchorfrom, click "Apply to Tween", then simply adjust the relative position of Anchorto and anchorfrom relative to each other.

The following points need to be noted:

1. The widget control to play the animation can not have anchor, at least there is no onupdate anchor, otherwise it will always be relative to the anchor set position, play animation without any effect, only need to adjust the anchor of a, B.

2. To play the animation widget control in the initial position outside the screen, you can set the OnStart anchor (only once) to ensure that it is definitely out of the screen.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Unity Ngui game Development Three" Tweenposition displacement Animation (ii): Perfect adaptation displacement animation with respect to uianchor at different resolutions