今回の仕上がりは、こんな感じ
32×32ピクセルで描いた、四つの角を持つ星です。二枚目では形を変えず、色だけをミント色にしました。ツールから保存した256×256のGIFを、下の実例で再生できます。静止画を動いているように見せた代替映像ではありません。
作例だけを大きく開く · 実際のGIFを保存 · 編集用.piskelを保存
GIFは二枚構成で、0.5秒ごとに色が切り替わります。掲載例は最初に止まった状態で表示し、「動きを再生」を押したときだけGIFを読み込みます。再生中は同じボタンで停止できます。
星を描いて、二枚のフレームにする
- 公式の「Create Sprite」を押します。今回は最初の32×32のまま始めました。広告に表示されるダウンロード案内は、作品の保存ボタンではありません。
- 左下の色を押し、色の欄に
#ffd166を入れます。「Stroke tool」で四つの角をつなぎ、「Paint bucket tool」で内側を塗りました。うまく描けないときは、まず小さな四角でも試せます。 - 左のフレームにある「Duplicate this frame」を押します。元の絵を残したまま二枚目を作れます。新しい空のフレームを追加する操作とは違います。
- 色を
#a7efd9へ変え、「Paint all pixels of the same color」で星を押します。今回は二枚目だけ色を変えました。 - プレビューの速度を「2 FPS」にします。二枚を毎秒2コマで表示するため、一周は1秒です。まず見やすい速度で確認します。
- 右の「Export」を開き、「GIF」を選びます。Resolutionを256×256にし、入力を確定して「Download」を押しました。「Loop repeatedly」はオンのままです。
今回、サイドブラウザーでは保存ボタンからファイルを取得できなかったため、別のPCブラウザーで同じ描画と書き出しを試しました。そちらではGIF・PNG・編集用ファイルの保存を確認できました。保存できないときは、まずブラウザーのダウンロード通知を確認し、作業を保存してから別のブラウザーで試してください。
GIF・PNG・.piskel、どれを保存すればいい？
完成した動きを見せるならGIF、ゲームなどで各コマを使うならPNGのスプライトシート、あとからPiskelで編集するなら.piskelを保存します。GIFだけを残すより、編集用ファイルも残しておくと続きの作業に使いやすくなります。
今回のPNGは256×512で、上に黄色、下にミント色のフレームが入っています。PNGそのものは静止画です。ゲーム内で動かす場合は、使う側でコマを切り替える処理が必要です。
編集用ファイルは「Save」から「Save as .piskel」で取得しました。今回はファイルの構造と二枚のフレーム情報まで確認しています。別の端末での再読み込みや、ゲームエンジンへの導入は未検証です。
無料？ 作った絵を公開してもいい？
公式利用条件ではサービスは無料で、制作した絵の権利は制作者に残るとされています。Piskelのクレジットはお願いであり必須ではありません。今回の星は編集部が一から描き、既存キャラクターやサンプル素材は使っていません。借りた素材を加工する場合は、その素材の条件を別に確かめてください。
公式FAQは、小さなボランティアチームによる保守を案内しています。最近のSNSの人気や、特定の一人による開発とは確認していません。実際に試したのはPCでの描画、複製、色変更、速度変更、書き出しと再生です。ツール自体のスマホ描画、音付き動画、全設定、外部アプリへの取り込みは未検証です。
保存前にタブを閉じると作業を失う場合があります。規約とFAQには保存・復元について異なる案内があるため、自動保存を頼りにせず、編集用ファイルと完成データを手元に保存する運用をおすすめします。星の形をSVGで選びたいならssstar、既存のゲーム用アイコンを選ぶならGame-icons.netも紹介しています。