ソフト関連Trial−No.105 |
はじめに |
このサイトはジグソーパズルゲーム「CKJigsaw」 (以下、「本体ソフト」と略)を公開することからスタートしました。
本体ソフトの公開当初はパズルで使用する「ジグソーピース」(以下、「ピース」と略)の作成に時間をかける余裕がなく、
たかな工房さんのサイトに掲載されていたピース配置図を利用させていただいて、 小サイズ(640×480)パズル用のピースを作って公開するところまでしかできませんでした。
サイト公開から1年近くが経過して少し気持ちに余裕がでてきたところで、自前のピース形状で、 800×600 サイズパズル用ピースを作る取り組みを開始しました。
さらにその完成後、調子に乗って 960×720 サイズパズル用のピースを作るまでになりました。
これらピースの作成過程で、補助的なツールソフトを作成して生産性良くピース形状を作るノウハウができてきたので、 今回その内容の一部を紹介することにしました。
本体ソフト用ピースの作成方法 |
具体例として、960×720 サイズパズル用のピースをとりあげて、ピースの作成方法を紹介します。
1.ピースの平均サイズ決定
パソコンの画面上で見やすく、扱いやすくするということで、ピースの平均サイズを縦横とも60ピクセルに設定しました。
パズルのサイズが 960×720 ピクセルであることから、ピースの個数は横16個、縦12個で、全体で192ピースのパズルとなります。
2.ピース配置図の作成
次に各種形状のピースを組み合わせて構成されるピース配置図(Bitmapファイル)を作成します。
ピースの形状については、ピースの四辺に設けられた凹凸(以下、「ヘッド」と略)の向きによって、
ジグソーパズル道場第3幕
にその分類が以下のように紹介されています。
標準型
頭部変形型(トリプルヘッド型、テトラヘッド型)
ハート型(シングルハート型、ダブルハート型、テトラハート型)
最外側ピース(エッジ型、フラット型)
標準型(縦) 標準型(横)
トリプルヘッド型 テトラヘッド型
シングルハート型 ダブルハート型 テトラハート型
エッジ型 フラット型
ジグソーパズルで使われるピースの形状は大部分が標準型ですが、一部に変形型のピースも配置して、
パズルが単調にならないように工夫されています。
ピース配置図はBitmapファイル内に様々なタイプのピースを描画して構成したものであり、
次のピース構成データファイル作成工程で使用される重要な図となります。
第1図 完成ピース配置図
第1図は完成したピース配置図を示したものです。
ピース配置図内で、各ピースの色は、隣接ピースとの境界線を明確に読み取れるようにするため、隣接ピースとは異なった色に塗色してあります。
ピース配置図内の各ピースの形状は、次項で紹介するツールソフトを使ってパソコン上で修正していきます。
このピース配置図の作成工程がピース作成に要する時間の大半を占めるので、その方法について、さらに先の項で具体的に紹介します。
3.ピース構成データファイルの作成
本体ソフトでは、各ピースの位置情報、サイズ情報、形状情報を書き込んだcsvファイルをデータソースとして利用します。
そこで、前工程で作成したピース配置図をパソコン上に読み込んだ後、以下のようにしてピース構成データファイルを作成します。
(1)各ピース境界線を構成する点の座標(境界線データ)の読み取り
(2)境界線データからピース位置情報、サイズ情報の取得
(3)境界線データからGraphicsPathデータ(以下、「パスデータ」と略)の取得
本体ソフトが必要とするのは生の境界線データではなく、GDI+(グラフィックスAPI)のパスデータです。
パスデータは、境界線データの右側面の境界点を右に1ピクセル、下側面の境界点を下に1ピクセル移動させた後、
全部の構成点が一筆書き状につながるように並べ変えることによって得られます。
(注:実際の処理では、その後に輝点除去処理が入りますが、ここでは省略します。)
さらに、このようにして得られたパスデータの構成点が上下(列)方向、または左右(行)方向に3点以上続いて並ぶ場合には、
その連続した点の両端以外の構成点は不要なので、不要な点を削除して、パスデータのデータ数を減らします。
(4)ピース位置情報、サイズ情報、形状情報(パスデータ)のcsvファイルへの書込み
これら(1)〜(4)の処理は補助用ツールソフトを作成して行うようにしました。
ツールソフトの作成に多少の時間は使ったものの、このソフトを使って 960×720 サイズ用のデータファイルを作成するのに要した時間は20秒程度であり、
ストレスなくピース構成データファイルを作成できるようになりました。
ピース形状修正用補助ツールソフト |
今回、ピース配置図を作成するために、第2図の画面構成から成る専用補助ツールソフトを作成して利用しました。
第2図 補助ツールソフトの画面
このツールソフトは、作成中のピース配置図を読み込んだ後、形状修正対象のピースとその周辺部分を6倍に拡大して表示し、
ピースを構成するピクセル(以下、「セル」と略)の色を変更することによって、ピース形状を修正するものです。
画面上のセルの色を変更する方法として、
設定色のセルを画面上でドラッグして変更先のセルにドロップする方法
設定色のセルを画面上で右クリックした後、変更先のセルを左クリックする方法
設定色を画面上で取得した後、指定した範囲のセルの色を一括して変更する方法
などを行う機能を備えている他、
指定した位置を起点として、指定した方向にヘッドができるように塗色する機能も持っています。
ピース配置図の作成方法 |
1.ピース配置原図(Excel ファイル)の作成
最初に全ピースのタイプ(ピース各辺のヘッドの向き)を決めます。
各ピースのタイプはピースの作者が自由に決めれば良いものですが、試作がしやすいように、Excel のシート上で原図を作成することにしました。
第3図は、960×720 サイズパズル用に作成したピース配置原図のExcel シートです。
この際に注意を要するのは、Excel シート上で図の部分の縦横サイズ比が 720:960 (⇒ 3:4)となるようにすることです。
縦横サイズ比は、Excel シートの列の幅と行の高さを調整することで合わせることができます。
第3図 ピース配置原図(Excel ファイル)
2.ピース配置原図(Bitmapファイル)の作成
次にExcel のピース配置原図を 960×720 サイズのBitmapファイルに取り込んで保存します。
取り込んだ直後のBitmapファイルでは、ピース境界線周辺のセルの色がピース本体部の色とは異なってしまう場合があります。
第4図にピース境界線周辺部のセルの色が中間色になっている例を示します。
第4図 初期拡大図(取り込み直後)
このような場合には、ピース形状修正用補助ツールを使って中間色セルの色を各ピースの色に修正し、第5図の状態にします。
第5図 初期拡大図(修正後)
このようにして、第6図のピース配置原図(Bitmapファイル)が得られます。
第6図 ピース配置原図(Bitmapファイル)
3.ピース形状の調整
以下、ピース配置図の第2列6行目のピースを例として、ピースの形状修正方法を紹介します。
第7図は当該ピースの形状修正前の拡大図です。
第7図 ピース形状修正初期状態
当該ピースの修正に入る時点で、通常は上部と左部の形状は修正済みとなっていて、右部と下部を修正すればよい状態になっています。
ピース形状を修正するときのポイントは、右下隅の位置と、右ヘッド部、下ヘッド部の位置をどのようにするかにあります。
これらにバリエーションをもたせることでユニークな形状のピースにすることができます。
第8図は第7図の状態からピースの右下側を2ピクセル下げ、
右側ヘッド部の位置を辺の中央よりやや下側に下げるように補助ツールを使って修正した状態です。
第8図 ピース形状修正途中図1
第9図はピース形状修正用補助ツールを使ってピース右辺にヘッドを形成した状態の図です。
第9図 ピース形状修正途中図2(右ヘッド部形成中)
各ピースのヘッドの位置についてはバリエーションを持たせていますが、ヘッドの形状は統一した形にして、
パズル全体がすっきりとしたデザインになるようにしました。
第9図の状態から、補助ツールを使って、ピース右側面の形状を第10図の状態へ修正します。
これでピース右側面の修正は完了です。
第10図 ピース形状修正途中図3(右側面修正後)
第10図から下辺を同様に修正して、第11図の当該ピース完成図が得られます。
第11図 ピース完成図
この操作を全ピースに対して行い、最終的に第1図の完成ピース配置図を得ることができました。
ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想、バグ等のご連絡は、
こちらへ