全婆戰神
    • Create new note
    • Create a note from template
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Write
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
      • Invitee
    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Engagement control
    • Transfer ownership
    • Delete this note
    • Save as template
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Sharing URL Create Help
Create Create new note Create a note from template
Menu
Options
Versions and GitHub Sync Engagement control Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
Invitee
Publish Note

Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

Your note will be visible on your profile and discoverable by anyone.
Your note is now live.
This note is visible on your profile and discoverable online.
Everyone on the web can find and read all notes of this public team.
See published notes
Unpublish note
Please check the box to agree to the Community Guidelines.
View profile
Engagement control
Commenting
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Suggest edit
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
Emoji Reply
Enable
Import from Dropbox Google Drive Gist Clipboard
   owned this note    owned this note      
Published Linked with GitHub
Subscribed
  • Any changes
    Be notified of any changes
  • Mention me
    Be notified of mention me
  • Unsubscribe
Subscribe
# Live2D ###### tags: `11001社課` --- # 安裝 https://www.live2d.com/zh-CHS/ ---- ![](https://i.imgur.com/QNSZk1k.png =70%x) 可試用42天 也有免費版可以使用 只是會受到各種限制 --- # Live2D是啥? ---- Live2D是一種能做出偽3D的軟體,Live2D生成的人物通常是日系動畫造型。Live2D由日本程式編寫人員中城哲也發明。不少遊戲、電子小說、虛擬YouTuber的製作過程中有運用到Live2D(x ---- ![](https://i.imgur.com/qLBwhPw.jpg =70%x) 讓你婆動起來的關鍵(o --- # 素材準備 ---- ![](https://i.imgur.com/kLquJOQ.png =80%x) Live2D的可動部位都是作為獨立物件拆開來變形的 建議將檔案在修圖軟體 調整成.psd檔案再匯入到live2d ---- # 拆圖說明 ---- ![](https://i.imgur.com/UgJWusb.png =30%x) 建議準備一個修圖軟體比較方便將一張圖拆成獨立物件 ---- ![](https://i.imgur.com/bMWyTZX.png) 貴爆 ---- ![](https://i.imgur.com/JzBo6MO.png =80%x) 建議可以用免費的pixlr代替 https://pixlr.com/tw/e/ ---- ![](https://i.imgur.com/5aX0jIi.png =70%x) 注意口腔和鼻子的部分 為了更自然的呈現口腔內部要把口腔稍微畫大點 並讓上下嘴唇外畫一層膚色來作覆蓋 ---- ![](https://i.imgur.com/gphLhCy.png) 需要把所有獨立部位完整畫出來 ---- ![](https://i.imgur.com/vGd8Jw4.png) 線搞和上色圖層需合併在一起 ---- ![](https://i.imgur.com/90PZMVb.png) ---- 這邊礙於時間因素 不會實際進行拆圖 具體的拆圖流程可參照官方教學手冊 https://docs.live2d.com/cubism-editor-tutorials/psd/ 或是 https://www.mosouriya.com/post/live2d-vtuber-%E6%8B%86%E5%9C%96%E8%A7%A3%E8%AA%AA --- # 素材下載 ---- 本次將以此官方範例為主 ![](https://i.imgur.com/BweBBdd.png) ---- 也可以自行下載其他範例實作 ---- 官網模型素材 https://www.live2d.com/zh-CHS/download/sample-data/ ---- 將官網素材導出成.psd ---- ![](https://i.imgur.com/tKVj4yf.png) 下載 ---- ![](https://i.imgur.com/6wkK2Xm.png) 解壓縮 ---- ![](https://i.imgur.com/y5uzac9.png) 點開解壓縮好的文件夾打開找到此檔案雙點兩下打開 ---- ![](https://i.imgur.com/PUmFsqb.png =70%x) 導出成psd --- # 創建專案 ---- ![](https://i.imgur.com/dD4yVT8.png =40%x) 打開Live2d Cubism Editor 創建新模型 ---- ![](https://i.imgur.com/X4teLOx.png) 將psd檔案拖入視窗中 ---- ![](https://i.imgur.com/tXpfwFy.png) ---- ![](https://i.imgur.com/semgrB9.png =70%x) 匯入之後可以看到點擊各部位都有一個正方形的邊框 只有這樣變形是很有限的 無法作出表情上的變化 ---- ![](https://i.imgur.com/c3lUagn.png) 使用快捷鍵Ctrl+A全選所有的部位 ---- ![](https://i.imgur.com/97LaRXr.png =50%x) 點擊自動網格生成視窗選擇變形(輕)後關閉小視窗 ---- ![](https://i.imgur.com/tJHBjOn.png =50%x) 這樣各部位都被加入基礎網格了 ---- ![](https://i.imgur.com/8mdUe4D.png) 不過目前生成出來的網格 在五官部分並沒有很整齊 所以就需要自行調整 --- # 網格的規則 ---- ![](https://i.imgur.com/VUzKOVp.png) 基本上就是先連一條中線連過物件的中心 ---- ![](https://i.imgur.com/lYvnUTT.png) 再用正三角形把這條線包起來 ---- ![](https://i.imgur.com/BwPtLYa.png =50%x) 其他部位也是同理 其中上下唇比較特別 等等會再介紹 --- # 網格處理 ---- ![](https://i.imgur.com/1s1CQFp.png =70%x) 點擊選中物件後 再點擊上方手動編輯工具 ---- ![](https://i.imgur.com/HrQ1stD.png =70%x) 就會進入網格編輯模式 此時可選中左邊的工具細節進行相關調整 ---- ![](https://i.imgur.com/MRxNLfU.png) 從左至右分別是1.選取工具2.套索工具3.增加節點4.刪除節點5.橡皮擦 其中在構成三角面時自動連接這個按鈕很好用 ---- ![](https://i.imgur.com/DnRlnKv.png) 以眉毛為例 在製作外圈的時候會有一條淺藍色的線自動生成 ---- ![](https://i.imgur.com/YwZ2PXu.png) 這個時候按下自動連接就會把這些節點連上 ---- ![](https://i.imgur.com/O3HADe5.png) 選取嘴的上半部 將上唇圍成整齊的三角面 ---- ![](https://i.imgur.com/m1KA39m.png =70%x) 再圍一圈 ---- ![](https://i.imgur.com/LF59PJC.png) 最後把它全部圍起來 ---- ![](https://i.imgur.com/FGYbv8b.png) 下唇也是一樣從唇線開始圍 ---- ![](https://i.imgur.com/MEX2y8Q.png =70%x) 再圍一圈 ---- ![](https://i.imgur.com/67BZxPI.png =60%x) 全部圍起來後 注意盡可能平均而整齊 --- # 表情變化 ---- # 眨眼 ---- # 變形路徑工具 ---- ![](https://i.imgur.com/ZFOoHOY.png =50%x) 以節點的方式變形物體 通常用於睫毛、眉毛、嘴巴等為線構成的物件變形 ---- ![](https://i.imgur.com/QxwoLYq.png =50%x) 在箭頭工具下點選眼睫毛 ---- ![](https://i.imgur.com/W2s4LeT.png =50%x) 切換為變形路徑工具 ---- ![](https://i.imgur.com/BiJZxk1.png =50%x) 此時可點擊左鍵生成節點 --- # 剪貼蒙版功能 ---- 為了讓眼睛閉上的時候眼珠也跟著眼白一起收縮 所以需要使用剪貼蒙版的功能 ---- ![](https://i.imgur.com/mtCgezM.png =70%x) 生成完節點後 選取眼白複製紅線處id ---- ![](https://i.imgur.com/CjMdPLA.png =70%x) 將眼白的物件id貼到眼珠上 ---- ![](https://i.imgur.com/7GXxMCJ.png =70%x) 可以發現現在眼珠超出眼白的話就會被遮住不會顯示出來 ---- ![](https://i.imgur.com/jI6xTlb.png =70%x) 眼睛的高光也同理進行相同設置 --- # 動作 ---- 先整理一下要做一個眨眼的動作 我們需要: 1.將眼睫毛往下移動並變形成U字形 2.眼白跟眼珠在往下移動的過程中收縮 ---- ![](https://i.imgur.com/ACvbnRo.png) 要記錄動作 我們需要左邊這個參數視窗 ---- 首先我們必須選取所有須變形的物件 為了避免選錯或沒選到 所以將除了眼睛以外的物件於部件視窗進行鎖定 ---- ![](https://i.imgur.com/1Dienxh.png) ---- ![](https://i.imgur.com/Jyvq02e.png =70%x) 全部框選起來 ---- ![](https://i.imgur.com/tCzScAt.png =70%x) 對著左眼開閉的參數按下追加兩點的按鈕 ---- 上面兩個綠色點是紀錄物件的狀態 當左邊的點紀錄為閉眼 右邊的點紀錄為開眼 中間的過程就會自己模擬 ---- ![](https://i.imgur.com/egaX926.png =70%x) 確定好現在是選取左邊綠點的狀態後 ---- ![](https://i.imgur.com/YwAtQap.png =70%x) 先往下移動睫毛並設置其為U字形 ---- ![](https://i.imgur.com/J5KG5kq.png =70%x) 再來進行眼白的縮放 ---- ![](https://i.imgur.com/69wSHsC.png =70%x) 即可完成簡單的眨眼動作 ---- ![](https://i.imgur.com/D6uUzhJ.png =70%x) 進行一些微調 這樣眨眼就完成了 --- # 眉毛變形 ---- ![](https://i.imgur.com/H9BGvuv.png =50%x) 以跟眼睫毛相同的方式 用變形路徑工具給眉毛加上三個節點 ---- ![](https://i.imgur.com/xnOhthj.png =70%x) 給予參數追加三點 ---- ![](https://i.imgur.com/L7k2R50.png) 左邊的綠點 ---- ![](https://i.imgur.com/qTEUdYy.png =50%x) 右邊的綠點 這樣動作就完成了 --- # 口部運動 ---- ![](https://i.imgur.com/z7PGG9k.png =50%x) 首先選取上唇 並給予如上的變形路徑節點 ---- 嘴部的部分比較特別 如果只拉一條線的節點的話 上半的皮膚部分會跟著大幅移動 會不好遮住口內 所以需要將路徑節點設置上上面的形狀 ---- ![](https://i.imgur.com/cRyaqyz.png =50%x) 下唇也進行一樣的設置 ---- ![](https://i.imgur.com/m8kBYng.png =50%x) 全部選取起來插入動作參數 ---- 如果發現節點做的太複雜的話 可以直接選取節點按Delete刪除 ---- ![](https://i.imgur.com/2sOF6v3.png =60%x) 用這個節點生成的動作不會被刪掉 所以使用恢復原狀來將形狀回歸回預設 ---- ![](https://i.imgur.com/F1EvLTP.png =60%x) 重新簡化嘴巴的節點 ---- ![](https://i.imgur.com/TX9tNXM.png =60%x) 最後製作出閉嘴的動作 --- # 表情對稱複製 ---- live2d無法直接將動作對稱 所以需要用些特殊的作法 ---- 尤其是這個範例並不是完全的左右對稱 所以需要特別調整會比較麻煩 ---- 以眉毛為例 要複製已經設置好的眉毛動作的話 首先必須確保的是網格需一致 所以要把左眉毛的網格複製並貼給右眉毛 ---- ![](https://i.imgur.com/SPeeV3J.png =70%x) 以箭頭工具選取左眉毛的所有網格頂點後(確保當前參數也就是選取到的為中間的綠點) 按下Ctrl + c複製 ---- ![](https://i.imgur.com/9i5sKd9.png =70%x) 選取右眉毛後進入手動編輯網格的模式 ---- ![](https://i.imgur.com/hqIH5ly.png =70%x) 按下Ctrl + v把左眉毛網格貼上 ---- ![](https://i.imgur.com/PZ1yP4K.png =70%x) 刪除原本右眉毛的網格後選取剛剛貼上的左眉毛網格 ---- ![](https://i.imgur.com/kiOHCLv.png =50%x) 對其右鍵水平翻轉後 需要將網格對齊 ---- ![](https://i.imgur.com/W020v1L.png =50%x) 將其大致調整一下後 退出編輯網格模式 ---- 再來要複製動作 ---- ![](https://i.imgur.com/ApU2epM.png =70%x) 選取左眉毛 並將參數拉至左邊按下Ctrl+Shift+C複製網格形狀 ---- ![](https://i.imgur.com/nuJyrlZ.png =70%x) 切回右眉毛 參數插入三點並移至最左邊 ---- ![](https://i.imgur.com/BGgNRqo.png =70%x) 按下Ctrl+Shift+V貼上形狀 會發現貼上後形狀跟位置變得跟左眉一樣 ---- ![](https://i.imgur.com/bt6mRlZ.png =50%x) 對其右鍵按下反轉 ---- ![](https://i.imgur.com/vDYVbBc.png =70%x) 水平翻轉後 發現動作本身還是有問題 不過沒關係 我們只需要這個形狀 ---- ![](https://i.imgur.com/nrd35lX.png =50%x) Ctrl+Shift+C複製形狀 ---- ![](https://i.imgur.com/54mUa9y.png =70%x) Ctrl+Z還原到反轉之前 ---- 並按下Ctrl+Shift+V貼上形狀 即可完成其中一邊的動作 ---- ![](https://i.imgur.com/eRCRwdd.png =70%x) 右邊的節點也進行一樣的操作即可完成對稱的眉毛動作 ---- 在進行下一步之前 先將右眼也以同樣的方式進行對稱化吧 --- # 面部xy運動 ---- ![](https://i.imgur.com/7RcSSqw.png =50%x) 選取輪廓按下彎曲變形器 ---- ![](https://i.imgur.com/qxV4byT.png =50%x) 設置為2x3 ---- ![](https://i.imgur.com/YgBl6ci.png =50%x) 每個物件有不同適合的變形器大小 以上僅供參考 ---- ![](https://i.imgur.com/RpY0Fkp.png =50%x) 建立後將其對齊一下 ---- ![](https://i.imgur.com/sm7qSON.png =50%x) 之後選取左眼的所有部件 建立變形器 ---- 依序為五官建立變形器 ---- ![](https://i.imgur.com/wxIGg7L.png =50%x) ---- ![](https://i.imgur.com/PfwLUpP.png =50%x) ---- ![](https://i.imgur.com/7BhN8FW.png =50%x) ---- ![](https://i.imgur.com/M1XlyLn.png =50%x) ---- ![](https://i.imgur.com/ZXAuYvF.png =50%x) ---- 再來把每個頭髮都建立變形器 ---- ![](https://i.imgur.com/xoPNoSc.png =50%x) ---- ![](https://i.imgur.com/wQmgcvE.png =50%x) ---- ![](https://i.imgur.com/g0AbaaN.png =50%x) ---- ![](https://i.imgur.com/e3fp9kA.png =50%x) 以往左轉向而言 需要將臉以透視的方式做成這樣 近的比較大 遠的比較小 ---- 之後要根據變形的臉 將所有部件都用變形器製作往左轉向的動作變型成這樣 ---- ![](https://i.imgur.com/RWLMr9B.png =50%x) ---- ![](https://i.imgur.com/fYR3kky.png =50%x) ---- ![](https://i.imgur.com/vst83lg.png =50%x) ---- ![](https://i.imgur.com/iVKmQSE.png =50%x) 將頭髮也根據動作變形 ---- 單一物件可直接使用動作反轉 ![](https://docs.live2d.com/wp-content/uploads/2018/04/2018-12-18_16h44_56.gif) ---- 對稱物件 如眼睛、眉毛以及耳朵 需要自行調整 ---- ![](https://i.imgur.com/XLi6XD6.png) 上下的部分 ---- 對角的部分 ---- ![](https://i.imgur.com/fi1327E.png) ---- ![](https://i.imgur.com/0cwj4ZA.png) ---- ![](https://i.imgur.com/dqBYx7j.png) ---- ![](https://i.imgur.com/sk6VyW9.png) 合併出對角線的形狀 即可自由移動面部

