★前回の記事
STEP 1では、KATAMINOのフィールドの1マスをテーブルの1セルに対応させていました。
このままでは見栄えが良くないので改善します。
改善したいポイントとしては、1ピースの中ではボーターを表示せず、さらにピースとピースの境目は強調することです。テーブルの使用をやめ(そもそもこのような目的でテーブル使用すべきでない)、画像を用いるようにします。
ピースとスピンの組み合わせの画像を作成しましょう。画像エディタを開き、グリッドを表示します。各ピースの画像を描き、枠線も入れます。色は前回の配色のままにしました。
回転、反転して各ピース(最大)8パターンのスピンを作成し、img/piece
フォルダの下にpiece_${pieceId}_${spinId}.png
の命名規則で登録します。登録したものは下のリンクからダウンンロードできます。
KATAMINO-SOLVER/KATAMINO-SOLVER-main/img/piece at master · yucatio/KATAMINO-SOLVER · GitHub
それぞれ以下の表に対応しています。
フォルダ構成はこのようになっています。
displayの変更
STEP 1ではsolver
からdisplay
にkataminoField
を渡していましたが、ピースの表示を画像に変更すると、kataminoField
を渡しても、どこにどの画像を表示するのかわかりません。代わりに、どこにどの画像を表示するのかを渡す必要があります。その対応はもう少し先で行います。
以上でKATAMINOピースの用意が完了しました。
★次回の記事
★目次