おりんくうと学ぶ2Dゲー開発

のほほんと進むゲーム作りブログ

Asepriteで作るドット絵アニメーション

この記事はドット絵 Advent Calendar 2017の12月8日分で寄稿させていただきました。adventar.org

今回は数あるドット絵制作用ツールの中でもアニメーション制作に特化したAsepriteを利用し実際にアニメーションを作るまでの過程を紹介します。Asepriteについてはアケルさんが打ち方講座を記事にしてくださっているので今回はその補完的な役割として考えてください。

qiita.com

今回使用しているAsepriteはv1.2.5-beta2のものです。Asepriteには興味ないけどアニメーションには興味あるよって人はアニメーションについての知識の項から読み始めてね。

目次

Asepriteの基本部分

スプライトシートを作る

Home画面のNew FileからWidth(幅)、Height(高さ)を入力してスプライトシートを作ります。今回は例として64*64のサイズで進めていますがサイズは後述の方法であとからでも変更できるのであまり気にしなくても問題ありません。

f:id:stickBBB:20171205104547g:plain

画面の見方

スプライトシート

中央の四角いパネル模様がスプライトシートです。ここにドット絵を打っていきます。

主な操作

  • 左クリック    パレットから色を選んで塗る
  • スクロール    画面の拡大縮小
  • Ctrl + ドラッグ   スプライトシートの中のものを移動
  • Space + ドラッグ スプライトシートを移動
  • 右クリック    Background colorで塗る

f:id:stickBBB:20171205134402g:plain

右クリックは上のツールバーのEditから一番下のPreferencesを押して上から二つ目のEditorにあるRight-clickで機能を変更することができます。EDGEでドット絵を打っていた人はRight-clickをPick Background Colorにして右クリックを背景色を拾う機能に変えるのがおすすめ。そうでない人も右クリックは背景色を拾うにしたほうがよっぽどの理由がない限りいいです。

また灰色に表示されている部分は透過色と言って保存した時に真っ黒になるので注意。ここの色とサイズもEditのPreferenceからBackgroundで変更可能です。

グリッドが欲しいって人はAlt + Shift + Gでグリッドが表示されます。

パレット

f:id:stickBBB:20171205185921p:plain

一番下に二つある色の上がForeground color、下にある色がBackground colorです。デフォルトの右クリックにあるBackground colorで塗るのBackground colorがこれ。カラーサークルで作った色がForeground colorになります。

パレットの色を左クリックするとその色がForeground color、右クリックするとその色がBackground colorに設定ができます。

また上にあるこれf:id:stickBBB:20171205191213p:plainを押してEdit colorのロックを解除するとパレットの選択している色とカラーサークルの色が連動するようになります。

カラーサークルで作った色はForeground colorの横にあるこれf:id:stickBBB:20171205191640p:plainを押すとパレットに新たな色として追加されます。

プレビュー

現在のスプライトシートが表示されます。これもスプライトシート同様スクロールでサイズを変更できます。右上の3つのボタンは左から「スプライトシートをプレビューの真ん中に合わせる」「アニメーションを再生する」「プレビューを閉じる」です。特に2つ目はよく使うので覚えておきましょう。

閉じたプレビューは右下の1:1みたいなボタンf:id:stickBBB:20171205193036p:plainから再度開けます。

ツール

右側にいくつか並んでいるのがツールです。個人的には

  • f:id:stickBBB:20171205193440p:plain ペン(Pencil Tool、上から2番目左)

  • f:id:stickBBB:20171205193501p:plain バケツ(Paint Bucket Tool、下から5番目左)

  • f:id:stickBBB:20171205193544p:plain 直線(Line Tool、下から4番目左)

  • f:id:stickBBB:20171205193638p:plain 投げ縄(Contour Tool、下から2番目左)

の4つだけ覚えれば塗るツールは最低限問題ないと思います。それと一番上の段にある範囲選択も覚えておきましょう。特に

  • f:id:stickBBB:20171207223130p:plain 短形選択(Rectangular Marquee Tool、一番左)

  • f:id:stickBBB:20171207223837p:plain 投げ縄選択(Lasso Tool、真ん中)

  • f:id:stickBBB:20171207223340p:plain マジックワンド(Magic Wand Tool、一番右)

