Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LT版クリエーターとUnityエンジニアの狭間でUIアニメーションを設計する3つのTips/yokohama-unity4

 LT版クリエーターとUnityエンジニアの狭間でUIアニメーションを設計する3つのTips/yokohama-unity4

yokohama.unity ~オンラインDEユルクヤッテル #4++ (えっC#…実質5回目)~
LT枠で登壇してきました。

# Twitterやってます
Unity・UI/UX・ゲーム開発についてつぶやいています
https://twitter.com/ohbashunsuke

More Decks by オオバ@Unityエンジニア

Other Decks in Technology

Transcript

  1. -5൛ΫϦΤʔλʔͱ
    6OJUZΤϯδχΞͷڱؒͰ
    6*ΞχϝʔγϣϯΛ
    ઃܭ͢Δͭͷ5JQT
    ZPLPIBNBVOJUZdΦϯϥΠϯ%&ϢϧΫϠοςϧ ͑ͬ$ʜ࣮࣭ճ໨
    d
    େఉढ़հ

    View full-size slide

  2. ࣗݾ঺հ
    େఉढ़հ!PICBTIVOTVLF CMPHौ୩΄ͱͱ͗͢௨৴ͷӡӦ
    σβΠφʔ 'MBTIΤϯδχΞ 6OJUZΤϯδχΞ
    ˙ݱࡏͷओͳۀ຿
    ݱࡏ͸6OJUZͰεϚϗήʔϜͷΫϥΠΞϯτ։ൃશൠ
    σβΠφʔɾاըɾΤϯδχΞؒͷௐ੔΍ϫʔΫϑϩʔ੔උɺ69ͷ࣮૷
    ೥Ҏ্69෦෼ʹؔΘΔ࢓ࣄΛ͍ͯ͠·͢
    ৽ن։ൃήʔϜͷ্ཱͪ͛ʹؔΘΔ͜ͱ͕ଟ͍Ͱ͢

    View full-size slide

  3. ʲλʔήοτʳ
    6*ΞχϝʔγϣϯͷઃܭΛ
    ͋·Γ΍ͬͨࣄ͕ͳ͍ਓ޲͚

    View full-size slide

  4. ʲࠓ೔࿩͢͜ͱʳ
    6*Ξχϝʔγϣϯͷٕज़બఆ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ
    ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ

    View full-size slide

  5. ʲࠓ೔࿩͢͜ͱʳ
    6*Ξχϝʔγϣϯͷٕज़બఆ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ
    ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ

    View full-size slide

  6. 6OJUZͰ6*ΞχϝʔγϣϯΛ
    ࣮૷͢Δͱ͖ͷखஈͱ͸ʁ

    View full-size slide

  7. ɾεΫϦϓτ
    ɾ"OJNBUJPO$MJQ
    ɾ4QJOF
    ɾͦͷଞʁ

    View full-size slide

  8. બఆج४͸ʁ

    View full-size slide

  9. ͦͷ6*Ξχϝʔγϣϯ͸
    ʮ࠶ར༻͢Δ͔Ͳ͏͔ʁʯ

    View full-size slide


  10. ࠶ར༻͢Δ6*Ξχϝʔγϣϯ
    ϘλϯͷΠϯλϥΫγϣϯ
    ϦετͷεΫϩʔϧ
    ը໘ͷτϥϯδγϣϯ
    μΠΞϩάͷ։ด
    ςΩετ
    ήʔδ
    ͳͲͳͲ
    ൚༻ੑ͕ߴ͍

    View full-size slide


  11. ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ
    01Ξχϝʔγϣϯ
    Ψνϟԋग़
    ΩϟϥϨϕϧΞοϓԋग़
    εΩϧڧԽԋग़
    ͳͲͳͲ
    ͍ΘΏΔҰ఺෺

    View full-size slide


  12. ࠶ར༻͢Δ6*Ξχϝʔγϣϯ͸
    εΫϦϓτͰͷ࣮૷

    View full-size slide


  13. ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ
    ಛʹܾΊͯͳ͍

    View full-size slide


  14. ɾεΫϦϓτ
    ࠶ར༻͢Δ΋ͷ ࠶ར༻͠ͳ͍΋ͷ
    ɾ"OJNBUJPO$MJQ
    ɾ4QJOF
    ɾ εΫϦϓτ

    ɾͦͷଞ
    6*Ξχϝʔγϣϯબఆٕज़·ͱΊ
    ˞࠾༻ٕज़ͷཧ༝ʹ͍ͭͯ͸ޙड़

    View full-size slide

  15. ʲࠓ೔࿩͢͜ͱʳ
    6*Ξχϝʔγϣϯͷٕज़બఆ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ
    ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ

    View full-size slide

  16. ͳͥεΫϦϓτΛ࠾༻͢Δͷ͔ʁ

    View full-size slide


  17. मਖ਼ɾมߋʹڧ͘͢ΔͨΊ

    View full-size slide


  18. ͳͥ"OJNBUJPO$MJQͰ͸ବ໨ͳͷ͔

    View full-size slide

  19. "OJNBUJPO$MJQ͸࢓༷มߋʹऑ͍

    View full-size slide



  20. #VUUPO"
    #VUUPO#
    #VUUPO$
    "OJNBUJPO$MJQ

    View full-size slide


  21. #VUUPO"
    #VUUPO#
    #VUUPO$
    "OJNBUJPO$MJQ
    #VUUPO"ͷώΤϥϧΩʔߏ଄͕
    ࢓༷มߋͰมΘͬͯ͠·ͬͨ৔߹

    View full-size slide

  22. "OJNBUJPO$MJQ͸ώΤϥϧΩʔߏ଄΍
    (BNF0CKFDU໊͕
    શͯಉ͡Ͱͳ͍ͱಈ࡞͠ͳ͍

    View full-size slide


  23. #VUUPO"
    #VUUPO#
    #VUUPO$
    "OJNBUJPO$MJQ
    "OJNBUJPO$MJQ ৽ن

    ಈ͖͸ಉ͚ͩ͡ͲҟͳΔ
    "OJNBUJPO$MJQ͕࡞੒

    View full-size slide


  24. "OJNBUJPO$MJQ
    ͷΞχϝʔγϣϯࣗମʹमਖ਼͕ೖͬͨΒʁ

    View full-size slide


  25. "OJNBUJPO$MJQ
    "OJNBUJPO$MJQ
    "OJNBUJPO$MJQͷमਖ਼࡞ۀൃੜ

    View full-size slide


  26. ಉ͡Α͏ͳάϥϑΛੜ੒͢Δͷ͸೉қ౓ߴ͍
    मਖ਼ɾ֬ೝ޻਺Ξοϓ

    View full-size slide

  27. ࠶ར༻͢Δ6*͸਺͕ଟ͍

    #VUUPO"
    #VUUPO#
    #VUUPO$
    #VUUPO%
    #VUUPO&
    #VUUPO'

    View full-size slide

  28. ։ൃதͷ࢓༷มߋ͸Α͋͘Δ
    ˞೥։ൃ͖ͯͯ͠࢓༷มߋ͕ͳ͔ͬͨϓϩδΣΫτ͸͋Γ·ͤΜͰͨ͠

    View full-size slide

  29. ࠶ར༻͢Δ6*Ξχϝʔγϣϯʹ
    "OJNBUJPO$MJQΛ࠾༻͍ͯ͠Δͱ

    "OJNBUJPO$MJQ "OJNBUJPO$MJQ "OJNBUJPO$MJQ "OJNBUJPO$MJQ/
    ɾɾɾɾɾɾ
    ࢓༷มߋʹΑͬͯಉ͡Α͏ͳ"OJNBUJPO$MJQ͕ͲΜͲΜྔ࢈͞ΕΔ

    View full-size slide

  30. ࢓༷มߋͷ౓ʹ
    मਖ਼ɾ֬ೝ޻਺͕͔͞ΜͰ͍͘

    "OJNBUJPO$MJQ "OJNBUJPO$MJQ "OJNBUJPO$MJQ
    "OJNBUJPO$MJQ "OJNBUJPO$MJQ "OJNBUJPO$MJQ "OJNBUJPO$MJQ/
    ɾɾɾɾɾɾ
    "OJNBUJPO$MJQ

    View full-size slide

  31. ࠶ར༻͢Δ6*ʹ"OJNBUJPO$MJQΛ
    ࠾༻͍ͯ͠Δͱɺ
    େมͳ͜ͱ͕ى͖΍͍͢ʢܦݧஊ


    View full-size slide

  32. εΫϦϓτͰ࣮૷ͨ͠৔߹

    View full-size slide

  33. εΫϦϓτ͸มߋʹڧ͍

    View full-size slide


  34. ࢀর͸֎Εͳ͍ͨΊ
    ߏ଄͕มΘͬͯ΋
    मਖ਼޻਺͕ൃੜͮ͠Β͍

    View full-size slide

  35. εΫϦϓτ͸
    ώΤϥϧΩʔߏ଄ͷҧ͍Λٵऩ

    View full-size slide

  36. Ҏ্ͷཧ༝͔Β
    ࠶ར༻͢Δ6*ʹ͸εΫϦϓτΛ࠾༻

    View full-size slide

  37. ࠶ར༻͢Δ6*Ξχϝʔγϣϯ͸
    ʮॲཧΛ·ͱΊ͓ͯ͘ʯ
    ͱޮՌ͕େ͖͍

    View full-size slide

  38. 6*Ξχϝʔγϣϯ͸
    ༷ʑͳ৔ॴͰෳ਺࣮૷͢ΔͨΊ
    ։ൃऀ͕࣮૷ʹ໎Θͳ͍ঢ়ଶʹ͓ͯ͘͠
    ෳ਺ਓ։ൃͩͱͳ͓͞Β


    View full-size slide

  39. ྫ Y্࣠ΛεϥΠυͯ͠දࣔ͢Δ6*

    View full-size slide


  40. εϥΠυ͠ͳ͕Βදࣔ
    BXBJUUBSHFU%0-PDBM.PWF9 G

    4FU&BTF &BTF0VU2VBSU

    ॲཧΛ·ͱΊ͍ͯͳ͍ྫ
    %05XFFOͷੜίʔυΛ֤ॴʹॻ͍ͯ͠·͏ͱɺ
    มߋ͕ೖͬͨͱ͖ʹશՕॴमਖ਼͢Δඞཁ͕͋Γमਖ਼ίετେ
    ·֤ͨॴʹݻ༗ͷύϥϝʔλΛઃఆ͢Δͷ΋ϛεʹܨ͕Γ·͢

    View full-size slide


  41. εϥΠυ͠ͳ͕Βදࣔ Ϋϥεϝιου൛

    BXBJU6*"OJNBUJPO4IPX4MJEF9 UBSHFU

    ֦ுϝιου൛
    BXBJUUBSHFU4IPX4MJEF9

    ॲཧΛ·ͱΊͨྫ
    ɾ࠷খݶͷύϥϝʔλΛ౉͢Α͏ʹϥοϓ
    ɾΫϥεϝιουɾ֦ுϝιουʹॲཧΛ·ͱΊͯѻ͍΍͘͢͢Δ
    ɾमਖ਼͕ೖͬͨΒҰՕॴमਖ਼͢Δ͚ͩͰશͯʹ൓өग़དྷΔͨΊमਖ਼ί
    ετ͸࠷খݶ

    View full-size slide


  42. ࠶ར༻͢Δ6*Ξχϝʔγϣϯͷ·ͱΊ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ͸਺͕ଟ͘ͳΔ
    มߋɾमਖ਼ʹ଱͑ΒΕΔΑ͏ʹ͢Δઃܭ͕େࣄ
    "OJNBUJPO$MJQ͸มߋʹऑ͍ͷͰɺεΫϦϓτͰͷ࣮૷Λ࠾༻

    View full-size slide

  43. ʲࠓ೔࿩͢͜ͱʳ
    6*Ξχϝʔγϣϯͷٕज़બఆ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ
    ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ։ൃͷϙΠϯτ

    View full-size slide

  44. ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯͷಛ௃
    Ұ఺෺ͳͷͰ൚༻ੑΛແࢹͯ͠ൺֱత޷͖উखग़དྷΔ
    ࠶ར༻͠ͳ͍ͷͰɺͲͷٕज़Λ࠾༻ͯ͠΋Өڹൣғ͕ߜΕΔ
    ޷͖ͳٕज़Λ࠾༻Ͱ͖Δɺٕज़తνϟϨϯδΛ͢Δ͜ͱ΋Ͱ͖Δ
    6OJUZʹ௕͚͍ͯΔΫϦΤʔλʔʹ͓೚ͤͯ͠࡞ۀ෼୲Ͱ͖Δ

    View full-size slide

  45. ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯͷ஫ҙ఺
    Ξχϝʔγϣϯ͕ϒϥοΫϘοΫεԽ͠΍͍͢
    ϨϏϡʔ࣌ʹมߋϑΝΠϧ͚ͩݟͯ΋಺༰ΛཧղͰ͖ͳ͍
    ಈը΍HJGΛϨϏϡʔ࣌ʹఴ෇ͯ͠΋Β͏
    ೲ඼͞ΕͨΞχϝʔγϣϯσʔλ͕ࣄނΓ΍͍͢ ˞ޙड़


    View full-size slide

  46. ʲࣄނΛ๷͙ͨΊʹʳ
    Ξχϝʔγϣϯσʔλͷ
    όϦσʔγϣϯΛݕ౼

    View full-size slide

  47. ΞχϝʔγϣϯσʔλͷόϦσʔγϣϯྫ
    Ξχϝʔγϣϯͷ௕͞νΣοΫ
    ΞχϝʔγϣϯΠϕϯτͷνΣοΫ ݸ਺ɾ಺༰ͷνΣοΫΛؚΉ

    ࢀরNJTTJOHνΣοΫ
    ࢖༻͍ͯ͠ΔςΫενϟϑΥʔϚοτ΍γΣʔμͷνΣοΫ
    Ϗϧυ࣌΍(JUIVCʹQVTIͨ͠λΠϛϯάͰόϦσʔγϣϯ૸ΒͤΔͳͲ

    View full-size slide


  48. ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯͷ·ͱΊ
    Ұ఺෺ͳͷͰൺֱతࣗ༝ʹ࡞੒Մೳ
    Өڹൣғ͕ߜΕΔͨΊɺٕज़తͳ௅ઓΛ͠΍͍͢
    ΫϦΤʔλʔͱͷ෼ۀϙΠϯτ
    ࣄނΓ΍͍͢ͷͰόϦσʔγϣϯ

    View full-size slide

  49. ·ͱΊ
    6*Ξχϝʔγϣϯͷٕज़બఆ͸ʮ࠶ར༻͢Δ͔Ͳ͏͔ʁʯ
    ࠶ར༻͢Δ6*Ξχϝʔγϣϯ͸εΫϦϓτ΄΅Ұ୒
    ΞχϝʔγϣϯΛద༻͠΍͘͢͢ΔͨΊʹॲཧΛ·ͱΊ͓ͯ͘ͱྑ͍
    ࠶ར༻͠ͳ͍6*Ξχϝʔγϣϯ͸νϟϨϯδϙΠϯτͰ͋Γɺ
    ·ͨόϦσʔγϣϯΛͯ͠ࣄނΛ๷͙

    View full-size slide

  50. ͓·͚
    ൃੜ৚͕݅ෳࡶͳ6*Ξχϝʔγϣϯ͸σόοάϝχϡʔ͔Β
    γϣʔτΧοτΛ࡞͓ͬͯ͘ͱޮ཰͕େ෯ʹ্͕Δ
    ΠςϨʔγϣϯʹ΋࢖͑Δ͠ɺ4&Λൃ஫࣌ʹ΋࢖͑Δ
    ๻͸Α͘43%FCVHHFSͱ͍͏༗ྉΞηοτΛ࢖ͬͯσόοάϝχϡʔΛ։ൃ
    ˞43%FCVHHFS͸Φεεϝ υϧ͘Β͍Ͱ͢

    View full-size slide

  51. 6*Ξχϝʔγϣϯઃܭ͸
    ϛεΔͱେมͳͷͰؾΛ͚ͭ·͠ΐ͏

    View full-size slide

  52. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    5XJUUFS!PICBTIVOTVLF
    6OJUZɾ6*69ɾήʔϜ։ൃʹ͍ͭͯͭͿ΍͍͍ͯ·͢ɻ
    Α͔ͬͨΒϑΥϩʔ͍ͯͩ͘͠͞

    View full-size slide

  53. ࣗݾ঺հ
    5XJUUFS!PICBTIVOTVLF
    (JUIVC!CBPCBP
    #MPHौ୩΄ͱͱ͗͢௨৴ IUUQTXXXTIJCVZBJOGP
    OPUF!PICBTIVOTVLF
    2JJUB!PICBTIVOTVLF

    View full-size slide