着せ替えの作り方

着せ替えゲームの基本的な作り方について説明します。

作成の手順

1. ファイルを用意します

はじめに、着せ替えゲーム用のフォルダを作成します。 そのフォルダの中に着せ替えで使う画像（以下、この画像を「セル」と呼びます）全てと、下記の３つのファイルを入れます。

セルの画像形式は JPEG, GIF, PNG が使用できます。服などのセルは透明部分が必要になるので、GIF か PNG 形式を使用します。 通常のセルはPNG形式（フルカラーも可）を使用して、アニメーションが必要なセルのみGIFを使用することをおすすめします。 本バージョンは IE6 においてもフルカラーPNGを表示することが可能になりました。

2. しおりのどうぐばこを起動します

tool.html をブラウザで開いて、しおりのどうぐばこを起動します。 起動するとメインメニューが表示されます。

大きな貼り付けフォームがありますが、新規作成の場合は何も入力せず空欄のままで構いません。 セット選択が「セットNo.0」の「セル」になっているのを確認して、 「編集モードへ移行する」をクリックします。

編集モードへ移行すると、新規作成の場合は右側のパネルに下図のメッセージが表示されます。 メッセージをクリックして、セルの情報入力ダイアログを表示します。ファイルドラッグ機能に対応するブラウザの場合は、 メッセージの上に画像ファイルをドラッグ＆ドロップしてセルを新規作成することができます。

新規作成メッセージ

3. セルの情報を入力します

セルの新規作成時や編集時に、下図のセルの情報入力ダイアログが表示されます。

セルの情報入力ダイアログ

ファイル名の欄に表示したい画像のファイル名を指定します。 ファイル名を直接入力するか、「参照」ボタンを押してファイルダイアログから画像を選びます。 その他の欄や詳細については、セルの情報入力についてをご覧ください。 入力が終わったらＯＫを押します。

リストパネルから作成されたセルの項目をクリックすると、セル編集メニューが表示されます。

セル編集メニュー

入力を間違えた場合は「変更」を選ぶと、再度入力できます。 「新規作成」を選ぶと、新しいセルを追加作成します。 セルの重なる順番を替えるには「切り取り」を選んで切り取って、挿入したい位置で「貼り付け」を選びます。 またはこのメニューを閉じている状態で項目をドラッグすると順番を並び替えることができます。

4. セルを配置してデータを貼り付けます

セルをドラッグして配置を行います。編集が終わったらパネルの「メインメニュー」をクリックします。 メインメニューに戻ると、貼り付けフォームにデータが表示されます。このフォームのデータを全て選択してコピーします。

次に index.html（テンプレートファイル）をメモ帳などのテキストエディタで開き、 先ほどコピーしたデータを下記の場所に貼り付けてください。 貼り付けが終わったら index.html を保存します。

/**************************************************************************/
/*   ↓ しおりのどうぐばこのフォームデータをここに貼り付けてください ↓   */
/**************************************************************************/

(この位置に貼り付けます)

以上で作成終了です。index.html をブラウザで開いて、着せ替えが遊べたら完成です。

補足

セルの情報入力について

セルの新規作成／編集時に下図のダイアログが表示されます。入力例は下図の通りです。 ファイル名以外の項目は必要がない場合は空欄のままで構いません。

セルの情報入力ダイアログ

ファイル名 指定必須

画像のファイル名を指定します。省略はできません。「http://」からのフルURL指定も可能です。

参照ボタンを押すとファイルダイアログが表示され、リストから画像ファイルを選ぶことができます。 但し選択できるのは、セキュリティの制限のため tool.html と同じフォルダにある画像のみとなります。 参照ボタンはブラウザのファイルアップロード機能を利用していますが、ファイル名の取得のみに使用しており、 しおりのどうぐばこがアップロードすることは一切ありません。

グループ名

セルをグループ化する場合に指定します。グループ化すると複数のセルを一緒に動かすことができます。 例えば服のセルに裏地や襟のセルを作ってグループ化すると、服をよりリアルに表現できます。 グループ化したいセルに同じグループ名を指定します。

  • グループ名は半角英数字（0〜9 A〜Z a〜z と「_」）のみで指定して、なるべく短い名前にすることをおすすめします。 他の文字を使用すると正常に動作しなくなる可能性があります。
  • グループ化できるセルの数に制限はありませんが、数が多いと処理が重くなるので、１つのグループにつき数個程度に留めておいたほうが良いでしょう。

一覧ボタンを押すと下図のサブダイアログが表示され、現在使用しているグループ名の一覧がリストアップされます。 一度入力したグループ名はリストから選ぶことが可能になり、入力の手間を軽減できます。 リセットを選択すると、グループ名を削除します。

グループ名入力ダイアログ

クリック数

セルを固定する場合は 1 以上の数値を半角で指定します。固定せずに自由に動かす場合は空欄にします。 指定した回数がクリックされるまではセルが動かなくなります。1000 などの大きな数値を指定することで、実質的に完全に固定できます。

グループ化されたセルでは、番号が一番小さいセルのみの設定が有効になります。 それ以外のセルに指定した場合は、しおりのどうぐばこが自動修正するので、実際にはどのセルに指定しても問題はありません。

しおりのどうぐばこでの編集作業中には効果は現れません。テンプレートファイルの貼り付け後に設定が有効になります。

コメント
コメントを表示する場合に指定します。マウスポインタをセルの上に乗せたときに、ポップアップして表示されます。

補足

セットについて

セットとは、セルの位置と表示状態を記録することができる機能です。最大５つまでのセットを設定することができます。 セットを切り替えると、表示するキャラクターを変更したり、着せる服を変えることができます。

セット０は、ゲーム開始時に最初に表示しますので、少なくともセット０（セル）の設定が必要です。 セットには（セル）と（スナップ）の２種類があります。

（セル）

セルの位置と表示状態を設定します。遊ぶ時は（セル）に設定した通りに表示されます。

（スナップ）

スナップとは、セルをドラッグしてドロップした時に、多少位置がずれていても指定した位置に吸着する機能です。 （スナップ）にはセルを吸着する位置を設定します。吸着する必要がない場合は（スナップ）の設定は不要です。

（セル）と（スナップ）は、セットごとにペアになっています。 例えば「セット１（セル）」のスナップ設定は「セット１（スナップ）」で行います。

スナップをキャラクターに対して設定すると、服を着せやすくすることができます。設定の方法は下図の通りです。

スナップの設定例

（スナップ）の補足

セット全般の補足

動作設定について

テンプレートファイルの設定を変更すると、遊ぶ時の動作設定を行うことができます。

設定項目

conf.snapRange
セルをスナップする範囲を設定します。単位はピクセルです。数が大きいほどスナップする範囲が広がります。初期値は20です。 （例: 10を設定すると、スナップ位置が X=100 Y=100 のセルは、X=90〜110 Y=90〜110 の範囲にある場合にスナップされます）
conf.titleDelay
タイトルの表示時間を設定します。1000で１秒になります。

タイトルの変更

起動時のセルの読み込み中にタイトルが表示されます。タイトルを画像に変更する場合は、次のようにします。

<!-- タイトルここから（変更／削除可能です）-->
<div id="title">
<img src="(画像ファイル名)" width="(横サイズ)" height="(縦サイズ)" alt="">
</div>
<!-- タイトルここまで -->

次のようにすると、タイトルを表示しないようにすることができます。

<!-- タイトルここから（変更／削除可能です）-->
（この中の行を全部削除します）
<!-- タイトルここまで -->

目次に戻ります

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