Asepriteのよく使う便利機能とか
Asepriteの小技とかTipsのまとめ
ドット絵AdventCalendar2018が空いていたので雑にぶち込みます。玉石混交。
Asepriteわからんって人は去年の記事見てください。
使用したAsepriteはv1.2.10-beta4。
目次
各種機能
軽くするやつ
New render engine for sprite editor
左上にあるツールバーの「Edit」→「Preferences」→「Experimental」から見れる「New render engine for sprite editor」の項目のチェックをはずすとAsepriteが若干軽くなる。
これですね pic.twitter.com/hPb8m7NYxS
— 💖棒助💙 (@Linear_Function) November 10, 2018
どうやら細かいドットの表示がうまくいかないので直したら重くなった（意訳）という感じらしいそりゃそうだ。なんかAseprite重くなったなって感じていた人はとりあえず外しておくのが吉。
自動バックアップ
Asepriteはデフォルトで2分ごとにバックアップを取っている。左上にあるツールバーの「Edit」→「Preferences」→「General」で時間の変更が可能。バックアップを取る時間を遅くすれば申し訳程度にメモリの使用を抑えられるかもしれない。
基本
EDGEみたいな色とパレットを関連付けるアレ
EDGE民がほぼ間違いなく要求するインデックス機能のやり方。
- 左上のSpriteからColor ModeをIndexedに（画面上の色とパレットの色の連動）
- パレットの上にある4つの一番左の鍵マーク
を外す（カラーサークルとパレットの連動）
これだけでパレットと画面上の色が連動するようになるはず。パレット上の色が画面の色になっていない場合はパレットの上に4つあるうちの一番左、「≡」みたいなボタンから一番下の「Creat Palette from Current Sprite」で画面色のパレットを作成。色がおかしくなった時はカラーサークルの上に出る「Remap」を押せば大体なんとかなる。
UI表示をドットバイドットに
デフォルトの表示だと画面上の1pxが2pxの表示になっているが変更ができる。左上にあるツールバーの「Edit」→「Preferences」→「General」で「Screen Scaling」と「UI Elements Scaling」を100％にするとドットバイドットの表示になる。画面が小さく感じる人もいると思うが自分は画面が広く取れて愛用しているので好みの問題。
地味機能
斜めの楕円の作成
楕円ツールで描くときに左クリック押しっぱなしでAltキーを押すと綺麗な斜めの楕円が作れる。楕円を作ってから範囲選択して斜めにするとぐちゃってなるのでこのやり方はおすすめ。
バケツツールで色単位の塗り
バケツツールを選択しているときに左上のContiguousのチェックを外すとバケツで塗った色がすべて上書きされる。RGBモードで疑似的にインデックス機能の再現ができる。
ブラシ
左上にあるツールバーの「Edit」→「New Brush」を押して範囲を選択するか、あらかじめ範囲を選択して「New Brush」を押すとブラシモードになる。左上のBackボタンからブラシ機能の中止が可能。
柱とかタイルみたいな規則性のあるものを並べるときに便利。
他にも一つの四角を作ってあげてブラシ→バケツをすると一瞬でクォータービューのグリッドが出来上がる。
各種小技
時短テク
アニメーションの複製
人力パーティクルみたいなやつ。
まず複製するアニメーションを用意。
フレームを増やす。
レイヤーを追加。フレームをずらしてコピー（レイヤーは追加しなくてもいいけどしておくと後で確認がしやすい）。
コピーしたフレームを選択。そのままスプライト上をCtrlを押しながらドラッグアンドドロップで選択したフレームのみを全部一斉に移動できる（これはツイッターで意外と知らなかった人が多かった機能）。
上の操作を繰り返して増やす。
こうなります。自分はワンドロで割と多用してます。
#深夜の真剣お絵描き60分一本勝負
— 💖棒助💙 (@Linear_Function) December 13, 2018
頑張れ魔理ちゃん pic.twitter.com/IVSUyYcpgQ
小技
アニメーションのループをずらす
ループするタイプのGIFで各アニメーションの周期をずらして上げるとループしてる感が薄まる。豊井さんの受け売りなので下の記事を読んでください。
反射で一枚絵をおしゃれに
こんなのをやります。
まずは一枚絵を用意。
レイヤーを下にコピー、下のレイヤーをいじっていく（元のレイヤーは隠します）。
ツールバーの「Edit」から「Ajustments」で「Hue/Saturation」を選択、4つのうち一番下のaをそれっぽい値にまで下げる（上のレイヤーを隠していないと数値変えても変わってないやん！ってなるので確認）。
追記：ここでカラーモードをRGBモードにしておかないと全部の色が置き換えられてしまうのでRGBモードにしておいてください。
ツールバーの「Edit」から「Flip Vertical」で上下反転。
場所を元の一枚絵の真下に調節する。元のレイヤーを表示。
背景を追加して完成。色数が増えるので原理主義者に怒られます。
おわりに
yutaさんがAseprite初心者向け講座をやるらしいので見ましょう
明日12月29日22時より、ドット絵ペイントツールの"Aseprite（エースプライト）初級者講座"をライブ配信します。ゆるーく僕の分かる範囲で質問にお答えしていきますので初級者も上級者も皆来てね。（放送事故さえ無ければアーカイブを残します。）#PixelArt #ドット絵https://t.co/Iwf4vm75rg
— yuta (@yyuta342) December 28, 2018
ツイのモタクは名刺を作れ（イベント当日編）
ドット絵アドベントカレンダー8日目です。
adventar.org
はじめに
棒助です。1年ぶりにはてブを書きました。
イベントっていいですよね。例えば来たる12/9に東京でPixelArtPark5通称PAPをやるそうです。ぼくは行けませんが。
関係ないですけイベントってオフ会的な雰囲気ありますよね。イベントでは名刺交換が非常に捗ります。めちゃめちゃ楽しいです。というわけで皆さんも作りましょう。
目次
名刺を作る
「1日で名刺なんて作れません」「名刺受け取ってもらえるか心配です」「名刺ってたくさん作らないといけないんでしょ？」「名刺の記事書くならもっと早めにやるべきだろJK」各方面からいろんな声が聞こえてくるのでお答えします。
- 1日で名刺なんて作れません → 作れます
- 受け取ってもらえる？ → 受け取ってもらえます
- たくさん作らないといけない？ → 一枚だけ作って首に下げるとかあり
- 早めに記事を書くべきでは？ → ごめんなさい
余裕ですね？といわけでやり方をいくつか説明していきます。
どの方面で攻めるべきか
名刺と言っても色々なやり方があります。軽く上げてみますと、
- ふつうの両面名刺
- ふつうの片面名刺
- 完全手作り数量限定
- オリジナルサイズ
とこんな感じです。まずどのデザインで作るかを決めましょう。まあ時間がない人は片面と手作りの2択になると思います。ここに沿ってレイアウトを決めていきましょう。
サイズ
どのサイズで作ればいいかは印刷会社に頼む場合、会社ごとに出されているテンプレートを確認しましょう。ワードやPPで出すこともできます。
ここからはEDGEやAsepriteその他ドット絵エディタ上でデザインしたい人向けの話です。一般的な名刺のサイズは300dpiで1075px*650pxっぽいですね。dpiがわからない人は無視してもまあ大丈夫だと思います。
画面にドット絵を貼りたい場合（ここを見てるほとんどの人だとは思いますが）、このままだとクソデカドット絵になってしまいますね。とりあえず比率さえあってれば正しく印刷機に出してもらえると思うので整数倍に小さくしたキャンパスを作りましょう。たぶん213px*130pxないし107px*65pxぐらいで大丈夫だと思います。また比率があっていても印刷でずれることがあるのでこの辺については後で話します。
なにを書けばいいか
名刺って何を書けばいいのかわからない人、いると思います。とりあえず体感名刺によく載せられてる情報一覧です。
- 名前ないしだれか判別できるもの（英語表記もあるとなお良い）
- 各種SNS等のアカウント
- メール等連絡先
この辺があると良いですね。他にもサイトを持ってる人はリンクを張ったりしておくといいと思います。あとは自由なので好きなことを書いていきましょう。ただし文字は少ないほうがデザインとしては洗練されたものになっていきます。
最終的にはこれらをお絵描きエディタ上で配置していきます。
レイアウト
配置はデザイン力が問われるので結構しんどいです。これについても自分が作るときにいくつか意識していることをば。
載せたい情報を画面いっぱい載せるとごちゃごちゃしてしまいます。なので情報に優先順位を付けましょう。例えば自分の場合はこんな感じでした。
- 自分の名前
- SNSのアカウント、メールアドレス
- イラスト
名刺を見たときこの順番に目線が向かうようにしてあげます。これについては大きさ、色、配置で差をつけられます。
大きさについては言わずもがなですね。人は大きいものが最初に目線に飛び込みます。
色については皆さんのイメージする名刺のデザインと相談にはなりますが、基本的に背景色と反対の色相の色を使ってあげると目立ちます。また優先順位の低い情報についてはあえて色相の近い色を選んであげて目立たせないようにする工夫も必要です。
配置については非常に奥が深いのでここでは書き切れませんが、本当に色々な方法があります。一つ意識しておいてほしいのは、画面上をすべて埋めなくても配置が美しければ綺麗に見えることです。空白の美学というやつですね。
それで完成したのがこんな感じです。
最初に名前に目が行き、そこからアカウント、画像の順に目が行くようにしたつもりです。また名前とアカウントの幅をある程度揃えたりもしています。
そんなデザインしてる時間がないという人はお気に入りの画像にイラストソフトで文字を加えるだけでもいいと思います。その際注意してほしいのは文字のサイズの基準をpxに変え、アンチエイリアシングを切り、サイズをフォント指定サイズの整数倍にすることです。そうすることでドットバイドットの表示にすることができます。
自分のオススメはMedibangPaintです。フリーのソフトでなんやかんやドット絵方面にも強いので愛用してます。
先人の名刺
あたらしい名刺届いた！ pic.twitter.com/Cl05zFGtqu
— hako 生活 @12/9PAP5:B-1 (@clrfnd) September 17, 2018
名刺のやべーやつです。裏表で文字が鏡文字になってるのがおしゃれ。
12/3で絵日記8ヶ月！🎊
— .goka (@un_tako) December 4, 2018
記念にボクセル名刺作りました！
写真は全部同じ名刺で、ボクセルに変形します🍉 #ボクセル絵日記 #voxeldiary pic.twitter.com/VEwCHiF4of
トランスフォームするやべー名刺です。ヤバい。
例大祭に持ってく名刺です
— 💖棒助💙 (@Linear_Function) October 12, 2018
家のクソ雑魚プリンタ君で出したやつなので多少滲みがあるのはご愛嬌 pic.twitter.com/OtecHymYjX
ぼくの名刺です。解説したやつです。
印刷
ここは印刷機が家にあるかないかで別れます。
家に印刷機がある場合
印刷機が家にある場合、家で印刷するのが一番手っ取り早いでしょう。名刺サイズの紙がない場合は2つ選択肢があります。名刺サイズの紙を買うか普通の紙に印刷して切り取るかです。自分は印刷用紙を家電量販店で買いました。大体の家電量販店はまあ少なくとも10時には空いていると思うので関東方面在住の人は間に合うと思います。他の場所でも心当たりがある人はそこで買いましょう。
家で印刷をすると特に名刺サイズの紙の場合結構臨んだものと違ったものができることがあります。印刷の設定はサイズを名刺サイズにし、設定はフチなしで印刷しましょう。画面が滲む場合はインク周りなどの中の部分を掃除すると滲みが消えることがあります。また位置がずれる場合は根気よく元画像をずらしてあげましょう。
家に印刷機がない場合
印刷機が家にない場合は各種コンビニ印刷サービスを使いましょう。出来はあまりよくはないらしいですがイベント参加が初めて等なら十分です。詳しくはないのですがBiziCardってサービスが出来が良いらしくとりあえずこれをお勧めしておきます。もし準備をする期間がある場合はちゃんとした印刷所で印刷してもらいましょう。
枚数
何枚刷るかは割と悩みどころですよね。出店する側なら売る数+ちょっとでいいと思います。そうでない場合、絶対に渡したい人+ちょっとって感じでいいと思います。
参考に、自分が渋谷ピクセルアートに一般行でったときは30枚刷って20枚ちょっと渡しました。
最後に
イベントは楽しいので楽しみましょう。名刺があるともっと楽しめると思います。明日PAP行く人はぼくの分まで楽しんできてください。
おまけ
ツイのモタクは差し入れをしよう
イベントで差し入れされるとめっちゃ嬉しいです（少なくともぼくはそうでした）。というわけで差し入れをするときのポイントです。
かさばるものは受け取る側が困ります。控えましょう。匂いがきついものや消費期限が短いものもあまりよくないです。この辺を加味して差し入れはやや高級なコンビニとかで売っているお菓子が多い印象です。
ちなみに僕が貰って一番ヤバいなって思ったのはアイロンビーズセット一式です。会場に持ってきて家に帰ってから開けて遊んでみてくださいと言って渡してくれたなんか (@nankadatta) | Twitter さんはマジで天才だと思います。ドッターにアイロンビーズを布教したい人は明日PAPにアイロンビーズ一式をダイソーとかで買って持っていきましょう。めっちゃ喜ぶと思います。
Asepriteで作るドット絵アニメーション
この記事はドット絵 Advent Calendar 2017の12月8日分で寄稿させていただきました。adventar.org
今回は数あるドット絵制作用ツールの中でもアニメーション制作に特化したAsepriteを利用し実際にアニメーションを作るまでの過程を紹介します。Asepriteについてはアケルさんが打ち方講座を記事にしてくださっているので今回はその補完的な役割として考えてください。
今回使用しているAsepriteはv1.2.5-beta2のものです。Asepriteには興味ないけどアニメーションには興味あるよって人はアニメーションについての知識の項から読み始めてね。
目次
Asepriteの基本部分
スプライトシートを作る
Home画面のNew FileからWidth（幅）、Height（高さ）を入力してスプライトシートを作ります。今回は例として64*64のサイズで進めていますがサイズは後述の方法であとからでも変更できるのであまり気にしなくても問題ありません。
画面の見方
スプライトシート
中央の四角いパネル模様がスプライトシートです。ここにドット絵を打っていきます。
主な操作
- 左クリック パレットから色を選んで塗る
- スクロール 画面の拡大縮小
- Ctrl + ドラッグ スプライトシートの中のものを移動
- Space + ドラッグ スプライトシートを移動
- 右クリック Background colorで塗る
右クリックは上のツールバーのEditから一番下のPreferencesを押して上から二つ目のEditorにあるRight-clickで機能を変更することができます。EDGEでドット絵を打っていた人はRight-clickをPick Background Colorにして右クリックを背景色を拾う機能に変えるのがおすすめ。そうでない人も右クリックは背景色を拾うにしたほうがよっぽどの理由がない限りいいです。
また灰色に表示されている部分は透過色と言って保存した時に真っ黒になるので注意。ここの色とサイズもEditのPreferenceからBackgroundで変更可能です。
グリッドが欲しいって人はAlt + Shift + Gでグリッドが表示されます。
パレット
一番下に二つある色の上がForeground color、下にある色がBackground colorです。デフォルトの右クリックにあるBackground colorで塗るのBackground colorがこれ。カラーサークルで作った色がForeground colorになります。
パレットの色を左クリックするとその色がForeground color、右クリックするとその色がBackground colorに設定ができます。
また上にあるこれを押してEdit colorのロックを解除するとパレットの選択している色とカラーサークルの色が連動するようになります。
カラーサークルで作った色はForeground colorの横にあるこれ
を押すとパレットに新たな色として追加されます。
プレビュー
現在のスプライトシートが表示されます。これもスプライトシート同様スクロールでサイズを変更できます。右上の3つのボタンは左から「スプライトシートをプレビューの真ん中に合わせる」「アニメーションを再生する」「プレビューを閉じる」です。特に2つ目はよく使うので覚えておきましょう。
閉じたプレビューは右下の1:1みたいなボタン
から再度開けます。
ツール
右側にいくつか並んでいるのがツールです。個人的には
-
ペン（Pencil Tool、上から2番目左） -
バケツ（Paint Bucket Tool、下から5番目左） -
直線（Line Tool、下から4番目左） -
投げ縄（Contour Tool、下から2番目左）
の4つだけ覚えれば塗るツールは最低限問題ないと思います。それと一番上の段にある範囲選択も覚えておきましょう。特に
-
短形選択（Rectangular Marquee Tool、一番左） -
投げ縄選択（Lasso Tool、真ん中） -
マジックワンド（Magic Wand Tool、一番右）
の三つが重要です。短形選択はそのまま四角い範囲が選択範囲になります。投げ縄選択はツールの投げ縄と同じ方法で範囲を選択できます。マジックワンドはスプライトシート上の色を左クリックするとそれとつながっている同じ色が選択されます。また範囲選択ツールのいずれかを使っていると上に表示される
この三つも覚えておくと便利です。これを一番左にすると新しく範囲を選択した際にそこが新しい選択範囲になり、真ん中だと新しく選択した範囲が古いほうの選択範囲に追加され、一番右だと今選択している範囲から選択した範囲が引かれていきます。選択した範囲はツールバーにあるSelectのDeselectで解除できます。
タイムライン
このタイムラインこそAsepriteがドット絵のアニメーション制作ツールにおいて最強たる所以です。
初めに上のツールバーにあるLayerからNew Layerを押してみましょう。タイムラインの上に増えた横一列、これが「レイヤー」です。上にあるレイヤーほどスプライトの上に表示されます。
次にまた上のツールバーにあるFlameのNew Empty Flameを押してみましょう。タイムラインの横に増えた縦一列、これが「フレーム」です。縦一列のレイヤーをまとめたものが一つのフレームとして表示されます。
ここには何かが描かれているときには白い丸
が表示されます。これは「セル」と言いこれをクリックして出てきた黄色い枠線をドラッグアンドドロップすることで移動させることができます。また黄色い枠線をCtrlを押しながらドラッグアンドドロップすることでコピーすることができます。これがなかなか便利なので覚えておきましょう。
タイムラインについてはさらに便利な機能があるのでそれは後程。
その他の機能
Q：やり直しがしたい
A：EditのUndoからやり直しができます。ショートカットキーはCtrl+Zです。同様にCtrl+Cでコピー、Ctrl+Xで切り取り、Ctrl+Vで張り付け、Ctrl+Sで保存などができます。
Q：ショートカットキーを設定したい
A：Editの下から2番目にあるKeyboard Shortcutsからできます。
Q：スプライトシートのサイズを変更したい
A：SpriteのCanvas Sizeから変更ができます。また似たような機能としてSprite SizeがありますがCanvas Sizeは画像の上下左右にスペースを追加するというイメージ、Sprite Sizeは画像の見た目そのままに縦横に引き延ばすイメージです。どちらも画像のサイズは同じですが意味合いが変わってきます。
Q：スプライトシートの色とパレットの色を連動させたい
A：まずパレットの上にあるEdit colorのロックを解除してカラーサークルで作った色とパレットの色が連動するようにします。そしてツールバーにあるSpriteからColor ModeをIndexedにするとパレットの色と画面の色が連動するようになります。
アニメーションについての知識
アニメーションを作るための下準備です。
制作方法
ドット絵に限らずアニメーションの作り方には大きく「逐次描き」と「原画による設計」の2種類に分けられます。
逐次描き（straight Ahead Action）
一つ目のコマを描いてその次に二つ目のコマを描いて...というようにそのまま順番に作っていく描き方です。
メリット：順番に描いていくのでアイディアが取り入れやすい、流体や波などといった表現に強い
デメリット：完成形に違和感があった時に修正が困難、最悪の場合やり直し
原画による設計（Pose-to-Pose Action）
重要なコマを先に描いてから間を中割と呼ばれるコマで補完していく描き方です。3DCGに手を出したことがある人ならわかりやすいかも？
メリット：全体を先に決めるのでまず失敗しない
デメリット：タイミングを合わせるのがやや難しい、うまくやれないとぎこちない動きになる
どちらかがとくに優れているわけではないのでこれらの中から時と場合によって選択することになります。
動きの基本
速度と加速度
あるフレームから次のフレームにドット絵が移動したとき、人はその間にある何もない場所を頭の中で埋めることでドット絵が移動したと認識します。これがアニメーションの基本です。またその移動した距離が長いほど人はドット絵が速く移動したと認識します。
また移動する距離を段々と長くしたり段々と短くすることにより加減速を表現することができます
ドット絵特有の縦横の移動と斜め移動の差
下の点はツールを使って描いた円の上をピクセル単位でなぞりながら動いています。
斜めの移動になった瞬間に動きが速くなったと感じませんか？これが縦横移動と斜め移動の差です。ドット絵は正方形を最小の単位としているために斜めの移動が縦横の移動の約1.4倍の速度になります。このように縦横の移動と斜め移動が混じった動きで斜め移動の速度の差を意識せずにピクセル単位で動かそうとするとｺﾚｼﾞｬﾅｲ感が出てしまうので注意が必要です。
より自然な動きに見せるために
規則性
規則に沿った動きがあるとアニメーションの見栄えは良くなります。逆に言うと規則から外れた動きはぎこちなさの原因にもなるので注意が必要です。放物線の例で言えば横向きに等速直線運動、縦向きに等加速度運動といった感じですね。規則性をピクセル単位で表現できるのはドット絵の大きな強みの一つです。ただし先ほどのように斜め移動が混じる場合ではピクセル単位で移動距離を考えると失敗するので気を付けましょう。
両端づめ
先ほど規則性が大事と言いましたが直線的にするとぎこちなくなる場面があります。それが生き物の動きです。生き物らしい動き方にするためには直線的な動きにするのではなく、だんだん加速して、だんだん減速するという動きをさせればよいのです。このような動きを「両端づめ」と言います。振り子のような動きと言えばわかりやすいでしょうか。逆に動きに無機物感を出すためにあえて直線的な動きをさせることもあります。
上の作品は手の動きが両端づめになっています。急激に手が下に落ちているのは肩を落としてその力で引っ張っているイメージです。直線的な動きにしないだけでもある程度の生き物らしさが与えられます。
予備動作・慣性
両端づめに加えて生き物の動きにさらにリアリティを与えるのが予備動作と慣性です。両端づめが動作を行うときの動きとするなら予備動作と慣性はその前後に入れられる動きのことになります。
予備動作の具体的な例として
- 振りむく前に瞬きをする、軽くうつむく
- バットを振る前に振りかぶる
- くしゃみをする前に大きく息を吸う
などがあげられます。
この猫ジャンプの場合飛ぶ前の溜めと尻尾が予備動作になっています。尻尾が二本あるのは作画ミスではないです。→ お燐 - Google 検索
また慣性の例としては
- 着地した時に軽く前のめりになってから戻る
- 走って止まる際に滑って止まる
などですね。
予備動作と慣性と両端づめのどれにも言えるのは生き物は突然動作を行ったり突然止めたりはできないということです。この3つを意識すると生き物らしさがグンと増します。
伸縮
言葉そのまま伸び縮みさせることです。物がなにかとぶつかったときや抵抗を受けたときに形を変形させることでその物体の質感を表現することができます。また生き物に対して誇張表現として使うこともあります。
後追い
後追いは髪の毛やスカートなど何かにくっついた物体が付け根に対して遅れて動く動きのことです。このような物体は付け根から離れるほどに最初はその場にとどまろうとし、少し遅れてから付け根の影響を大きく受けます。
こういった動きは動きの最後にブワッと広げるのがミソです。男の目は揺れるものを追う習性があるらしいので男性向けのものなら特に意識したいところですね。
とここまで見てきましたが下の動画にもっとわかりやすくて詳しい説明が載っています。時間がある人はそっちを見てください。
実際に作ってみる
Asepriteの便利機能を活用しよう
オニオンスキン
タイムラインのここ
を押すとオニオンスキンが有効になります。オニオンスキンとは前後のフレームを薄く表示してくれて逐次描き、原画による設計どちらでも非常に頼りになる機能です。
逐次描きの場合まず1枚目を描きオニオンスキンを有効にして2枚目を描き、同様に3枚目、4枚目...と続けていきます。
原画による設計の場合重要なコマを先に描き間を補完していきます。間のフレームが多くなったときは逐次描きのように少ないフレームから進めるのではなく真ん中のフレームを埋めていくようにすると失敗しにくいです。また動く対象が生き物の場合速度が一定だと前述の生き物らしい動きが出なくなるので両端づめを意識した動きにしましょう。
またオニオンスキンの横にあるこのボタン
からオニオンスキンの設定をいじることができます。Red/Blue Tintにチェックを入れると選択しているフレームより前のフレームは赤色、選択しているフレームよりあとのフレームは青色で表示されるようになります。またOpacityで透過度も変更できます。
レイヤー分けで編集個所を減らす
背景や建物といった動かす予定のないものはレイヤーに分けることによって作業量を減らすことができます。
このやり方は非常に便利なのでよく使いますがたまに前後関係がややこしくなるときがあります（例：髪の毛の前髪、後ろ髪のレイヤー分け等）。そのようなときは一つのレイヤーで描き切ってしまったほうが速いです。
セルを繋げる
先ほどのレイヤー分けをした際、誰しもがほぼ間違いなく同じ絵を何フレームも表示するという場面に当たります。そのような場合にセルを一つ一つコピーするのではなくまとめてセルを繋げるという方法が二通りあります。一つ目はタイムラインにあるこれ
を使うやり方。セルを繋げたいレイヤーのこれを押してこの状態
にしてからセルをコピーするとなんとこんな風
につながっています。もう一つのやり方として繋ぎたいセルをまとめって選択し右クリックでLink cellsを選ぶと同じようにつながります。たくさんのセルをまとめるときは後者のやり方で、繋げるフレームを追加したいときは前者の方法になると思います。
1枚のドット絵からアニメーションを作る
アニメーションを作るとはいっても何枚も正攻法でドット絵を打つ必要はありません。1枚だけドット絵を打てばそこからアニメーションを作ることができます。正直これを書くためだけにこの記事を書きました。
レイヤーでパーツごとに動かす（アンテ式）
その名の通りパーツをレイヤーに分けて個別に動かすやり方です。例として作ろうと思ったんですけどうまくいきませんでした。なのでみんなもアンダーテールを買ってどんなやり方なのかを確かめよう！Steamで税込み980円！評価は安心と信頼の圧倒的好評！未プレイ勢はストアへ急げ！プレイする前に絶対にネタバレを食らってはいけない（戒め
切り貼りしながら描き足していく（継ぎ接ぎ式）
こっちが本編です。具体的にはツールの「範囲選択」を利用し一枚の絵をどんどん改造していくやり方になります。今回はこの継ぎ接ぎ式でこれを作成します。ちなみに継ぎ接ぎ式の命名は私です。
1.まずは一枚絵を描く
正直ここが一番大変。今回はアニメーション関連重視なので一枚絵の描き方はそんなもん俺が知りたい割愛します。強いて言うなら好きなドッターの真似をすればいいと思います。でもやっぱりわかんねぇよって人は他のアドベントカレンダーの人をあたってください。
2.次のフレームに描いた絵をコピーする
ここでは3つのコピーするやり方があります。一つ目はツールバーのFlameからNew Flameを押すやり方。現在のフレームと同じものが次のフレームにレイヤーごとコピーされます。二つ目はコピーするセルを押し黄色い縁をCtrlを押しながらドラッグアンドドロップするやり方。早くて楽なので使う機会は一番多いと思います。最後が範囲選択でコピーする範囲を選択しCtrl+Cでコピー、次のフレームでCtrl+Vで張り付けるやり方。今回のような場合ではあまり使いませんが何よりほかのファイルから画像を持ってこれるという大きな利点があります。この三つのやり方を覚えておけば問題はないはずです。
3.コピーした絵を範囲選択でゴリゴリ改造する
最初に作った一枚絵を短径選択でぶった切ります。そしてぶった切った間を修復していきます。このような荒業ができるのはドット絵ならではですね。アニメーションについての知識でやったことを生かしプレビューで動きを確認しながら動かしていきますがぬるぬるな動きにするコツとしてはフレームが移るごとに極力変化がない場所を作らない、つまり必ずどこかしらを変えるということです。これをやるだけでも見た目が良くなります。
4.2と3を繰り返し最後のフレームが最初のフレームに戻るように調整する
そして出来上がった全体のコマがこちら。
とまあこんな感じです。僕の作ってるアニメーションはもっぱらこのやり方になります。メリットとしては何枚も続けて絵を描けるほどの画力がないって人でも同じようなクオリティで何フレームもあるアニメーションを作ることができるところですね。
作った作品を保存する
作った作品はしっかり保存をしましょう。作品を保存するまでがアニメーション作りです。基本的にはツールバーにあるFileのSaveから保存先を指定し保存形式と名前を選択して保存することになります。保存形式がよく分からない人は画像ならPNG形式、アニメーションならGIF形式にしておきましょう。ちなみにドット絵をJPEGで保存することは丹精込めて作った料理をドブ沼に叩きつけるが如き行為なので絶対にやってはいけません。絶対に。JPEGで保存されたドット絵bot (@jpeghozondotbot) | Twitter
ゲーム作り等をしている人でフレームごとに画像として出力したい場合やアニメーションを一枚のスプライトシートとして出力したい人もいると思います。前者の場合アニメーションを作った状態でFileのSaveから画像系の保存形式を選んで保存すると質問が出てくるのでAgreeを選ぶとそれぞれのフレームを画像形式で出力してくれます。後者の場合はツールバーのファイルからExportを選んで画像形式を選択するとすべてのフレームが横につながった状態で一枚の画像として出力されています。
またツイッター等にあげる際には適切なサイズに拡大することで画質が向上するので積極的に拡大していきましょう。画像の拡大のやり方はAsepriteの基本部分のその他の機能で触れていますので確認してください。ツイッターは縦か横のサイズが256~512px前後に収まっているとタイムラインに綺麗に表示されます。これ以上大きかったり小さかったりすると引き延ばされたり、逆に縮小されたりで本来の見た目よりもだいぶ悪くなってしまうので注意です。
最後に
書きたいことを書きたくっていたらめちゃめちゃ長くなってましたどうしてこうなった。結果的に僕の脳内でうにゃうにゃしていたものが言語化されたのはよかったと思います。何かの間違いでこの記事を見てAsepriteを使い始めましたって人は僕に教えてください泣いて喜びます。
追記：なんと！今日12月8日は！Nejimaki Boy (@nejimaki_boy) | Twitter
さんのお誕生日！パチパチパチパチというわけでお祝いしましょう！ちなみに見返りはないそうですがラブアンドピース！愛だよ愛！
3. Love2Dの基本 その1 画面表示
Love2Dでのプログラミング
お燐 それじゃあお待ちかねコードの書き方の時間だね！
お空 よっ待ってました！
お燐 早速説明を始めるんだけど前回作ったHello WorldにはLove2Dの基本が詰まっているからそれを使って見ていこう。
お空 確かHello Worldはこんなコードだったよね。
function love.draw()
love.graphics.print('Hello World!', 400, 300)
end
お燐 これもそうなんだけどLove2Dで何かをするときには主に「loveモジュール」ってものを使っていくんだよ。loveモジュールはLove2Dに備え付けられてる便利機能みたいなものだね。loveモジュールには二つの種類に分けられるよ。それが「関数」と「コールバック関数」なんだ。
お空 先輩！いきなり関数とかコールバック関数って言われても全然分かんないッス！
お燐 大丈夫、下のHello Worldのコードに色を付けて分けたからそれを見てごらん。コールバック関数ってのは紫色のところのことで関数ってのは茶色のところのことだよ。
function love.draw() love.graphics.print('Hello World!', 400, 300) end
お空 前回のコードもモジュールを組み合わせて作られていたんだね！でもどれが関数でどれがコールバック関数かは分かったけどやっぱり仕組みが分かんないや...。
お燐 そりゃそうだよね～。まあひとつひとつ説明していくからまずは普通の関数の方から見ていこうか。
関数
お燐 Love2Dにはいろんな処理をしてくれる関数が用意されているんだ。さっきの例で言うと「love.graphics.print関数」っていう関数が文字を画面に表示させているんだね。実際に文字を表示したり音楽を流したりっていう具体的に何かをするのは全部この関数が行うんだよ。
お空 じゃあその関数の後ろにある括弧の中で細かい設定をするのかな？
お燐 そう！この関数の後ろにある括弧に入れるものを引数（ひきすう）と言うんだ。引数の内容を変えることによってその関数の細かい設定をするんだね。
>関数の決まり事 関数名(引数)
お燐 ちなみに引数が二つ以上必要な時は , で区切るんだよ。関数によって必要な因数の数と種類も決められているんだ。英文と同じように , の後に半角スペースを一つ入れると見やすくなるね。
関数の決まり事（引数が二つ以上のとき） 関数名(引数1, 引数2, ...)
お燐 引数が必要ないときはなにもいれないで空欄にするんだ。括弧は無くさないからここは注意しようね。
関数の決まり事（引数が必要ないとき）
関数名()
関数を使ってみよう
お空 引数を変えれば画面の表示が変わるんだよね。Hello Worldのコードをちょっといじってみてもいいかな？
お燐 前回から使ってるlove.graphics.print関数の引数はこんな感じだよ。
love.graphics.print関数の書き方
love.graphics.print(’表示させる文字’, x座標, y座標)
表示させる文字のところはデフォルトのフォントの関係で今は英語しか使えないから気を付けてね。
～少女プログラミング中～
お空 文字の部分を変えると画面に表示される文字が、数字の部分をいじると画面の表示される場所が変わったよ。x座標を変えると左右に移動してy座標を変えると上下に移動したね。
引数部分
（左上）('Oku is here!', 80, 70) （右上）('Oku is here!', 480, 70) （左下）('Oku is here!', 80, 400)（右下）('Oku is here!', 480, 400)
お燐 それは画面の場所を指定するのにLove2Dでは座標平面が使われているからなんだよ。
お空 数学にも座標平面があったよね。アレみたいな感じ？
お燐 そんな感じそんな感じ。ただ数学の座標平面とは違って左上を基準にして右向きにx軸、下向きにy軸が伸びているんだ。ちなみに文字や画像も左上が基準になっているよ。例えばx座標を30、y座標を10にするとこんな感じになるんだね。
お空 次はコールバック関数だね。
コールバック関数
お燐 コールバック関数はその名の通りCall Backすなわち呼び出す関数だよ。さっきの関数と違ってfunctionから始まってendで終わるのが特徴だね。このfunctionからendまでの一連のコードをコールバック関数の種類によって呼び出す場所とかタイミングがそれぞれ違うんだ。
コールバック関数の決まり事 function 関数名() 関数の内容 end
お空 呼び出すってどういうこと？
お燐 例えばHello Worldで使ったlove.draw関数は中に書かれていることを画面上に表示させているんだ。呼び出すって言うのは「コールバック関数の中に書かれた内容を実際に使えるようにする」ってことなんだよ。
love.draw関数の決まり事 function love.draw() 画面に表示する内容 end
お燐 逆に言うとlove.draw関数の中に書かれていないものは画面には表示されないんだ。試しにmain.luaの中身をlove.graphics.print('Hello World!', 400, 300)だけにしてごらん？
お空 ありゃ？何も表示されないね。
お燐 こんな風にコールバック関数の中に書かれていないと呼び出されないから表示がされないんだね。
tabキーとスペースキー
お空 あとコールバック関数の中の文の前に微妙なスペースがあるけどこれはなんなの？
お燐 これは関数の内容がfunctionからendまでの一連のブロックの中の話ですよってことを表しているんだ。このスペースがあるとVSCodeが自動でコールバック関数の始まりと終わりをつないでくれるんだよ。
ちなみにこのスペースはtabキーで表す方法とスペースキーで表す方法があるんだ。
お空 tabキーはキーボードの左上あたりにあるやつだね。
お燐 そのtabキーは半角スペース4文字分のスペースを表しているんだけど「見えない一つの文字」って扱いなんだ。だから消すときも一度のBack Spaceで消せちゃうしファイルを少ない容量で済ませることができてすっごい便利。
お空 ほんとだ！でもなんでこんなに便利なのにまだスペースキーを使う人がいるの？
お燐 tabキーは開発環境なんかで表示が違うことがあるんだよ。でもそれは大規模な開発のときなんかの話であってあたいは個人製作レベルなら少ない容量でサクサク動かすことを優先した方がいいと思う。ただし段落の初めでずらす以外の目的では下手にtabキーは使わないことだね。
お空 よくわかんないけどtabキーを使えばいいってことね。
いったんおしまい
お燐 さっき画像の表示の仕方を教えるって言ったけど長くなっちゃったから次に持越ししようか。
お空 今回だけでも結構いろんなことが分かったからね。
- Love2Dには「関数」と「コールバック関数」というモジュールってものがある
- 関数の後ろにある括弧には引数を入れて細かい設定をする
- Love2Dの画面の位置は座標で表現する
- コールバック関数は中に書かれたものをまとめて呼び出すことができる
- コールバック関数の中の文はtabキーでずらして見やすくする
とこんなところかな。
お燐 次回は画像を表示したり音楽を流したり日本語を表示できるようにしたりってところを見ていくよ。外部からのデータの読み込みとその使い方がテーマだね。
2. ハロー・ワールド
事前準備
お燐 さあ早速ゲームを作ろう！って言いたいところだけどまず先に必要な設定を変えておこう。
お空 まずは何をすればいいんだ？
お燐 そんなに量はないからパパっと進めるよ！
拡張子を表示する
お燐 まず拡張子が見えるようにしよう
お空 拡張子って何？
お燐 拡張子っていうのは画像とか音楽とか色々あるファイルの種類を表すものだよ。例えばで言うと
なんかだね。これはほんの一部で他にもあるよ。それじゃあ拡張子を表示する方法を見ていこう。まずは適当なフォルダを開いてみて。
お空 開いた！
お燐 そうしたら上のほうにあるファイル、ホーム、共有、表示ってあるところの表示を押してみて。右のほうに表示/非表示ってところがあるからそこにあるファイル名拡張子ってところにチェックを入れてごらん？
お空 できた！拡張子？が表示されてるね！
VSCodeもちょっといじろう
お燐 次はVSCodeの保存の設定をしよう。まずVSCodeを開いたら左上のファイルってところから自動保存にチェックを入れてみよう。
お空 これはつまり勝手に保存してくれるってこと？
お燐 そうだね。一回一回保存する方法もあるけど最初の内は自動保存のほうが安全だからね。それから画面の配色もいじってみよう。また左上のファイルから基本設定、配色テーマって順番で選んでみて？
お空 上から色々出てきたよ。
お燐 そこから配色を変えることができるよ。プログラミングは画面を見続ける時間が長いから自分の目にあった配色を選ぼうね。ちなみにディスプレイを見るときには黒い背景に白い文字が目にいいって言われているよ。
お空 ちなみにお燐のお勧めはどれ？
お燐 あたいはDark (Visual Studio)がおすすめかな。黒い背景に白い文字だし必要最小限だけ色が付いてるからシンプルな画面になるところが好きだね。
↓ デフォルト
↓ Dark (Visual Studio)
Love2Dに文字を表示してみよう
お燐 ここまで準備ができたらいよいよ本番のゲームを作ろう！
お空 やっと本番だー！
お燐 まずはデスクトップ画面で右クリック、下のほうにある新規作成ってところからフォルダーってところを押してね。
お空 新しいフォルダーってフォルダーができたよ。
お燐 そうしたらその新しいフォルダーをダブルクリックで開いて。その中でまた右クリックの新規作成から今度はテキストドキュメントを作るよ。ここで重要なことはファイルの名前を拡張子も一緒に変えて「 main.lua 」にすること。「拡張子を変更するとファイルが使えなくなる可能性があります」って表示されるけど今回も無視して大丈夫だよ。種類がLUAファイルになっていることを確認しよう。ここでさっきみたいに拡張子を表示していないとファイルの名前が「 main.lua.txt 」になっちゃってうまくいかなくなる原因になるから気を付けようね。
次にテキストエディタを開いて今作った新しいフォルダーを開こう。VSCodeなら左上のファイルからフォルダーを開くを押してデスクトップから新しいフォルダーを押せば開けるよ。
お空 出てきたmain.luaってところを押してみたけど何も書かれてないよ。
お燐 大丈夫。それが正しい状態だからね。ここでLove2Dの画面に「Hello World!」って表示されるコードを作ってみよう。この文章をコピペでも構わないからそのファイルに書いてみて？
function love.draw()
love.graphics.print('Hello World!', 400, 300)
end
お空 できたよ！
お燐 そうしたらデスクトップに戻ってさっき作った新しいフォルダーをmain.luaファイルごとlove.exeかまたはlove.exeのショートカットにドラッグアンドドロップしてごらん？
お空 よくわかんないけどできた！
お燐 おめでとう。ここはお空がこれからゲームを作る第一歩になる世界だよ。
お空 なんか感動的...！
お燐 ちなみにこのHello Worldはプログラマーなら誰もが最初に作る有名なプログラムでLove2Dの公式Wikiにも最初に作るプログラムとして推奨されているんだ。
今回覚えるべきこと
お空 いろいろ作ることはできたけど結局みんなお燐にやってもらったからなんかよくわかんないな...
お燐 大丈夫。さっきお空は
- フォルダーを作る
- その中にmain.luaファイルを作る
- そのmain.luaが入ったフォルダーをLove2Dにドラッグアンドドロップする
っていうLove2Dでゲームを作るときの基本中の基本を押さえることができたんだよ。この流れはゲームが複雑になっていってもずっと変わらないんだ。
お空 本当にこれだけでいいの？Love2Dは思ってたより単純でわかりやすいんだね。
お燐 そうそう、それにmain.luaを理解すればゲーム作りで出来ることが一気に増えるんだよ。分かってしまえば簡単だから一緒に見ていこうね。
1. Love2Dでゲーム作りを始めよう
パソコンがあったらゲーム作り
～ある日の地霊殿～
お空 お燐見て見て！
お燐 どしたの？
お空 守屋神社の人たちからいつものお仕事のお礼にPCを譲ってもらったんだ！だからこれを使ってゲームを作ろうと思ってるの。だけど色々揃えなきゃいけないかもだしお金もかかるかもしれないし不安で...
お燐 ゲームを作りたいのか～。ならLove2Dがもってこいだね！
お空 Love2D？
お燐 そう、個人レベルでゲームを作るなら世界で一番簡単にできちゃう上に無料で使える凄いゲームエンジンなんだよ。Love2Dのことならあたいにおまかせさ！
お空 そんなに便利なものがあったなんて知らなかったよ...
お燐 Love2Dは最近有名になってきたからあまり知られていないのも無理はないね。Love2Dを理解すれば他のゲームエンジンにも応用が利くようになるからゲーム作りの初心者が最初に使うツールとしてもお勧めだよ！
お空 そうなんだ！それじゃさっそく始めよ～
お燐 お～
環境を整える
お空 ところでそのLove2Dでゲームを作るにはまず何をしなきゃいけないの？
お燐 そうだね、まずはそのパソコンに2つインストールしなきゃいけないものがあるんだ。具体的には
- Love2D
- テキストエディタ
の2つだよ。それぞれの関係については後で説明するからまずはLove2Dからパソコンに入れてみよう。
お空 お～
1. Love2D
ページ
お燐 ここからLove2Dのページに飛んでみてごらん。
お空 うにゅ？ここにはLove2DじゃなくてLÖVEって書いてあるけど大丈夫なのか？
お燐 大丈夫、Love2DとLÖVEは同じものだと思っていいよ。ただ検索をかけたときにLove2DのほうがLÖVEよりも引っ掛かりやすいからこれからはLove2Dで統一するね。ページをパッと見た感じはどう思った？
お空 英語ばっかりでよくわからないや...
お燐 そっか、じゃあ一つずつゆっくり見ていこう。
Hi there! LÖVE is an *awesome* you can use to make 2D games in Lua. It's free, open-source, and works on Windows, Mac OS X, Linux, Android and iOS.
ページの一番上にある文章だね。日本語だと
やあみんな！Love2DはLuaで2Dゲームを作れる「めっちゃすごいやつ」だよ。無料で使えて、規約を守れば自由に改変してもいいし、Windows、Mac OS X、Linux、Android、iOSで使えるんだ。
とこんな感じ。
お空 よくわからないけどめっちゃすごいやつってことね！
お燐 まあ最初の認識はそんなものでいいんじゃないかな。次にその下のDownload LÖVE X.XX.X（最新のバージョン）って書いてあるところからLove2Dをダウンロードしていくよ。
ダウンロード
お空 いよいよダウンロードだね！押すところがいっぱいあるけどどれを選べばいいのかな？
お燐 まずはお空のパソコンの種類を確認しよう。お空のパソコンはWindowsみたいだね。そうしたらスタートメニューから設定を押してシステム、バージョン情報と進むとその中にシステムの種類って項目があるからそこを確認してみて。大方32bitか64bitのはずだから。
お空 64ビットオペレーティングシステムって書いてあるよ！
お燐 オッケー！もしこれ以外の機種だったとしても対応したものを見つければ大丈夫だからね。そうしたら64ビットだから64-bit installerか64-bit zipperから選ぶことになるんだけど、今回は64-bit installerにしておこう。
お空 インストール版とZIP版って何が違うの？
お燐 インストール版は構築なんかを勝手にやってくれるのに対してZIP版は設定を自分で色々やらなきゃいけないんだ。パソコンの扱いに自信がある人はZIP版でいいと思うけどとりあえずならインストール版を選んでおくことをお勧めするよ。
お空 わかった。押してみたらこんな画面が出てきたよ？
お燐 そうしたらそこの保存を押してね。保存ができたらダウンロードにこんなものが入っているはずだよ。
これをダブルクリックして実行をしよう。セキュリティスキャンが発動するかもしれないけど危険なものじゃないから無視して大丈夫だよ。
お空 こんなのが出てきたね。
お燐 そうしたら次へを押してライセンス契約書に同意するを押すよ。そしたらインストール先をデスクトップに指定しよう。「インストール先 フォルダ」にある参照を押して保存先をデスクトップに変更してね。（画像を押すと拡大して見れるよ）
→ 
→ 
次へを押すとスタートメニューのショートカット作成になるけどスタートメニューからLove2Dはほとんど使わないからショートカットを作成しないでもいいと思うよ。ここまで出来たらインストールを押して完了ね。
お空 デスクトップになんか出てきたよ！
お燐 そのフォルダーを開いてそこからlove.exeをダブルクリックで実行してみよう。種類がアプリケーションってなってるやつだね。こんな画面になってたらインストール成功だよ。
お空 この画面は何...？
お燐 見にくいけど真ん中のキャラクターの下にNO GAMEって書いてあるでしょ？つまりはゲームが読み込まれていないよってこと。これからゲームを作ってここに読み込ませていくんだ。ここまでできればとりあえずLove2Dのインストールは完了だね。
お空 わーい！
お燐 このアプリケーションはよく使うことになるからショートカットを作っておこう。まずアプリの場所を一度左クリックで選択、そうしたら右クリックでショートカットの作成で作れるよ。そのままショートカットはドラッグアンドドロップでデスクトップに移動しておこう。
2. テキストエディタ
テキストエディタって何？
お燐 次にテキストエディタだね。テキストエディタってのはいろんな文章を作成できるツールなんだ。これでゲームを作ってLove2Dに読み込ませるんだよ。
お空 これも公式ページからダウンロードするの？
お燐 そうなんだけど、テキストエディタはLove2Dと違って固有名詞じゃないんだ。世の中にはいろんなテキストエディタが出されていてそこからお空は自分好みのものを見つけることができるの。
お空 そんなこと言われてもどんなテキストエディタがあるのかすら知らないしどれがいいのかなんてわからないよ...
お燐 そんなお空のためにかわいいお燐ちゃんがおすすめのテキストエディタを選んであげました！
お空 やったー！
お燐 今日お勧めしておくのはVisual Studio Code略してVSCodeだよ。
お空 それも早速入れちゃおっか。
Visual Studio Code
Visual Studio Code - Code Editing. Redefined
お燐 このサイトからダウンロードするんだけど今回はLove2Dと違って真ん中左にアクセスしているOS（WindowsとかMacとかってこと）のダウンロードボタンが表示されるからそこを選べば大丈夫だね！
お空 流石はマイクロソフト...！
お燐 これもさっきと同じように保存してから実行を押していくよ。
今回はいじる点も特にないから次へを押してライセンスに同意、インストール先もそのままでオッケー、プログラムグループの指定もそのままだね。追加タスクの選択のところでデスクトップにアイコンを作成するにだけチェックを入れておこう。
ここまで出来たらインストールを開始してね。
お空 できた！
お燐 それじゃあ一度開いてごらん？
お空 なんかゲーム作りって感じがしてきたね...そわそわしてきた。
お燐 ちなみにほかのテキストエディタだとAtomとかBrackets、Sublime Text、Vimなんかもお勧めだから余裕があったら調べてみてね。
準備完了
お燐 これで必要最低限入れなきゃいけないものを入れることができたね。
お空 やったー！
お燐 次は設定を少しだけいじってから実際にLove2Dを動かしてみるよ。
お空 頑張るぞー！
お燐 おー！
