動くスタンプの作り方(FireAlpaca)

FireAlpaca(公式サイト)を使用したアニメーションスタンプ用の連番png画像作成例について書いてみました。
※パラパラ漫画的な連続画像の作画に関しては私の知識がない為触れておりませんのでご了承下さい

1-1.「描画範囲目安の作成」
画像サイズに関して
最大320x270
縦長の場合は高さ270px、横長の場合は幅270pxが必須となっており、余白不可の為、描画範囲を意識する必要があります
横長とする場合のサイズが目測では判断しにくいサイズなので事前に幅の基準となる背景を用意します。

・新規作成にて270x270で作成
20160704_01.png

→レイヤーを一枚増やし、使用しない色で塗りつぶし

→キャンバスサイズを320x270に変更
※編集 > キャンバスサイズ > 中央配置の320x270に変更
20160704_02.png

→両脇に余白が出来るので最初の塗りつぶしとは違う色で塗りつぶし
20160704_03.png

「縦長の場合」
画像の場合は270px以外の選択肢がないので上下ぎりぎりまで使用する必要があります。
※横幅は明確な最小値が明記されていないので100px(キャンバス1/3を下回らない)程度で良いかと思います。

「横長の場合」
内側の塗りつぶし部分を最小とし外側の塗りつぶし(=キャンバスのサイズ)が最大となります。
※縦幅に関しては、やはり最小値が明記されていないので100px(キャンバス1/3を下回らない)程度で良いかと思います。


1-2.「メインとなる画像の作成」
LINE Creators Marke内でのお知らせに出ていましたが、
1枚目の画像がそのスタンプの意図している内容が分かるものでないとリジェクト対象となるようです
「アニメーション(動く)スタンプ」制作におけるフレーム調整のご注意

なので通常のスタンプ作成と同様にまず1枚絵を作成し、それを1枚目に割り当てます。
※最終的に全画像を合わせた描画範囲が270pxを超えていれば良い為、
 動かす内容によってはこの段階で270pxの下限に届いていなくても大丈夫です

・サンプルイメージ(縦長サイズの為、上下はぎりぎりに描画しています)
20160704_04.png


1-3.「連続画像の作成」
通常のスタンプと異なり、動くスタンプでは
パラパラ漫画のような連続した画像を用意する必要があります。
本来であれば、全体的な動きを付けたり、大きく変化する方が絵的に映えるのですが、
初心者には敷居が高い事と、24枚作成の手間が膨れ上がるので
[まずは部分的なパーツを動かす]
[文字を1文字ずつ表示していく]
程度に抑えると挫折せずに作成できると思います。

まずは連続画像作成に便利なオニオンスキンモードに切り替えをします。
※表示 > オニオンスキンモード

次に最初に描いた画像のレイヤーを複製します。
20160704_05.png

オニオンスキンモードでは前後のレイヤーが薄い単色で描画されますので
それを基準にしながら動かしたい部分を少し描く換えます。
また、この時点(動画途中の一枚)では画像縦横の下限サイズは意識しないで大丈夫です。(=縦横どちらも270px未満でもOK)

もし、開始~最後で1連の動画とする場合は、開始時に当たる画像にします。
例)一文字ずつ表示していく:文字が表示されていない状態

サンプルイメージ(旗と手元だけ動かしている感じになっています)
20160704_06.png

この後は同様に
2枚目の画像を複製→部分的な描く換えや文字等の表示パーツの追加
3枚目の画像を複製→部分的な描く換えや文字等の表示パーツの追加
・・・
と繰り返していきます。
なお、ここで作成するレイヤー1枚が1フレームとなりますので
5枚~20枚の範囲で作る必要があります。
20枚であれば、スムーズな動きに出来るのですが、
作るのが大変ですし、個人的には5~8枚あれば十分それらしく動かせるかと思います。

一通りの画像を作成したら簡易的な動画再生機能で確認が出来ます。
※表示 > 自動再生

※この時点で一度ファイルを保存して残しておく事をお勧めします


1-4.「余白の削除」
まず全描画の範囲を確認する為にオニオンスキンモードを解除します。
※表示 > オニオンスキンモード のチェックを外す

全部の画像が重なった状態で、背景の目安を使い、
画像サイズの最小値(縦または横が270px)を満たしているか確認します。
20160704_07.png

問題ないようであれば
描画されている箇所を範囲選択
20160704_08.png

選択された状態でトリミング(画像の切り出し)を行います。
※編集 > トリミング
20160704_09.png


1-5.「連番画像ファイルの出力」
まず連続画像以外のレイヤー(下地として用意したレイヤーや最初からあるレイヤーなど)を全て削除します
※連番出力時に非表示にしているレイヤーも対象に含まれてしまう為


再度オニオンスキンモードに切り替えます。
※表示 > オニオンスキンモード

ファイル > レイヤーを連番出力
20160704_10.png

これで各レイヤーが1枚のpngとして連番出力がされます。
あとはこの画像をそのまま「APNG Assembler」などに使う事でapngの作成が出来ます。


下記ページにも動くスタンプ関係の内容を扱っていますので、よろしければご参照下さい。
「APNG Assembler」の簡単な説明: 動くスタンプの作り方(apngの作成方法)
サイズや動画フレームの注意事項: 動くスタンプの作り方(注意事項)














スポンサーリンク

この記事へのコメント


この記事へのトラックバック