Asepriteでドット絵を描こう

スマホアプリなどを作ろうと思った時にドット絵を描くことがあります。僕はSTEAMで購入したAsepriteというソフトで描いています。

起動画面です。今回は48×48ピクセルのタイルを描こうと思います。実際にこのピクセルで描くと細かくて大変なので、16×16ピクセルで描いて3倍に拡大して製作します。拡大されたドットで表示されるのも意外とかわいくて好きです。

その前に設定を確認する必要があるんです。これをやらないと時間の無駄になってしまうかなぁなんて

まずカラーモードをIndexedにしないと、色変えができません。どういうことかというと、例えば暗い赤で塗ってしまった箇所をもっと明るくすればよかったなんて時に、またバケツツールで塗りつぶしていくのではなくて、パレットに表示されている該当する暗い赤の色合いを変えれば、その画像に着色されている同じ色がすべて変えられることができるんです。多分昔からドット絵を製作されている方々には当たり前のことかもしれませんね。

続いてこれです。パレットの上にアイコンがありますね。鍵、下矢印、ファイル?、そして横3本。この横3本アイコンを押すと上記のような設定が出てきます。この一番上のEdit Paletteをチェックしておかないと、パレットの色が変えられません。となると上の暗い赤の色を変えるなんて作業ができなくなってしまうのです。

僕はこの2点を気を付けていますね。描き始めてからでも設定は可能なので、あれ?パレットが変えられないよと思うとこの部分だったりします。

パレットの色を増やしたい時は、この縦2本がパレットの一番右下にあります。これをドラックすることのより、パレットは増えます。そして黒い場所をクリックして、色を好きな色に変えていくわけです。

ちなみに一番上の左か2番目のカラーについている白い大きな四角は手前の色っていうのかな?今使っているメインカラーってことかなそんな感じです。そしてその3つ下にある黄土色についている小さな三角はバックグラウンドカラーっていう事です。マウス左クリックでメインカラー右クリックでバックグラウンドカラーを選択できます。タブレットを使っていたので全然気づきませんでした……

それでは下準備をしてみます。まず使いたいカラーを選択します。この場合は新たに増やしたパレットに緑色を追加しました。左端の濃い緑いろを最初につくりました。それをコピーアンドペーストして、色を明るめの緑にしていました。この2つの緑を基準にして色を作ってみます。

まず、対象の2つの緑を選択します。ドラック可能です。濃い緑から明るい緑へドラックです。

その状態のまま……上のアイコンの下矢印をクリックすると設定がでてきます。このGradientをクリック!

なにぃ……空いていた黒いパレットにその2つの色を結ぶ色ができています。はいっ簡単ですね……すごく簡単です。

横スクロールアクションゲームに登場するような草と土のタイルを作ってみようと思います。茶色の部分も緑色と同じようにGradientで作っておきます。2色とも暗い色を線画としてガッと描きました。

続いて一番明るい色で塗りつぶしました。

2番目の色、3番目の色を使い、それっぽく見せるようにしました。

タイルを並べるとどういう風に見えるかというのも確認可能です。上記画面のようにViewから選んで、Tiled in Both Axesを選択します。つまりXY両方ともタイルを並べてみるよってことです。Xが横、Yが縦ですね。

こんな感じになりました。なんとなくそれっぽい……褒め過ぎ?

このままPNGファイルとかにエクスポートすると、16ピクセルのままなので……

File>Exportで出てくる画面で、任意のファイル形式にして、僕はいつもPNGです。Resizeという文字をクリックすると詳細の形式が出てくるので、Resizeを300%に設定して、OKです。

こんな画像ファイルが出来上がりです。

今後、僕が使っているソフトの使い方も載せていこうと思います。

スポンサーリンク
レンタングル
レンタングル

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レンタングル