2018.09.07Asepriteでドット絵の歩行アニメをつくってみました。スライムみたいな生物が、ぴょこぴょこしながらついてきます。「背景」と「キャラクター」など、ドット絵で前後に重なるものをつくるときはレイヤーを分けると便利です。いうわけで今回は、Asepriteのレイヤーの使い方についてお届けします。使う機能を中心に紹介していますので、「レイヤーを使うのは初めて」という方もよかったら参考にしてみてください。新規レイヤーのつくりかたレイヤーを削除するレイヤーを複製するレイヤー名をつけるレイヤーの順番を入れ替える【便利な機能】レイヤーの自動選択パネルの表示位置を変えるおしまいにレイヤーを使うと何が便利?レイヤーを使うメリット最初に、レイヤーを使うメリットからみていきます。この絵でしたら、大きくわけて2つのレイヤーからできています。▼【2】背景のレイヤーこの2つを重ねると、地面の上に人がいるようになります。前後を入れ替えると、草むらにいるようになります。背景を非表示にして、人物だけを表示させるといったこともできます。レイヤーを分けておくと、このように前後を入れ替えたり、パーツごとに表示・非表示を切り替えるといったことがかんたんにできます。背景と人物を別々に動かすといった場合も、レイヤーを分けておくと便利です。ちなみに、レイヤーの分け方やレイヤーの数は自由です。今回は「人物」「背景」としていますが、人物ごとにレイヤーをつくるなど、レイヤーを細かく分けても大丈夫です。レイヤーのしくみレイヤーは、上にあるものほど前に表示されます。このドット絵でしたら、「人物のレイヤー」が「背景のレイヤー」の上にあるので、人物が前に表示されているわけですね。「party」が人物のレイヤー、「kusa」が背景のレイヤーです。このように、レイヤーは上にあるものほど前に表示されます。レイヤーの使い方をみていきましょう。使うレイヤーの操作Aespriteでレイヤーを使うときは、次の方法でレイヤーを表示してから行います。1.メニューバーの「View」から「Timeline」をクリックします。2.すると、画面の下部にレイヤーパネルが表示されます。レイヤーの操作はこの部分で行っていきます。新規レイヤーのつくりかたレイヤー1の上に新しいレイヤーをつくってみます。1」を右クリックします。layer」をクリックします。レイヤーを削除する間違えてレイヤーを作ってしまったときは、削除することができます。1.削除したいレイヤー名をクリックします。Layer」をクリックします。3.レイヤーが削除されました。レイヤーを複製するまた、レイヤーを複製することもできます。1.複製したいレイヤーをクリックします。2.メニューが開きますので「Duplicate」をクリックします。3.もとのレイヤーの上に、複製したレイヤーができました。レイヤー名をつけるレイヤーには好きな名前をつけることができます。1.名前を変えたいレイヤー名をダブルクリックします。2.ダイアログが出ますので、「Name」のところを変更します。ここでは背景「haikei」としてみます。入力したら「×」ボタンをクリックして、ダイアログを消します。3.レイヤー名が反映されました。レイヤー名は、どんなパーツが描かれているかがわかるようにしておくと便利です。スポンサーリンクレイヤーの順番を入れ替えるレイヤーは順番を入れ替えることもできます。ここでは、このドット絵のレイヤーの順番を入れ替えてみます。現在はこのようなレイヤー構成になっています。上にある「party」が人物のレイヤー、下にある「kusa」が背景のレイヤーです。ここでは順序を変えて、背景の「kusa」が前にくるようにしてみます。1.移動させたいレイヤー名をクリックします。すると、黄色い枠が表示されます。2.黄色い枠が表示されたら、枠の境い目をクリックしてそのままドラッグすると、レイヤーを移動させることができます。今回はいちばん下にもっていきたいので、いちばん下までドラッグします。3.レイヤーがいちばん下に移動しました。移動するところを動画にすると、こんな感じです。これで背景が前にきて、人物が後ろに表示されるようになりました。「黄色い枠の境い目」というのがわかりにくい部分かと思います。境い目にマウスのポインタをあてると、アイコンの表示が変わります。それを目安にして、クリック&ドラッグするとうまくいきます。複数のレイヤーがある時や、レイヤー数が多い時は「レイヤーの自動選択」を有効にしておくと便利です。Tool」を選択します。Layer」という項目が出ますので、そこにチェックを入れます。3.これで、たとえば背景の一部をクリックすると自動で「背景のレイヤー(ここでは「kusa」という名前)」が選択されます。人物のどこかをクリックすれば「人物のレイヤー」に切り替わります。レイヤーパレットを使わなくてもダイレクトにレイヤーの切り替えができるので、とても便利です。パネルの表示位置を変えるデフォルトでは、画面下に表示されているレイヤーパネルですが、画面の右や左に表示することもできます。1.赤で囲んだ部分をクリックします。2.すると、ダイアログが表示され、矢印で指した部分でパネルの位置を変えることができます。【Left】パネルが左側に表示されます。【Right】パネルが右側に表示されます。【Bottom】パネルが下側に表示されます。おしまいに今回は、Aespriteのレイヤーの使い方についてでした。レイヤーを使うと、いろいろと作業がしやすくなります。よかったら参考にしてみてくださいね。ドット絵TwitterFacebookはてブPocketLINEコピーゆずゆをフォローするこの記事を書いた人ゆずゆ読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。