の三つが重要です。短形選択はそのまま四角い範囲が選択範囲になります。投げ縄選択はツールの投げ縄と同じ方法で範囲を選択できます。マジックワンドはスプライトシート上の色を左クリックするとそれとつながっている同じ色が選択されます。また範囲選択ツールのいずれかを使っていると上に表示されるf:id:stickBBB:20171207224807p:plainこの三つも覚えておくと便利です。これを一番左にすると新しく範囲を選択した際にそこが新しい選択範囲になり、真ん中だと新しく選択した範囲が古いほうの選択範囲に追加され、一番右だと今選択している範囲から選択した範囲が引かれていきます。選択した範囲はツールバーにあるSelectのDeselectで解除できます。

タイムライン

このタイムラインこそAsepriteがドット絵のアニメーション制作ツールにおいて最強たる所以です。

初めに上のツールバーにあるLayerからNew Layerを押してみましょう。タイムラインの上に増えた横一列、これが「レイヤー」です。上にあるレイヤーほどスプライトの上に表示されます。

次にまた上のツールバーにあるFlameのNew Empty Flameを押してみましょう。タイムラインの横に増えた縦一列、これが「フレーム」です。縦一列のレイヤーをまとめたものが一つのフレームとして表示されます。

ここには何かが描かれているときには白い丸f:id:stickBBB:20171206184241p:plainが表示されます。これは「セル」と言いこれをクリックして出てきた黄色い枠線をドラッグアンドドロップすることで移動させることができます。また黄色い枠線を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は画像の見た目そのままに縦横に引き延ばすイメージです。どちらも画像のサイズは同じですが意味合いが変わってきます。

f:id:stickBBB:20171208010503p:plain

f:id:stickBBB:20171208010446p:plain

 

Q:スプライトシートの色とパレットの色を連動させたい

A:まずパレットの上にあるEdit colorf:id:stickBBB:20171205191213p:plainのロックを解除してカラーサークルで作った色とパレットの色が連動するようにします。そしてツールバーにあるSpriteからColor ModeをIndexedにするとパレットの色と画面の色が連動するようになります。

 

アニメーションについての知識

アニメーションを作るための下準備です。

制作方法

ドット絵に限らずアニメーションの作り方には大きく「逐次描き」と「原画による設計」の2種類に分けられます。

逐次描き(straight Ahead Action)

一つ目のコマを描いてその次に二つ目のコマを描いて...というようにそのまま順番に作っていく描き方です。

f:id:stickBBB:20171205202806g:plain

メリット:順番に描いていくのでアイディアが取り入れやすい、流体や波などといった表現に強い

デメリット:完成形に違和感があった時に修正が困難、最悪の場合やり直し

原画による設計(Pose-to-Pose Action)

重要なコマを先に描いてから間を中割と呼ばれるコマで補完していく描き方です。3DCGに手を出したことがある人ならわかりやすいかも?

f:id:stickBBB:20171205201553g:plain

メリット:全体を先に決めるのでまず失敗しない

デメリット:タイミングを合わせるのがやや難しい、うまくやれないとぎこちない動きになる

 

どちらかがとくに優れているわけではないのでこれらの中から時と場合によって選択することになります。

動きの基本

速度と加速度

あるフレームから次のフレームにドット絵が移動したとき、人はその間にある何もない場所を頭の中で埋めることでドット絵が移動したと認識します。これがアニメーションの基本です。またその移動した距離が長いほど人はドット絵が速く移動したと認識します。

f:id:stickBBB:20171207151508g:plain

また移動する距離を段々と長くしたり段々と短くすることにより加減速を表現することができます

ドット絵特有の縦横の移動と斜め移動の差

下の点はツールを使って描いた円の上をピクセル単位でなぞりながら動いています。

f:id:stickBBB:20171207170408g:plain

斜めの移動になった瞬間に動きが速くなったと感じませんか?これが縦横移動と斜め移動の差です。ドット絵は正方形を最小の単位としているために斜めの移動が縦横の移動の約1.4倍の速度になります。このように縦横の移動と斜め移動が混じった動きで斜め移動の速度の差を意識せずにピクセル単位で動かそうとするとコレジャナイ感が出てしまうので注意が必要です。

