※本記事はnicotalkで配布されている「きつねゆっくり」のキャラクター素材を元に解説しております。
他の方が配布されているすべてのキャラクターが本方法で使えるとは限りませんのでご了承くださいませ。
また記事の最後に記事本文内で紹介しているコードをまとめてますので、そちらからコピペ一気にコピペできます。
Youtube動画で口パクと瞬きの実装方法を解説しています。
口パクと瞬きを実装するには
口パクや瞬きの設定方法はコチラの記事をご覧ください。
→https://html-css-wordpress.com/ymm4_initial_setting/
口パクや瞬きの動きをつくる為には、画像番号を変更する必要はあります。
これらを全て手動で変更するのは大変です。特に多くのキャラクターを使用している場合。
今回は特別なソフトを使用せず、windows環境の方なら誰でも簡単にファイルの名前を変更する方法を解説します。
口パク用ファイルの変更方法
口パクの変更を軽くおさらいします。
口パクをうまく実装するには下記のテーブルに沿ってファイル名を変更する必要があります。
| 変更前 | 変更後 |
| XX.png | XX.0.png |
| XXa.png | XX.1.png |
| XXb.png | XX.2.png |
| XXc.png | XX.3.png |
| XXd.png | XX.4.png |
| XXe.png | XX.png |
実際に口ファイルを変更する手順を解説します。
ここから先はあくまで僕個人のオリジナルの方法です。
まず口ファイルの横幅を調節して横に６枚づつ画像が並んでいる状態にします。
続いて赤枠の１列目ですが、こちらに関しては私は手動で変更しました。
自動化する方法もあるのでしょうが、その方法を模索するより、手を動かしたほうが早かったのが理由です。
具体的な方法は「.0」をコピペして「png」の前に張り付ける方法です。
続いて２列目です。ここから置換を使います。
おさらいですが、「a」は「.1」に変換すればOKです。
口ファイル内で何もない所で「shift」＋右クリックから「PowerShell ウィンドウをここで開く」からPowerShellを起動します。
PowerShellで以下のコマンドを入力します。
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'a','.1' }
２列目の「a」が全て「.1」に置き換わっています。
同様に「b」は「.2」「c」は「.3」「d」は「.4」に置換していきます。
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'b','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'c','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'd','.4' }最後の「e」は「.5」に置き換えるのではなくて削除する必要があります。今回はそのまま置換で対応できます。
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'e',''}値を空白に置き換える事で対応の文字を削除する事ができます。
全てのコードをPowerShellで入力すると上記の画像のようなファイルになります。
口パクはこれで完成です。
瞬き用ファイルの変更方法
口パクと違い瞬きは少し工夫が必要です。
まず大前提として、瞬きの画像ファイルの名前変更は口パクとは規則が異なります。
| 変更前 | 変更後 |
| XX.png | XX.png |
| XXa.png | XX.4.png |
| XXb.png | XX.4.png |
| XXc.png | XX.2.png |
| XXd.png | XX.1.png |
| XXe.png | XX.0.png |
しかしフォルダを読み進めていくと上記画像のように「-15」が入っている画像ファイルがあります。
何故「-15」と入っているのか理由不明ですが、理由がわかるまでこの「-15」は消したいと思います。
続いて、これまではa~eで順番に名前付けされていたのですが、途中から「k～o」を与えられています。
k～oはa～eと同じ考えで処理していきます。
この２点に関して詳しい方是非ご教授ください＞＜
入力するPowerShellのコードは以下の通りです。
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'a','.4' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'b','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'c','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'd','.1' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'e','.0' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'k','.4' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'l','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'm','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'n','.1' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'o','.0' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace '-15','' }上記のコードはそのままコピペして一気に張り付けて大丈夫です。
しかし「png」の「n」の文字が「.1」に置換されてしまうので、上記全てのコード実行後に
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'p.1g','png' }と入力してpngファイルに戻してください。
目のファイルがこのようになれば完了です。
PowerShellコードまとめ
口ファイルに対してのコード
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'a','.1' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'b','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'c','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'd','.4' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'e',''}目ファイルに対してのコード
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'a','.4' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'b','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'c','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'd','.1' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'e','.0' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'k','.4' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'l','.3' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'm','.2' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'n','.1' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'o','.0' }
Get-ChildItem | Rename-Item -NewName { $_.Name -replace '-15','' }上記コード入力後に
Get-ChildItem | Rename-Item -NewName { $_.Name -replace 'p.1g','png' }
