apricotモデル作成(その9) - 着せ替え機能を追加する

今回は、type属性を使ってキャラクターの1枚絵を変更します。
タイトルでは着せ替え機能と銘打ってありますが、今回は実装が分かりやすいように1枚絵の切り替えを行います。
f:id:traitam:20180201132447p:plain

服装の着せ替えはキャラクターを表示している状態で
[キャラクター]>[キャラクター名]>[着せ替え項目]で変更できます。
f:id:traitam:20180201132124p:plain

着せ替え機能は複数実装が可能なので、衣装変更、アクセサリー追加、髪型変更などなど、様々なキャラクターの見た目変化が可能になります。

では、実際の実装はどうなるかですが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) - ガレージ暮らしのトライタム

実装が終わったら保存をして、実際に切り替わるか見てみましょう。
このように無事に切り替えれば実装完了です。
f:id:traitam:20180201134929g:plain