より自然な動きに見せるために

規則性

規則に沿った動きがあるとアニメーションの見栄えは良くなります。逆に言うと規則から外れた動きはぎこちなさの原因にもなるので注意が必要です。放物線の例で言えば横向きに等速直線運動、縦向きに等加速度運動といった感じですね。規則性をピクセル単位で表現できるのはドット絵の大きな強みの一つです。ただし先ほどのように斜め移動が混じる場合ではピクセル単位で移動距離を考えると失敗するので気を付けましょう。

両端づめ

先ほど規則性が大事と言いましたが直線的にするとぎこちなくなる場面があります。それが生き物の動きです。生き物らしい動き方にするためには直線的な動きにするのではなく、だんだん加速して、だんだん減速するという動きをさせればよいのです。このような動きを「両端づめ」と言います。振り子のような動きと言えばわかりやすいでしょうか。逆に動きに無機物感を出すためにあえて直線的な動きをさせることもあります。

f:id:stickBBB:20171206010650g:plain

上の作品は手の動きが両端づめになっています。急激に手が下に落ちているのは肩を落としてその力で引っ張っているイメージです。直線的な動きにしないだけでもある程度の生き物らしさが与えられます。

予備動作・慣性

両端づめに加えて生き物の動きにさらにリアリティを与えるのが予備動作と慣性です。両端づめが動作を行うときの動きとするなら予備動作と慣性はその前後に入れられる動きのことになります。

予備動作の具体的な例として

  • 振りむく前に瞬きをする、軽くうつむく
  • バットを振る前に振りかぶ
  • くしゃみをする前に大きく息を吸う

などがあげられます。

f:id:stickBBB:20171206155802g:plain

この猫ジャンプの場合飛ぶ前の溜めと尻尾が予備動作になっています。尻尾が二本あるのは作画ミスではないです。→ お燐 - Google 検索

また慣性の例としては

  • 着地した時に軽く前のめりになってから戻る
  • 走って止まる際に滑って止まる

などですね。

予備動作と慣性と両端づめのどれにも言えるのは生き物は突然動作を行ったり突然止めたりはできないということです。この3つを意識すると生き物らしさがグンと増します。

伸縮

言葉そのまま伸び縮みさせることです。物がなにかとぶつかったときや抵抗を受けたときに形を変形させることでその物体の質感を表現することができます。また生き物に対して誇張表現として使うこともあります。

後追い

後追いは髪の毛やスカートなど何かにくっついた物体が付け根に対して遅れて動く動きのことです。このような物体は付け根から離れるほどに最初はその場にとどまろうとし、少し遅れてから付け根の影響を大きく受けます。

f:id:stickBBB:20171206163527g:plain

こういった動きは動きの最後にブワッと広げるのがミソです。男の目は揺れるものを追う習性があるらしいので男性向けのものなら特に意識したいところですね。

 

とここまで見てきましたが下の動画にもっとわかりやすくて詳しい説明が載っています。時間がある人はそっちを見てください。

www.nicovideo.jp

実際に作ってみる

Asepriteの便利機能を活用しよう

オニオンスキン

タイムラインのここf:id:stickBBB:20171206192820p:plainを押すとオニオンスキンが有効になります。オニオンスキンとは前後のフレームを薄く表示してくれて逐次描き、原画による設計どちらでも非常に頼りになる機能です。

逐次描きの場合まず1枚目を描きオニオンスキンを有効にして2枚目を描き、同様に3枚目、4枚目...と続けていきます。

f:id:stickBBB:20171206203513p:plain

原画による設計の場合重要なコマを先に描き間を補完していきます。間のフレームが多くなったときは逐次描きのように少ないフレームから進めるのではなく真ん中のフレームを埋めていくようにすると失敗しにくいです。また動く対象が生き物の場合速度が一定だと前述の生き物らしい動きが出なくなるので両端づめを意識した動きにしましょう。

f:id:stickBBB:20171206203933p:plain

またオニオンスキンの横にあるこのボタンf:id:stickBBB:20171206205557p:plainからオニオンスキンの設定をいじることができます。Red/Blue Tintにチェックを入れると選択しているフレームより前のフレームは赤色、選択しているフレームよりあとのフレームは青色で表示されるようになります。またOpacityで透過度も変更できます。

