[翻訳]CSSでキャラクターの動くドット絵を描く方法【ツール紹介も】

Thanks Geoff Graham!! ↓↓↓ジェフ・グラハムさんによる元記事↓↓↓

Fun Times With CSS Pixel Art | CSS-Tricks

＊こちらの記事は、前回の「[翻訳]CSSでドット絵を描いてみよう」の記事で最後に触れられた、『ドット絵がもっと見たいという方や、さらに動くドット絵も気になる』方に向けた記事を翻訳したものです。

以下本編('ω')ノ

パッキリとした高解像度の画像たちによって日陰に追いやられた、失われしスタイル・・・それがドット絵です。私はCodePenでいろいろと閲覧してまわってると、たまにドット絵に出会っては見入っていました。そんな時、そうだった、ドット絵っていいもんだよなと思いだしたのです。

コレすごくないですか？！ドット化するという描き方には、高精細な画像やイラストには見られないような、シンプルさと親しみやすさが出ますよね。

これは、HTMLとCSSを用いてドット絵を作る際の好例でもあります。既成概念をとっぱらい、ほかの例も見て自分たちに合うパターンを考えていきましょう。

#グリッドを作る

まずは大事なところを抑えましょう。優れたドット作品を描くには、相応のキャンバスが必要ですね。実はいろんな方法で作れるグリッドというものが、ドット絵にとってのキャンバスになるのです。

方法①としては、スタンダードにHTMLの<table>（テーブル）があります。<table>には、その各行に固定の幅のセルが含まれています。たとえば、真四角のテーブルを縦横８マスで作るとします。そして、そのセル一つひとつを10ピクセルとすると、縦横それぞれ80pxの四角が出来上がるという感じです。

もっとキャンバスを大きくするには、セルの面積を大きくしてみましょう。解像度を8ビットから16ビットに変えるには、tableの各行のセル数を2倍にしましょう。

ほかにも、グリッドの設定をする方法としては、tableを使うやり方をdivを２つ使うやり方に置き換える方法もあります。片方はキャンバス用、もう片方はキャンバス内のドットをそれぞれ置くために繰り返し使うことになるdivです。

HTML

<div class="canvas">
 <div class="pixel"></div>
 <!-- 必要な分繰り返す -->
</div><!-- canvasここで終わり -->

ここでのねらいは、ドットがいくつ必要になるのかしっかりとわかることです。これには、横のピクセル数と縦のピクセル数を掛け算すればよいです。たとえば、tableで80pxの四角いグリッドを作るときに、グリッドを横8ピクセル、縦8ピクセルにするとすれば、それらをかけて合計64ピクセルとなります。

CSS

.canvas {
 /* 真四角にする */
 width: 80px;
 height: 80px;
}

.pixel {
 /* HTMLで合計64ピクセル必要になる場合 */
 width: 10px;
 height: 10px;
 float: left;
}

このやり方だと、tableでHTMLのマークアップなどを使わなくても、定義したキャンバスの面積次第で簡単にいろいろできます。

より詳細なドット絵に合わせて、もっとピクセル数を増やす場合は、HTMLのマークアップでピクセルの数を4倍にしてから、半分にします。イメージとしては、Photoshopで高画質にするために、予定のサイズを倍にして画像を作るのに似ています。

CSS

.canvas {
 /* 真四角にする */
 width: 80px;
 height: 80px;
}

.pixel {
 /* HTMLで合計256ピクセル必要になる場合 */
 width: 5px;
 height: 5px;
 float: left;
}

#やっとこさ描き始めます

さてここからが正念場です。ドットに色を付けていきます。グリッドの中の特定のドットを指定するときは、nth-childが有効です。

CSS


/* グリッド内の３番目のセル */
.pixel:nth-child(3) {
 background: orange;
}

見てわかるとおり、このリストはグリッド内のセルの数や、求められるデザインの細かさによって長くなります。この投稿の最初の例では、合計1,920ピクセル、300もの子結合子を使っています！

