トップページへ

このサイトはジグソーパズルゲーム「CKJigsaw」 （以下、「本体ソフト」と略）を公開することからスタートしました。
本体ソフトの公開当初はパズルで使用する「ジグソーピース」（以下、「ピース」と略）の作成に時間をかける余裕がなく、 たかな工房さんのサイトに掲載されていたピース配置図を利用させていただいて、 小サイズ（640×480）パズル用のピースを作って公開するところまでしかできませんでした。
サイト公開から１年近くが経過して少し気持ちに余裕がでてきたところで、自前のピース形状で、 800×600 サイズパズル用ピースを作る取り組みを開始しました。
さらにその完成後、調子に乗って 960×720 サイズパズル用のピースを作るまでになりました。
これらピースの作成過程で、補助的なツールソフトを作成して生産性良くピース形状を作るノウハウができてきたので、 今回その内容の一部を紹介することにしました。

具体例として、960×720 サイズパズル用のピースをとりあげて、ピースの作成方法を紹介します。

１．ピースの平均サイズ決定
パソコンの画面上で見やすく、扱いやすくするということで、ピースの平均サイズを縦横とも６０ピクセルに設定しました。
パズルのサイズが 960×720 ピクセルであることから、ピースの個数は横１６個、縦１２個で、全体で１９２ピースのパズルとなります。

２．ピース配置図の作成
次に各種形状のピースを組み合わせて構成されるピース配置図（Bitmapファイル）を作成します。

ピースの形状については、ピースの四辺に設けられた凹凸（以下、「ヘッド」と略）の向きによって、
ジグソーパズル道場第３幕 にその分類が以下のように紹介されています。
　　標準型
　　頭部変形型（トリプルヘッド型、テトラヘッド型）
　　ハート型（シングルハート型、ダブルハート型、テトラハート型）
　　最外側ピース（エッジ型、フラット型）

　　　　標準型（縦）　　　　標準型（横）

　　 トリプルヘッド型　　テトラヘッド型

　　シングルハート型　　ダブルハート型　　テトラハート型

　　　　エッジ型　　　　　　フラット型

ジグソーパズルで使われるピースの形状は大部分が標準型ですが、一部に変形型のピースも配置して、
パズルが単調にならないように工夫されています。

ピース配置図はBitmapファイル内に様々なタイプのピースを描画して構成したものであり、
次のピース構成データファイル作成工程で使用される重要な図となります。

　　　　　　　　　　　　　　　　第１図　完成ピース配置図

第１図は完成したピース配置図を示したものです。
ピース配置図内で、各ピースの色は、隣接ピースとの境界線を明確に読み取れるようにするため、隣接ピースとは異なった色に塗色してあります。
ピース配置図内の各ピースの形状は、次項で紹介するツールソフトを使ってパソコン上で修正していきます。
このピース配置図の作成工程がピース作成に要する時間の大半を占めるので、その方法について、さらに先の項で具体的に紹介します。

３．ピース構成データファイルの作成
本体ソフトでは、各ピースの位置情報、サイズ情報、形状情報を書き込んだｃｓｖファイルをデータソースとして利用します。
そこで、前工程で作成したピース配置図をパソコン上に読み込んだ後、以下のようにしてピース構成データファイルを作成します。

（１）各ピース境界線を構成する点の座標（境界線データ）の読み取り

（２）境界線データからピース位置情報、サイズ情報の取得

（３）境界線データからGraphicsPathデータ（以下、「パスデータ」と略）の取得
本体ソフトが必要とするのは生の境界線データではなく、ＧＤＩ＋（グラフィックスＡＰＩ）のパスデータです。
パスデータは、境界線データの右側面の境界点を右に１ピクセル、下側面の境界点を下に１ピクセル移動させた後、
全部の構成点が一筆書き状につながるように並べ変えることによって得られます。
（注：実際の処理では、その後に輝点除去処理が入りますが、ここでは省略します。）
さらに、このようにして得られたパスデータの構成点が上下（列）方向、または左右（行）方向に３点以上続いて並ぶ場合には、
その連続した点の両端以外の構成点は不要なので、不要な点を削除して、パスデータのデータ数を減らします。

（４）ピース位置情報、サイズ情報、形状情報（パスデータ）のｃｓｖファイルへの書込み

これら（１）〜（４）の処理は補助用ツールソフトを作成して行うようにしました。
ツールソフトの作成に多少の時間は使ったものの、このソフトを使って 960×720 サイズ用のデータファイルを作成するのに要した時間は２０秒程度であり、
ストレスなくピース構成データファイルを作成できるようになりました。