f:id:stickBBB:20171206211756p:plain

レイヤー分けで編集個所を減らす

背景や建物といった動かす予定のないものはレイヤーに分けることによって作業量を減らすことができます。

f:id:stickBBB:20171207230904g:plain

このやり方は非常に便利なのでよく使いますがたまに前後関係がややこしくなるときがあります(例:髪の毛の前髪、後ろ髪のレイヤー分け等)。そのようなときは一つのレイヤーで描き切ってしまったほうが速いです。

セルを繋げる

先ほどのレイヤー分けをした際、誰しもがほぼ間違いなく同じ絵を何フレームも表示するという場面に当たります。そのような場合にセルを一つ一つコピーするのではなくまとめてセルを繋げるという方法が二通りあります。一つ目はタイムラインにあるこれf:id:stickBBB:20171207234534p:plainを使うやり方。セルを繋げたいレイヤーのこれf:id:stickBBB:20171207234534p:plainを押してこの状態f:id:stickBBB:20171207235157p:plainにしてからセルをコピーするとなんとこんな風f:id:stickBBB:20171208002502p:plainにつながっています。もう一つのやり方として繋ぎたいセルをまとめって選択し右クリックでLink cellsを選ぶと同じようにつながります。たくさんのセルをまとめるときは後者のやり方で、繋げるフレームを追加したいときは前者の方法になると思います。

1枚のドット絵からアニメーションを作る

アニメーションを作るとはいっても何枚も正攻法でドット絵を打つ必要はありません。1枚だけドット絵を打てばそこからアニメーションを作ることができます。正直これを書くためだけにこの記事を書きました。

レイヤーでパーツごとに動かす(アンテ式)

その名の通りパーツをレイヤーに分けて個別に動かすやり方です。例として作ろうと思ったんですけどうまくいきませんでした。なのでみんなもアンダーテールを買ってどんなやり方なのかを確かめよう!Steamで税込み980円!評価は安心と信頼の圧倒的好評!未プレイ勢はストアへ急げ!プレイする前に絶対にネタバレを食らってはいけない(戒め

store.steampowered.com

切り貼りしながら描き足していく(継ぎ接ぎ式)

こっちが本編です。具体的にはツールの「範囲選択」を利用し一枚の絵をどんどん改造していくやり方になります。今回はこの継ぎ接ぎ式でこれを作成します。ちなみに継ぎ接ぎ式の命名は私です。

f:id:stickBBB:20171207233202g:plain

1.まずは一枚絵を描く

 正直ここが一番大変。今回はアニメーション関連重視なので一枚絵の描き方はそんなもん俺が知りたい割愛します。強いて言うなら好きなドッターの真似をすればいいと思います。でもやっぱりわかんねぇよって人は他のアドベントカレンダーの人をあたってください。

f:id:stickBBB:20171207233319p:plain

 

2.次のフレームに描いた絵をコピーする

 ここでは3つのコピーするやり方があります。一つ目はツールバーのFlameからNew Flameを押すやり方。現在のフレームと同じものが次のフレームにレイヤーごとコピーされます。二つ目はコピーするセルを押し黄色い縁をCtrlを押しながらドラッグアンドドロップするやり方。早くて楽なので使う機会は一番多いと思います。最後が範囲選択でコピーする範囲を選択しCtrl+Cでコピー、次のフレームでCtrl+Vで張り付けるやり方。今回のような場合ではあまり使いませんが何よりほかのファイルから画像を持ってこれるという大きな利点があります。この三つのやり方を覚えておけば問題はないはずです。

f:id:stickBBB:20171207233719p:plain

 

3.コピーした絵を範囲選択でゴリゴリ改造する

 最初に作った一枚絵を短径選択でぶった切ります。そしてぶった切った間を修復していきます。このような荒業ができるのはドット絵ならではですね。アニメーションについての知識でやったことを生かしプレビューで動きを確認しながら動かしていきますがぬるぬるな動きにするコツとしてはフレームが移るごとに極力変化がない場所を作らない、つまり必ずどこかしらを変えるということです。これをやるだけでも見た目が良くなります。

f:id:stickBBB:20171208000345p:plain

 

4.2と3を繰り返し最後のフレームが最初のフレームに戻るように調整する

 そして出来上がった全体のコマがこちら。

f:id:stickBBB:20171208000630p:plain

 

とまあこんな感じです。僕の作ってるアニメーションはもっぱらこのやり方になります。メリットとしては何枚も続けて絵を描けるほどの画力がないって人でも同じようなクオリティで何フレームもあるアニメーションを作ることができるところですね。

作った作品を保存する

作った作品はしっかり保存をしましょう。作品を保存するまでがアニメーション作りです。基本的にはツールバーにある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)

