차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- language:unity:4-tween [2013/09/11 22:36] – [옵션 파라미터] kieuns
+++ language:unity:4-tween [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== Tween Assets ======
+  * [[http://dotween.demigiant.com/|DoTween]] : HoTween의 다음 버젼. 편의 함수 대량 추가, 개선으로 쓰기 좋아졌다. 업데이트도 장점.
+    * [[http://hotween.demigiant.com/|HoTween]] : DoTween을 씁시다.
+  * [[http://u3d.as/content/dented-pixel/lean-tween/31i|LeanTween]] : 빠르편. 사용하기도 편하고 꾸준한 업데이트.
+    * [[http://dentedpixel.com/LeanTweenDocumentation/classes/LeanTween.html|Lean Tween Documentation]]
+  * [[http://itween.pixelplacement.com/index.php|iTween]] : 요즘은 업데이트가 없어서, 개발 종료 상태?
+====== LeanTween ======
+===== 옵션 파라미터 =====
+최근 예제까지 추가해줘서, 옵션 파라미터 쓰는게 어렵진 않지만. 자주 안쓰니 잊어버려서.
+<code csharp>
+LeanTween.rotate
+(
+  gameObject, orgRotate, 1f,
+  new object[] { "ease", LeanTweenType.easeOutExpo, "delay", _delay }
+  // 옵션 파라미터는 바로 윗줄 처럼 쓴다.
+);
+</code>
+옵션 파라미터는
+  * **new object[] { ... }** : 오브젝트를 할당해서 파라미터를 채운다.
+  * 옵션 형식은 { "<옵션이름>", 실제값, "옵션이름", 실제값 ... } 형식으로 가능한 파라미터를 쭉 나열한다.
+===== 옵션 파라미터 설명 =====
+| delay            | float 형식의 시간 값. 얼마 뒤에 트윈을 시작할 것인가 정한다.                                              |
+| :::              | useFrames 값이 true 로 설정되면 숫자값을 프레임 회수로 사용한다.                                          |
+| :::              | 트윈이 연속해서 동작해야할때 사용한다.                                                                    |
+| useFrames        | 몇 프레임 뒤에, 트윈을 시작할 것인가? <code>{"useFrames":true}</code>                                     |
+| ease             | 어떤 트윈 모션을 쓸 것인다. **LeanTween.ease**.. 로 타이핑하면 쓸 수 있는 트윈 자동 완성 목록이 보여진다. |
+| onComplete       | 트윈 완료 후 호출할 함수 이름                                                                             |
+| :::              | <code>{"onComplete":functionToCallOnComplete}</code>                                                      |
+| :::              | <code>{"onComplete":functionToCallOnComplete,"onCompleteParam":hashTableToPassToOnComplete}</code>        |
+| onUpdate         | <code>{"onUpdate":functionToCallOnUpdate}</code>                                                          |
+| :::              | <code>{"onUpdate":functionToCallOnUpdate,"onUpdateParam":hashTableToPassToOnUpdate}</code>                |
+| useEstimatedTime | Time.timeScale이 0으로 설정되어 있더라도 (화면이 정지된 상태) 트윈이 동작 되게 한다.                      |
+| onCompleteTarget |                                                                                                           |
+| onUpdateTarget   |                                                                                                           |
+| orientToPath     |                                                                                                           |
+| repeat           | 반복값 1 이외의 값으로 설정해서 반복하게 한다. (무한반복은?)                                              |
+| loopType         | 반복하는 경우 어떤 방식으로 반복할까? <code>{"repeat":2,"loopType":LeanTweenType.pingPong}</code>         |
+====== HoTween ======
+  * [[http://www.holoville.com/hotween/documentation.html|OnlineDocument]]
+===== Basic =====
+===== 패키지 추가 =====
+<code>
+using Holoville.HOTween;
+</code>
+===== 움직임 설정 =====
+딱 적절한 함수 있음. itween보다야.. 편의 함수가 적긴 하지만.
+  * HOTween.From
+  * HOTween.To
+===== 파라미터 =====
+  * HOTween.From()도 같은 맥락에서 사용한다.
+<code csharp>
+HOTween.To( <target>, <duration>, <propName>, <endValue> );
+// target : tween 을 적용할 오브젝트.
+// propName : tween이 적용할 변수. 오브젝트에 포함되어 있는 프로퍼티를 적어둔다.
+// duration : tween 적용 시간
+// endValue : 최종 변경 값
+</code>
+간단한 예제
+<code csharp>
+// 이거 맞나..
+HOTween.To( _obj.transform, 0.5f, "localScale", _newSize ) );
+</code>
+===== TweenParam =====
+propName 파라미터에 대입하는 tween 파라미터 클래스.
+<code csharp>
+// 퀵 예제
+HOTween.To( _obj.transform, 1, new TweenParms().Prop( "localScale", _newScale ) );
+// _obj.transform.localScale을 _newScale로 1초에 걸쳐 변경
+</code>
+아래와 같은 형식으로 계속 파리미터를 붙여서 최종 파라미터를 만든다, 웹 온라인 공식 문서에 이렇게 있긴 하지만 이래도 되는건가?
+<code csharp>
+new TweenParms().Prop("fieldName", 2).Ease(EaseType.easeOutQuad).Loops(2).OnComplete(myOnCompleteFunction);
+</code>
+**Prop()**의 경우 첫번째 파라미터와 연결되어 사용 되기 때문에, public인지 확인되어야 하고 Prop를 public 변수로 사용해도 되는지 확인 되어야 함.
+<code csharp>
+Vector3 _newPos = endPos.transform.position; // 이동할 좌표
+HOTween.To(
+  gameObject.transform, // Prop()에서 position 변수를 사용할 것이기 때문에, transform 까지 적어줘야 제대로 동작한다.
+.5f,
+	new TweenParms().Prop("position", _newPos).OnComplete(movingCompleted)  // position 속성을 사용하고,
+                                                                          // 종료하면 movingCompleted() 함수를 호출할 것
+);
+// --> HOTween에서는 변경할 객체의 속성을 이렇게 찾아낸다.
+// gameObject.transform + Prop()
+// --> gameObject.transform.position
+// 아래 코드는 에러
+HOTween.To(
+  gameObject, // Prop()에서 position 변수를 사용한다고 적었으나, gameObject.position은 불가능한 조합이므로 에러.
+.5f,
+	new TweenParms().Prop("position", _newPos).OnComplete(movingCompleted)  // position 속성을 사용하고,
+                                                                          // 종료하면 movingCompleted() 함수를 호출할 것
+);
+</code>
+파라미터 : [[http://www.holoville.com/hotween/documentation.html#hotweenfrom|온라인문서]]
+{{:language:unity:hotween-tweenparam-1.jpg|}}
+===== 자잘한 =====
+  * HOTween 오브젝트가 계층윈도우에 보이게 만들려면, **HOTween.Init()**를 호출해준다. \\ 초기화 함수는 호출하지 않아도 자동으로 실행된단다.
+<code csharp>
+HOTween.Init(
+  true, // 영구인스턴스
+  true, // 인스턴스 이름을 트윈 개수로 변경
+  true // OverwriteManager 사용 여부
+);
+</code>
+===== 시퀀스 =====
+  * [[http://www.holoville.com/hotween/documentation.html#sequence|온라인문서]]
+<code csharp>
+// 시퀀스 생성
+Sequence tweenSeq1 = new Sequence();
+// 루프는 여러 tween을 추가해보기 위한 용도
+for( <루프> )
+{
+// _obj는 매 반복시, 다른 오브젝트를 참조.
+tweenSeq1.Append(
+  HOTween.To( _obj.transform, 1, new TweenParms().Prop( "localScale", _obj.transform.localScale * 2f ) ) );
+// 각 HOTween 사이에 약간 딜레이를 두려면,
+tweenSeq1.AppendInterval( 0.2f );
+}
+// 플레이
+tweenSeq1.Play();
+</code>
+====== iTweenPath ======
+iTweenPath로 iTween 움직임을 적용할 패스를 만들 수 있다.
+  * url : [[http://pixelplacement.com/2010/12/03/visual-editor-for-itween-motion-paths/|iTween motion path]]
+  * 무료로 배포되는 것이니 다운로드
+    * [[http://pixelplacement.com/wp-content/uploads/2010/12/iTweenPath.unitypackage|iTweenPath.unitypackage]]
+    * {{:language:unity:itweenpath.zip|cache}}
+어느 오브젝트든 상관없이,
+  * iTweenPath 스크립트를 추가해서 패스를 설정한다. 패스는 화면에 표시되니까 마우스로  수정.
+  * **Path Name**에 이 패스에 대한 고유한 이름을 설정
+패스를 적용하고 싶은 오브젝트에 아래 같은 스크립트를 추가
+  * 패스에 따라 이동시키는 곳에 패쓰 명령어 추가
+<code csharp>
+using UnityEngine;
+using System.Collections;
+public class MovingCube : MonoBehaviour {
+void Start () {
+  iTween.MoveTo( gameObject,
+  	iTween.Hash(
+			"time", 5,
+			"path", iTweenPath.GetPath("cubepath1"),
+			"easetype", iTween.EaseType.easeInOutQuad,
+			"looptype", iTween.LoopType.pingPong
+		) );
+}
+}
+</code>
+===== iTween : Path를 사용한 이동 기능 =====
+임의의 오브젝트를 Path를 따라 움직이게 만든다. 움직이는 방향은 궤도 회전 방식.
+  - 패쓰로 사용할 빈 오브젝트를 , 생각한 경로 대로 만든다.
+  - 패스가 눈에 보이도록 OnDrawGizmos()에서 그려지는 스크립트를 추가한다. <code csharp>
+// 이런 식으로..
+void OnDrawGizmos() {
+  Gizmos.DrawWireSphere(transform.position,.25f);
+}
+</code>
+  - 움직이려는 오브젝트에 아래와 같은 스크립트를 추가해서, 패쓰를 따라 오브젝트가 움직이게 한다. _path에 미리 만들어 놓은 빈 오브젝트를 차례대로 추가해서 경로를 완성한다.<code csharp>
+public Transform[] _path;
+void OnDrawGizmos() {
+  iTween.DrawPath( iTweenPath.GetPath("<PathName>") );
+}
+// iTween의 Path 파라미터에 _path를 추가해서 이 경로 만큼 이동하게 한다.
+void Start() {
+  iTween.MoveTo( gameObject,
+    iTween.Hash(
+      "path",iTweenPath.GetPath("<PathName>"),
+      "time",1,
+      "easetype",iTween.EaseType.linear,
+      "looptype",iTween.LoopType.loop,
+      "movetopath",false)
+  );
+}
+</code>
+===== iTween : 회전 샘플 =====
+랜덤한 회전과, 각 tween 방식을 확인하기 위한 샘플 코드
+<code csharp>
+public class cubeTexture : MonoBehaviour
+{
+public float tweenTime = 3f;
+// 인스펙터에서 직접 정하고 싶으면 코멘트 삭제
+//public iTween.EaseType easeType = iTween.EaseType.easeOutExpo;
+void Start ()
+{
+// tween 움직임을 랜덤하게 선택
+iTween.EaseType _easytype = (iTween.EaseType)Random.Range( 0, 31 );
+// 랜덤 로테이션으로 무작위 회전값을 얻고,
+// "oncomplete" 옵션을 추가해서, 움직임이 끝나면 새로운 움직임을 새로 추가
+iTween.RotateTo( gameObject,
+  iTween.Hash(
+    "rotation", Random.rotation.eulerAngles,
+    "time", tweenTime,
+    "oncomplete","rotateTest",
+    "easeType",_easytype ));
+}
+public void rotateTest()
+{
+iTween.EaseType _easytype = (iTween.EaseType)Random.Range( 0, 31 );
+  iTween.RotateTo( gameObject,
+    iTween.Hash(
+      "rotation", Random.rotation.eulerAngles,
+      "time", tweenTime,
+      "oncomplete","rotateTest",
+      "easeType",_easytype ));
+}
+}
+</code>
+====== 애니메이션 이징 (Tween or Easing) ======
+이징 공식
+  * Back : 화살 당기듯, 잠시 뒤로 후퇴했다가 이동.
+  * Circle : 원 함수 공식에 의해 이동
+  * Cubic : 3차 함수 공식에 의해 이동...
+  * Exponential : 지수 함수 공식에 의해 이동.
+  * Sine : 사인 함수를 사용해서 큰 변화 없이 부드럽게 이동.
+  * Quadratic : 2차 함수 공식에 의해 이동. 변화폭이 적다.
+  * Quartic : 4차 함수 공식에 의해 이동. Cubic보다 변화폭이 높다.
+  * Quintic : 5차 함수 공식에 의해 이동 (헉? 뭐지?)
+  * Linear : 일정한 움직임.
+  * Bound : 공이 탄성을 받아 튀는 모습으로 이동
+  * Elastic : 점점 커지는 진동의 움직임을 따라 이동 (용수철같은)
+공식의 적용 모드
+  * EaseIn : 연산 그대로 적용
+  * EaseOut : 연산을 반대로 적용
+  * EaseInOut : 시작~중간까지는 그대로 중간~끝부분은 반대로 적용.
+{{:language:unity:easeinoutgraph.png}}
+각 움직임에 대한 라이브 데모
+  * from : [[http://www.robertpenner.com/easing/easing_demo.html|easing_demo from robertpenner.com]]
+{{:language:unity:easing_demo.swf?550x450|}}