16×16pxの画面に花を置く
キャンバスを16×16pxにし、1フレームのまま描きます。座標は左上を1行・1列として数え、上から下へ行を進めます。背景を塗らない部分は透明のままにします。
| 色 | 置くセル | 役割 |
|---|---|---|
| 花びら色 | 4行8–9列、5行7–10列、6行6–11列、7–8行5–7列と10–12列、9行6–11列、10行7–10列 | 中心を囲む輪郭 |
| 中心色 | 7–8行8–9列 | 花の中心 |
| 葉・茎色 | 11–14行8–9列、12行6–7列、13行10–11列 | 下へ伸びる茎と葉 |
ペンと消しゴムで形を整える
- ピクセル編集画面のサイズを16×16pxにし、色選択から花びら色を作ります。
- 表の座標を目安にセルを塗り、中心色、茎・葉色へ切り替えて追加します。
- はみ出したセルは消しゴムで戻します。キャンバスを拡大して左右の形を見比べ、必要なら一手戻します。
- 一枚絵なら「PNGシートを書き出す」を押します。1フレーム・16px設定では出力は16×16pxです。
色は増やし過ぎず、背景透明を含めても絵に使う色を3色程度にすると、輪郭や中心の差を読み取りやすくなります。これは作例上の選び方で、表示サイズや用途に合う色数を保証するものではありません。
PNGとJSONを使い分ける
PNGは見せるための画像シート、JSONはコマや色を後から編集するためのプロジェクトです。静止画でもJSONを保存しておけば、同じ絵を開いて修正できます。PNG出力はこの例では一枚ですが、コマを増やすと横一列のスプライトシートになります。再生時間や編集履歴はPNG画像そのものには含まれません。
入力と作品はこのブラウザー内で処理されます。ここで説明するのは本工房の16・32・64pxキャンバスと最大8フレームの範囲です。別アプリへの読み込みやゲーム内表示、作品の権利処理は別途確認してください。