f:id:stickBBB:20170801013610p:plain f:id:stickBBB:20170801013702p:plain

f:id:stickBBB:20170801013710p:plain f:id:stickBBB:20170801013717p:plain

 

お燐 それは画面の場所を指定するのにLove2Dでは座標平面が使われているからなんだよ。

お空 数学にも座標平面があったよね。アレみたいな感じ?

お燐 そんな感じそんな感じ。ただ数学の座標平面とは違って左上を基準にして右向きにx軸、下向きにy軸が伸びているんだ。ちなみに文字や画像も左上が基準になっているよ。例えばx座標を30、y座標を10にするとこんな感じになるんだね。

f:id:stickBBB:20170726191843p:plain

お空 次はコールバック関数だね。

コールバック関数

お燐 コールバック関数はその名の通り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)だけにしてごらん?

お空 ありゃ?何も表示されないね。

f:id:stickBBB:20170801023948p:plain

お燐 こんな風にコールバック関数の中に書かれていないと呼び出されないから表示がされないんだね。

tabキーとスペースキー

お空 あとコールバック関数の中の文の前に微妙なスペースがあるけどこれはなんなの?

お燐 これは関数の内容がfunctionからendまでの一連のブロックの中の話ですよってことを表しているんだ。このスペースがあるとVSCodeが自動でコールバック関数の始まりと終わりをつないでくれるんだよ。

f:id:stickBBB:20170801152815p:plain

ちなみにこのスペースはtabキーで表す方法とスペースキーで表す方法があるんだ。

お空 tabキーはキーボードの左上あたりにあるやつだね。

お燐 そのtabキーは半角スペース4文字分のスペースを表しているんだけど「見えない一つの文字」って扱いなんだ。だから消すときも一度のBack Spaceで消せちゃうしファイルを少ない容量で済ませることができてすっごい便利。

お空 ほんとだ!でもなんでこんなに便利なのにまだスペースキーを使う人がいるの?

お燐 tabキーは開発環境なんかで表示が違うことがあるんだよ。でもそれは大規模な開発のときなんかの話であってあたいは個人製作レベルなら少ない容量でサクサク動かすことを優先した方がいいと思う。ただし段落の初めでずらす以外の目的では下手にtabキーは使わないことだね。

お空 よくわかんないけどtabキーを使えばいいってことね。

いったんおしまい

お燐 さっき画像の表示の仕方を教えるって言ったけど長くなっちゃったから次に持越ししようか。

お空 今回だけでも結構いろんなことが分かったからね。

  1. Love2Dには「関数」と「コールバック関数」というモジュールってものがある
  2. 関数の後ろにある括弧には引数を入れて細かい設定をする
  3. Love2Dの画面の位置は座標で表現する
  4. コールバック関数は中に書かれたものをまとめて呼び出すことができる
  5. コールバック関数の中の文はtabキーでずらして見やすくする

とこんなところかな。

お燐 次回は画像を表示したり音楽を流したり日本語を表示できるようにしたりってところを見ていくよ。外部からのデータの読み込みとその使い方がテーマだね。

2. ハロー・ワールド

事前準備

お燐 さあ早速ゲームを作ろう!って言いたいところだけどまず先に必要な設定を変えておこう。

お空 まずは何をすればいいんだ?

お燐 そんなに量はないからパパっと進めるよ!

拡張子を表示する

お燐 まず拡張子が見えるようにしよう

お空 拡張子って何?

お燐 拡張子っていうのは画像とか音楽とか色々あるファイルの種類を表すものだよ。例えばで言うと

  • 画像... jpegpngbmp、gif
  • 音声... mp3、wav
  • 動画... mp4、wmv、avi
  • 文章... txt、html、pdf

