apricotモデル作成(その9) - 着せ替え機能を追加する
今回は、type属性を使ってキャラクターの1枚絵を変更します。
タイトルでは着せ替え機能と銘打ってありますが、今回は実装が分かりやすいように1枚絵の切り替えを行います。
服装の着せ替えはキャラクターを表示している状態で
[キャラクター]>[キャラクター名]>[着せ替え項目]で変更できます。
着せ替え機能は複数実装が可能なので、衣装変更、アクセサリー追加、髪型変更などなど、様々なキャラクターの見た目変化が可能になります。
では、実際の実装はどうなるかですがmotionタグを新規に作成し、実装を行います。
ここでは、基本状態であるNeutralizeを例に実装をします。
<sequence name="samidare.Neutralize"> <motion fps="30" z-index="0"> <image x="0" y="0" width="175" height="250">Images\samidare-base-all.png</image> </motion> <!--新規絵の状態では、opacityでz-indexが同じ画像のアルファ値を0にする--> <motion fps="30" z-index="0" type="新規絵"> <image x="0" y="0" opacity="0" /> </motion> <!--新規絵の状態では、新規の絵を表示する--> <motion fps="30" z-index="1" type="新規絵"> <image x="0" y="0" width="175" height="250">Images\Samidare_Oneillust.png</image> </motion> </sequence>
1枚絵を変更する場合「既存の画像のアルファ値を0にする」、「新規イラストを表示」の2つが必要です。
既存の画像のアルファ値を0にする場合、新規motionタグを追加し、z-index値をアルファ値を0にしたい画像に合わせます。
その後、opacity値がアルファ値を管理しているので、0を代入します。
それが終わったら、新規motionタグを追加し、新規イラストを表示させます。
表示方法はz-indexの値以外、既存の画像と同じでその1で説明を行っているため今回は割愛します。
apricotモデル作成(その1) - ガレージ暮らしのトライタム
実装が終わったら保存をして、実際に切り替わるか見てみましょう。
このように無事に切り替えれば実装完了です。
この実装を利用すれば自由に着せ替えを行うことが出来ます。
より楽しめるモデルするためには入れておきたい機能ですね。
これで今回の記事はおしまいです。
それではみなさん、楽しい創作ライフを!