便利な機能

画像変更機能

画像変更機能は 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:表示指定」は画像・パネル設定を参照してください。

src:フォルダ名/
画像リストで使うフォルダ名を指定します。省略はできません。http:// からのフルURL指定も可能です。末尾に / が必要です。
set:表示指定,画像指定
,(カンマ)の次に画像指定を行うことで、セット変更時に画像を変更できます。 セット順に画像指定文字を並べて指定します。 画像リストの chr で指定した文字と一致するリスト項目が選択されます。 省略した場合や、chr の指定がない文字を使用すると、画像リストの最初の項目が選択されます。
画像リスト
chr:画像指定文字
set の画像指定に対応する文字を定義します。0〜9、A〜Z、a〜z の任意の1文字を使用可能です。 省略も可能です。同じ画像リストの中で文字が重複しないように指定してください。
src:画像ファイル名
画像ファイル名を指定します。省略はできません。 基本指定の src と画像リストの src を連結した文字列が、実際の画像URLとなります。
name:画像名
画像・パネル設定の「name」と同じです。

指定例

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() ほどパネルの項目が上からリストアップされます。

group指定時の注意

画像のグループ化

画像をグループ化すると、複数の画像を同時にコントロールできます。 髪や服に裏側などの画像を用意してグループ化すると、より複雑な表現が可能です。 指定例は以下の通りです。

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.gifb.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");

Copyright © 2011 by みなみせい, All Rights Reserved.