<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>토끼마을 이야기</title>
    <link>https://rabbittown-diary.tistory.com/</link>
    <description>'토끼마을 이야기' 를 만들어가는 이야기</description>
    <language>ko</language>
    <pubDate>Sun, 19 Jul 2026 17:51:28 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>-크리에이터-</managingEditor>
    <image>
      <title>토끼마을 이야기</title>
      <url>https://tistory1.daumcdn.net/tistory/6677247/attach/661645d7d86048a9a09d006d2dfd8760</url>
      <link>https://rabbittown-diary.tistory.com</link>
    </image>
    <item>
      <title>여러분 오랜만이에요!</title>
      <link>https://rabbittown-diary.tistory.com/25</link>
      <description>&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;안녕하세요, 오랜만에 인사드려요!&lt;/span&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div data-message-model-slug=&quot;gpt-4o&quot; data-message-id=&quot;d5cf4143-7008-4df9-a347-f2f56a22fb6f&quot; data-message-author-role=&quot;assistant&quot;&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;올해 후반기에는 개인적인 사정이 있어 잠시 개발을 멈춰야 했어요 . 그동안 토끼마을 프로젝트를 진행하지 못해 많이 아쉬웠지만, 저를 돌아보고 개발자로서 한 단계 성장할 수 있는 시간이었기도 했던 것 같아요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저는 지금까지 토끼마을 프로젝트를 진행하면서 나름대로 열심히 개발을 진행해 왔다고 생각했어요. 하지만 프로젝트를 진행하는 과정에서 다른 개발자들과 교류할 기회가 많았고, 그 과정에서 저의 방식이 주류 개발 문화와 차이가 있다는 것을 느꼈어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 때문에 원활한 의사소통이나 협업에 애로사항이 생기는 부분이 있었고, 이를 개선하려면 저도 주류 개발 문화를 받아들여 성장하는 것이 필요하겠다고 생각했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그래서 지금 저는 프로젝트를 모두가 쉽게 참여할 수 있는 방향으로 재정비하고 있어요. 개발 환경을 새롭게 구성하고, 문서화를 통해 협업이 원활하게 이루어질 수 있도록 준비 중이에요.&lt;br /&gt;이 과정을 통해 프로젝트가 더 깔끔하고 체계적으로, 보다 주류 개발 문화에 적합하도록 다듬어질 거예요. 그리고 저 역시 소통과 협업에 강한 개발자로 한 단계 더 성장할 수 있을 거라고 생각하고 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 진행 중인 작업은 아래 블로그에서 확인할 수 있어요.&lt;br /&gt;토끼마을 프로젝트를 다시 진행할 수 있게 되면, 좋은 소식으로 다시 찾아올게요.&lt;br /&gt;응원과 관심에 항상 감사드려요. 그럼 조만간 또 만나요!  &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://uniengine.tistory.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://uniengine.tistory.com/&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1735347471552&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;Uni Engine&quot; data-og-description=&quot;Welcome!&quot; data-og-host=&quot;uniengine.tistory.com&quot; data-og-source-url=&quot;https://uniengine.tistory.com/&quot; data-og-url=&quot;https://uniengine.tistory.com&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/mQy8X/hyXSA3g7Ev/i6Z3SBmoAIhL5Mk94HMp1K/img.png?width=400&amp;amp;height=400&amp;amp;face=0_0_400_400,https://scrap.kakaocdn.net/dn/y4XNj/hyXSw7Csqj/kBWleTN0vwW3C90AetCVIK/img.png?width=400&amp;amp;height=400&amp;amp;face=0_0_400_400&quot;&gt;&lt;a href=&quot;https://uniengine.tistory.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://uniengine.tistory.com/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/mQy8X/hyXSA3g7Ev/i6Z3SBmoAIhL5Mk94HMp1K/img.png?width=400&amp;amp;height=400&amp;amp;face=0_0_400_400,https://scrap.kakaocdn.net/dn/y4XNj/hyXSw7Csqj/kBWleTN0vwW3C90AetCVIK/img.png?width=400&amp;amp;height=400&amp;amp;face=0_0_400_400');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;Uni Engine&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;Welcome!&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;uniengine.tistory.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>토끼 마을에 오신 것을 환영해요</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/25</guid>
      <comments>https://rabbittown-diary.tistory.com/25#entry25comment</comments>
      <pubDate>Sat, 28 Dec 2024 10:20:15 +0900</pubDate>
    </item>
    <item>
      <title>다음 일지는 11월에 올라와요</title>
      <link>https://rabbittown-diary.tistory.com/24</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;지금 토끼마을 이야기는 내부 코드를 문서화하는 작업을 하고 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정리 작업을 하면서 일지를 작성하면 가장 좋겠지만, 그러려면 해야 할 일이 너무 많아져서 우선 문서화에 집중하려고 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;문서화가 완료되면 토끼마을 이야기의 개발 협업이 가능해져서 개발 속도가 더 올라갈 예정이에요! 그러니 그때까지 조금만 기다려주세요 &amp;gt;&amp;lt;&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/24</guid>
      <comments>https://rabbittown-diary.tistory.com/24#entry24comment</comments>
      <pubDate>Sat, 3 Aug 2024 23:44:51 +0900</pubDate>
    </item>
    <item>
      <title>Transform Syncer</title>
      <link>https://rabbittown-diary.tistory.com/23</link>
      <description>&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;여러분 반가워요!&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저번 시간에 우리는 모션 확대범을 한번 만나봤는데요,&amp;nbsp;오늘은 이 친구가 프로젝트에서 실제로 어떤 역할을 하는지 보여드리려고 해요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;444&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/H87yn/btsINLTWv7w/nl7BqzM0YpJlkdzokQ9hi1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/H87yn/btsINLTWv7w/nl7BqzM0YpJlkdzokQ9hi1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/H87yn/btsINLTWv7w/nl7BqzM0YpJlkdzokQ9hi1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/H87yn/btsINLTWv7w/nl7BqzM0YpJlkdzokQ9hi1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;444&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;444&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;오늘의 목표는 왼쪽의 토끼를 따라하지만 움직임을 조금 과장해서 따라하는 오른쪽의 토끼를 만들어보는 거예요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;그럼, 시작합니다!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cmmL9Z/btsINtFCobI/dTKBq1TEmyENy9J6V8hKS1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cmmL9Z/btsINtFCobI/dTKBq1TEmyENy9J6V8hKS1/img.png&quot; data-origin-width=&quot;723&quot; data-origin-height=&quot;505&quot; data-is-animation=&quot;false&quot; style=&quot;width: 70.3111%; margin-right: 10px;&quot; data-widthpercent=&quot;71.14&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cmmL9Z/btsINtFCobI/dTKBq1TEmyENy9J6V8hKS1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmmL9Z%2FbtsINtFCobI%2FdTKBq1TEmyENy9J6V8hKS1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;723&quot; height=&quot;505&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cd7RGx/btsIOlz53zH/K9YcStEPd1nNUnN6niNhYk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cd7RGx/btsIOlz53zH/K9YcStEPd1nNUnN6niNhYk/img.png&quot; data-origin-width=&quot;273&quot; data-origin-height=&quot;470&quot; data-is-animation=&quot;false&quot; style=&quot;width: 28.5261%;&quot; data-widthpercent=&quot;28.86&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cd7RGx/btsIOlz53zH/K9YcStEPd1nNUnN6niNhYk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcd7RGx%2FbtsIOlz53zH%2FK9YcStEPd1nNUnN6niNhYk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;273&quot; height=&quot;470&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;토끼 구성 객체 분석&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저저번 시간에서 알아봤듯이, 우리의 토끼는 다양한 객체들의 집합으로 이루어져 있어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;게다가 이 객체들은 토끼라는 그룹에 무작위로 담겨 있는 것이 아니라, 오른쪽 사진처럼 서로 계층 구조를 형성하며 존재하고 있어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 계층 구조는 머리는 몸에 붙어 있고, 귀는 머리에 붙어 있는 등 실제 토끼의 구조를 따르기 때문에 각 객체들의 Local 움직임을 정의하는 것만으로도 토끼의 움직임을 직관적으로 구성할 수 있답니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;아무튼, 그러면 먼저 '모션 확대범'을 이용해서 A의 모션을 B에 똑같이 복제하는 것부터 시작할게요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 방식 역시 저저번 시간에 봤던 '주문서 - 요리사' 방식(커맨드 패턴)에 따라 구현되는데, 덕분에&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt; 당장 토끼가&lt;/span&gt; 없어도 연결을 미리 만들어둘 수도 있고, 중간에 토끼가 바껴도 주문서만 있다면 연결을 유지할 수 있다는 &lt;/span&gt;장점을 누릴 수 있답니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;그럼 주문서부터 만들어 볼까요?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bQe4Lo/btsIO3FZKyS/POKXsNLnwEMNg1TwYFJhHK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bQe4Lo/btsIO3FZKyS/POKXsNLnwEMNg1TwYFJhHK/img.png&quot; data-origin-width=&quot;732&quot; data-origin-height=&quot;734&quot; data-is-animation=&quot;false&quot; style=&quot;width: 53.5755%; margin-right: 10px;&quot; data-widthpercent=&quot;54.21&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bQe4Lo/btsIO3FZKyS/POKXsNLnwEMNg1TwYFJhHK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQe4Lo%2FbtsIO3FZKyS%2FPOKXsNLnwEMNg1TwYFJhHK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;732&quot; height=&quot;734&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bGQUg7/btsINV2Xvho/PQmaoEUzNbBTKqCdYjXQsK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bGQUg7/btsINV2Xvho/PQmaoEUzNbBTKqCdYjXQsK/img.png&quot; data-origin-width=&quot;749&quot; data-origin-height=&quot;889&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;45.79&quot; style=&quot;width: 45.2617%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bGQUg7/btsINV2Xvho/PQmaoEUzNbBTKqCdYjXQsK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGQUg7%2FbtsINV2Xvho%2FPQmaoEUzNbBTKqCdYjXQsK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;749&quot; height=&quot;889&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;주문서&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Transform Parent에서 봤던 것과 같이, 여기서도 각 객체들의 관계를 정의하는 데 'Part'라는 주문서가 사용돼요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 Part 역시 Transform Parent에 사용되는 Part와 같이 Target, Source, Pivot 객체를 적을 수 있는 칸과 모션 연결 방식을 적을 수 있어 우리가 예전에 했던 것과 비슷하게 연결 데이터를 정의할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다만 이번 경우에는 토끼를 제대로 움직이게 하려면 토끼를 구성하는 모든 객체들에 대해 전부 Part 주문서를 만들어 긴 하겠어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아, 걱정하지 마세요!&amp;nbsp; Part는 일일히 추가할 수도 있지만, 버튼 하나만 누르면 특정 객체에 속한 객체들에 대해 자동으로 Part 데이터를 만들어주는 기능도 있으니까, 우리는 버튼 하나만 누르면 돼요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;자, 그럼 주문서 제작이 끝났으니, 이걸 요리사에게 전달하러 가봅시다!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bpvhkh/btsIPxT0wo3/6ftO2mrZGZzfPJBVIGfn70/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bpvhkh/btsIPxT0wo3/6ftO2mrZGZzfPJBVIGfn70/img.png&quot; data-origin-width=&quot;1228&quot; data-origin-height=&quot;407&quot; data-is-animation=&quot;false&quot; style=&quot;width: 72.4307%; margin-right: 10px;&quot; data-widthpercent=&quot;73.28&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bpvhkh/btsIPxT0wo3/6ftO2mrZGZzfPJBVIGfn70/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbpvhkh%2FbtsIPxT0wo3%2F6ftO2mrZGZzfPJBVIGfn70%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1228&quot; height=&quot;407&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bU98N6/btsIPyFlJyd/tbFW0Ej92gnv1zTaTRWiik/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bU98N6/btsIPyFlJyd/tbFW0Ej92gnv1zTaTRWiik/img.png&quot; data-origin-width=&quot;319&quot; data-origin-height=&quot;290&quot; data-is-animation=&quot;false&quot; style=&quot;width: 26.4065%;&quot; data-widthpercent=&quot;26.72&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bU98N6/btsIPyFlJyd/tbFW0Ej92gnv1zTaTRWiik/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbU98N6%2FbtsIPyFlJyd%2FtbFW0Ej92gnv1zTaTRWiik%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;319&quot; height=&quot;290&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;Transform Syncer&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;토끼마을에서는 이 주문서를 'Transform Syncer'라는 객체가 받아서 연결을 수행해요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;Transform Syncer는 주문서인 Part와 재료인 Rabbit을 가지고 있는데, Part를 받으면 가지고 있는 Rabbit에서 Part와 같은 이름의 객체를 선택한 뒤 이들을 Part에 써있는 정보대로 연결한답니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이건 Transform Parent와 정확히 같은 개념으로 작동하기 때문에 쉽게 이해하실 수 있을 거예요 :)&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1009&quot; data-origin-height=&quot;684&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/lPYQp/btsIN122UX0/kxzpIYKYYnSuxXJLukRZP1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/lPYQp/btsIN122UX0/kxzpIYKYYnSuxXJLukRZP1/img.png&quot; data-alt=&quot;Transform Syncer 상태&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/lPYQp/btsIN122UX0/kxzpIYKYYnSuxXJLukRZP1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlPYQp%2FbtsIN122UX0%2FkxzpIYKYYnSuxXJLukRZP1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1009&quot; height=&quot;684&quot; data-origin-width=&quot;1009&quot; data-origin-height=&quot;684&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Transform Syncer 상태&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;Transform Parent에서는 Bind라는 작업을 통해 두 객체간의 연결을 수행할 수 있었는데, Transform Syncer는 이와는 조금 다른 과정을 통해 연결을 수행해요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;Transform Parent는 연결을 할 때 Source 객체의 '현재 위치'만 있으면 됐지만, &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Transform Syncer는 연결을 위해 &lt;/span&gt;Source의 '현재 위치'뿐만 아니라 Source의 '처음 위치', 그리고 Target의 '처음 위치'도 필요해요. 이는 객체가 움직일 때 각 객체의 '위치 델타'를 계산하기 위함인데, 이 계산은 객체의 '현재 위치'에서 '처음 위치'를 빼는 방식으로 작동하기 때문이에요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;또한 Target 객체는 '처음 위치'에 '위치 델타'를 더한 값으로 '현재 위치'를 정하는데, 이때 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;'처음 위치'를 알지 못한다면&lt;span&gt; '현재 위치'도 제대로 구할 수 없다는 문제점도 있어요.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 때문에, Transform Syncer는 주문서를 받으면 가지고 있는 두 Rabbit에서 Part와 같은 이름의 객체를 선택한 뒤, 각각의 위치를 '처음 위치'로 간주하여 저장하고, 이들을 Part에 써있는 정보대로 연결해요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 과정을 Capture라고 부르며, &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Transform Syncer의 상태는 Capture가 일어나기 전인 Idle과 Capture가 일어난 후인 Binded로 나뉘어요.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;Capture를 수행하면 각 객체의 초기 위치 정보가 해당하는 연결 방법에 맞는 형식으로 xml 형식으로 저장되며, 이는 프로그램이 재실행되더라도 설정 데이터를 유지하여 객체가 항상 동일한 초기 위치에서 동작을 수행하도록 도와줍니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이는 Target 객체가 처음 위치'에 '위치 델타'를 더한 값으로 '현재 위치'를 정한다는 성질 때문인데, 시작할 때마다 '현재 위치'가 달라진다면 객체가 의도하지 않은 움직임을 보일 수 있겠죠?&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;또한 Transform Syncer는 객체의 처음 위치들을 알고 있기 때문에, 객체가 변형되었을 때 Reset Position 기능을 수행하면 각 객체들을 Capture 당시의 위치로 초기화시켜줄 수도 있답니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;그럼 실제로 객체를 Capture한 후, Rabbit A를 움직여볼게요!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2614-14-03-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;354&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/k9Wm1/btsIN0wsTGP/AlnIIrYqfpKi8Gdabb06c1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/k9Wm1/btsIN0wsTGP/AlnIIrYqfpKi8Gdabb06c1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/k9Wm1/btsIN0wsTGP/AlnIIrYqfpKi8Gdabb06c1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/k9Wm1/btsIN0wsTGP/AlnIIrYqfpKi8Gdabb06c1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;354&quot; data-filename=&quot;2024-07-2614-14-03-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;354&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;짠! 이렇게 연결이 잘 된 걸 볼 수 있답니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;연결을 확인하기 위해 토끼가 두 번 점프를 할 때마다 Transform Parent를 꺼 봤는데, 잘 작동하는 게 보이죠?&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;하지만 우리는 토끼의 움직임을 과장하는 게 목표였어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;과장도 한번 해볼게요!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/q40Rc/btsINLsMreg/xytzcujBAGZop8rnJ4p5b0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/q40Rc/btsINLsMreg/xytzcujBAGZop8rnJ4p5b0/img.png&quot; data-origin-width=&quot;1158&quot; data-origin-height=&quot;661&quot; data-is-animation=&quot;false&quot; style=&quot;width: 72.691%; margin-right: 10px;&quot; data-widthpercent=&quot;73.55&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/q40Rc/btsINLsMreg/xytzcujBAGZop8rnJ4p5b0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fq40Rc%2FbtsINLsMreg%2FxytzcujBAGZop8rnJ4p5b0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1158&quot; height=&quot;661&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/VUyn5/btsINvKrg4V/JXuEK5fytHLOwUWGOqjcx1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/VUyn5/btsINvKrg4V/JXuEK5fytHLOwUWGOqjcx1/img.png&quot; data-origin-width=&quot;414&quot; data-origin-height=&quot;657&quot; data-is-animation=&quot;false&quot; style=&quot;width: 26.1462%;&quot; data-widthpercent=&quot;26.45&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/VUyn5/btsINvKrg4V/JXuEK5fytHLOwUWGOqjcx1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVUyn5%2FbtsINvKrg4V%2FJXuEK5fytHLOwUWGOqjcx1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;414&quot; height=&quot;657&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼의 좌우 움직임을 담당하는 가장 큰 객페는 _body_b라는 객체에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Local로 연결된 이 객체의 Position Scale을 4로 하고 다시 플레이를 하면?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2614-21-33-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;471&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dcKa7b/btsIPmrOq2g/F5ffTYupnrVCYBxwwmXKFK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dcKa7b/btsIPmrOq2g/F5ffTYupnrVCYBxwwmXKFK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dcKa7b/btsIPmrOq2g/F5ffTYupnrVCYBxwwmXKFK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/dcKa7b/btsIPmrOq2g/F5ffTYupnrVCYBxwwmXKFK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;471&quot; data-filename=&quot;2024-07-2614-21-33-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;471&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;짠! _body_b 객체의 '델타 위치'가 4배로 커지면서 의도대로 모션이 확대된 걸 볼 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 기세를 몰아서 몸도 양옆으로 확대를 해볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;444&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dMlGFO/btsIPKeTShq/96AA75PbIO1cTiuq39tR7k/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dMlGFO/btsIPKeTShq/96AA75PbIO1cTiuq39tR7k/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dMlGFO/btsIPKeTShq/96AA75PbIO1cTiuq39tR7k/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/dMlGFO/btsIPKeTShq/96AA75PbIO1cTiuq39tR7k/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;444&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;444&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이런 식으로 Transform Syncer는 원본의 모션을 다양하게 변경하는 역할을 수행한답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;덕분에 모션을 하나만 만들어도 여러 체형의 토끼에게 자유롭게 적용할 수 있는 것이죠.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, 저번 시간에 World 표현법이 모션 확대에서 어떻게 쓰이는지 보여준다고 했었죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금 한번 보여드릴게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;325&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/d4n6sV/btsIPZ3WkIN/UPbqjWtIxz3Nklc0x2uvYK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/d4n6sV/btsIPZ3WkIN/UPbqjWtIxz3Nklc0x2uvYK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/d4n6sV/btsIPZ3WkIN/UPbqjWtIxz3Nklc0x2uvYK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/d4n6sV/btsIPZ3WkIN/UPbqjWtIxz3Nklc0x2uvYK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;325&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;325&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저, 저는 토끼의 머리를 조금 높인 상태로 두고 싶다고 해볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러기 위해 Target의 '처음 위치'의 y 값을 조정해봤는데, 머리의 연결 방식이 Local이기 때문에 머리의 Parent의 객체를 기준으로 좌표계가 설정되는 것을 볼 수 있어요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;355&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b4RpvH/btsIOGj0OiQ/gOoHUEcW2TUOsTVpuklvT0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b4RpvH/btsIOGj0OiQ/gOoHUEcW2TUOsTVpuklvT0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b4RpvH/btsIOGj0OiQ/gOoHUEcW2TUOsTVpuklvT0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/b4RpvH/btsIOGj0OiQ/gOoHUEcW2TUOsTVpuklvT0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;355&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;355&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 이렇게 Control Type을 World로 하고 설정하면 Transform Syncer가 입력한 좌표를 Local 좌표계로 변환하여 적용해주기 때문에 이렇게 직관적인 높이 조절이 가능해진답니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2614-48-01-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;569&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/SXLPf/btsIPyTbPIB/IwklwY6xUEFlD3sKCRueEK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/SXLPf/btsIPyTbPIB/IwklwY6xUEFlD3sKCRueEK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/SXLPf/btsIPyTbPIB/IwklwY6xUEFlD3sKCRueEK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/SXLPf/btsIPyTbPIB/IwklwY6xUEFlD3sKCRueEK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;569&quot; data-filename=&quot;2024-07-2614-48-01-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;569&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;물론 이렇게 설정한 높이는 애니메이션이 재생 중일 때도 적용된답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘은 이렇게 실제 토끼에 모션 확대를 적용해보는 시간을 가졌어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 시간에는 다양한 토끼들의 모션을 실제로 어떻게 구현하는지 보여드릴게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 그때 다시 만나요!&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/23</guid>
      <comments>https://rabbittown-diary.tistory.com/23#entry23comment</comments>
      <pubDate>Fri, 26 Jul 2024 14:51:25 +0900</pubDate>
    </item>
    <item>
      <title>모션 확대범</title>
      <link>https://rabbittown-diary.tistory.com/22</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;안녕하세요! 오늘은 '모션 확대범'에 대해 알아볼 거예요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이름만 들어도 무시무시할 것 같은 이 친구는 사실 Shape Control 마을 기술의 정수로, 다양한 토끼의 모션 구현을 가능하게 해주는 핵심적인 역할을 하는, 이른바 한 집의 가장같은 친구랍니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 시작합니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2320-35-43-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;518&quot; data-origin-height=&quot;514&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c1gGlP/btsIJV2UakD/0bjNQIkbRf9j9yDEPLLEWk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c1gGlP/btsIJV2UakD/0bjNQIkbRf9j9yDEPLLEWk/img.gif&quot; data-alt=&quot;모션&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c1gGlP/btsIJV2UakD/0bjNQIkbRf9j9yDEPLLEWk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/c1gGlP/btsIJV2UakD/0bjNQIkbRf9j9yDEPLLEWk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;518&quot; height=&quot;514&quot; data-filename=&quot;2024-07-2320-35-43-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;518&quot; data-origin-height=&quot;514&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모션&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;여기 어떤 모션이 있습니다. 우리는 이 모션을 두 배로 '확대'해서 표현하고 싶어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;제가 한번 지금까지 알아본 물체의 연결 방식을 통해서 모션을 두 배로 확대해볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2320-39-26-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;670&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c62mih/btsIKfmD2yn/KXhfRg6W0YbAJkGjp2hW70/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c62mih/btsIKfmD2yn/KXhfRg6W0YbAJkGjp2hW70/img.gif&quot; data-alt=&quot;모션 확대?&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c62mih/btsIKfmD2yn/KXhfRg6W0YbAJkGjp2hW70/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/c62mih/btsIKfmD2yn/KXhfRg6W0YbAJkGjp2hW70/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;670&quot; height=&quot;628&quot; data-filename=&quot;2024-07-2320-39-26-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;670&quot; data-origin-height=&quot;628&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모션 확대?&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저는 원래 모션의 공을 Source로, 새로운 모션의 공을 Target으로 설정한 뒤 Target의 위치를 Source의 위치의 2배에 해당하는 지점으로 연결했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 하면 확실히 모양이 두 배 늘어난 것처럼 보이긴 해요. 하지만 전체적인 느낌은 왠지 모르게 비슷한데, 왜일까요?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;맞아요! 두 공의 움직이는 거리가 같기 때문이에요. 따라서, 이 방법은 모션을 '확대'하는 방법으로 사용하기에는 무리가 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇다면 대체 뭘 해야 모션을 '확대'할 수 있을까요?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;660&quot; data-origin-height=&quot;662&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/qyDbn/btsIKE7sdlH/x9TKvF5Y6XKfmk142zcDx0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/qyDbn/btsIKE7sdlH/x9TKvF5Y6XKfmk142zcDx0/img.png&quot; data-alt=&quot;모션 확대의 원리&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/qyDbn/btsIKE7sdlH/x9TKvF5Y6XKfmk142zcDx0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqyDbn%2FbtsIKE7sdlH%2Fx9TKvF5Y6XKfmk142zcDx0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;660&quot; height=&quot;662&quot; data-origin-width=&quot;660&quot; data-origin-height=&quot;662&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모션 확대의 원리&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;모션 확대에는 여러 방법이 있는데, Shape Control 마을에서는 Source 객체의 '나중 위치'에서 '처음 위치'를 뺀 벡터를 n배하여 Target 객체의 '처음 위치'에 더하는 방법으로 모션을 확대하기로 했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 밖에 모션의 양상을 벡터함수로 표현한 후 수학적인 방법을 통해 확대하는 방법도 생각해볼 수 있지만, 이는 복잡한 모션이나 손으로 만든 모션에 적용하기에는 무리가 있어서 Shape Control 마을에서는 어떤 모션이든 확대할 수 있는 위의 방법을 사용하게 되었어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;'나중 위치'에서 '처음 위치'를 뺀 벡터를&lt;/span&gt;&amp;nbsp;앞으로는 '위치 델타'라고 표현할게요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;535&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/xZzki/btsILiJzBMd/7ZdsPTQ5tMSAP8OOnvxKjK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/xZzki/btsILiJzBMd/7ZdsPTQ5tMSAP8OOnvxKjK/img.gif&quot; data-alt=&quot;모션 확대&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/xZzki/btsILiJzBMd/7ZdsPTQ5tMSAP8OOnvxKjK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/xZzki/btsILiJzBMd/7ZdsPTQ5tMSAP8OOnvxKjK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;535&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;535&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모션 확대&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 방법을 적용하여 처음의 모션을 확대해보았답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어때요? 확실히 2번째보다 3번째 예시가 모션이 제대로 확대된 것처럼 보이죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금까지 모션을 확대하는 원리에 대해 알아보았어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;여기서 끝은 아니고, 이 모션 확대의 방법은 놀랍게도 세 가지 방법으로 구현할 수가 있답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어떤 방법이 있을까요? - 앞에서 세 가지 위치 표현법을 알아보았죠? 이 세 표현법을 각각 적용하여 위치를 확대할 수가 있어요. 한번 보여드릴게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;971&quot; data-origin-height=&quot;592&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cEzGNE/btsIKXZ0jDg/FRzBRj8dLtWUB5NCHxQ1kk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cEzGNE/btsIKXZ0jDg/FRzBRj8dLtWUB5NCHxQ1kk/img.png&quot; data-alt=&quot;Local 방법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cEzGNE/btsIKXZ0jDg/FRzBRj8dLtWUB5NCHxQ1kk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcEzGNE%2FbtsIKXZ0jDg%2FFRzBRj8dLtWUB5NCHxQ1kk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;971&quot; height=&quot;592&quot; data-origin-width=&quot;971&quot; data-origin-height=&quot;592&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Local 방법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 Local 방법에 대해 보여드릴게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Local 방법은 Source 객체의 Local Position을 기준으로 위치 델타를 정하는 방법이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이는 객체의 실제 Parent를 위치 선정의 기준으로 하기 때문에 유니티 사용자들에게 친숙한 적용법일 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 얻은 위치 델타는 원하는 만큼 곱해져 Target 객체의 Local Position에 적용된답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ec1iNz/btsIJcYMB3s/0fctazgTH03KEqvbIe90D0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ec1iNz/btsIJcYMB3s/0fctazgTH03KEqvbIe90D0/img.gif&quot; data-alt=&quot;Local 방법 모션 확대&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ec1iNz/btsIJcYMB3s/0fctazgTH03KEqvbIe90D0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/ec1iNz/btsIJcYMB3s/0fctazgTH03KEqvbIe90D0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;449&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Local 방법 모션 확대&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 Local을 기준으로 모션을 확대하면, 위치 선정 기준이 객체의 실제 Parent가 되기 때문에 Parent의 움직임에 대해 상대적으로 작용하는 모션 확대를 구현할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;때문에 대부분의 모션 확대 케이스에서는 Local 확대 방법이 사용된답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 나머지 두 방법은 무엇일까요?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;남은 건 World 방법과 Pivot 방법이 있는데, 먼저 World 방법에 대해 알아볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;551&quot; data-origin-height=&quot;721&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cE4afK/btsIKenG47n/vpQYKetcdKj8KjcLhQPUj1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cE4afK/btsIKenG47n/vpQYKetcdKj8KjcLhQPUj1/img.png&quot; data-alt=&quot;World 방법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cE4afK/btsIKenG47n/vpQYKetcdKj8KjcLhQPUj1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcE4afK%2FbtsIKenG47n%2FvpQYKetcdKj8KjcLhQPUj1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;551&quot; height=&quot;721&quot; data-origin-width=&quot;551&quot; data-origin-height=&quot;721&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;World 방법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;World 방법은 Source의 World 좌표를 기준으로 위치 델타를 정하는 방법이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 방법은 위치 선정의 기준이 World이기 때문에 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Local 방법과 다르게&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt; 좌표계의 기준이 필요 없다는 특징을 가지고 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;어떻게 보면 가장 간단한 모션 확대 방법이라고 볼 수도 있겠네요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-2321-30-46-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;686&quot; data-origin-height=&quot;680&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/efiS4I/btsIKHiOC06/k19O8mjUl7a5hN5SI6kyvK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/efiS4I/btsIKHiOC06/k19O8mjUl7a5hN5SI6kyvK/img.gif&quot; data-alt=&quot;World 방법 모션 확대&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/efiS4I/btsIKHiOC06/k19O8mjUl7a5hN5SI6kyvK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/efiS4I/btsIKHiOC06/k19O8mjUl7a5hN5SI6kyvK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;686&quot; height=&quot;680&quot; data-filename=&quot;2024-07-2321-30-46-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;686&quot; data-origin-height=&quot;680&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;World 방법 모션 확대&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;방법이 간단한 만큼 World 방법은 모션 확대도 직관적으로 이루어져요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음은 Pivot 방법에 대해 알아볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;648&quot; data-origin-height=&quot;772&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bQmsFH/btsIJtsivOp/K8x0FuLub4KKbN91Jr8aik/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bQmsFH/btsIJtsivOp/K8x0FuLub4KKbN91Jr8aik/img.png&quot; data-alt=&quot;Pivot 방법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bQmsFH/btsIJtsivOp/K8x0FuLub4KKbN91Jr8aik/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQmsFH%2FbtsIJtsivOp%2FK8x0FuLub4KKbN91Jr8aik%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;648&quot; height=&quot;772&quot; data-origin-width=&quot;648&quot; data-origin-height=&quot;772&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Pivot 방법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Pivot 방법은 제 3의 객체인 Pivot을 위치 선정 기준으로 하는 모션 확대 방법이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;World 방법 모션 확대와 Pivot 방법 모션 확대는 World 방식 연결과 Pivot 방식 연결의 특징을 공유하는데, 바로 Pivot 객체가 고정된 상태로 존재한다면 Pivot 표현법으로 정의된 모션과 World 표현법으로 정의된 모션이 완전히 같다는 점이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 때문에 차이점을 보려면 역시 Pivot 객체가 움직이는 상황을 봐야 되겠죠?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;447&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dnnk2l/btsIKEzKLrm/HimEkPZzY5V7iEZsph07nk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dnnk2l/btsIKEzKLrm/HimEkPZzY5V7iEZsph07nk/img.gif&quot; data-alt=&quot;Pivot 방법 모션 확대&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dnnk2l/btsIKEzKLrm/HimEkPZzY5V7iEZsph07nk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/dnnk2l/btsIKEzKLrm/HimEkPZzY5V7iEZsph07nk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;447&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;447&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Pivot 방법 모션 확대&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오른쪽을 World 방법, 왼쪽을 Pivot 방법으로 해서 모션을 확대한 후 각각 Pivot을 움직여봤어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보면 World 방법은 난해한(?) 움직임을 보이고 있지만, Pivot 방법은 일정한 움직임을 보이는 걸 볼 수 있죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이처럼 Pivot 방법은 Pivot 객체의 관점에서 볼 때 모션이 World 방법과 같아지게끔 표현된다는 특징이 있는데, 이 때문에 Pivot 방법은 Local 방법 다음으로 많이 쓰이는 모션 확대 방식이 된답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;여기서 한가지 질문: 그럼 대체 World 방법 모션 확대는 언제 사용될까요?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정답은 - 사용되지 않습니다! 객체가 한 자리에 고정되어 있다면 World 표현법도 쓸모가 있겠지만, 대부분의 객체는 World상에서 움직이기 때문에 이 표현법이 직접적으로 적용될 자리는 찾기 어려운 게 사실이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;World 표현법 자체는&amp;nbsp;&lt;/span&gt;쓸모가 있을 때가 있답니다. 바로 Pivot 모션을 정의할 때에요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 세 친구들의 특징 중 서로가 서로의 표현법으로 변환될 수 있다는 점이 있는데, 이 점을 활용하면 위치, 회전, 스케일이 제각각인 Pivot 객체를 신경쓰지 않고 World 좌표를 통해서 복잡한 Pivot 좌표를 직관적으로 한방에 설정할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 특징은 지금 다루기에는 조금 추상적일 수 있어서, 다음에 Transform Syncer 객체를 다룰 때 한번에 보여드릴게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 그때 다시 만나요!&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/22</guid>
      <comments>https://rabbittown-diary.tistory.com/22#entry22comment</comments>
      <pubDate>Tue, 23 Jul 2024 21:51:57 +0900</pubDate>
    </item>
    <item>
      <title>Transform Parent</title>
      <link>https://rabbittown-diary.tistory.com/21</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;여러분 안녕하세요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저번 시간에 우리는 Shape Control 마을의 기초가 되는 세 친구, Local, World, 그리고 Pivot을 만나봤어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘은 이 친구들이 실제로 어떻게 프로젝트에 적용되는지 확인해보는 시간을 가져보려고 해요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;446&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/18jRa/btsIG2UUSBU/Ebk4LaEOLYqjfVhR8Eizgk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/18jRa/btsIG2UUSBU/Ebk4LaEOLYqjfVhR8Eizgk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/18jRa/btsIG2UUSBU/Ebk4LaEOLYqjfVhR8Eizgk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/18jRa/btsIG2UUSBU/Ebk4LaEOLYqjfVhR8Eizgk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;446&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;446&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘의 목표는 왼쪽의 빈 토끼에 얼굴과 삽을 추가해서 오른쪽처럼 삽을 들고 일하는 토끼를 만들어보는 거예요&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 시작합니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;824&quot; data-origin-height=&quot;578&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/SUJtC/btsIHd2Zb7e/UUuyi3L9NDqsvR6y2K04Nk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/SUJtC/btsIHd2Zb7e/UUuyi3L9NDqsvR6y2K04Nk/img.png&quot; data-alt=&quot;토끼를 구성하는 객체들&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/SUJtC/btsIHd2Zb7e/UUuyi3L9NDqsvR6y2K04Nk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSUJtC%2FbtsIHd2Zb7e%2FUUuyi3L9NDqsvR6y2K04Nk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;824&quot; height=&quot;578&quot; data-origin-width=&quot;824&quot; data-origin-height=&quot;578&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;토끼를 구성하는 객체들&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼에 여러 물체들을 붙여주려면 먼저 토끼를 구성하는 객체들이 무엇이 있는지 알아야 해요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼는 멀리서 보면 큰 뭉치 한덩어리로 이루어진 것 같지만, 실제로는 귀, 머리, 꼬리 등 다양한 객체들의 집합으로 구성되어 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 객체들이 개별적으로 움직이기 때문에 토끼가 다양한 움직임을 할 수 있는 것이랍니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;우리의 목표는 얼굴을 머리에, 삽을 오른손에 붙여서 얼굴과 삽을 머리와 손의 움직임과 같게 하려는 거예요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;머리와 오른손은 이미 움직이고 있으니, 우린 이들을 연결해주기만 하면 되겠죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이걸 저번 시간에 소개한 Source - Target 방식의 도식으로 나타내볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;936&quot; data-origin-height=&quot;622&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sB6s6/btsIHE67n6m/UZbS6p9qJhhkkAC21K0kkK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sB6s6/btsIHE67n6m/UZbS6p9qJhhkkAC21K0kkK/img.png&quot; data-alt=&quot;객체 결합 도식&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sB6s6/btsIHE67n6m/UZbS6p9qJhhkkAC21K0kkK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsB6s6%2FbtsIHE67n6m%2FUZbS6p9qJhhkkAC21K0kkK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;936&quot; height=&quot;622&quot; data-origin-width=&quot;936&quot; data-origin-height=&quot;622&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;객체 결합 도식&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러면 이렇게&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1 : 얼굴(Target) - 머리(Source) 파트 (빨간색)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2 : 삽(Target) - 오른손(Source) 파트 (보라색)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;두 가지의 그룹으로 표현할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 중 얼굴-머리 그룹은 Local로, 삽-오른손 그룹은 (손이 움직일 때마다 삽까지 같이 움직이면 위험할 수 있으니) Pivot 모드로 붙여서 우리가 원하는 움직임을 만들어 볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, 이렇게 서로 연관되어 움직이는 그룹은 앞으로 '파트'라고 부를게요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 실제로 프로그램에 이 파트들의 정보를 입력해볼까요?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;373&quot; data-origin-height=&quot;184&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/lVopm/btsIGbSPmZO/bhHC0AQYWlT4Fki7USjXn0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/lVopm/btsIGbSPmZO/bhHC0AQYWlT4Fki7USjXn0/img.png&quot; data-alt=&quot;Transform Parent Data&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/lVopm/btsIGbSPmZO/bhHC0AQYWlT4Fki7USjXn0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlVopm%2FbtsIGbSPmZO%2FbhHC0AQYWlT4Fki7USjXn0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;373&quot; height=&quot;184&quot; data-origin-width=&quot;373&quot; data-origin-height=&quot;184&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Transform Parent Data&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Shape Control 마을에서는 Transform Parent Data라는 객체를 이용해서 이 파트들을 지정할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 객체를 이용하면 하나의 뭉텅이(여기서는 토끼와 이를 구성하는 모든 객체들이 되겠네요!)에 적용되는 모든 연결 파트들을 한번에 지정해줄 수 있어요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/VdkXZ/btsIHZXnjSL/GhJmMUcHXWji8hvGTrmOR0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/VdkXZ/btsIHZXnjSL/GhJmMUcHXWji8hvGTrmOR0/img.png&quot; data-origin-width=&quot;393&quot; data-origin-height=&quot;543&quot; data-is-animation=&quot;false&quot; style=&quot;width: 44.6616%; margin-right: 10px;&quot; data-widthpercent=&quot;45.19&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/VdkXZ/btsIHZXnjSL/GhJmMUcHXWji8hvGTrmOR0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVdkXZ%2FbtsIHZXnjSL%2FGhJmMUcHXWji8hvGTrmOR0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;393&quot; height=&quot;543&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/o6Pov/btsIFVioJtN/u4xjvf72nfeK3uupFgq8LK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/o6Pov/btsIFVioJtN/u4xjvf72nfeK3uupFgq8LK/img.png&quot; data-origin-width=&quot;374&quot; data-origin-height=&quot;426&quot; data-is-animation=&quot;false&quot; style=&quot;width: 54.1756%;&quot; data-widthpercent=&quot;54.81&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/o6Pov/btsIFVioJtN/u4xjvf72nfeK3uupFgq8LK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo6Pov%2FbtsIFVioJtN%2Fu4xjvf72nfeK3uupFgq8LK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;374&quot; height=&quot;426&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;얼굴-머리 파트와 삽-오른손 파트 추가&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저는 첫번째 파트로 'Target은 얼굴, Source는 머리를, 연결을 Local 방식으로 하라'는 명령을 적었고, 두번째 파트로 'Target은 삽, Source는 왼손, Pivot은 토끼 원점, 연결은 Pivot 방식으로 하라'는 명령을 넣었어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(이 외에도 다양한 명령을 적을 수 있는데, 이건 다음에 기회가 된다면 알아보도록 해요!)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 명령을 기반으로 연결을 구성하면 실제 객체가 없어도 연결 데이터를 독립적으로 관리할 수 있는 장점이 있으며, 또 객체가 변경될 때마다 객체의 주소를 바꿔줄 필요 없이 이름만 맞춰주면 된다는 편의성도 얻을 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예를 들면, 이는 요리사가 손님으로부터 직접 주문을 받아 음식을 만드는 방법이 아니라 손님이 주문서에 주문을 작성하면 요리사가 주문서를 보고 음식을 만드는 방법과 비슷하다고 볼 수 있어요. (조금 유식한 말로는 '커맨드 패턴'이라고 해요!)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이러면 음식 재료가 없어도 주문서를 미리 만들어둘 수도 있고, 중간에 요리사가 바껴도 주문서만 있다면 요리를 계속 만들 수 있다는 장점이 있지요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 우리도 이 주문서를 한번 요리사에게 전달해서 실제 요리를 만들어 볼까요?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bAq6s8/btsIOTCTSFw/GHkuEnpvutp2pM6EiRLD2k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bAq6s8/btsIOTCTSFw/GHkuEnpvutp2pM6EiRLD2k/img.png&quot; data-origin-width=&quot;1170&quot; data-origin-height=&quot;535&quot; data-is-animation=&quot;false&quot; style=&quot;width: 72.8579%; margin-right: 10px;&quot; data-widthpercent=&quot;73.72&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bAq6s8/btsIOTCTSFw/GHkuEnpvutp2pM6EiRLD2k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAq6s8%2FbtsIOTCTSFw%2FGHkuEnpvutp2pM6EiRLD2k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1170&quot; height=&quot;535&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ru4PB/btsIGy09fAT/xSGRpbCpRkBHjRqzyWKpW1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ru4PB/btsIGy09fAT/xSGRpbCpRkBHjRqzyWKpW1/img.png&quot; data-origin-width=&quot;386&quot; data-origin-height=&quot;495&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;26.28&quot; style=&quot;width: 25.9793%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ru4PB/btsIGy09fAT/xSGRpbCpRkBHjRqzyWKpW1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fru4PB%2FbtsIGy09fAT%2FxSGRpbCpRkBHjRqzyWKpW1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;386&quot; height=&quot;495&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;Transform Parent&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼마을에서는 이 주문서를 'Transform Parent'라는 객체가 받아서 연결을 수행해요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Transform Parent는 주문서인 Part와 재료인 Rabbit을 가지고 있는데, Part를 받으면 가지고 있는 Rabbit에서 Part와 같은 이름의 객체를 선택한 뒤 이들을 Part에 써있는 정보대로 연결한답니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;755&quot; data-origin-height=&quot;436&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bwXJ7P/btsIOmS7MBR/TKkyDib5qWSkPiISKLykiK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bwXJ7P/btsIOmS7MBR/TKkyDib5qWSkPiISKLykiK/img.png&quot; data-alt=&quot;Transform Parent 상태&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bwXJ7P/btsIOmS7MBR/TKkyDib5qWSkPiISKLykiK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbwXJ7P%2FbtsIOmS7MBR%2FTKkyDib5qWSkPiISKLykiK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;755&quot; height=&quot;436&quot; data-origin-width=&quot;755&quot; data-origin-height=&quot;436&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Transform Parent 상태&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 원하는 객체를 선택하여 연결하는 과정을 Bind라고 부르며, Transform Parent의 상태는 Bind가 일어나기 전인 Idle과 Bind가 일어난 후인 Binded로 나뉘어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Idle 상태에서 객체는 서로 연결되어 있지 않은 상태이고, Binded 상태에서는 Parts 데이터에 써있는 정보대로 객체가 연결되어 있는 상태라고 할 수 있지요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 실제로 객체를 Bind해 볼까요?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;332&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/HyrrZ/btsIGVPchA3/0eRdzHkF1dKkdsmdY18Ink/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/HyrrZ/btsIGVPchA3/0eRdzHkF1dKkdsmdY18Ink/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/HyrrZ/btsIGVPchA3/0eRdzHkF1dKkdsmdY18Ink/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/HyrrZ/btsIGVPchA3/0eRdzHkF1dKkdsmdY18Ink/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;332&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;332&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;짠! 이렇게 연결이 잘 된 걸 볼 수 있답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;연결을 확인하기 위해 토끼가 두 번 점프를 할 때마다 Transform Parent를 꺼 봤는데, 확실히 잘 작동하는 게 보이죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, 마지막으로 Local 연결과 World 연결, 그리고 Pivot 연결의 차이점을 보여드리려고 해요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저번 시간에 사진으로 잠깐 보여드렸는데, 아무래도 실제 상황에서 보여드리는 게 체감이 될 것 같아서요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼의 삽을 세 가지 방식으로 한번 연결해볼게요!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;427&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ckfC6p/btsIIgLsu5D/FY6kGZ2Q2WzdCrKlfTJcdK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ckfC6p/btsIIgLsu5D/FY6kGZ2Q2WzdCrKlfTJcdK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ckfC6p/btsIIgLsu5D/FY6kGZ2Q2WzdCrKlfTJcdK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/ckfC6p/btsIIgLsu5D/FY6kGZ2Q2WzdCrKlfTJcdK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;427&quot; data-filename=&quot;ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;427&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 토끼의 위치가 변하지 않을 때의 Local, World, Pivot 연결이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Local 연결은 손의 움직임을 정확히 따라가지만, 나머지 두 연결은 손의 위치만 따라가는 것을 볼 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 보면 World와 Pivot 연결은 같은 것처럼 보일 수 있어요 - 왜냐면 둘다 Pivot이 움직이지 않는 상황이기 때문이에요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Pivot 연결의 진가는 Pivot 객체가 움직일 때 드러난답니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;ezgif.com-video-to-gif-converter 2.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;528&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/92ZZ1/btsIGukjYyV/zX0w54jR6BeFV5HXbokrH1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/92ZZ1/btsIGukjYyV/zX0w54jR6BeFV5HXbokrH1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/92ZZ1/btsIGukjYyV/zX0w54jR6BeFV5HXbokrH1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/92ZZ1/btsIGukjYyV/zX0w54jR6BeFV5HXbokrH1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;528&quot; data-filename=&quot;ezgif.com-video-to-gif-converter 2.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;528&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;움직임 변화를 보기 위해 직접 Pivot 객체를 회전시켜 봤습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보면 World 방식으로 연결된 삽은 왼손에 대한 위치만 유지하는 반면, Pivot 방식으로 연결된 삽은 왼손에 딱 맞게 움직이는 걸 볼 수 있죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이처럼 세 가지 연결 방식은 각각 특색을 가지고 있답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘은 이렇게 실전에서 세 연결 방식을 적용하는 방법에 대해 배워 봤어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 시간에는 토끼 움직임에 대한 핵심, 모션 확대범에 대해 알아볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 그때 봐요!&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/21</guid>
      <comments>https://rabbittown-diary.tistory.com/21#entry21comment</comments>
      <pubDate>Tue, 16 Jul 2024 17:26:53 +0900</pubDate>
    </item>
    <item>
      <title>세 가지 위치 표현법</title>
      <link>https://rabbittown-diary.tistory.com/20</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;Shape Control 마을에 오신 여러분, &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;반가워요!&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;여러분은 지금부터 마을의 입구부터 시작해서 토끼들의 움직임을 구현하기까지의 여행을 저와 함께 떠나볼 거예요.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;그럼 준비되셨나요?&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;2859&quot; data-origin-height=&quot;888&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bYzs6j/btsIxdQ5or7/5u90vOdKS7UmzmaBoL3fVk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bYzs6j/btsIxdQ5or7/5u90vOdKS7UmzmaBoL3fVk/img.png&quot; data-alt=&quot;Shape Control 마을에서 사용하는 객체의 위치 표현 방법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bYzs6j/btsIxdQ5or7/5u90vOdKS7UmzmaBoL3fVk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbYzs6j%2FbtsIxdQ5or7%2F5u90vOdKS7UmzmaBoL3fVk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2859&quot; height=&quot;888&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;2859&quot; data-origin-height=&quot;888&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Shape Control 마을에서 사용하는 객체의 위치 표현 방법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;앗, 입구부터 이상하게(?) 생긴 녀석들이 나타났어요!&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;겁먹지 말아요. 이 세 친구는 토끼의 움직임을 구현하는 데 가장 기본이 되는 친구들이랍니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;앞으로 이 세 친구들을 중심으로 여행을 떠나게 될 테니, 오늘은 한번 이 친구들과 친해져 보는 시간을 가져 볼게요.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;921&quot; data-origin-height=&quot;807&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cEWaVr/btsIxFfs8qV/FP9VBbrHt2aE1AGHbcykU0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cEWaVr/btsIxFfs8qV/FP9VBbrHt2aE1AGHbcykU0/img.png&quot; data-alt=&quot;Local 표현법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cEWaVr/btsIxFfs8qV/FP9VBbrHt2aE1AGHbcykU0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcEWaVr%2FbtsIxFfs8qV%2FFP9VBbrHt2aE1AGHbcykU0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;921&quot; height=&quot;807&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;921&quot; data-origin-height=&quot;807&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Local 표현법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 Local이라는 친구부터 만나볼게요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 친구는 원하는 객체(파란색)의 위치를 기준이 되는 객체(초록색)의 좌표계로 표현하는 방식을 뜻한답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, 말이 나온 김에 말인데, 앞으로는 편의를 위해 원하는 객체(파란색)는 Target, 기준이 되는 객체(초록색)는 Source라고 표현할게요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;만약 여러분이 유니티에 익숙하다면&lt;span&gt; &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Local이 &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;비교적 친숙한 개념이라고 느끼실 수 있는데, 이것이 바로 Target 객체의 transform.localPosition과 같은 개념이기 때문이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;여기서 localPosition이 있는데도 Local이라는 친구를 따로 사용하는 이유는, 유니티의 localPosition은 Hierarchy상 Parent에 대해서만 작동하기 때문에 그렇지 않은 객체의 경우에 Local 개념을 적용할 수 없기 때문이에요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-1321-25-44-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bJcnoX/btsIyBXEB9v/NQZKeoNR1HIo8xJ6HuvBLk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bJcnoX/btsIyBXEB9v/NQZKeoNR1HIo8xJ6HuvBLk/img.gif&quot; data-alt=&quot;Local 표현법을 통한 두 객체의 위치 관계 정의&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bJcnoX/btsIyBXEB9v/NQZKeoNR1HIo8xJ6HuvBLk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bJcnoX/btsIyBXEB9v/NQZKeoNR1HIo8xJ6HuvBLk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;449&quot; data-filename=&quot;2024-07-1321-25-44-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Local 표현법을 통한 두 객체의 위치 관계 정의&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 Local 표현법을 적용하면, Hierarchy상 Parent-Children 관계가 아닌 두 객체에 대해서도 위치 관계를 설정할 수 있답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음은 World 친구에 대해 알아볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;972&quot; data-origin-height=&quot;783&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/by7qwi/btsIyuEtX86/NKXSps8eJKywRw2N8KWWx0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/by7qwi/btsIyuEtX86/NKXSps8eJKywRw2N8KWWx0/img.png&quot; data-alt=&quot;World 표현법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/by7qwi/btsIyuEtX86/NKXSps8eJKywRw2N8KWWx0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fby7qwi%2FbtsIyuEtX86%2FNKXSps8eJKywRw2N8KWWx0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;972&quot; height=&quot;783&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;972&quot; data-origin-height=&quot;783&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;World 표현법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;World 친구는 Local과 같이 Target의 위치를 Source를 기준으로 해서 표현한 위치예요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;차이점이 있다면 Local은 Source Transform의 위치뿐만 아니라 회전, 스케일을 전부 기반으로 했지만, World는 Source Transform의 위치만 기반으로 하고, 회전과 스케일은 절대 좌표를 기반으로 한다는 점이 있어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이 때문에 Source 객체가 회전하거나 스케일이 바뀌면 Local 표현법으로 정의된 Target 객체는 이에 맞게 움직이지만, World 표현법으로 정의된 Target 객체는 Source 객체가 움직이지 않는 한 동일한 위치를 가진다는 특징이 있어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;아래 간단한 예시를 통해 설명해드릴게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-1321-38-38-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;447&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/r8DHP/btsIzTpuRfH/7esYBZMW4GD4YVYrr7RFY0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/r8DHP/btsIzTpuRfH/7esYBZMW4GD4YVYrr7RFY0/img.gif&quot; data-alt=&quot;Local 표현법과 World 표현법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/r8DHP/btsIzTpuRfH/7esYBZMW4GD4YVYrr7RFY0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/r8DHP/btsIzTpuRfH/7esYBZMW4GD4YVYrr7RFY0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;447&quot; data-filename=&quot;2024-07-1321-38-38-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;447&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Local 표현법과 World 표현법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;보이는 것처럼 왼쪽의 Local 표현법은 Target 객체가 Source 객체의 위치와 회전 모두에 영향을 받지만, 오른쪽의 World 표현법은 Source 객체의 위치에만 영향을 받는 걸 볼 수 있어요.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;마지막으로 Pivot 표현법에 대해 알아볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;870&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cIlV7R/btsIzNJCeoB/aUixjaxYTzW6xenwjBJzx1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cIlV7R/btsIzNJCeoB/aUixjaxYTzW6xenwjBJzx1/img.png&quot; data-alt=&quot;Pivot 표현법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cIlV7R/btsIzNJCeoB/aUixjaxYTzW6xenwjBJzx1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcIlV7R%2FbtsIzNJCeoB%2FaUixjaxYTzW6xenwjBJzx1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;894&quot; height=&quot;870&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;870&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Pivot 표현법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Pivot 친구는 Local, World과 같이 Target의 위치를 Source를 기준으로 해서 표현한 위치예요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 보니 세 친구는 모두 Target의 위치를 Source를 기준으로 해서 표현한 위치라는 공통점이 있네요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 Pivot 역시 두 친구와는 차이점이 있는데, Local은 Source Transform의 위치, 회전, 스케일을 전부 기반으로 하고, World는 Source Transform의 위치만 기반으로 하고 회전과 스케일은 절대 좌표를 기반으로 했다면, Pivot은 Source Transform의 위치만 기반으로 하고 회전과 스케일은 제 3의 객체인 Pivot(주황색)을 기준으로 한다는 점이 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 특성 때문에 Pivot 객체가 원점에 있다면 Pivot 표현법으로 정의된 위치는 World 표현법으로 정의된 위치와 완전히 같다는 특징을 가진답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 Pivot 객체가 원점이 아니거나 연속적으로 움직인다면 Target 객체 역시 이에 맞춰 움직이겠죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예시를 통해 진짜 그런지 한번 보도록 할게요!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-07-1322-00-22-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/7SDwE/btsIx6jPI4W/tJkzsoJx1iePdVpFcMbKC0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/7SDwE/btsIx6jPI4W/tJkzsoJx1iePdVpFcMbKC0/img.gif&quot; data-alt=&quot;World 표현법과 Pivot 표현법&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/7SDwE/btsIx6jPI4W/tJkzsoJx1iePdVpFcMbKC0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/7SDwE/btsIx6jPI4W/tJkzsoJx1iePdVpFcMbKC0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;449&quot; data-filename=&quot;2024-07-1322-00-22-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;449&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;World 표현법과 Pivot 표현법&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보이는 것처럼 World 표현법은 Pivot 객체의 움직임과 관계 없이 Source 객체로부터 일정한 위치에 Target 객체의 위치를 정의하지만, Pivot 표현법은 Pivot 객체의 관점에서 볼 때 Source 객체에 대한 Target 객체의 위치가 World 표현법과 같아지게끔 유지된다는 걸 볼 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Pivot&lt;span&gt; 표현법의 이러한 특징 덕분에&lt;/span&gt;&lt;/span&gt; 캐릭터의 모션 표현에서 캐릭터를 중심으로 일정한 위치에 있어야 하는 객체의 위치 구현이 가능해진답니다 - 만약 오른손에 든 삽이 캐릭터가 회전하면서 왼손에 든 삽으로 바뀌어 버리면 곤란하겠죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;반대로 World 표현법은 캐릭터의 방향과 관계 없이 항상 캐릭터의 어느 부분에 존재해야 하는 객체의 위치 구현을 할 때 용이하게 쓰일 수 있어요 - 예를 들어 대화상자나 펫(pet)의 위치 구현 등이 있겠네요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금까지 알아본 세 친구들은 사실 한 지붕 아래서 사는 가족과 같아서, 서로가 서로의 좌표로 변환이 가능해요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 특성을 이용하면 Local 좌표를 World 좌표로부터의 변환을 통해 지정하여 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;Source 객체의 Transform을 몰라도 직관적으로 좌표를 지정하는 등의 여러 이점을 누릴 수 있어요.&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;789&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bR1Cv1/btsIxGMfE5e/75zqKxhvKmLdpOfRTHWnhK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bR1Cv1/btsIxGMfE5e/75zqKxhvKmLdpOfRTHWnhK/img.png&quot; data-alt=&quot;세 표현법간의 변환&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bR1Cv1/btsIxGMfE5e/75zqKxhvKmLdpOfRTHWnhK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbR1Cv1%2FbtsIxGMfE5e%2F75zqKxhvKmLdpOfRTHWnhK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1893&quot; height=&quot;789&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;789&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;세 표현법간의 변환&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 세 표현법은 차례가 있는데, 첫째가 Local, 둘째가 World, 그리고 막내가 Pivot이에요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 관점에서 보면 Local에서 World로 바꾸는 것, 그리고 World에서 Pivot으로 바꾸는 것(혹은 그 반대)은 비교적 수월하게 할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예를 들어, Local에서 World로 변경하려면 원하는 좌표를 Source 객체의 매트릭스에 곱하면 되고, World를 Pivot으로 변경하려면 원하는 좌표를 Pivot 객체의 역 매트리스에 곱하면 돼요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러면 첫째에서 셋째, 셋째에서 첫째로의 변환은 어떻게 하면 될까요? 맞아요! 먼저 첫째를 둘째로 바꾸고, 둘째를 셋째로 바꾸면 돼요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;706&quot; data-origin-height=&quot;815&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ZUBki/btsIydvYrh6/miT1GSoNZ0HS0k7wzaKXnK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ZUBki/btsIydvYrh6/miT1GSoNZ0HS0k7wzaKXnK/img.png&quot; data-alt=&quot;세 표현법간의 변환 구현&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ZUBki/btsIydvYrh6/miT1GSoNZ0HS0k7wzaKXnK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZUBki%2FbtsIydvYrh6%2FmiT1GSoNZ0HS0k7wzaKXnK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;706&quot; height=&quot;815&quot; data-origin-width=&quot;706&quot; data-origin-height=&quot;815&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;세 표현법간의 변환 구현&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한번 이 변환이 제대로 일어나는지 확인해볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;671&quot; data-origin-height=&quot;582&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/SVjCi/btsIxgNMdy9/zBPGwaG9ZHs9KnmjxdqM9K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/SVjCi/btsIxgNMdy9/zBPGwaG9ZHs9KnmjxdqM9K/img.png&quot; data-alt=&quot;변환 테스트 : Local&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/SVjCi/btsIxgNMdy9/zBPGwaG9ZHs9KnmjxdqM9K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSVjCi%2FbtsIxgNMdy9%2FzBPGwaG9ZHs9KnmjxdqM9K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;671&quot; height=&quot;582&quot; data-origin-width=&quot;671&quot; data-origin-height=&quot;582&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;변환 테스트 : Local&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 Target 객체를 Source 객체의 Child로 두고, Local Position을 (5, 1)로 설정했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보면 Source의 Local 좌표계에서 (5, 1)의 위치에 Target이 있는 게 보이죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이제 이 로컬 좌표를 바탕으로 세 좌표를 전부 구해 볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bJCcIB/btsIzdhHyP5/CLnouMuJcKuz0745hnKeC0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bJCcIB/btsIzdhHyP5/CLnouMuJcKuz0745hnKeC0/img.png&quot; data-origin-width=&quot;454&quot; data-origin-height=&quot;174&quot; data-is-animation=&quot;false&quot; style=&quot;width: 60.9516%; margin-right: 10px;&quot; data-widthpercent=&quot;61.67&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bJCcIB/btsIzdhHyP5/CLnouMuJcKuz0745hnKeC0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJCcIB%2FbtsIzdhHyP5%2FCLnouMuJcKuz0745hnKeC0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;454&quot; height=&quot;174&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bvtckj/btsIx6D8l4B/Hvh7NZI3XL7tATy1nYdTG1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bvtckj/btsIx6D8l4B/Hvh7NZI3XL7tATy1nYdTG1/img.png&quot; data-origin-width=&quot;253&quot; data-origin-height=&quot;156&quot; data-is-animation=&quot;false&quot; style=&quot;width: 37.8856%;&quot; data-widthpercent=&quot;38.33&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bvtckj/btsIx6D8l4B/Hvh7NZI3XL7tATy1nYdTG1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbvtckj%2FbtsIx6D8l4B%2FHvh7NZI3XL7tATy1nYdTG1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;253&quot; height=&quot;156&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;Local 좌표를 통한 세 표현법의 좌표 구하기&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보면 Local 좌표는 (5, 1), World 좌표는 (4.57, 2.26), Pivot 좌표는 (4.83, -1.63)이라고 나와요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이번엔 관점을 바꿔서, World 좌표를 기준으로 한번 확인해볼까요?&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;485&quot; data-origin-height=&quot;490&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/GnSQF/btsIzKMTySj/DXEKcj8yJlHZkTtCKoyXa1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/GnSQF/btsIzKMTySj/DXEKcj8yJlHZkTtCKoyXa1/img.png&quot; data-alt=&quot;변환 테스트 : World&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/GnSQF/btsIzKMTySj/DXEKcj8yJlHZkTtCKoyXa1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGnSQF%2FbtsIzKMTySj%2FDXEKcj8yJlHZkTtCKoyXa1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;485&quot; height=&quot;490&quot; data-origin-width=&quot;485&quot; data-origin-height=&quot;490&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;변환 테스트 : World&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;같은 위치에 있는 같은 오브젝트들을 이번엔 표현법만 바꿔서 다시 표현해봤어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞에서 Local 좌표를 바탕으로 World 좌표를 구했을 때 (4.57, 2.26)이 나왔는데, 벌써부터 해당 위치에 Target이 있는 것 같이 보이네요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러면 이제는 월드 좌표를 기준으로 나머지 세 좌표들을 한번 구해 볼게요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/o8Brf/btsIyu5xSNt/HQpsLC1MwYIhlwMuGq0WEK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/o8Brf/btsIyu5xSNt/HQpsLC1MwYIhlwMuGq0WEK/img.png&quot; data-origin-width=&quot;424&quot; data-origin-height=&quot;172&quot; data-is-animation=&quot;false&quot; style=&quot;width: 59.5462%; margin-right: 10px;&quot; data-widthpercent=&quot;60.25&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/o8Brf/btsIyu5xSNt/HQpsLC1MwYIhlwMuGq0WEK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo8Brf%2FbtsIyu5xSNt%2FHQpsLC1MwYIhlwMuGq0WEK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;424&quot; height=&quot;172&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/3LlcH/btsIzylzXjV/5g5WiMiSovbKudaCHL5wCk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/3LlcH/btsIzylzXjV/5g5WiMiSovbKudaCHL5wCk/img.png&quot; data-origin-width=&quot;257&quot; data-origin-height=&quot;158&quot; data-is-animation=&quot;false&quot; style=&quot;width: 39.291%;&quot; data-widthpercent=&quot;39.75&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/3LlcH/btsIzylzXjV/5g5WiMiSovbKudaCHL5wCk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3LlcH%2FbtsIzylzXjV%2F5g5WiMiSovbKudaCHL5wCk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;257&quot; height=&quot;158&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;World 좌표를 통한 세 표현법의 좌표 구하기&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;보면 Local 좌표는 (5, 1), World 좌표는 (4.57, 2.26), Pivot 좌표는 (4.83, -1.63)으로, 앞서 구한 값과 동일한 값이 나오는 것을 확인할 수 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;마지막으로 Pivot 기준으로 세 객채를 봅시다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;675&quot; data-origin-height=&quot;579&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bXjbCo/btsIy19Ey8Q/xsHVIgCNv1v6BENTdNJOEk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bXjbCo/btsIy19Ey8Q/xsHVIgCNv1v6BENTdNJOEk/img.png&quot; data-alt=&quot;변환 테스트 : Pivot&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bXjbCo/btsIy19Ey8Q/xsHVIgCNv1v6BENTdNJOEk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbXjbCo%2FbtsIy19Ey8Q%2FxsHVIgCNv1v6BENTdNJOEk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;675&quot; height=&quot;579&quot; data-origin-width=&quot;675&quot; data-origin-height=&quot;579&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;변환 테스트 : Pivot&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞의 두 방법에서 Pivot 좌표를 구했을 때&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;(4.83, -1.63)&lt;/span&gt; 이 나왔는데, 보면 해당 위치에 Target이 있는 것 같이 보이죠?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;실제로 한번 확인해봅시다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/PbtMU/btsIz6WtUWy/GNdaNK97OERYjw0uV3Knk1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/PbtMU/btsIz6WtUWy/GNdaNK97OERYjw0uV3Knk1/img.png&quot; data-origin-width=&quot;532&quot; data-origin-height=&quot;202&quot; data-is-animation=&quot;false&quot; style=&quot;width: 61.064%; margin-right: 10px;&quot; data-widthpercent=&quot;61.78&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/PbtMU/btsIz6WtUWy/GNdaNK97OERYjw0uV3Knk1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPbtMU%2FbtsIz6WtUWy%2FGNdaNK97OERYjw0uV3Knk1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;532&quot; height=&quot;202&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/YQXFL/btsIyj32e4J/0st2Ax9iHZwVALH2nV0YU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/YQXFL/btsIyj32e4J/0st2Ax9iHZwVALH2nV0YU1/img.png&quot; data-origin-width=&quot;246&quot; data-origin-height=&quot;151&quot; data-is-animation=&quot;false&quot; style=&quot;width: 37.7732%;&quot; data-widthpercent=&quot;38.22&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/YQXFL/btsIyj32e4J/0st2Ax9iHZwVALH2nV0YU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYQXFL%2FbtsIyj32e4J%2F0st2Ax9iHZwVALH2nV0YU1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;246&quot; height=&quot;151&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;Pivot 좌표를 통한 세 표현법의 좌표 구하기&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞의 두 실험에서와 같이 Local 좌표는 (5, 1), World 좌표는 (4.57, 2.26), Pivot 좌표는 (4.83, -1.63)으로 나오는 걸 확인할 수 있었습니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘은 이렇게 Target의 위치를 Source를 기준으로 해서 표현하는 세 가지 표현법과 이들간의 변환 방법에 대해 알아봤어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 시간에는 이 표현법을 직접적으로 사용하는 Transform Handler라는 녀석과 한번 만나보도록 할 거예요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 친구부터가 토끼의 모션 구현에 사용되는 요소이니, 다음 시간도 꼭 오셔야 해요!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 안녕!&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/20</guid>
      <comments>https://rabbittown-diary.tistory.com/20#entry20comment</comments>
      <pubDate>Sat, 13 Jul 2024 22:36:06 +0900</pubDate>
    </item>
    <item>
      <title>Shape Control 마을</title>
      <link>https://rabbittown-diary.tistory.com/19</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;Shape Control 마을에 오신 것을 환영합니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;Shape Control&lt;span&gt; 마을은 World에 있는 마을로, 토끼들의 움직임 구현을 담당하는 마을이에요.&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;1764&quot; data-origin-height=&quot;1670&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bu8yvV/btsIu2ux7Vn/GgNndvn15UtC49keWMUnF0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bu8yvV/btsIu2ux7Vn/GgNndvn15UtC49keWMUnF0/img.png&quot; data-alt=&quot;Shape Control 마을 주소&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bu8yvV/btsIu2ux7Vn/GgNndvn15UtC49keWMUnF0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbu8yvV%2FbtsIu2ux7Vn%2FGgNndvn15UtC49keWMUnF0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1764&quot; height=&quot;1670&quot; data-filename=&quot;Frame 6.png&quot; data-origin-width=&quot;1764&quot; data-origin-height=&quot;1670&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Shape Control 마을 주소&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼마을에는 수많은 토끼와 악세서리, 그리고 토끼와 상호작용하는 물건들이 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 모든 객체의 모션들을 일일히 수작업으로 만드는 것은 어렵기 때문에, Shape Control 마을에서는 미리 정의된 몇 개의 모션을 가지고 다양한 형태의 토끼와 악세서리에 맞춰 적용하여 적은 모션으로도 다양한 객체의 모션 재생을 가능하게 하는 일을 하고 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;더 나아가, 모션을 미리 만들어둘 수 없는 토끼와 물건간의 상호작용 모션을 가능하게 하는 일도 하고, 토끼의 자연스러운 이동을 구현하는 작업도 하는 등 토끼의 움직임과 관련된 모든 활동은 이 마을에서 처리한다고 보시면 돼요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그럼 이 작업이 어떻게 이루어지는지 차례대로 소개할게요!&lt;/p&gt;</description>
      <category>토끼마을 개발 백서/Shape Control</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/19</guid>
      <comments>https://rabbittown-diary.tistory.com/19#entry19comment</comments>
      <pubDate>Thu, 11 Jul 2024 14:09:34 +0900</pubDate>
    </item>
    <item>
      <title>토끼마을 개발 길잡이</title>
      <link>https://rabbittown-diary.tistory.com/18</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;현재 목표로 하고 있는 토끼마을의 개발 길잡이입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼마을을 탐험할 때 길잡이를 참고하면 지금 걸어가고 있는 곳이 어디인지 수월하게 알 수 있어요 :)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 3.png&quot; data-origin-width=&quot;2082&quot; data-origin-height=&quot;3618&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ucqrt/btsIu82txJl/cWodd6qDaMvT3GqqikLkzk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ucqrt/btsIu82txJl/cWodd6qDaMvT3GqqikLkzk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ucqrt/btsIu82txJl/cWodd6qDaMvT3GqqikLkzk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fucqrt%2FbtsIu82txJl%2FcWodd6qDaMvT3GqqikLkzk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2082&quot; height=&quot;3618&quot; data-filename=&quot;Frame 3.png&quot; data-origin-width=&quot;2082&quot; data-origin-height=&quot;3618&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>토끼마을 개발 백서</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/18</guid>
      <comments>https://rabbittown-diary.tistory.com/18#entry18comment</comments>
      <pubDate>Thu, 11 Jul 2024 13:32:46 +0900</pubDate>
    </item>
    <item>
      <title>2D 애니메이션 기능이 개선되었어요.</title>
      <link>https://rabbittown-diary.tistory.com/17</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;안녕하세요! 이번엔 2D 애니메이션 기능이 개선되어서 여러분께 알려드리려고 왔습니다 :D&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;image.png&quot; data-origin-width=&quot;241&quot; data-origin-height=&quot;229&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b5dfda/btsF6hzHbtm/jIn3ElyMMlY2x1viMsQK5K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b5dfda/btsF6hzHbtm/jIn3ElyMMlY2x1viMsQK5K/img.png&quot; data-alt=&quot;기존의 리깅 시스템&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b5dfda/btsF6hzHbtm/jIn3ElyMMlY2x1viMsQK5K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5dfda%2FbtsF6hzHbtm%2FjIn3ElyMMlY2x1viMsQK5K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;241&quot; height=&quot;229&quot; data-filename=&quot;image.png&quot; data-origin-width=&quot;241&quot; data-origin-height=&quot;229&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;기존의 리깅 시스템&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;기존의 토끼마을 이야기에서는 캐릭터가 추가될 때마다 그 캐릭터에 뼈를 심는 리깅 작업을 해야만 했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;애니메이션의 경우 이미 만들어둔 애니메이션을 재활용하는 것이 가능했지만, 뼈를 심고 영향 정도를 정하는 것은 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;생김새가 서로 다른&amp;nbsp;&lt;/span&gt;스프라이트들의 특성 때문에 각 스프라이트들에 대해 일일히 작업을 하는 것이 필요했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;문제가 있다면 이 작업이 생각보다 시간이 걸려서 토끼들이 제때 토끼마을로 들어오지 못했고, 다른 작업이 지연되는 일도 빈번히 발생했다는 점이에요. - 게다가, 기존에는 옷과 토끼를 동시에 리깅했기 때문에 토끼의 옷을 갈아입히는 것도 힘들었어요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;모자.png&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;300&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bWWVUV/btsF4Z7FcoS/jbIlfiX3h3PkHfSskDWTj1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bWWVUV/btsF4Z7FcoS/jbIlfiX3h3PkHfSskDWTj1/img.png&quot; data-alt=&quot;모자 악세서리의 표준 모형&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bWWVUV/btsF4Z7FcoS/jbIlfiX3h3PkHfSskDWTj1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWWVUV%2FbtsF4Z7FcoS%2FjbIlfiX3h3PkHfSskDWTj1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;600&quot; height=&quot;300&quot; data-filename=&quot;모자.png&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;300&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모자 악세서리의 표준 모형&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 문제를 해결하기 위해, 우리는 스프라이트의 형태를 표준화하여 리깅하고 이 표준 모형의 텍스처를 교환하는 방식으로 스프라이트의 모션을 구현했어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위 사진의 경우 노란색 영역이 표준 모형인데,이 표준 모형에 원하는 모자의 텍스처를 '덮어씌우는' 방식을 사용하여 모자를 구현하면 이미 리깅된 배경을 활용하기 때문에 추가적인 리깅 작업이 필요하지 않아요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2024-03-2517-27-29-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;865&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cmVTr0/btsF3CZhE14/4enuSmFU6kcEFwmXyLrjAk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cmVTr0/btsF3CZhE14/4enuSmFU6kcEFwmXyLrjAk/img.gif&quot; data-alt=&quot;모자를 쓴 루비!&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cmVTr0/btsF3CZhE14/4enuSmFU6kcEFwmXyLrjAk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/cmVTr0/btsF3CZhE14/4enuSmFU6kcEFwmXyLrjAk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;865&quot; data-filename=&quot;2024-03-2517-27-29-ezgif.com-video-to-gif-converter.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;865&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모자를 쓴 루비!&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또한 토끼의 몸을 재생하는 시스템과 악세서리를 재생하는 시스템을 분리해서, 토끼와 악세서리를 별개로 적용하는 것이 가능해졌답니다. :)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이로써 각 캐릭터의 리깅 작업 프로세스를 확립하여 보다 효과적인 작업이 가능해진 것은 물론, 위의 경우처럼 토끼가 다른 토끼의 악세서리를 착용하는 것도 가능해졌어요 :D&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>개발 이야기</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/17</guid>
      <comments>https://rabbittown-diary.tistory.com/17#entry17comment</comments>
      <pubDate>Tue, 26 Mar 2024 11:10:33 +0900</pubDate>
    </item>
    <item>
      <title>토끼들이 생명을 얻었어요!</title>
      <link>https://rabbittown-diary.tistory.com/16</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock widthContent&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;0.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;377&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/btxt6X/btsFnYHVL45/bJLgliKqtRFCWJDz5zxI2k/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/btxt6X/btsFnYHVL45/bJLgliKqtRFCWJDz5zxI2k/img.gif&quot; data-alt=&quot;생명을 얻은 토끼들&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/btxt6X/btsFnYHVL45/bJLgliKqtRFCWJDz5zxI2k/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/btxt6X/btsFnYHVL45/bJLgliKqtRFCWJDz5zxI2k/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;377&quot; data-filename=&quot;0.gif&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;377&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;생명을 얻은 토끼들&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;반가워요! 오늘은 토끼들이 드디어 생명을 얻었다는 기쁜 소식을 전해드리려고 왔어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;기존에는 토끼들이 프로그램에 의해 입력된 경로만을 움직일 수 있었지만, 지금은 필요에 따라 자율적으로 경로를 선택하여 이동하고 활동을 할 수 있게 되었답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;참, 아직 토끼들의 자연스러운 모션이나 이펙트 등은 아직 개발 진행 중에 있어요. 그래서 오늘은 토끼들의 움직임의 자연스러움이나 현실성보다는, 토끼들이 이렇게 행동하는구나 하는 부분에 초점을 두고 봐주셨으면 해요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;1.gif&quot; data-origin-width=&quot;1050&quot; data-origin-height=&quot;376&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cErS9u/btsFpSN0XUp/0jNCqTNjFTghIBwWstEcg0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cErS9u/btsFpSN0XUp/0jNCqTNjFTghIBwWstEcg0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cErS9u/btsFpSN0XUp/0jNCqTNjFTghIBwWstEcg0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/cErS9u/btsFpSN0XUp/0jNCqTNjFTghIBwWstEcg0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1050&quot; height=&quot;376&quot; data-filename=&quot;1.gif&quot; data-origin-width=&quot;1050&quot; data-origin-height=&quot;376&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼는 기본적으로 3가지의 할일을 가져요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 빈 밭이 있으면 밭에 당근을 심고, 당근이 다 자란 밭이 있으면 당근을 수확해요. 또 자신이 가지고 있을 수 있는 당근 수가 꽉 차게 되면 창고로 가서 가지고 있는 당근을 저장해요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 세 가지가 전부 해결되어 할 일이 없을 경우, 토끼는 자신이 속한 집으로 가서 휴식을 취한답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock widthContent&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;2.webp&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;377&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/urmlj/btsFm8jPR6n/3tSzUajKPRvaFJUxl7gm80/img.webp&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/urmlj/btsFm8jPR6n/3tSzUajKPRvaFJUxl7gm80/img.webp&quot; data-alt=&quot;동아리 활동을 하는 토끼&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/urmlj/btsFm8jPR6n/3tSzUajKPRvaFJUxl7gm80/img.webp&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Furmlj%2FbtsFm8jPR6n%2F3tSzUajKPRvaFJUxl7gm80%2Fimg.webp&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;377&quot; data-filename=&quot;2.webp&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;377&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;동아리 활동을 하는 토끼&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이뿐만이 아니에요! 토끼는 이따금씩 동아리 활동을 합니다. 동아리에서 소집 명령이 내려지면, 동아리 소속 토끼들은 현재 진행 중인 일을 마무리하고 다음 행동으로 동아리 활동을 선택해요. 동아리에 소속 토끼들이 전부 모이면 비로소 동아리 활동이 시작된답니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock widthContent&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Frame 1.png&quot; data-origin-width=&quot;2914&quot; data-origin-height=&quot;1211&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Ab93V/btsFjVlCrgX/FecYQ0p5fzcLm4IM9ais9k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Ab93V/btsFjVlCrgX/FecYQ0p5fzcLm4IM9ais9k/img.png&quot; data-alt=&quot;토끼의 행동 양식&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Ab93V/btsFjVlCrgX/FecYQ0p5fzcLm4IM9ais9k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAb93V%2FbtsFjVlCrgX%2FFecYQ0p5fzcLm4IM9ais9k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2914&quot; height=&quot;1211&quot; data-filename=&quot;Frame 1.png&quot; data-origin-width=&quot;2914&quot; data-origin-height=&quot;1211&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;토끼의 행동 양식&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;토끼마을 세계는 험난한 야생과 같아요. 시도때도 없이 당근을 심을 농장과 수확할 농장이 생겨나고, 갑자기 동아리 활동이 시작되기도 해요. 이뿐만 아니라, 당근을 수확하러 가는 도중 당근 농장이 철거되어 버릴 수도 있고, 당근을 저장하러 가던 중 다른 토끼에 의해 당근 창고가 꽉 차버릴 수도 있으며, 동아리 활동을 하는 도중 갑자기 활동이 취소되어버릴 수도 있어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이런 모든 상황에 대비할 수 있도록, 토끼들의 행동 양식은 FSM(유한 상태 기계), 그 중에서도 HFSM(계층 구조를 가지는 FSM)으로 구현했어요. 각 상태는 끝날 때 자신의 행동을 정리하게 되어 있으며, 부모의 상태가 종료될 때는 자식을 먼저 정리한 후 자신을 정리해요. 덕분에 활동이 예기치 않게 종료된다고 하더라도, 토끼는 하던 일을 잘 마무리하고 다음 활동을 진행할 수 있답니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또한, 지금도 많은 상태들이 있는데, 각 상태마다 다음 상태로 전이될 조건을 일일히 구현한다면 너무 많은 경우의 수가 발생하겠죠? 그래서 저는 현재 상태에 제약을 받지 않고 다음 활동을 선택할 수 있게끔 BT(행동 트리)의 행동 선택 방식과 같이 토끼의 다음 상태를 정하는 활동을 구현했어요. 덕분에 토끼는 활동이 끝나면 다음 상태를 정하는 활동을 진행함으로써 현재의 상태가 무엇이었던간에 관계 없이 유연하게 다음에 할 행동을 선택할 수 있게 되었어요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 토끼의 AI를 구현함으로써 안전성과 유연성 두 마리 '토끼'를 잡은 설계를 할 수 있었답니다. :D&lt;/p&gt;</description>
      <category>개발 이야기</category>
      <author>-크리에이터-</author>
      <guid isPermaLink="true">https://rabbittown-diary.tistory.com/16</guid>
      <comments>https://rabbittown-diary.tistory.com/16#entry16comment</comments>
      <pubDate>Thu, 29 Feb 2024 12:41:42 +0900</pubDate>
    </item>
  </channel>
</rss>