Import from clipboard

Paste your markdown or webpage here...

Advanced permission required

Your current role can only read. Ask the system administrator to acquire write and comment permission.

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lose their connection.

Create a note from template

Create a note from template

Oops...
This template has been removed or transferred.
Upgrade
All
  • All
  • Team
No template.

Create a template

Upgrade

Delete template

Do you really want to delete this template?
Turn this template into a regular note and keep its content, versions, and comments.

This page need refresh

You have an incompatible client version.
Refresh to update.
New version available!
See releases notes here
Refresh to enjoy new features.
Your user state has changed.
Refresh to load new user state.

Sign in

Forgot password

or

By clicking below, you agree to our terms of service.

Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
Wallet ( )
Connect another wallet

New to HackMD? Sign up

Help

  • English
  • 中文
  • Français
  • Deutsch
  • 日本語
  • Español
  • Català
  • Ελληνικά
  • Português
  • italiano
  • Türkçe
  • Русский
  • Nederlands
  • hrvatski jezik
  • język polski
  • Українська
  • हिन्दी
  • svenska
  • Esperanto
  • dansk

Documents

Help & Tutorial

How to use Book mode

Slide Example

API Docs

Edit in VSCode

Install browser extension

Contacts

Feedback

Discord

Send us email

Resources

Releases