今回、ピース配置図を作成するために、第２図の画面構成から成る専用補助ツールソフトを作成して利用しました。

　　　　　　　　　　　　　　　　　　第２図　補助ツールソフトの画面

このツールソフトは、作成中のピース配置図を読み込んだ後、形状修正対象のピースとその周辺部分を６倍に拡大して表示し、
ピースを構成するピクセル（以下、「セル」と略）の色を変更することによって、ピース形状を修正するものです。
画面上のセルの色を変更する方法として、
　　設定色のセルを画面上でドラッグして変更先のセルにドロップする方法
　　設定色のセルを画面上で右クリックした後、変更先のセルを左クリックする方法
　　設定色を画面上で取得した後、指定した範囲のセルの色を一括して変更する方法
などを行う機能を備えている他、
指定した位置を起点として、指定した方向にヘッドができるように塗色する機能も持っています。

１．ピース配置原図（Excel ファイル）の作成
最初に全ピースのタイプ（ピース各辺のヘッドの向き）を決めます。
各ピースのタイプはピースの作者が自由に決めれば良いものですが、試作がしやすいように、Excel のシート上で原図を作成することにしました。
第３図は、960×720 サイズパズル用に作成したピース配置原図のExcel シートです。
この際に注意を要するのは、Excel シート上で図の部分の縦横サイズ比が 720：960 （⇒ ３：４）となるようにすることです。
縦横サイズ比は、Excel シートの列の幅と行の高さを調整することで合わせることができます。

　　　　　　　　　　　　　　　　第３図　ピース配置原図(Excel ファイル)

２．ピース配置原図(Bitmapファイル)の作成
次にExcel のピース配置原図を 960×720 サイズのBitmapファイルに取り込んで保存します。
取り込んだ直後のBitmapファイルでは、ピース境界線周辺のセルの色がピース本体部の色とは異なってしまう場合があります。
第４図にピース境界線周辺部のセルの色が中間色になっている例を示します。

　　　　　　　　　　　　　　　　　　第４図　初期拡大図（取り込み直後）

このような場合には、ピース形状修正用補助ツールを使って中間色セルの色を各ピースの色に修正し、第５図の状態にします。

　　　　　　　　　　　　　　　　　　第５図　初期拡大図（修正後）

このようにして、第６図のピース配置原図（Bitmapファイル）が得られます。

　　　　　　　　　　　　　　　第６図　ピース配置原図（Bitmapファイル）

３．ピース形状の調整
以下、ピース配置図の第２列６行目のピースを例として、ピースの形状修正方法を紹介します。
第７図は当該ピースの形状修正前の拡大図です。

　　　　　　　　　　　　　　　　　　第７図　ピース形状修正初期状態

当該ピースの修正に入る時点で、通常は上部と左部の形状は修正済みとなっていて、右部と下部を修正すればよい状態になっています。
ピース形状を修正するときのポイントは、右下隅の位置と、右ヘッド部、下ヘッド部の位置をどのようにするかにあります。
これらにバリエーションをもたせることでユニークな形状のピースにすることができます。
第８図は第７図の状態からピースの右下側を２ピクセル下げ、 右側ヘッド部の位置を辺の中央よりやや下側に下げるように補助ツールを使って修正した状態です。

　　　　　　　　　　　　　　　　　　　第８図　ピース形状修正途中図１

第９図はピース形状修正用補助ツールを使ってピース右辺にヘッドを形成した状態の図です。

　　　　　　　　　　　　　　　　第９図　ピース形状修正途中図２（右ヘッド部形成中）

各ピースのヘッドの位置についてはバリエーションを持たせていますが、ヘッドの形状は統一した形にして、
パズル全体がすっきりとしたデザインになるようにしました。

第９図の状態から、補助ツールを使って、ピース右側面の形状を第１０図の状態へ修正します。
これでピース右側面の修正は完了です。

　　　　　　　　　　　　　　　第１０図　ピース形状修正途中図３（右側面修正後）

第１０図から下辺を同様に修正して、第１１図の当該ピース完成図が得られます。

　　　　　　　　　　　　　　　　　　　　　第１１図　ピース完成図

この操作を全ピースに対して行い、最終的に第１図の完成ピース配置図を得ることができました。

ご質問、ご意見、ご感想、バグ等のご連絡は、 こちらへ

トップページへ