テキストフィールドにジグソーパズルにしたい画像ファイルを相対パスで指定してください。 相対パスというのはこのフォルダにある jigsaw.html から見た画像ファイルの位置を表します。例えば、 jigsaw.html が C:\Program Files\jigsaw_v1-1\jigsaw\jigsaw.html にあるとすると、C:\Program Files\jigsaw_v1-1\jigsaw\picture.jpg ならば「picture.jpg 」と、C:\Program Files\jigsaw_v1-1\jigsaw\image\picture.jpg ならば「image/picture.jpg 」と、C:\picture.jpg ならば「../../../picture.jpg 」と入力してください。よく分からない場合は jigsaw.html と同じフォルダに画像ファイルを入れて単純にその画像ファイルの名前を入力すれば大丈夫です。画像の形式についてですが、 Java では標準で GIF と JPEG をサポートしていますので、この2種類は確実に読み取れます。 PNG は Java 2 SDK 1.3 からサポートされました。 ブラウザが 1.3 以降の Java を搭載しているか、Java plug-in 1.3 以降が入っていれば PNG も読み取れるかもしれません。 BMP は Windows と Internet Explorer という環境であれば読み取れるようですが、Java の標準ではなく Microsoft の独自仕様なので正しい動作は保証できません。 他にもいろいろな形式の画像がありますが PNG と BMP も含めて、ペイントソフトや画像変換ソフトを使えば大抵の画像は GIF か JPEG に変換することができますので、あらかじめ GIF か JPEG に変換しておけばどんな画像でもジグソーパズルにすることができます。 このアプレットでは 自然いっぱいの素材集 で配布されている画像の1つをサンプル画像として使用させて頂いています。 [サンプル] ボタンを押すとそのファイルを選ぶことができます。 とりあえずどんなものか試してみたい方はサンプル画像でパズルをやってみてください。 [内容を消去] ボタンはテキストフィールドの内容を消去して空にします。 画像ファイルを指定したら [パズルを開く] ボタンを押してください。 画像の読み取りに成功した場合は次のようなウインドウが開きます。 |
このウインドウは画面いっぱいに(画面と同じ大きさで)表示されます。 パズルをするにはなるべく広い領域が必要なのでこういう仕様にしています。 最大化ボタンが押されるなどしてウインドウの大きさが変わると意図しない表示・動作になってしまいますので、大きさを変えないでください。 まず、画像をどんな形でいくつのピースに切り分けるかを選択します。 選択したら [この設定で新規パズルを開始する] ボタンを押してください。 画像を切り分ける作業、ピースを配置する作業が終わると「準備が完了しました」と表示されパズルができる状態になります。 (この作業には少し時間がかかります。また当然ですがピース数が多ければ多いほどメモリを消費しますので、マシンスペックが低い場合はピース数をあまり多くしない方がいいと思います。) パズルは上部にあるタブをクリックしてタブを移動しながら行います。 ・ 完成図タブ
・ パネルタブ
・ ピース1 〜 ピース4タブ
・ 設定タブ
ピースを移動させるにはまず移動させたいピースをクリックします。 そうすると選択状態になるので移動させたいタブをクリックして、そのタブの中の移動させたい場所までマウスポインタを移動させてクリックするとその位置にピースを置くことができます。 またピースは角度もバラバラになっています。 ピースが選択されている状態で右クリックすると90度右回転します。 またキーボードのLキーを押すと左に90度、Rキーを押すと右に90度回転します。 パネルにピースを置くときに限ってのことですが、 置こうとしている場所にすでにピースが置いてある場合や、置こうとしている場所の隣にそのピースとはつながらないピースが置いてある場合は置けません。 |
v1.1 | ひとまず公開 |
v1.2 | ピースをピース1に集める機能を追加 3×3など一部の切り分け方によってはピースの配置で止まってしまうバグを修正 |