[情報] CY講解如何製作公主連結的CUT IN大招動畫
作者: KotoriCute (Lovelive!) 2020-09-08 13:48:19
《超異域公主連結☆Re:Dive》所追求的目標 動畫 RPG 的遊戲演出製作事例線上講座紀
錄
https://gnn.gamer.com.tw/detail.php?sn=202825
日本最大規模電腦娛樂開發者會議「CEDEC 2020」的第 3 天，2020 年 9 月 4 日特別
舉辦了「《超異域公主連結☆Re:Dive》所追求的目標，動畫 RPG 的遊戲演出製作事例
～將電視動畫與遊戲演出，融合兩種製作手法誕生的切入動畫演出～」為主題的講座。
主講者是來自 Cygames 互動設計團隊的工藤瑛子，分享了時下知名手機遊戲《超異域
公主連結☆Re:Dive》（以下簡稱《公主連結 R》）遊戲裡切入動畫演出所使用的製作手
法。
https://p2.bahamut.com.tw/B/2KU/60/ad9fb029f672c96183da61897119si45.JPG
工藤表示，類似《公主連結 R》這種兼具動畫與遊戲的多媒體混合作品，都會面臨動畫與
遊戲製作上的體制不同這項主要課題。動畫通常在數個月～半年前確保製作上的行程，根
據最初決定好的樣式持續製作完畢。另一方面，遊戲則必須用到各種短期與不定時出現的
新演出，或者按照玩家回饋針對演出內容作出適當調整，會產生回顧製作樣式以後進行重
製作業的情況。
工藤接著說明，因此他們在為《公主連結 R》導入切入動畫演出的時候，採用 3 種
途徑克服作業上的困難之處，同時也是接下來講述的 3 個主題。分別是「將動畫演出置
入遊戲中面臨的課題與解決方法」、「採納手繪與部件動畫，混合 2 種手法的製作方式
與流程」、「將動畫演出與 SD 角色的演出（以下，SD 演出）之間協調出統一性的相關
知識」。
《公主連結 R》的切入動畫是指？
工藤提到，《公主連結 R》切入動畫主要負責 3 種不同的職責。第 1 點就是「將角色魅
力以最大限度呈現出來」，把原本嬌小的 SD 角色無法分辨的表情與肢體表現以全畫面的
方式顯示，藉此讓玩家能夠喜歡上這些角色。
https://p2.bahamut.com.tw/B/2KU/61/00e2cab6ee1b7b641d48c8349719si55.JPG
第 2 點是「在 “2 秒” 的時間內炒熱戰鬥場面」，每個切入動畫完成的進行時間大都
是 2 秒左右。SD 角色交戰的過程中，在適當的節奏下出現切入動畫演出，配合該名角色
固有的行動與 SD 演出豐富整個戰鬥體驗。因此這些切入動畫，都特別以「2 秒內的角色
PV」作為製作上的重點意識。
https://p2.bahamut.com.tw/B/2KU/62/9fd4c460f499d60d7a0250e7b219si65.JPG
第 3 點是「將遊戲與動畫串聯起來」。在激戰之中能夠看到動畫播放，是為了強調本作
屬於一款「動畫 RPG」的特性。因此，這些能夠呼應主線劇情的 SD 演出，都可說是忠實
連結了劇情（動畫）與系統（遊戲），背負著展現《公主連結 R》世界觀的重要使命。
https://p2.bahamut.com.tw/B/2KU/63/3729b6b9b97d535ad7d0067ef719si75.JPG
為了順利達成這 3 個目標，《公主連結 R》的切入動畫製作上充滿了相當多元的技術應
用，其中 1 項就是「配件動畫（パーツアニメ）」。透過配件動畫，將插圖裡面的每個
部位予以配件化，再利用相關工具移動每個配件，是一種能夠展現出宛如手繪動畫成效的
手法。
https://p2.bahamut.com.tw/B/2KU/64/a4258c290a04874c3902ad8c2319si85.JPG
https://p2.bahamut.com.tw/B/2KU/66/bb49ea782785510eb6613d923419sia5.JPG
據說在當初，《公主連結 R》預定是要使用手繪的切入動畫。但是在對照試作後的切入動
畫與遊戲的 SD 演出，發現了令人感覺節奏感不合的問題。讓玩家感受舒適的戰鬥節奏，
是《公主連結 R》最為不可或缺的遊戲要素，也因此無論如何都必須克服這項課題。
https://p2.bahamut.com.tw/B/2KU/67/25ccd2b05ed9cb305ceb71076a19sib5.JPG
在當時所找到的解決方法，就是本作前身《公主連結！（Princess Connect！，プリンセ
スコネクト！）》的「Union Burst」。由於《公主連結！》是透過 Adobe Flash 進行開
發的網頁遊戲，切入動畫與 SD 演出全部都是由上述的配件動畫來讓角色動作，也不會影
響到戰鬥上的節奏感。這項作法同時還擁有能夠以少量的作畫張數完成作業，可望擁有更
佳的製作速度與品質提升等優點。
最後《公主連結 R》的切入動畫演出決定以配件動畫的方式來呈現，也就能夠製作出
與 SD 演出的節奏互相契合，且不妨礙遊戲進行的愉快觀賞體驗。
https://p2.bahamut.com.tw/B/2KU/68/58345d2dd75957bda58d2f1d2f19sic5.JPG
此外，由於所需的作畫張數減少，公司對於配件動畫製作上的相關知識與所見所聞累積到
一定程度以後，得以將原先委外的這項作業改為公司內部進行製作。因此在製作方向性的
分享與意見疏通都變得更加容易，之後發行或是重新調整等動作都可以更有時間效率的方
式實現。
同時由於製作體制上的變化，讓公司進一步提升對於整個動畫製作體制的理解，並且
擁有配件動畫應用在遊戲製作上的相關知識獲得完善普及等諸多優點。
https://p2.bahamut.com.tw/B/2KU/71/74a873b813e0d25651c2864c4c19sif5.JPG
https://p2.bahamut.com.tw/B/2KU/74/c28537b3d51e69b35bf9ff9c1d19sii5.JPG
切入動畫製作的作業工程與相關知識
接著工藤介紹了切入動畫製作上的作業工程與使用工具。
https://p2.bahamut.com.tw/B/2KU/75/fa0b710b80f87416526afc488619sij5.JPG
https://p2.bahamut.com.tw/B/2KU/77/765d877b4b8101306cf13a109419sil5.JPG
具體的作業工程是以《公主連結 R》半周年紀念活動登場的角色「似似花」作為實例介紹
。
分鏡製作前的開會中，首先從設計者展示的設計原案裡面進行討論，針對「哪裡到哪
裡可以放入切入動畫」「與 SD 演出之間呈現什麼樣的關聯性」「Union Burst 整體，決
定使用何種色調・方向性」協調出整體想要的共通形象。
以似似花的情況來說，設計者所提出的設計原案內容為「產生一個自己的全像投影，
實體化以後成為自己的分身作戰」，所以決定在全像投影變成分身以前的過程都以切入動
畫的方式呈現。並且以原案所提出的「數位感視覺表現」與「產生分身」作為主題，加入
了似似花單獨的演出。接著決定演出開始到切入動畫結束的整體色調，整體形象成型以後
進入分鏡製作的環節。
https://p2.bahamut.com.tw/B/2KU/80/98103f5c92eff5de15f5f3575919sio5.JPG
切入動畫的分鏡是以動畫分鏡的方式進行製作。據說使用這種方式，能夠更加容易掌握實
際的時間長度與動畫完成樣貌，相當有助於讓動畫製作控制在預期的方向。
https://p2.bahamut.com.tw/B/2KU/82/a90f48a9e27d5223dbc4e943ee19siq5.JPG
分鏡的製作上會提出 3 個以上的原案，最後從中選擇出最能夠展現角色個性的方案。以
似似花為例，在當時提出了非常多的原案，本次講座則從中介紹 A 案，B 案，C 案等 3
種不同的發想。
最終則是以「讓人感受作弊能力的數位化特效與素材」、「從似似花立繪的水晶獲得
啟發，類似萬花筒的動畫演出」、「讓人擁有想看到回歸 SD 演出時的期待感」等原因作
為理由，選擇了 C 案。
https://p2.bahamut.com.tw/B/2KU/83/ea327266cf3ade1a0fa209451219sir5.JPG
據說 “萬花筒的動畫演出”，是從製作分鏡的時候由總監方面提案的點子實現的內容。
類似這樣，製作整體上的題材與動畫演出的發想由作業方提出架構，並根據設計者與監製
方面的反饋取得更進一步的補充。
並且，在角色的 SD 演出也加入了萬花筒相關的要素，營造出能夠呼應切入動畫的關
聯性。另外，由於《公主連結 R》是從左到右進行的遊戲，切入動畫的最後環節基本上都
是以向右方收尾的形式為主。
https://p2.bahamut.com.tw/B/2KU/84/411101c86fef8066c9db6e3cc619sis5.JPG
https://p2.bahamut.com.tw/B/2KU/85/0f58fcaac646491ee70e2c9db419sit5.JPG
工藤將分鏡工程所扮演的職責，歸納為「為了確立整體的共通形象，將 Union Burst 收
納進同 1 個世界觀」。
原畫製作過程中，首先會根據分鏡繪製出整個切入動畫精髓的角色部分。如同前面所
提到的，切入動畫的製作會用到部件動畫這個手法，在每個原畫與原畫之間都能透過相關
工具進行填補。也因此原畫通常為 4～7 張，比正常的電視動畫張數還少。還能夠維護細
部的品質堅持與製作速度，取得兩全其美的成效。
https://p2.bahamut.com.tw/B/2KU/86/24d31f9ec5c30feb8f059ede7f19siu5.JPG
https://p2.bahamut.com.tw/B/2KU/87/d12245868fc1e805da80cd1c5819siv5.JPG
原畫的作業流程有時是由同 1 人負責到底，偶爾也有可能是其他人負責最後的完成階段
。打造出讓職員能夠以靈活的身段從業的環境，也是影響遊戲開發速度感的一大主因。
https://p2.bahamut.com.tw/B/2KU/88/c9f41b8849ebc13cb18695bd2b19siw5.JPG
作畫監修的部分，則是應用了電視動畫製作上的相關知識。以《公主連結 R》主線劇情動
畫的設定資料做為參考，逐步完成「是否擁有符合角色形象的表情」「設計上是否有落差
」等確認事項，確保角色的既有魅力不會因此受到影響。
本作的每個角色外型都相當不同，僅只是數毫米差距的眼瞼大小或強調表現的方式，
都要細心注意是否符合正確的作畫。
https://p2.bahamut.com.tw/B/2KU/89/66d06a9efc69c609b528a4699619six5.JPG
接著進行後續作業上最重要的部件分配。部件分配以分鏡為參考，將原畫分割成 10～20
個部件，並要確認在部件移動的時候，是否會發生隱藏在手腕的肢體沒有畫到這類無法重
新修正的事態。
https://p2.bahamut.com.tw/B/2KU/90/bf359a1b17e6d809f7ddd1313419siy5.JPG
完成原畫作業所帶來的成效，可歸納為「能夠節省原畫張數，並且以保持品質的方式進行
量產」。
進入動畫工程的部分，同步進行特效與背景的製作。在此環節基於「細分（mesh）功
能相當優秀，能夠製作出柔軟的動畫質感」、「後續進入拍攝程序仍會繼續使用，減少工
具轉換中間的資源遺失」等理由，選擇「Adobe After Effects」作為使用工具。
在作業過程，首先為完成的原畫部件賦予動態途徑。具體上的流程為匯入原畫，架設
頂部或遠景，左右移動等整體相機視角，再追加部件動畫。
https://p2.bahamut.com.tw/B/2KU/91/80b731ba3a1f6f3df2a0b4c3e419siz5.JPG
動態化作業的過程中，特別需要注意的是視線的誘導。切入動畫演出僅只有 2 秒的時間
，如果動作太快會讓觀看的人摸不著頭緒。為此必須特別另下功夫，針對臉部或武器等較
容易注目的部分，將動作變得更加直觀好懂。
此外，為避免部件呈現出機械性移動的不自然感，也在動作變化上增加幅度，藉此呈
現出更接近動畫演出的表現。
https://p2.bahamut.com.tw/B/2KU/92/2092c0faab490e27b25f73950d19sj05.JPG
https://p2.bahamut.com.tw/B/2KU/93/f1ed71f2a15cb5e7d91b6ee43f19sj15.JPG
接著進行特效的製作。似似花的例子中，是以「數位化的材質感」與「萬花筒」作為製作
主題，根據這項目標利用 Adobe After Effects 製作所需的素材。
以角色立繪中散落周遭的水晶碎片為靈感，做出背景出現碎裂的特效，以及全像攝影
的演出中產生自己的分身等，考慮角色的特性過後著手製作這些特效。
https://p2.bahamut.com.tw/B/2KU/94/c10278f57c52811ed87a76a53119sj25.JPG
《公主連結 R》的切入動畫採用了大量的手繪動畫特效。這麼做的主因還是為了追求動畫
應有的感覺，主要的特效都盡可能以手繪的方式製作，至於 3D 動畫的粒子表現，則大多
當作添加風味的配料運用。
特別是武器的特效，作畫上特別講究擁有長期停留在玩家視線的識別性。特效的消失
方式也不只是單純的透明化淡出，而是採取細微飄散，碎裂變小的特效豐富視覺體驗。
https://p2.bahamut.com.tw/B/2KU/95/c89dcc61af41d0d2adb99ce0d719sj35.JPG
https://p2.bahamut.com.tw/B/2KU/96/b9358ff969e383a545754ad03619sj45.JPG
工藤綜合以上所述，指出動畫工程中最重要的 3 個重點分別是「重視簡單易懂的識別性
與關聯性」、「力求電視動畫般的演出內容」、「重視每個角色特性的演出內容」。
最後進行的就是實際拍攝了。作業中會進行色調或畫面整體的特效調整，角色線條上
的潤飾，目標製作出電視動畫般的影像感。此外，也能夠在拍攝之中嘗試加入一些特殊表
現。舉例來說，海邊的場景可以加上剪影表現與鏡頭眩光（Lens Flare），也可以配合角
色動作加入圓形或三角形等，讓特定圖形移動的動態素材（Motion graphics）。
https://p2.bahamut.com.tw/B/2KU/97/4c54eb1c8980241c9376a93dc519sj55.JPG
https://p2.bahamut.com.tw/B/2KU/98/e60a4edad63d53f7e1573daa8419sj65.JPG
https://p2.bahamut.com.tw/B/2KU/99/aa57d9a827b985666e947f240619sj75.JPG
進行嶄新嘗試的切入動畫表現
《公主連結 R》裡面，在「公主型態」發動「Union Burst」的時候會有特殊的切入動畫
演出。關於公主型態的演出與企劃，當初是以「比起以往的切入動畫都要更加豪華！更像
動畫！」作為製作概念，據說因此曾經從系統層面大幅度重新審視切入動畫的製作方法。
公主型態的切入動畫為了與以往的成品作出差別，首先提案的是徹底打造出 SD 演出
與切入動畫的無痕轉換境界。這兩個部分若能以無縫接軌的方式互相切換，可以帶給玩家
更加獨特的感受與投入感。
https://p2.bahamut.com.tw/B/2KU/00/89a1eaad442e1af520693d912819sj85.JPG
另一方面也存在必須克服的課題。若是按照以往的系統，將 SD 演出與切入動畫演出交互
播放會增加用戶端的負擔，也會與原本追求遊戲流暢度這項目標有所出入。因此最後的決
定是將切入演出全部整合在同 1 個動畫裡面，也能免除目前為止所有演出存在的限制。
https://p2.bahamut.com.tw/B/2KU/01/b7404f15ada8964ac17662529a19sj95.JPG
再加上與過往的切入動畫相比，更加提升了演出層面的豪華程度，連背景都包含在動畫演
出裡面，呈現更大格局的製作範疇。相機視角也能夠在空間內縱橫無盡地自由移動，誕生
出過往所沒有的動作感。
https://p2.bahamut.com.tw/B/2KU/05/853b4b69eacfb6782fc14f707719sjd5.JPG
並且，為了讓切入動畫能夠與劇情動畫互相呼應，演出或拍攝效果都特地採用與劇情動畫
相同的方法。藉此讓兩者之間產生一定的連結，打造出讓玩家在遊戲中看到劇情動畫的再
現，觀看劇情動畫的時候也能聯想起戰鬥過程的遊戲環境。
https://p2.bahamut.com.tw/B/2KU/02/5dd11b2e1f6acd12539d08123619sja5.JPG
這樣嶄新的嘗試，同時也為公司內部的製作體制帶來影響。在這之前，SD 演出與切入動
畫是以不同的分鏡進行製作，開始製作公主型態以後都是採取相同的分鏡，接近同步進行
製作。
https://p2.bahamut.com.tw/B/2KU/03/2cb8ae92839eca4f55938f9c2a19sjb5.JPG
另外則是，製作上與過往感受最不同的地方，就是 SD 人物的動作與切入動畫的動作必須
以 Adobe After Effects 進行結合，為了讓兩者的演出完成接近天衣無縫的連接，必須
加入手繪特效進行編輯這點。
https://p2.bahamut.com.tw/B/2KU/04/957f50b5b121b46d513b11c95e19sjc5.JPG
只不過，全新的嘗試同時也面臨到「戰鬥的速度感與切入演出長度的調和折衷」、「系統
與性能面的障礙」等問題挑戰。
前者的部分，是投入重視節奏感的場景轉換，利用 Adobe After Effects 完成細部
調整獲得解決。例如在公主可可蘿的演出中，在 SD 演出與切入動畫的轉換過程中添加橫
向穿越樹木陰影的過程，實現自然的場景轉換。
https://p2.bahamut.com.tw/B/2KU/06/52c27f5bbd459b05df46f6348f19sje5.JPG
系統與性能方面的困難之處在於無法使用關閉切入動畫的功能，或是角色以闇影型態（シ
ャドウ）作為敵方登場的切入動畫該怎麼辦。這部分的處理方式，前者是從演出中最適當
或最熱烈的部分開始播放，後者則另外準備作為敵方登場時的動畫。
https://p2.bahamut.com.tw/B/2KU/07/8c6fb5d669364e85ddf6fa586219sjf5.JPG
https://p2.bahamut.com.tw/B/2KU/08/a1af8fe9abf30b8a23d5bdf88819sjg5.JPG
主講者工藤最後回顧開頭所述，提及切入動畫演出在遊戲中扮演的 3 個重要職責，並以
「《公主連結 R》製作切入動畫的目標，是希望讓角色魅力能夠確實傳達到各位玩家心裡
」為本次講座作結。
https://p2.bahamut.com.tw/B/2KU/09/7bf0d2a1747678f7c61dcd989f19sjh5.JPG
錄
https://gnn.gamer.com.tw/detail.php?sn=202825
日本最大規模電腦娛樂開發者會議「CEDEC 2020」的第 3 天，2020 年 9 月 4 日特別
舉辦了「《超異域公主連結☆Re:Dive》所追求的目標，動畫 RPG 的遊戲演出製作事例
～將電視動畫與遊戲演出，融合兩種製作手法誕生的切入動畫演出～」為主題的講座。
主講者是來自 Cygames 互動設計團隊的工藤瑛子，分享了時下知名手機遊戲《超異域
公主連結☆Re:Dive》（以下簡稱《公主連結 R》）遊戲裡切入動畫演出所使用的製作手
法。
https://p2.bahamut.com.tw/B/2KU/60/ad9fb029f672c96183da61897119si45.JPG
工藤表示，類似《公主連結 R》這種兼具動畫與遊戲的多媒體混合作品，都會面臨動畫與
遊戲製作上的體制不同這項主要課題。動畫通常在數個月～半年前確保製作上的行程，根
據最初決定好的樣式持續製作完畢。另一方面，遊戲則必須用到各種短期與不定時出現的
新演出，或者按照玩家回饋針對演出內容作出適當調整，會產生回顧製作樣式以後進行重
製作業的情況。
工藤接著說明，因此他們在為《公主連結 R》導入切入動畫演出的時候，採用 3 種
途徑克服作業上的困難之處，同時也是接下來講述的 3 個主題。分別是「將動畫演出置
入遊戲中面臨的課題與解決方法」、「採納手繪與部件動畫，混合 2 種手法的製作方式
與流程」、「將動畫演出與 SD 角色的演出（以下，SD 演出）之間協調出統一性的相關
知識」。
《公主連結 R》的切入動畫是指？
工藤提到，《公主連結 R》切入動畫主要負責 3 種不同的職責。第 1 點就是「將角色魅
力以最大限度呈現出來」，把原本嬌小的 SD 角色無法分辨的表情與肢體表現以全畫面的
方式顯示，藉此讓玩家能夠喜歡上這些角色。
https://p2.bahamut.com.tw/B/2KU/61/00e2cab6ee1b7b641d48c8349719si55.JPG
第 2 點是「在 “2 秒” 的時間內炒熱戰鬥場面」，每個切入動畫完成的進行時間大都
是 2 秒左右。SD 角色交戰的過程中，在適當的節奏下出現切入動畫演出，配合該名角色
固有的行動與 SD 演出豐富整個戰鬥體驗。因此這些切入動畫，都特別以「2 秒內的角色
PV」作為製作上的重點意識。
https://p2.bahamut.com.tw/B/2KU/62/9fd4c460f499d60d7a0250e7b219si65.JPG
第 3 點是「將遊戲與動畫串聯起來」。在激戰之中能夠看到動畫播放，是為了強調本作
屬於一款「動畫 RPG」的特性。因此，這些能夠呼應主線劇情的 SD 演出，都可說是忠實
連結了劇情（動畫）與系統（遊戲），背負著展現《公主連結 R》世界觀的重要使命。
https://p2.bahamut.com.tw/B/2KU/63/3729b6b9b97d535ad7d0067ef719si75.JPG
為了順利達成這 3 個目標，《公主連結 R》的切入動畫製作上充滿了相當多元的技術應
用，其中 1 項就是「配件動畫（パーツアニメ）」。透過配件動畫，將插圖裡面的每個
部位予以配件化，再利用相關工具移動每個配件，是一種能夠展現出宛如手繪動畫成效的
手法。
https://p2.bahamut.com.tw/B/2KU/64/a4258c290a04874c3902ad8c2319si85.JPG
https://p2.bahamut.com.tw/B/2KU/66/bb49ea782785510eb6613d923419sia5.JPG
據說在當初，《公主連結 R》預定是要使用手繪的切入動畫。但是在對照試作後的切入動
畫與遊戲的 SD 演出，發現了令人感覺節奏感不合的問題。讓玩家感受舒適的戰鬥節奏，
是《公主連結 R》最為不可或缺的遊戲要素，也因此無論如何都必須克服這項課題。
https://p2.bahamut.com.tw/B/2KU/67/25ccd2b05ed9cb305ceb71076a19sib5.JPG
在當時所找到的解決方法，就是本作前身《公主連結！（Princess Connect！，プリンセ
スコネクト！）》的「Union Burst」。由於《公主連結！》是透過 Adobe Flash 進行開
發的網頁遊戲，切入動畫與 SD 演出全部都是由上述的配件動畫來讓角色動作，也不會影
響到戰鬥上的節奏感。這項作法同時還擁有能夠以少量的作畫張數完成作業，可望擁有更
佳的製作速度與品質提升等優點。
最後《公主連結 R》的切入動畫演出決定以配件動畫的方式來呈現，也就能夠製作出
與 SD 演出的節奏互相契合，且不妨礙遊戲進行的愉快觀賞體驗。
https://p2.bahamut.com.tw/B/2KU/68/58345d2dd75957bda58d2f1d2f19sic5.JPG
此外，由於所需的作畫張數減少，公司對於配件動畫製作上的相關知識與所見所聞累積到
一定程度以後，得以將原先委外的這項作業改為公司內部進行製作。因此在製作方向性的
分享與意見疏通都變得更加容易，之後發行或是重新調整等動作都可以更有時間效率的方
式實現。
同時由於製作體制上的變化，讓公司進一步提升對於整個動畫製作體制的理解，並且
擁有配件動畫應用在遊戲製作上的相關知識獲得完善普及等諸多優點。
https://p2.bahamut.com.tw/B/2KU/71/74a873b813e0d25651c2864c4c19sif5.JPG
https://p2.bahamut.com.tw/B/2KU/74/c28537b3d51e69b35bf9ff9c1d19sii5.JPG
切入動畫製作的作業工程與相關知識
接著工藤介紹了切入動畫製作上的作業工程與使用工具。
https://p2.bahamut.com.tw/B/2KU/75/fa0b710b80f87416526afc488619sij5.JPG
https://p2.bahamut.com.tw/B/2KU/77/765d877b4b8101306cf13a109419sil5.JPG
具體的作業工程是以《公主連結 R》半周年紀念活動登場的角色「似似花」作為實例介紹
。
分鏡製作前的開會中，首先從設計者展示的設計原案裡面進行討論，針對「哪裡到哪
裡可以放入切入動畫」「與 SD 演出之間呈現什麼樣的關聯性」「Union Burst 整體，決
定使用何種色調・方向性」協調出整體想要的共通形象。
以似似花的情況來說，設計者所提出的設計原案內容為「產生一個自己的全像投影，
實體化以後成為自己的分身作戰」，所以決定在全像投影變成分身以前的過程都以切入動
畫的方式呈現。並且以原案所提出的「數位感視覺表現」與「產生分身」作為主題，加入
了似似花單獨的演出。接著決定演出開始到切入動畫結束的整體色調，整體形象成型以後
進入分鏡製作的環節。
https://p2.bahamut.com.tw/B/2KU/80/98103f5c92eff5de15f5f3575919sio5.JPG
切入動畫的分鏡是以動畫分鏡的方式進行製作。據說使用這種方式，能夠更加容易掌握實
際的時間長度與動畫完成樣貌，相當有助於讓動畫製作控制在預期的方向。
https://p2.bahamut.com.tw/B/2KU/82/a90f48a9e27d5223dbc4e943ee19siq5.JPG
分鏡的製作上會提出 3 個以上的原案，最後從中選擇出最能夠展現角色個性的方案。以
似似花為例，在當時提出了非常多的原案，本次講座則從中介紹 A 案，B 案，C 案等 3
種不同的發想。
最終則是以「讓人感受作弊能力的數位化特效與素材」、「從似似花立繪的水晶獲得
啟發，類似萬花筒的動畫演出」、「讓人擁有想看到回歸 SD 演出時的期待感」等原因作
為理由，選擇了 C 案。
https://p2.bahamut.com.tw/B/2KU/83/ea327266cf3ade1a0fa209451219sir5.JPG
據說 “萬花筒的動畫演出”，是從製作分鏡的時候由總監方面提案的點子實現的內容。
類似這樣，製作整體上的題材與動畫演出的發想由作業方提出架構，並根據設計者與監製
方面的反饋取得更進一步的補充。
並且，在角色的 SD 演出也加入了萬花筒相關的要素，營造出能夠呼應切入動畫的關
聯性。另外，由於《公主連結 R》是從左到右進行的遊戲，切入動畫的最後環節基本上都
是以向右方收尾的形式為主。
https://p2.bahamut.com.tw/B/2KU/84/411101c86fef8066c9db6e3cc619sis5.JPG
https://p2.bahamut.com.tw/B/2KU/85/0f58fcaac646491ee70e2c9db419sit5.JPG
工藤將分鏡工程所扮演的職責，歸納為「為了確立整體的共通形象，將 Union Burst 收
納進同 1 個世界觀」。
原畫製作過程中，首先會根據分鏡繪製出整個切入動畫精髓的角色部分。如同前面所
提到的，切入動畫的製作會用到部件動畫這個手法，在每個原畫與原畫之間都能透過相關
工具進行填補。也因此原畫通常為 4～7 張，比正常的電視動畫張數還少。還能夠維護細
部的品質堅持與製作速度，取得兩全其美的成效。
https://p2.bahamut.com.tw/B/2KU/86/24d31f9ec5c30feb8f059ede7f19siu5.JPG
https://p2.bahamut.com.tw/B/2KU/87/d12245868fc1e805da80cd1c5819siv5.JPG
原畫的作業流程有時是由同 1 人負責到底，偶爾也有可能是其他人負責最後的完成階段
。打造出讓職員能夠以靈活的身段從業的環境，也是影響遊戲開發速度感的一大主因。
https://p2.bahamut.com.tw/B/2KU/88/c9f41b8849ebc13cb18695bd2b19siw5.JPG
作畫監修的部分，則是應用了電視動畫製作上的相關知識。以《公主連結 R》主線劇情動
畫的設定資料做為參考，逐步完成「是否擁有符合角色形象的表情」「設計上是否有落差
」等確認事項，確保角色的既有魅力不會因此受到影響。
本作的每個角色外型都相當不同，僅只是數毫米差距的眼瞼大小或強調表現的方式，
都要細心注意是否符合正確的作畫。
https://p2.bahamut.com.tw/B/2KU/89/66d06a9efc69c609b528a4699619six5.JPG
接著進行後續作業上最重要的部件分配。部件分配以分鏡為參考，將原畫分割成 10～20
個部件，並要確認在部件移動的時候，是否會發生隱藏在手腕的肢體沒有畫到這類無法重
新修正的事態。
https://p2.bahamut.com.tw/B/2KU/90/bf359a1b17e6d809f7ddd1313419siy5.JPG
完成原畫作業所帶來的成效，可歸納為「能夠節省原畫張數，並且以保持品質的方式進行
量產」。
進入動畫工程的部分，同步進行特效與背景的製作。在此環節基於「細分（mesh）功
能相當優秀，能夠製作出柔軟的動畫質感」、「後續進入拍攝程序仍會繼續使用，減少工
具轉換中間的資源遺失」等理由，選擇「Adobe After Effects」作為使用工具。
在作業過程，首先為完成的原畫部件賦予動態途徑。具體上的流程為匯入原畫，架設
頂部或遠景，左右移動等整體相機視角，再追加部件動畫。
https://p2.bahamut.com.tw/B/2KU/91/80b731ba3a1f6f3df2a0b4c3e419siz5.JPG
動態化作業的過程中，特別需要注意的是視線的誘導。切入動畫演出僅只有 2 秒的時間
，如果動作太快會讓觀看的人摸不著頭緒。為此必須特別另下功夫，針對臉部或武器等較
容易注目的部分，將動作變得更加直觀好懂。
此外，為避免部件呈現出機械性移動的不自然感，也在動作變化上增加幅度，藉此呈
現出更接近動畫演出的表現。
https://p2.bahamut.com.tw/B/2KU/92/2092c0faab490e27b25f73950d19sj05.JPG
https://p2.bahamut.com.tw/B/2KU/93/f1ed71f2a15cb5e7d91b6ee43f19sj15.JPG
接著進行特效的製作。似似花的例子中，是以「數位化的材質感」與「萬花筒」作為製作
主題，根據這項目標利用 Adobe After Effects 製作所需的素材。
以角色立繪中散落周遭的水晶碎片為靈感，做出背景出現碎裂的特效，以及全像攝影
的演出中產生自己的分身等，考慮角色的特性過後著手製作這些特效。
https://p2.bahamut.com.tw/B/2KU/94/c10278f57c52811ed87a76a53119sj25.JPG
《公主連結 R》的切入動畫採用了大量的手繪動畫特效。這麼做的主因還是為了追求動畫
應有的感覺，主要的特效都盡可能以手繪的方式製作，至於 3D 動畫的粒子表現，則大多
當作添加風味的配料運用。
特別是武器的特效，作畫上特別講究擁有長期停留在玩家視線的識別性。特效的消失
方式也不只是單純的透明化淡出，而是採取細微飄散，碎裂變小的特效豐富視覺體驗。
https://p2.bahamut.com.tw/B/2KU/95/c89dcc61af41d0d2adb99ce0d719sj35.JPG
https://p2.bahamut.com.tw/B/2KU/96/b9358ff969e383a545754ad03619sj45.JPG
工藤綜合以上所述，指出動畫工程中最重要的 3 個重點分別是「重視簡單易懂的識別性
與關聯性」、「力求電視動畫般的演出內容」、「重視每個角色特性的演出內容」。
最後進行的就是實際拍攝了。作業中會進行色調或畫面整體的特效調整，角色線條上
的潤飾，目標製作出電視動畫般的影像感。此外，也能夠在拍攝之中嘗試加入一些特殊表
現。舉例來說，海邊的場景可以加上剪影表現與鏡頭眩光（Lens Flare），也可以配合角
色動作加入圓形或三角形等，讓特定圖形移動的動態素材（Motion graphics）。
https://p2.bahamut.com.tw/B/2KU/97/4c54eb1c8980241c9376a93dc519sj55.JPG
https://p2.bahamut.com.tw/B/2KU/98/e60a4edad63d53f7e1573daa8419sj65.JPG
https://p2.bahamut.com.tw/B/2KU/99/aa57d9a827b985666e947f240619sj75.JPG
進行嶄新嘗試的切入動畫表現
《公主連結 R》裡面，在「公主型態」發動「Union Burst」的時候會有特殊的切入動畫
演出。關於公主型態的演出與企劃，當初是以「比起以往的切入動畫都要更加豪華！更像
動畫！」作為製作概念，據說因此曾經從系統層面大幅度重新審視切入動畫的製作方法。
公主型態的切入動畫為了與以往的成品作出差別，首先提案的是徹底打造出 SD 演出
與切入動畫的無痕轉換境界。這兩個部分若能以無縫接軌的方式互相切換，可以帶給玩家
更加獨特的感受與投入感。
https://p2.bahamut.com.tw/B/2KU/00/89a1eaad442e1af520693d912819sj85.JPG
另一方面也存在必須克服的課題。若是按照以往的系統，將 SD 演出與切入動畫演出交互
播放會增加用戶端的負擔，也會與原本追求遊戲流暢度這項目標有所出入。因此最後的決
定是將切入演出全部整合在同 1 個動畫裡面，也能免除目前為止所有演出存在的限制。
https://p2.bahamut.com.tw/B/2KU/01/b7404f15ada8964ac17662529a19sj95.JPG
再加上與過往的切入動畫相比，更加提升了演出層面的豪華程度，連背景都包含在動畫演
出裡面，呈現更大格局的製作範疇。相機視角也能夠在空間內縱橫無盡地自由移動，誕生
出過往所沒有的動作感。
https://p2.bahamut.com.tw/B/2KU/05/853b4b69eacfb6782fc14f707719sjd5.JPG
並且，為了讓切入動畫能夠與劇情動畫互相呼應，演出或拍攝效果都特地採用與劇情動畫
相同的方法。藉此讓兩者之間產生一定的連結，打造出讓玩家在遊戲中看到劇情動畫的再
現，觀看劇情動畫的時候也能聯想起戰鬥過程的遊戲環境。
https://p2.bahamut.com.tw/B/2KU/02/5dd11b2e1f6acd12539d08123619sja5.JPG
這樣嶄新的嘗試，同時也為公司內部的製作體制帶來影響。在這之前，SD 演出與切入動
畫是以不同的分鏡進行製作，開始製作公主型態以後都是採取相同的分鏡，接近同步進行
製作。
https://p2.bahamut.com.tw/B/2KU/03/2cb8ae92839eca4f55938f9c2a19sjb5.JPG
另外則是，製作上與過往感受最不同的地方，就是 SD 人物的動作與切入動畫的動作必須
以 Adobe After Effects 進行結合，為了讓兩者的演出完成接近天衣無縫的連接，必須
加入手繪特效進行編輯這點。
https://p2.bahamut.com.tw/B/2KU/04/957f50b5b121b46d513b11c95e19sjc5.JPG
只不過，全新的嘗試同時也面臨到「戰鬥的速度感與切入演出長度的調和折衷」、「系統
與性能面的障礙」等問題挑戰。
前者的部分，是投入重視節奏感的場景轉換，利用 Adobe After Effects 完成細部
調整獲得解決。例如在公主可可蘿的演出中，在 SD 演出與切入動畫的轉換過程中添加橫
向穿越樹木陰影的過程，實現自然的場景轉換。
https://p2.bahamut.com.tw/B/2KU/06/52c27f5bbd459b05df46f6348f19sje5.JPG
系統與性能方面的困難之處在於無法使用關閉切入動畫的功能，或是角色以闇影型態（シ
ャドウ）作為敵方登場的切入動畫該怎麼辦。這部分的處理方式，前者是從演出中最適當
或最熱烈的部分開始播放，後者則另外準備作為敵方登場時的動畫。
https://p2.bahamut.com.tw/B/2KU/07/8c6fb5d669364e85ddf6fa586219sjf5.JPG
https://p2.bahamut.com.tw/B/2KU/08/a1af8fe9abf30b8a23d5bdf88819sjg5.JPG
主講者工藤最後回顧開頭所述，提及切入動畫演出在遊戲中扮演的 3 個重要職責，並以
「《公主連結 R》製作切入動畫的目標，是希望讓角色魅力能夠確實傳達到各位玩家心裡
」為本次講座作結。
https://p2.bahamut.com.tw/B/2KU/09/7bf0d2a1747678f7c61dcd989f19sjh5.JPG
作者: andy86tw (MSYG) 2020-09-08 13:50:00
幹 14頁有夠長!
作者: openbestbook (吃蘿蔔不吐蘿蔔皮) 2020-09-08 13:50:00
結果我載下來第一件事就是把動畫調成OFF...
作者: shinobunodok (R-Hong) 2020-09-08 13:50:00
用心做遊戲 我課
作者: Yadsmood (反轉衝動) 2020-09-08 13:51:00
皮影戲一個角色要做半年 屌虐
作者: furbyyeh (螢火蟲的夜晚) 2020-09-08 13:51:00
立害了 原來是連結是連結這個
作者: xo45527788 2020-09-08 13:51:00
教學文
作者: lcw33242976 (幹嘛搶我暱稱) 2020-09-08 13:51:00
推，我都不調的，放大招的動畫真的蠻帥的
作者: haseyo25 2020-09-08 13:51:00
就跟GBF老鼠奧義動畫超棒然而還是會偶爾skip一樣
作者: yukari8 (林檎) 2020-09-08 13:52:00
先推再看
作者: amsmsk (449) 2020-09-08 13:52:00
最重要的功能是可以SKIP
作者: forsakesheep (家裡蹲é¯å»¢è‚¥å®…) 2020-09-08 13:52:00
FGO：作這些幹麻？賣得過我嗎？
作者: haseyo25 2020-09-08 13:53:00
FGO有鹽川出書教大家怎麼做出營收上億遊戲喔
作者: YaLingYin (泠) 2020-09-08 13:54:00
專業文
作者: waitan (微糖兒>////<) 2020-09-08 13:54:00
難怪cy要自己搞一個動畫公司
作者: coon182 (微笑å°ç©ºç©ºâ™¥) 2020-09-08 13:56:00
可是出刀的時候關起來比較好
作者: cat05joy (CATHER520) 2020-09-08 13:57:00
第七史詩放招銜接也不錯 不過解析度只有720P
作者: arrenwu (鍵盤的戰鬼) 2020-09-08 13:57:00
我也都會看這些動畫XD
作者: shinobunodok (R-Hong) 2020-09-08 13:58:00
公會戰在測軸或練習的時候我會關掉 特別是新黑刀因為要頻繁開UB但平常都開著
作者: FrogStar (蛙星) 2020-09-08 13:59:00
我都設定一天只看一次
作者: catvvine (catvvine) 2020-09-08 13:59:00
CY爸爸真的很用心在做遊戲，可惜代理只會出禮包，課金記得課日版，台版我想不到任何課的理由
作者: linceass (ギリギリ愛 ~キリキリ舞~) 2020-09-08 14:00:00
希望多個功能取消大招動畫 現在一場都打超久 UB狂開
作者: shinobunodok (R-Hong) 2020-09-08 14:00:00
台版超棒的 課爆
作者: ShibaTatsuya (司波達也) 2020-09-08 14:01:00
推
作者: j8508241 2020-09-08 14:02:00
總之 香
作者: qaz223gy (亞阿相界) 2020-09-08 14:03:00
推
作者: klaynaruto (影分身K湯) 2020-09-08 14:03:00
做這麼認真 玩家如果都skip不是太可惜了嗎 學學人家FGO
作者: zxc8787 (摸斗哈壓庫) 2020-09-08 14:03:00
打那麼多誰他媽看得完. jpg
作者: r30307 (RPG) 2020-09-08 14:03:00
隔壁棚有一個因為大家都skip大招 乾脆不做大招差分的遊戲
作者: BSpowerx (B.S) 2020-09-08 14:03:00
通常至少會看個一兩次吧XD
作者: iamnotgm (ä¼½è—之黑) 2020-09-08 14:04:00
有夠長
作者: vincentwg (懶得想@_@) 2020-09-08 14:04:00
某樓雲爆還在禮包 現在想買都沒得買了
作者: MoonSkyFish (月天魚) 2020-09-08 14:04:00
公連算蠻新的IP CY能經營到這程度也還行了
作者: shinobunodok (R-Hong) 2020-09-08 14:04:00
部分禮包還在 但是已經被嚴重nerf了
作者: LIONDOGs (LIONDOG) 2020-09-08 14:05:00
反觀FGO，一直不敢出SKIP怕人家不看寶具動畫
作者: arrenwu (鍵盤的戰鬼) 2020-09-08 14:05:00
這已經不是還行，根本就是強。
作者: MoonSkyFish (月天魚) 2020-09-08 14:05:00
忘記前作活多久 估計這IP到目前也就3~4歲吧
作者: WAVEHzen (The Wave 海波浪) 2020-09-08 14:06:00
禮包超讚的好嗎…，一堆禮包都比日版還超值，要不是B服
作者: arrenwu (鍵盤的戰鬼) 2020-09-08 14:07:00
超值禮包我猜是CY不准 XD
作者: arcanite (不問歲月任風歌) 2020-09-08 14:07:00
反觀某寶具不skip遊戲
作者: s50189 (咕嚕米) 2020-09-08 14:08:00
GBF都在F5比快 最近BOSS動畫做太長會讓玩家感到煩
作者: shinobunodok (R-Hong) 2020-09-08 14:09:00
那個公主包 買六包（八包）直接送角再給你相對應金額的寶石 真的有要課的這個超划算
作者: arrenwu (鍵盤的戰鬼) 2020-09-08 14:10:00
我記得應該是CY來台之後超值禮包才整個不見的
作者: bbc0217 (渡) 2020-09-08 14:12:00
酉告
作者: sai007788 (九條寺サイ) 2020-09-08 14:13:00
只能推了
作者: pearnidca (熊貓船長) 2020-09-08 14:17:00
出新黑刀開動畫的話一刀不知道要打多久
作者: cloud7515 (殿) 2020-09-08 14:18:00
這就跟FGO一樣的做法啊
作者: shane24156 (噴水紳士) 2020-09-08 14:18:00
我記得重裝戰姬也有同樣手法 不過超級崩 可憐呢
作者: simpleclean (million ) 2020-09-08 14:20:00
反觀fgo,還有低能粉絲在那邊主張說不看寶具就是沒愛
作者: shinobunodok (R-Hong) 2020-09-08 14:21:00
其實這就是和機械人大戰一樣 第一次看放招動畫會很潮 看一百次後你只會想罵幹你娘
作者: youngnpig (Young Pig) 2020-09-08 14:22:00
dmm有款還在事前的18r網遊、有一部分員工是公連團隊~
作者: waitan (微糖兒>////<) 2020-09-08 14:22:00
一天至少看一次就好
作者: winiS (維尼桑) 2020-09-08 14:23:00
平平是大臉，老公就是尊爵不凡
作者: fenix220 (菲) 2020-09-08 14:23:00
機器人大戰玩到後面戰鬥動畫也是關掉XD打王大招會開而已
作者: KiSeigi (Kuroda.K.Masamura) 2020-09-08 14:24:00
最重要的是記得開放SKIP功能 反觀(RY
作者: safy (Ty) 2020-09-08 14:25:00
FGO前一陣子是有提到小達文西怎麼製作拉, 但也只有小達文西
作者: andy86tw (MSYG) 2020-09-08 14:25:00
反觀
作者: smart0eddie (smart0eddie) 2020-09-08 14:27:00
被遊戲耽誤的動畫公司
作者: js850604 (jack0604) 2020-09-08 14:27:00
公連刷關可以掃蕩，UB不開UB SKIP打活動都沒啥差
作者: TrueTears (真實之淚) 2020-09-08 14:31:00
我都開一天看一次新黑: 妞依阿巴斯偷 妞依阿巴斯偷 妞依阿巴斯偷
作者: rockmanx52 (ゴミ丼 わがんりんにゃれ) 2020-09-08 14:38:00
其實就汲取前作缺點改進後的結果啊
作者: hiphopboy7 2020-09-08 14:40:00
公連的cut in比fgo的舒服多了
作者: shinobunodok (R-Hong) 2020-09-08 14:42:00
不 這不是改前作缺點的等級而已 而是整個回爐重鑄
作者: rabbithouse (智乃的歐尼醬) 2020-09-08 14:45:00
推超長文 我也只有公會戰搶刀會關 其他時候都看好看滿
作者: haseyo25 2020-09-08 14:55:00
可是小文西的寶具正面臉在老早就有了就寶具變化來說並沒有特別多
作者: jabi825 (微波海波我是小波) 2020-09-08 14:56:00
反觀F
作者: allanbrook (翔) 2020-09-08 14:57:00
現在就正在做這種工作...其實看完沒有太特殊的流程是品質特別好而已不過分享的真的很仔細
作者: EEWH (白馬) 2020-09-08 15:01:00
推推
作者: Issarc0721 (蕭瑟風月) 2020-09-08 15:06:00
推推
作者: goldman0204 (goldman) 2020-09-08 15:23:00
推~~~
作者: Hazelburn (廉價酒) 2020-09-08 15:26:00
放UB真的蠻吸睛的
作者: b325019 (望月) 2020-09-08 15:29:00
難就難在訂一個標準流程啊
作者: h182182h (Oligo) 2020-09-08 15:29:00
推 關於遊戲內的動畫真的很用心
作者: roc074 (安安) 2020-09-08 15:35:00
我真的很喜歡公連的UB基本上除了公會戰之外都是看好看滿。
作者: xkiller1900 (cerberus) 2020-09-08 15:38:00
總之推，雖然我不懂
作者: YasyajinAi (天衣可愛) 2020-09-08 15:41:00
公連的UB都做得不錯，三不五時都會去水管上找有字幕的合集來看XD
作者: wcp59478 (真是邪門) 2020-09-08 15:49:00
公連最可怕的應該是主頁面的切換速度 跟鬼一樣
作者: SeijyaKijin (代時上克下的鬼邪天opeop) 2020-09-08 15:49:00
都是課長的血淚
作者: bollseven (嚕嚕子) 2020-09-08 15:56:00
雖然沒玩 但感覺很猛 流程有一套
作者: alen82515 (猛哥神信) 2020-09-08 15:56:00
兩秒內就把鏡華抱到床上
作者: lav1147 (檸檬æ±åŠç³–多冰) 2020-09-08 16:00:00
推認真
作者: cities516 (安安路過) 2020-09-08 16:09:00
推 但是公主UB真的很吃硬體規格Orz
作者: killuaz (從前的從前從沒變過) 2020-09-08 16:11:00
認真做遊戲推
作者: x6858168 2020-09-08 16:14:00
認真推
作者: YandereLove (Rem) 2020-09-08 16:40:00
讚啦
作者: dnek (哪啊哪啊的合氣道) 2020-09-08 16:46:00
這篇文也一樣skip
作者: nightmare012 (蟲蟲) 2020-09-08 16:58:00
公主型態增加用戶的負擔還是沒改善啊
作者: aegis91086 (xo91086) 2020-09-08 17:10:00
推
作者: connell12654 (牳薚) 2020-09-08 17:20:00
近期看起來 好像UB動作有點突兀的就是泳裝純了吧後面動作像是卡住了一樣
作者: anumber (Everlasting GuiltyCrown) 2020-09-08 17:38:00
反觀皮影戲f
作者: lunadrop (天月) 2020-09-08 18:15:00
f製作很陽春哪敢公開怕被笑
作者: bn5566 (陳小肥) 2020-09-08 19:02:00
動畫超棒 沒關過
作者: r901700216 (LS) 2020-09-08 19:29:00
2秒是蠻好的概念 有些遊戲真的太長 還不能跳過
作者: tonsin2976 (米迦勒我è€å©†) 2020-09-08 19:40:00
反觀 宇宙神遊 笑死
作者: www8787 (進擊derLoser®) 2020-09-08 19:57:00
看久就不會想看 想關掉省時間
作者: abb123456 (abb123456) 2020-09-08 19:58:00
推
繼續閱讀
[vTuber] 宝鐘マリン:演習遇到hololive艦隊hn9480412[問題] 找一部跟動物有關的卡通vm3bp4t6[閒聊] NBA球員重現灌籃高手清田信長的手指火鍋basala5417[閒聊] 如果486開局是到劍聖陣營iceyo4343[Vtuber] 彩虹社的皇女リゼ本業是律師嗎？Yuiwa1996[閒聊] 水影跟土影在木葉強度排的上前十嗎？tw689Re: [閒聊] 課本不教三國了 小朋友會從哪認識三國？ya01234[討論] 哈利波特如果給中國人改寫會怎樣?openbestbookRe: [TCG ] WS五等分的花嫁 x Re hololive produbattlecat[閒聊] 蕭峰小便會不會很可觀？Manaku
