画像変更機能は img()
の画像を別の画像に差し替えて変更する機能です。
複数の候補の中から1つのみ選べるので、顔の表情や同じカテゴリーの服などで違和感が少ない組み合わせで遊ぶことができます。
img()
に画像リストを指定すると、画像変更機能を使用します。
画像リストはパネルにリストアップされ、ラジオボタン(ボタン)を押すことで画像を変更します。
ラジオボタンを押した時や、セットを切り替えた時に画像を読み込むので、 転送速度が遅い場合は表示されるまで時間がかかることがあります。 その反面、画像が多くても表示が1枚で済むので、ブラウザの負荷を減らす効果があります。
はじめに maid.js と同じ場所にフォルダを作成します。その中に画像リストで使う画像を入れます。 フォルダは画像リストごとに作成する必要があります。
次に img()
を以下の書式で画像リストを含めて指定します。
img("基本指定", [ 画像リスト ]);
基本指定は画像・パネル設定の指定項目と同じです(若干異なる部分があります)。 指定内容の詳細は以下の通りです。書き方を間違えると、エラーが発生して動作しなくなることがありますのでご注意ください。
img("src:フォルダ名/; name:リスト名; ctrl:制御指定; set:表示指定,画像指定", [ "chr:画像指定文字1; src:画像ファイル名1; name:画像名1", "chr:画像指定文字2; src:画像ファイル名2; name:画像名2", ・ ・ ・ "chr:画像指定文字n; src:画像ファイル名n; name:画像名n" ← ※注意:最終項目は末尾に , を付けないでください ]);
※「name」「ctrl」「set:表示指定」は画像・パネル設定を参照してください。
img("set:11111,ABCDE; src:folder/; name:画像リスト", [ "chr:A; src:a.png; name:画像A", "chr:B; src:b.png; name:画像B", "chr:C; src:c.png; name:画像C", "chr:D; src:d.png; name:画像D", "chr:E; src:e.png; name:画像E" ]);
フォルダ名 folder 内の a.png 〜 e.png の5枚の画像を指定しています。 パネルには「画像A」〜「画像E」がリストアップされ、ラジオボタンを押すと対応する src の画像に変更します。 セットを変更すると画像も以下に変更されます。
セット1 … a.png セット2 … b.png セット3 … c.png セット4 … d.png セット5 … e.png
画像とパネルの指定を分割して指定することができます。 分割指定すると画像のグループ化や、パネルリストの並びを自由に設定することができます。 きめ細かい設定ができますが、指定方法が若干複雑になります。 書式は以下の通りです。
通常指定:
img("src:画像URL; group:グループ名"); pnl("name:画像名; ctrl:制御指定; set:表示指定; group:グループ名");
画像変更機能を使用:
img("src:フォルダ名/; group:グループ名"); pnl("name:リスト名; ctrl:制御指定; set:表示指定,画像指定; group:グループ名", [ "chr:画像指定文字; src:画像ファイル名; name:画像名" ]);
img()
に group を指定すると分割指定になります。
img()
に画像の指定、pnl()
にその他の指定を行います。指定内容についてはこれまでの説明と同じです。
group はグループ名を半角英数字の文字列で指定します。同じグループ名の img()
と pnl()
をリンクします。
上の行に指定した img()
ほど画像が手前に表示され、
上の行に指定した pnl()
ほどパネルの項目が上からリストアップされます。
pnl()
は1つのみ、img()
は1つ以上リンクする必要があります。pnl()
は任意の場所に記述できますが、同じグループの img()
の後に指定する必要があります。画像をグループ化すると、複数の画像を同時にコントロールできます。 髪や服に裏側などの画像を用意してグループ化すると、より複雑な表現が可能です。 指定例は以下の通りです。
img("src:a.gif; group:test"); img("set:1; src:z.gif; name:画像z"); img("src:b.gif; group:test"); pnl("set:1; name:画像ab; group:test");
a.gif と b.gif の2つの画像、パネルに「画像ab」を指定してリンクしています。 パネルで「画像ab」を操作すると、コントロールが連動します。 「画像z」のように、グループ画像の間には他の画像を指定することができます。
画像変更機能とグループ化は併用可能です。指定例は以下の通りです。
img("src:fold1/; group:test"); // (1) img("src:fold2/; group:test"); // (2) pnl("set:1; name:テスト; group:test", [ "src:x.gif; name:画像x", "src:y.gif; name:画像y", "src:z.gif; name:画像z" ]);
パネルには「画像x」〜「画像z」が表示されます。ラジオボタンを押すと以下のように画像変更されます。 それぞれのフォルダの中には、同じファイル名の画像を不足がないように用意することが必要です。
(1) (2) 画像x … fold1/x.gif, fold2/x.gif 画像y … fold1/y.gif, fold2/y.gif 画像z … fold1/z.gif, fold2/z.gif
※同時にグループ化できる img()
の数は無制限ですが、動作が重くなるので3〜4個位までにしてください。
全ての img()
にgroupを指定して、全て分割指定にすると、画像の順番と無関係に自由にリストを設定できます。
リストを服のカテゴリー順にする場合などに便利です。指定例は以下の通りです。
img("src:kami/; group:kami"); img("src:kao/; group:kao"); img("src:fuku/; group:fuku"); img("src:body.png; group:body"); img("src:bg/; group:bg"); pnl("set:1111,AAAD; ctrl:2; name:表情; group:kao", [ "chr:A; src:00.png; name:喜び", "chr:B; src:01.png; name:怒り", "chr:C; src:02.png; name:哀しい", "chr:D; src:03.png; name:楽しい" ]); pnl("set:1111,TTTT; ctrl:2; name:髪型; group:kami", [ "src:00.png; name:ショート", "src:01.png; name:ロング", "chr:T; src:02.png; name:ツインテール" ]); pnl("set:1111,ABCD; ctrl:3; name:服; group:fuku", [ "chr:A; src:00.png; name:私服", "chr:B; src:01.png; name:制服", "chr:C; src:02.png; name:体操着", "chr:D; src:03.png; name:水着" ]); pnl("set:1111,ABCD; ctrl:2; name:背景; group:bg", [ "chr:A; src:00.jpg; name:部屋", "chr:B; src:01.jpg; name:校舎", "chr:C; src:02.jpg; name:グラウンド", "chr:D; src:03.jpg; name:プール" ]); pnl("set:1111; ctrl:0; group:body");