Pricing

Blog

Policy

Terms

Privacy

Cheatsheet

Syntax Example Reference
# Header Header 基本排版
- Unordered List
  • Unordered List
1. Ordered List
  1. Ordered List
- [ ] Todo List
  • Todo List
> Blockquote
Blockquote
**Bold font** Bold font
*Italics font* Italics font
~~Strikethrough~~ Strikethrough
19^th^ 19th
H~2~O H2O
++Inserted text++ Inserted text
==Marked text== Marked text
[link text](https:// "title") Link
![image alt](https:// "title") Image
`Code` Code 在筆記中貼入程式碼
```javascript
var i = 0;
```
var i = 0;
:smile: :smile: Emoji list
{%youtube youtube_id %} Externals
$L^aT_eX$ LaTeX
:::info
This is a alert area.
:::

This is a alert area.

Versions and GitHub Sync
Get Full History Access

  • Edit version name
  • Delete

revision author avatar     named on  

More Less

Note content is identical to the latest version.
Compare
    Choose a version
    No search result
    Version not found
Sign in to link this note to GitHub
Learn more
This note is not linked with GitHub
 

Feedback

Submission failed, please try again

Thanks for your support.

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

Please give us some advice and help us improve HackMD.

 

Thanks for your feedback

Remove version name

Do you want to remove this version name and description?

Transfer ownership

Transfer to
    Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

      Link with GitHub

      Please authorize HackMD on GitHub
      • Please sign in to GitHub and install the HackMD app on your GitHub repo.
      • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
      Learn more  Sign in to GitHub

      Push the note to GitHub Push to GitHub Pull a file from GitHub

        Authorize again
       

      Choose which file to push to

      Select repo
      Refresh Authorize more repos
      Select branch
      Select file
      Select branch
      Choose version(s) to push
      • Save a new version and push
      • Choose from existing versions
      Include title and tags
      Available push count

      Pull from GitHub

       
      File from GitHub
      File from HackMD

      GitHub Link Settings

      File linked

      Linked by
      File path
      Last synced branch
      Available push count

      Danger Zone

      Unlink
      You will no longer receive notification when GitHub file changes after unlink.

      Syncing

      Push failed

      Push successfully