なんかだね。これはほんの一部で他にもあるよ。それじゃあ拡張子を表示する方法を見ていこう。まずは適当なフォルダを開いてみて。

お空 開いた!

f:id:stickBBB:20170610151538p:plain

お燐 そうしたら上のほうにあるファイル、ホーム、共有、表示ってあるところの表示を押してみて。右のほうに表示/非表示ってところがあるからそこにあるファイル名拡張子ってところにチェックを入れてごらん?

お空 できた!拡張子?が表示されてるね!

f:id:stickBBB:20170610151556p:plain

VSCodeもちょっといじろう

お燐 次はVSCodeの保存の設定をしよう。まずVSCodeを開いたら左上のファイルってところから自動保存にチェックを入れてみよう。

お空 これはつまり勝手に保存してくれるってこと?

お燐 そうだね。一回一回保存する方法もあるけど最初の内は自動保存のほうが安全だからね。それから画面の配色もいじってみよう。また左上のファイルから基本設定、配色テーマって順番で選んでみて?

お空 上から色々出てきたよ。

お燐 そこから配色を変えることができるよ。プログラミングは画面を見続ける時間が長いから自分の目にあった配色を選ぼうね。ちなみにディスプレイを見るときには黒い背景に白い文字が目にいいって言われているよ。

お空 ちなみにお燐のお勧めはどれ?

お燐 あたいはDark (Visual Studio)がおすすめかな。黒い背景に白い文字だし必要最小限だけ色が付いてるからシンプルな画面になるところが好きだね。

 ↓ デフォルト

f:id:stickBBB:20170801153004p:plain

 ↓ Dark (Visual Studio)

f:id:stickBBB:20170801152815p:plain

Love2Dに文字を表示してみよう

お燐 ここまで準備ができたらいよいよ本番のゲームを作ろう!

お空 やっと本番だー!

お燐 まずはデスクトップ画面で右クリック、下のほうにある新規作成ってところからフォルダーってところを押してね。

お空 新しいフォルダーってフォルダーができたよ。

f:id:stickBBB:20170611101357p:plain

お燐 そうしたらその新しいフォルダーをダブルクリックで開いて。その中でまた右クリックの新規作成から今度はテキストドキュメントを作るよ。ここで重要なことはファイルの名前を拡張子も一緒に変えて「 main.lua 」にすること。「拡張子を変更するとファイルが使えなくなる可能性があります」って表示されるけど今回も無視して大丈夫だよ。種類がLUAファイルになっていることを確認しよう。ここでさっきみたいに拡張子を表示していないとファイルの名前が「 main.lua.txt 」になっちゃってうまくいかなくなる原因になるから気を付けようね。

f:id:stickBBB:20170611101601p:plain

次にテキストエディタを開いて今作った新しいフォルダーを開こう。VSCodeなら左上のファイルからフォルダーを開くを押してデスクトップから新しいフォルダーを押せば開けるよ。

お空 出てきたmain.luaってところを押してみたけど何も書かれてないよ。

f:id:stickBBB:20170611105804p:plain

お燐 大丈夫。それが正しい状態だからね。ここでLove2Dの画面に「Hello World!」って表示されるコードを作ってみよう。この文章をコピペでも構わないからそのファイルに書いてみて?

function love.draw()
    love.graphics.print('Hello World!', 400, 300)
end

お空 できたよ!

f:id:stickBBB:20170801152328p:plain

お燐 そうしたらデスクトップに戻ってさっき作った新しいフォルダーをmain.luaファイルごとlove.exeかまたはlove.exeのショートカットにドラッグアンドドロップしてごらん?

お空 よくわかんないけどできた!

f:id:stickBBB:20170611110943p:plain

お燐 おめでとう。ここはお空がこれからゲームを作る第一歩になる世界だよ。

お空 なんか感動的...!

お燐 ちなみにこのHello Worldプログラマーなら誰もが最初に作る有名なプログラムでLove2Dの公式Wikiにも最初に作るプログラムとして推奨されているんだ。

Main Page (日本語) - LOVE

今回覚えるべきこと

お空 いろいろ作ることはできたけど結局みんなお燐にやってもらったからなんかよくわかんないな...

