ただいまの人気記事はこれ!おすすめ記事いろいろ

【Aseprite】アンチエイリアス処理がかんたんにできる方法

Aseprite

今回はAsepriteでアンチエイリアス処理がかんたんにできる方法をお届けします。

アンチエイリアスとは、色の境目に別の色を入れることによって、なめらかにみせる処理のことをいいます。

たとえばこちらのドット絵をみてみましょう。

Aseprite ドット絵

帽子や服や髪をみると、1つの色に対し、カゲを1色で入れています。

カゲとそうでない部分との境目をみると、カクカクと角張った線になっています。これをなめらかな雰囲気にみせたいときによく使われるのがアンチエイリアス処理です。

たとえばこんな感じ。

【Aseprite】アンチエイリアス処理がかんたんにできる方法

カゲの部分とそうでない部分との境目に別の色を置くことで、境目がやわらかくみえるようになります。

が、実際にやってみると、意外と難しいのが「どんな色を置けばいいのか」という点です。よく使われるのは、中間の色を置く方法ですが、その色選びもなかなか難しかったりします。

というわけで今回は、Asepriteでとてもかんたんにできるアンチエイリアス処理の方法をお届けします。

この方法を使うと、色選びに悩むことなくアンチエイリアス処理ができますよ。

Asepriteの記事一覧

かんたんにできるアンチエイリアス処理

Aseprite ドット絵のサンプル

今回は例として、このドット絵を使ってすすめていきます。カゲの部分とそうでない部分との境目に色を入れてアンチエイリアス処理をしてみます。

ちなみにレイヤー構成は次の通りです。

レイヤー構成

パーツごとにレイヤーを分けていますが、今回の方法は、レイヤーを1つにまとめている場合もやり方は同じです。

レイヤーパネルが表示されていない場合は、画面上部のメニューの「View」から「Timeline」を有効にすると表示されます。

まずはレイヤーの設定をしよう

1.Asepriteでアンチエイリアス処理をしたいドット絵を開きます。

ドット絵を開きます

 

2.レイヤーパネルの一番上のレイヤーを右クリックします(レイヤーが1つだけの場合はそのレイヤーを右クリックします)。

一番上のレイヤーを右クリック

 

メニューが開きますので「New Layer」を選択します。

「New Layer」を選択

 

すると、いちばん上に「Layer 1」という新しいレイヤーがつくられます。

新しいレイヤー

 

4.今つくったレイヤー「Layer 1」をダブルクリックします。

「Layer 1」をダブルクリック

 

すると、レイヤーの設定ができるパネルが開きます。

レイヤーの設定ができるパネル

 

まずは「Name」のところでレイヤーの名前をわかりやすいものに変更しましょう。

レイヤー名の変更

今回は例として「anti-aliasing(アンチエイリアス)」という名前にしてみました。

 

5.つづいて、「Opacity」の操作をします。

「Opacity」の操作

これはレイヤーの透明度を表す項目です。「255」が透明度ゼロの状態です。数値を低くするほど、レイヤーが透明になっていきます。

 

というわけで、まずはこのOpacityの数値を80~100あたりにしてみます。

Opacityの数値を調整

この数値はあとから自由に修正できますので、今の段階ではアバウトな設定でOKです。

設定ができたら、右上の「×」を押してこのパネルを閉じます。

これでアンチエイリアス処理をする準備は完了です。さっそく色を入れてみましょう。

スポンサーリンク

境目に色をおいてみよう

1.さきほど作ったレイヤー(一番上にあるレイヤー)が選択状態になっていることを確認します。

一番上にあるレイヤーが選択状態

 

2.ツールバーからスポイトツールを選択します。

スポイトツール

カゲの部分の色を拾います。

色を拾います

 

3.色が拾えたら、ツールバーからペンシルツールを選択します。

ペンシルツールを選択

 

その状態で、カゲとそうでない部分の境目にドットを打ってみましょう。

境目にドット

すると、カゲの色よりも少し薄めの色が入ります。

同じ段取りで、ほかの境目の部分にも色を入れてみましょう。

Aseprite かんたんなアンチエイリアス

たとえば髪でしたら、髪のカゲの色をスポイトで拾ってから、その色をペンシルツールで境目にのせます。

服でしたら、服のカゲの色をスポイトで拾って、境目にその色をのせればOKです。

いずれもカゲに使った色よりも薄めの色が入り、アンチエイリアス処理をしたような雰囲気になります。

 

4.境目に入れる色が薄い・または濃いと感じるときは、レイヤーパネルのいちばん上のレイヤーをダブルクリックします。

いちばん上のレイヤーをダブルクリック

 

レイヤーの設定ができるパネルが開きますので、「Opacity」の数値を変えると、色の濃さ(透明度)を調整することができます。

「Opacity」の数値を調整

数値を大きくするほど、不透明に近づき、色が濃くみえるようになります。

数値を小さくするほど、透明に近づき、色が薄くみえるようになります。

 

4.お好みの色合いになれば完成です。

完成

今回の例では、境目に入れる1色だけ入れてみましたが、色数を増やすとよりなめらかにみえます。

というわけで、つづいては、アンチエイリアス処理に使う色の数を増やす方法をみていきましょう。

スポンサーリンク

色数を増やす場合

アンチエイリアス処理に使う色の数を増やす

先ほどの例では、上の画像のように、カゲとそうでない部分との境目に1色だけ入れてみました。

アンチエイリアス処理では、色数を増やすとよりなめらかにみえます。

たとえばこちらは2色いれてみたもの。

アンチエイリアス処理に使う色の数を増やす2

シンプルなドット絵でも、アンチエイリアスの色数を増やすと、やわらかさが増してみえます。

 

色数を増やす場合は、レイヤーをあらたにつくります。

アンチエイリアス処理に使う色の数を増やす レイヤー構成

つまり、

  • アンチエイリアス1色目のレイヤー
  • アンチエイリアス2色目のレイヤー

といった感じで、色ごとにレイヤーをつくるわけですね。

その際には、それぞれのレイヤーのOpacityの数値を変えることで、色の濃淡の差をつくります。

たとえば、

  • アンチエイリアス1色目のレイヤー:Opacity 130
  • アンチエイリアス2色目のレイヤー:Opacity 80

といったように設定すると、1色目よりも2色目のほうが薄くみえるようになります。

今回の方法のメリット

今回お届けした方法は、境目におく色を、カゲの色を基準にして透明度で調整しています。

つまり、もとの色の透明度を変えているだけなので、色がなじみやすく、まわりから浮きにくいというメリットがあります。

Aseprite かんたんにできるアンチエイリアス処理

また、色の濃淡を「Opacity」で一括で調整できるので、作業効率があがるのもポイントです。

今回の記事で使用したツール

今回の記事で使用したツールは次の通りです。

Save 30% on Aseprite on Steam
Aseprite is a pixel-art tool to create 2D animations, sprites, and any kind of graphics for games.

ドット絵の制作に特化したソフトです。非常に使いやすく重宝しています。

今回はAsepriteでアンチエイリアス処理がかんたんにできる方法をお届けしました。よかったら参考にしてみてください。

タイトルとURLをコピーしました