#シンプルな色付け・ピクセル数の絵の例がこちら

突然ですが、ドットで自画像を描いてみることにしました。少ないピクセル数で、色も4色だけですので、非常にシンプルな作りです。

#CSSのドット絵をアイコンにしてみよう

それでは、transform を使って描いたドット絵を縮小し、アイコンにしてみましょう。

#ほかにも使えるテクいろいろ

・box-shadow
ドット絵は、複雑なbox-shadowひとつで描くこともできます！box-shadowに対して、blur radiusやspread radiusなしで縦横のoffsetを宣言すると、 移り変わるきれいなコピーができます。

こちらを参照ください。黒の”ドット”がオリジナルです。その左下にオレンジ、右下に赤いドットが作られています。

これを繰り返せば、ドット絵になります。

・前処理

変数を使うことで、色やサイズの調整が簡単になります。Lessで例を見てみましょう。

また、こちらでユーナ・クラヴェッツ（Una Kravets）さんという方が、Sassマップを使ってbox-shadowを作成するという、さらに一歩進んだ感じのはちゃめちゃに賢いやり方を実行しています。

SCSS


// 同期する色を設定
$pixel-color-map: (
 'r' : #f00,
 'w': #fff,
 'k': #000,
 'o': transparent,
 't': #83401f,
 'p': #ffbc77,
 'b': #06f,
 'y': #ff0,
 'n': #ff8000,
 'g': #5ac528
);
// 以下マリオドット用行列
$pixel-art:(
 mushroom: (
   (o o o o o k k k k k k o o o o o)
   (o o o k k r r r r w w k k o o o)
   (o o k w w r r r r w w w w k o o)
   (o k w w r r r r r r w w w w k o)
   (o k w r r w w w w r r w w w k o)
   (k r r r w w w w w w r r r r r k)
   (k r r r w w w w w w r r w w r k)
   (k w r r w w w w w w r w w w w k)
   (k w w r r w w w w r r w w w w k)
   (k w w r r r r r r r r r w w r k)
   (k w r r k k k k k k k k r r r k)
   (o k k k w w k w w k w w k k k o)
   (o o k w w w k w w k w w w k o o)
   (o o k w w w w w w w w w w k o o)
   (o o o k w w w w w w w w k o o o)
   (o o o o k k k k k k k k o o o o)
 )
);

box-shadowに変換して適用できる関数もあります。そして結果はこうなります。

box-shadowはアニメーション化にも使えます。覚えておきましょう！

・Canvas APIを使ってみる

<canvas> APIでもしっかりと長方形を描くことができちゃいますよ！

Javascript



var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
ctx.fillStyle = "rgb(53, 41, 15)";
ctx.fillRect(48, 0, 8, 8);
ctx.fillStyle = "rgb(238, 187, 68)";
ctx.fillRect(56, 0, 8, 8);

・SVGを使ってみる

An of course <svg> has <rect>. But you could even cheat a little and make <polygon>s that combine multiple pixels.

<svg>には<rect>があるのが常ですが、ここは少しチートして、複数のピクセルを組み合わせた<polygon>を作成することもできます。

・3Dもできるよ！

よーし、これでもう十分やりきりましたね・・！

#さあ 、次はあなたの番です！

私たちはいつもあなたのやり方を応援していますが、ドット絵を描くうえで大いに使える、以下の方々のツールもぜひ知っておいてくださいね。

・ルドヴィグ・リンドブロムさんとこの　Canvas box-shadow pixel art generator
・ジェン・シファーさんとこの　make 8-bit art!
・XOXCOさんとこの　Make Pixel Art
・ジャヴィア・バレンシアさんとこの Pixel Art to CSS Generator

皆さんの中で、自分で作ったCSSのドット絵をシェアしたい！という方はいますか？私の方でCodePenでコレクションを作成はしましたが、すばらしい作品たちが皆さんの目に触れるように、ぜひコメント欄（元記事）に例を投稿してみてくださいね。

以上です(*'ω'*)ノ