お燐 大丈夫。さっきお空は

  1. フォルダーを作る
  2. その中にmain.luaファイルを作る
  3. そのmain.luaが入ったフォルダーをLove2Dにドラッグアンドドロップする

っていうLove2Dでゲームを作るときの基本中の基本を押さえることができたんだよ。この流れはゲームが複雑になっていってもずっと変わらないんだ。

お空 本当にこれだけでいいの?Love2Dは思ってたより単純でわかりやすいんだね。

お燐 そうそう、それにmain.luaを理解すればゲーム作りで出来ることが一気に増えるんだよ。分かってしまえば簡単だから一緒に見ていこうね。

1. Love2Dでゲーム作りを始めよう

パソコンがあったらゲーム作り

~ある日の地霊殿

お空 お燐見て見て!

お燐 どしたの?

お空 守屋神社の人たちからいつものお仕事のお礼にPCを譲ってもらったんだ!だからこれを使ってゲームを作ろうと思ってるの。だけど色々揃えなきゃいけないかもだしお金もかかるかもしれないし不安で...

お燐 ゲームを作りたいのか~。ならLove2Dがもってこいだね!

お空 Love2D?

お燐 そう、個人レベルでゲームを作るなら世界で一番簡単にできちゃう上に無料で使える凄いゲームエンジンなんだよ。Love2Dのことならあたいにおまかせさ!

お空 そんなに便利なものがあったなんて知らなかったよ...

お燐 Love2Dは最近有名になってきたからあまり知られていないのも無理はないね。Love2Dを理解すれば他のゲームエンジンにも応用が利くようになるからゲーム作りの初心者が最初に使うツールとしてもお勧めだよ!

お空 そうなんだ!それじゃさっそく始めよ~

お燐 お~

環境を整える

お空 ところでそのLove2Dでゲームを作るにはまず何をしなきゃいけないの?

お燐 そうだね、まずはそのパソコンに2つインストールしなきゃいけないものがあるんだ。具体的には

  1. Love2D
  2. テキストエディタ

の2つだよ。それぞれの関係については後で説明するからまずはLove2Dからパソコンに入れてみよう。

お空 お~

1. Love2D

ページ

LÖVE - Free 2D Game Engine

お燐 ここから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ゲームを作れる「めっちゃすごいやつ」だよ。無料で使えて、規約を守れば自由に改変してもいいし、WindowsMac OS XLinuxAndroidiOSで使えるんだ。

とこんな感じ。

お空 よくわからないけどめっちゃすごいやつってことね!

お燐 まあ最初の認識はそんなものでいいんじゃないかな。次にその下のDownload LÖVE X.XX.X(最新のバージョン)って書いてあるところからLove2Dをダウンロードしていくよ。

ダウンロード

お空 いよいよダウンロードだね!押すところがいっぱいあるけどどれを選べばいいのかな?

f:id:stickBBB:20170608122147p:plain

お燐 まずはお空のパソコンの種類を確認しよう。お空のパソコンはWindowsみたいだね。そうしたらスタートメニューから設定を押してシステム、バージョン情報と進むとその中にシステムの種類って項目があるからそこを確認してみて。大方32bitか64bitのはずだから。

お空 64ビットオペレーティングシステムって書いてあるよ!

お燐 オッケー!もしこれ以外の機種だったとしても対応したものを見つければ大丈夫だからね。そうしたら64ビットだから64-bit installerか64-bit zipperから選ぶことになるんだけど、今回は64-bit installerにしておこう。

お空 インストール版とZIP版って何が違うの?

お燐 インストール版は構築なんかを勝手にやってくれるのに対してZIP版は設定を自分で色々やらなきゃいけないんだ。パソコンの扱いに自信がある人はZIP版でいいと思うけどとりあえずならインストール版を選んでおくことをお勧めするよ。

お空 わかった。押してみたらこんな画面が出てきたよ?

f:id:stickBBB:20170608124206p:plain

お燐 そうしたらそこの保存を押してね。保存ができたらダウンロードにこんなものが入っているはずだよ。

f:id:stickBBB:20170614083432p:plain

これをダブルクリックして実行をしよう。セキュリティスキャンが発動するかもしれないけど危険なものじゃないから無視して大丈夫だよ。

お空 こんなのが出てきたね。

f:id:stickBBB:20170608124546p:plain

