cellsを選ぶと同じようにつながります。たくさんのセルをまとめるときは後者のやり方で、繋げるフレームを追加したいときは前者の方法になると思います。1枚のドット絵からアニメーションを作るアニメーションを作るとはいっても何枚も正攻法でドット絵を打つ必要はありません。1枚だけドット絵を打てばそこからアニメーションを作ることができます。これを書くためだけにこの記事を書きました。レイヤーでパーツごとに動かす(アンテ式)その名の通りパーツをレイヤーに分けて個別に動かすやり方です。例として作ろうと思ったんですけどうまくいきませんでした。みんなもアンダーテールを買ってどんなやり方なのかを確かめよう!Steamで税込み980円!評価は安心と信頼の圧倒的好評!未プレイ勢はストアへ急げ!プレイする前に絶対にネタバレを食らってはいけない(戒めstore.steampowered.com切り貼りしながら描き足していく(継ぎ接ぎ式)こっちが本編です。具体的にはツールの「範囲選択」を利用し一枚の絵をどんどん改造していくやり方になります。今回はこの継ぎ接ぎ式でこれを作成します。ちなみに継ぎ接ぎ式の命名は私です。1.まずは一枚絵を描く正直ここが一番大変。今回はアニメーション関連重視なので一枚絵の描き方はそんなもん俺が知りたい割愛します。言うなら好きなドッターの真似をすればいいと思います。わかんねぇよって人は他のアドベントカレンダーの人をあたってください。2.次のフレームに描いた絵をコピーするここでは3つのコピーするやり方があります。Flameを押すやり方。現在のフレームと同じものが次のフレームにレイヤーごとコピーされます。二つ目はコピーするセルを押し黄色い縁をCtrlを押しながらドラッグアンドドロップするやり方。早くて楽なので使う機会は一番多いと思います。最後が範囲選択でコピーする範囲を選択しCtrl+Cでコピー、次のフレームでCtrl+Vで張り付けるやり方。今回のような場合ではあまり使いませんが何よりほかのファイルから画像を持ってこれるという大きな利点があります。この三つのやり方を覚えておけば問題はないはずです。3.コピーした絵を範囲選択でゴリゴリ改造する最初に作った一枚絵を短径選択でぶった切ります。ぶった切った間を修復していきます。このような荒業ができるのはドット絵ならではですね。アニメーションについての知識でやったことを生かしプレビューで動きを確認しながら動かしていきますがぬるぬるな動きにするコツとしてはフレームが移るごとに極力変化がない場所を作らない、つまり必ずどこかしらを変えるということです。これをやるだけでも見た目が良くなります。4.2と3を繰り返し最後のフレームが最初のフレームに戻るように調整するそして出来上がった全体のコマがこちら。とまあこんな感じです。僕の作ってるアニメーションはもっぱらこのやり方になります。メリットとしては何枚も続けて絵を描けるほどの画力がないって人でも同じようなクオリティで何フレームもあるアニメーションを作ることができるところですね。作った作品を保存する作った作品はしっかり保存をしましょう。作品を保存するまでがアニメーション作りです。基本的にはツールバーにあるFileのSaveから保存先を指定し保存形式と名前を選択して保存することになります。保存形式がよく分からない人は画像ならPNG形式、アニメーションならGIF形式にしておきましょう。ちなみにドット絵をJPEGで保存することは丹精込めて作った料理をドブ沼に叩きつけるが如き行為なので絶対にやってはいけません。Twitterゲーム作り等をしている人でフレームごとに画像として出力したい場合やアニメーションを一枚のスプライトシートとして出力したい人もいると思います。前者の場合アニメーションを作った状態でFileのSaveから画像系の保存形式を選んで保存すると質問が出てくるのでAgreeを選ぶとそれぞれのフレームを画像形式で出力してくれます。後者の場合はツールバーのファイルからExportを選んで画像形式を選択するとすべてのフレームが横につながった状態で一枚の画像として出力されています。ツイッター等にあげる際には適切なサイズに拡大することで画質が向上するので積極的に拡大していきましょう。画像の拡大のやり方はAsepriteの基本部分のその他の機能で触れていますので確認してください。ツイッターは縦か横のサイズが256~512px前後に収まっているとタイムラインに綺麗に表示されます。これ以上大きかったり小さかったりすると引き延ばされたり、逆に縮小されたりで本来の見た目よりもだいぶ悪くなってしまうので注意です。最後に書きたいことを書きたくっていたらめちゃめちゃ長くなってましたどうしてこうなった。結果的に僕の脳内でうにゃうにゃしていたものが言語化されたのはよかったと思います。何かの間違いでこの記事を見てAsepriteを使い始めましたって人は僕に教えてください泣いて喜びます。WorldにはLove2Dの基本が詰まっているからそれを使って見ていこう。Worldはこんなコードだったよね。これもそうなんだけどLove2Dで何かをするときには主に「loveモジュール」ってものを使っていくんだよ。loveモジュールはLove2Dに備え付けられてる便利機能みたいなものだね。loveモジュールには二つの種類に分けられるよ。それが「関数」と「コールバック関数」なんだ。Worldのコードに色を付けて分けたからそれを見てごらん。コールバック関数ってのは紫色のところのことで関数ってのは茶色のところのことだよ。前回のコードもモジュールを組み合わせて作られていたんだね!でもどれが関数でどれがコールバック関数かは分かったけどやっぱり仕組みが分かんないや...。ひとつひとつ説明していくからまずは普通の関数の方から見ていこうか。Love2Dにはいろんな処理をしてくれる関数が用意されているんだ。さっきの例で言うと「love.graphics.print関数」っていう関数が文字を画面に表示させているんだね。実際に文字を表示したり音楽を流したりっていう具体的に何かをするのは全部この関数が行うんだよ。!この関数の後ろにある括弧に入れるものを引数(ひきすう)と言うんだ。引数の内容を変えることによってその関数の細かい設定をするんだね。関数によって必要な因数の数と種類も決められているんだ。後に半角スペースを一つ入れると見やすくなるね。引数が必要ないときはなにもいれないで空欄にするんだ。括弧は無くさないからここは注意しようね。引数を変えれば画面の表示が変わるんだよね。前回から使ってるlove.graphics.print関数の引数はこんな感じだよ。y座標)表示させる文字のところはデフォルトのフォントの関係で今は英語しか使えないから気を付けてね。文字の部分を変えると画面に表示される文字が、数字の部分をいじると画面の表示される場所が変わったよ。x座標を変えると左右に移動してy座標を変えると上下に移動したね。それは画面の場所を指定するのにLove2Dでは座標平面が使われているからなんだよ。数学にも座標平面があったよね。そんな感じそんな感じ。数学の座標平面とは違って左上を基準にして右向きにx軸、下向きにy軸が伸びているんだ。ちなみに文字や画像も左上が基準になっているよ。x座標を30、y座標を10にするとこんな感じになるんだね。次はコールバック関数だね。Backすなわち呼び出す関数だよ。さっきの関数と違ってfunctionから始まってendで終わるのが特徴だね。このfunctionからendまでの一連のコードをコールバック関数の種類によって呼び出す場所とかタイミングがそれぞれ違うんだ。Worldで使ったlove.draw関数は中に書かれていることを画面上に表示させているんだ。呼び出すって言うのは「コールバック関数の中に書かれた内容を実際に使えるようにする」ってことなんだよ。逆に言うとlove.draw関数の中に書かれていないものは画面には表示されないんだ。ありゃ?何も表示されないね。こんな風にコールバック関数の中に書かれていないと呼び出されないから表示がされないんだね。これは関数の内容がfunctionからendまでの一連のブロックの中の話ですよってことを表しているんだ。このスペースがあるとVSCodeが自動でコールバック関数の始まりと終わりをつないでくれるんだよ。ちなみにこのスペースはtabキーで表す方法とスペースキーで表す方法があるんだ。tabキーはキーボードの左上あたりにあるやつだね。そのtabキーは半角スペース4文字分のスペースを表しているんだけど「見えない一つの文字」って扱いなんだ。Spaceで消せちゃうしファイルを少ない容量で済ませることができてすっごい便利。tabキーは開発環境なんかで表示が違うことがあるんだよ。それは大規模な開発のときなんかの話であってあたいは個人製作レベルなら少ない容量でサクサク動かすことを優先した方がいいと思う。段落の初めでずらす以外の目的では下手にtabキーは使わないことだね。わかんないけどtabキーを使えばいいってことね。さっき画像の表示の仕方を教えるって言ったけど長くなっちゃったから次に持越ししようか。今回だけでも結構いろんなことが分かったからね。Love2Dには「関数」と「コールバック関数」というモジュールってものがある関数の後ろにある括弧には引数を入れて細かい設定をするLove2Dの画面の位置は座標で表現するコールバック関数は中に書かれたものをまとめて呼び出すことができるコールバック関数の中の文はtabキーでずらして見やすくするとこんなところかな。次回は画像を表示したり音楽を流したり日本語を表示できるようにしたりってところを見ていくよ。外部からのデータの読み込みとその使い方がテーマだね。さあ早速ゲームを作ろう!って言いたいところだけどまず先に必要な設定を変えておこう。拡張子っていうのは画像とか音楽とか色々あるファイルの種類を表すものだよ。txt、html、pdfなんかだね。これはほんの一部で他にもあるよ。それじゃあ拡張子を表示する方法を見ていこう。適当なフォルダを開いてみて。したら上のほうにあるファイル、ホーム、共有、表示ってあるところの表示を押してみて。次はVSCodeの保存の設定をしよう。VSCodeを開いたら左上のファイルってところから自動保存にチェックを入れてみよう。一回一回保存する方法もあるけど最初の内は自動保存のほうが安全だからね。それから画面の配色もいじってみよう。上から色々出てきたよ。そこから配色を変えることができるよ。プログラミングは画面を見続ける時間が長いから自分の目にあった配色を選ぼうね。ちなみにディスプレイを見るときには黒い背景に白い文字が目にいいって言われているよ。Studio)がおすすめかな。黒い背景に白い文字だし必要最小限だけ色が付いてるからシンプルな画面になるところが好きだね。デスクトップ画面で右クリック、下のほうにある新規作成ってところからフォルダーってところを押してね。新しいフォルダーってフォルダーができたよ。したらその新しいフォルダーをダブルクリックで開いて。その中でまた右クリックの新規作成から今度はテキストドキュメントを作るよ。「拡張子を変更するとファイルが使えなくなる可能性があります」って表示されるけど今回も無視して大丈夫だよ。種類がLUAファイルになっていることを確認しよう。」になっちゃってうまくいかなくなる原因になるから気を付けようね。次にテキストエディタを開いて今作った新しいフォルダーを開こう。VSCodeなら左上のファイルからフォルダーを開くを押してデスクトップから新しいフォルダーを押せば開けるよ。出てきたmain.luaってところを押してみたけど何も書かれてないよ。それが正しい状態だからね。World!」って表示されるコードを作ってみよう。ここはお空がこれからゲームを作る第一歩になる世界だよ。Worldはプログラマーなら誰もが最初に作る有名なプログラムでLove2Dの公式Wikiにも最初に作るプログラムとして推奨されているんだ。さっきお空はフォルダーを作るその中にmain.luaファイルを作るそのmain.luaが入ったフォルダーをLove2DにドラッグアンドドロップするっていうLove2Dでゲームを作るときの基本中の基本を押さえることができたんだよ。この流れはゲームが複雑になっていってもずっと変わらないんだ。本当にこれだけでいいの?Love2Dは思ってたより単純でわかりやすいんだね。そうそう、それにmain.luaを理解すればゲーム作りで出来ることが一気に増えるんだよ。分かってしまえば簡単だから一緒に見ていこうね。守屋神社の人たちからいつものお仕事のお礼にPCを譲ってもらったんだ!だからこれを使ってゲームを作ろうと思ってるの。ゲームを作りたいのか~。個人レベルでゲームを作るなら世界で一番簡単にできちゃう上に無料で使える凄いゲームエンジンなんだよ。Love2Dは最近有名になってきたからあまり知られていないのも無理はないね。そのパソコンに2つインストールしなきゃいけないものがあるんだ。具体的にはLove2Dテキストエディタの2つだよ。それぞれの関係については後で説明するからまずはLove2Dからパソコンに入れてみよう。ここからLove2Dのページに飛んでみてごらん。大丈夫、Love2DとLÖVEは同じものだと思っていいよ。検索をかけたときにLove2DのほうがLÖVEよりも引っ掛かりやすいからこれからはLove2Dで統一するね。一つずつゆっくり見ていこう。iOS.ページの一番上にある文章だね。日本語だとやあみんな!Love2DはLuaで2Dゲームを作れる「めっちゃすごいやつ」だよ。X、Linux、Android、iOSで使えるんだ。まあ最初の認識はそんなものでいいんじゃないかな。X.XX.X(最新のバージョン)って書いてあるところからLove2Dをダウンロードしていくよ。お空のパソコンの種類を確認しよう。お空のパソコンはWindowsみたいだね。したらスタートメニューから設定を押してシステム、バージョン情報と進むとその中にシステムの種類って項目があるからそこを確認してみて。32bitか64bitのはずだから。オッケー!もしこれ以外の機種だったとしても対応したものを見つければ大丈夫だからね。installerにしておこう。インストール版は構築なんかを勝手にやってくれるのに対してZIP版は設定を自分で色々やらなきゃいけないんだ。パソコンの扱いに自信がある人はZIP版でいいと思うけどとりあえずならインストール版を選んでおくことをお勧めするよ。したらそこの保存を押してね。保存ができたらダウンロードにこんなものが入っているはずだよ。これをダブルクリックして実行をしよう。セキュリティスキャンが発動するかもしれないけど危険なものじゃないから無視して大丈夫だよ。こんなのが出てきたね。したら次へを押してライセンス契約書に同意するを押すよ。したらインストール先をデスクトップに指定しよう。フォルダ」にある参照を押して保存先をデスクトップに変更してね。次へを押すとスタートメニューのショートカット作成になるけどスタートメニューからLove2Dはほとんど使わないからショートカットを作成しないでもいいと思うよ。ここまで出来たらインストールを押して完了ね。そのフォルダーを開いてそこからlove.exeをダブルクリックで実行してみよう。種類がアプリケーションってなってるやつだね。こんな画面になってたらインストール成功だよ。GAMEって書いてあるでしょ?つまりはゲームが読み込まれていないよってこと。これからゲームを作ってここに読み込ませていくんだ。ここまでできればとりあえずLove2Dのインストールは完了だね。このアプリケーションはよく使うことになるからショートカットを作っておこう。アプリの場所を一度左クリックで選択、そうしたら右クリックでショートカットの作成で作れるよ。そのままショートカットはドラッグアンドドロップでデスクトップに移動しておこう。次にテキストエディタだね。テキストエディタってのはいろんな文章を作成できるツールなんだ。これでゲームを作ってLove2Dに読み込ませるんだよ。テキストエディタはLove2Dと違って固有名詞じゃないんだ。世の中にはいろんなテキストエディタが出されていてそこからお空は自分好みのものを見つけることができるの。Code略してVSCodeだよ。それも早速入れちゃおっか。これもさっきと同じように保存してから実行を押していくよ。今回はいじる点も特にないから次へを押してライセンスに同意、インストール先もそのままでオッケー、プログラムグループの指定もそのままだね。追加タスクの選択のところでデスクトップにアイコンを作成するにだけチェックを入れておこう。ここまで出来たらインストールを開始してね。なんかゲーム作りって感じがしてきたね...そわそわしてきた。Text、Vimなんかもお勧めだから余裕があったら調べてみてね。これで必要最低限入れなきゃいけないものを入れることができたね。次は設定を少しだけいじってから実際にLove2Dを動かしてみるよ。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。