お燐 そうしたら次へを押してライセンス契約書に同意するを押すよ。そしたらインストール先をデスクトップに指定しよう。「インストール先 フォルダ」にある参照を押して保存先をデスクトップに変更してね。(画像を押すと拡大して見れるよ)

f:id:stickBBB:20170608130003p:plainf:id:stickBBB:20170608130006p:plainf:id:stickBBB:20170608130009p:plain

次へを押すとスタートメニューのショートカット作成になるけどスタートメニューからLove2Dはほとんど使わないからショートカットを作成しないでもいいと思うよ。ここまで出来たらインストールを押して完了ね。

お空 デスクトップになんか出てきたよ!

f:id:stickBBB:20170608135331p:plain

お燐 そのフォルダーを開いてそこからlove.exeをダブルクリックで実行してみよう。種類がアプリケーションってなってるやつだね。こんな画面になってたらインストール成功だよ。

f:id:stickBBB:20170608135905p:plain

お空 この画面は何...?

お燐 見にくいけど真ん中のキャラクターの下にNO GAMEって書いてあるでしょ?つまりはゲームが読み込まれていないよってこと。これからゲームを作ってここに読み込ませていくんだ。ここまでできればとりあえずLove2Dのインストールは完了だね。

お空 わーい!

お燐 このアプリケーションはよく使うことになるからショートカットを作っておこう。まずアプリの場所を一度左クリックで選択、そうしたら右クリックでショートカットの作成で作れるよ。そのままショートカットはドラッグアンドドロップでデスクトップに移動しておこう。

2. テキストエディタ

テキストエディタって何?

お燐 次にテキストエディタだね。テキストエディタってのはいろんな文章を作成できるツールなんだ。これでゲームを作ってLove2Dに読み込ませるんだよ。

お空 これも公式ページからダウンロードするの?

お燐 そうなんだけど、テキストエディタはLove2Dと違って固有名詞じゃないんだ。世の中にはいろんなテキストエディタが出されていてそこからお空は自分好みのものを見つけることができるの。

お空 そんなこと言われてもどんなテキストエディタがあるのかすら知らないしどれがいいのかなんてわからないよ...

お燐 そんなお空のためにかわいいお燐ちゃんがおすすめのテキストエディタを選んであげました!

お空 やったー!

お燐 今日お勧めしておくのはVisual Studio Code略してVSCodeだよ。

お空 それも早速入れちゃおっか。

Visual Studio Code

Visual Studio Code - Code Editing. Redefined

お燐 このサイトからダウンロードするんだけど今回はLove2Dと違って真ん中左にアクセスしているOS(WindowsとかMacとかってこと)のダウンロードボタンが表示されるからそこを選べば大丈夫だね!

f:id:stickBBB:20170614083713p:plain

お空 流石はマイクロソフト...!

お燐 これもさっきと同じように保存してから実行を押していくよ。

f:id:stickBBB:20170610123217p:plain

今回はいじる点も特にないから次へを押してライセンスに同意、インストール先もそのままでオッケー、プログラムグループの指定もそのままだね。追加タスクの選択のところでデスクトップにアイコンを作成するにだけチェックを入れておこう。

f:id:stickBBB:20170610123932p:plain

ここまで出来たらインストールを開始してね。

お空 できた!

お燐 それじゃあ一度開いてごらん?

f:id:stickBBB:20170610124816p:plain

お空 なんかゲーム作りって感じがしてきたね...そわそわしてきた。

お燐 ちなみにほかのテキストエディタだとAtomとかBracketsSublime Text、Vimなんかもお勧めだから余裕があったら調べてみてね。

準備完了

お燐 これで必要最低限入れなきゃいけないものを入れることができたね。

お空 やったー!

お燐 次は設定を少しだけいじってから実際にLove2Dを動かしてみるよ。

お空 頑張るぞー!

お燐 おー!

メインページ

ゲーム開発シリーズ

Love2DでのLuaによるプログラミングとかゲーム作り全般を広く浅く書いてます

やってることをそのまま真似すればゲームの作り方を大体理解できるはず

ドット絵指南シリーズ

使用しているツールはAseprite

他のツールでも言えることが書かれていることが多いと思う

bosukedot.hatenablog.com