javascriptで作れるドット絵ツール

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

昔からゲームデータの王道はドット絵で構成されてます。
 

マリ○や、ドラク○や、F○も今や3Dグラフィックが増えているけど、レガシーなブランドはドット絵。
 

当たり前ですが、パソコンのフォントやアイコンなどは、ドット絵です。
 

あまり知られていませんが、リッチに見えるゲームの3Dグラフィックでも、データで使われているテクスチャという画像データは、ドット絵で書かれているものが多いです。
 

何故今だにドット絵なのか?

ドット絵が活用される一番の要因は、データ容量を必要最低限に抑える事ができるからでしょう。
 

ゲーム業界には「ドット絵職人」という作業員も存在するぐらい、ドット絵を描く事は難しいのですが、慣れてしまうと素人でもある程度のドット絵は描けます。
 


 

僕の好きな本です。気になる人がいたら一度手にとって読んでみてください。

今回のモジュールについて

WEBページを作っている時に、アイコンや装飾などで便利にドット絵が使えたら・・・と考えた事があるデザイナーの人は、今回のツールを使うと、思った通りのページデザインが作れるかもしれません。
 

古いIEでは、border-radiusなどの角丸処理がCSSだけでできないなどの使い勝手の悪さがあり、フォントサイズや他のエレメントサイズに合わせて、今回のドット絵ツールで、画面装飾を行なっていたという過去があり、
 

今現在のブラウザだとこのようなツールで対応する必要がないかもしれませんが、マルチブラウザ対応などを考慮した時に、便利に使えるかもしれませんね。

ソースコード

実行画面イメージ

上記ソースコードをそのまま表示すると、下記のような画面が現れます。
 

スクリーンショット 2018-02-06 11.09.32

解説

index.htmlとcommon.cssは、特別な仕様はありませんが、1点だけ、今回のソースは「.pixel」というクラス名のdivタグに、ドット絵データを作り出す仕様になっています。
 

jsファイルの後半で、ドット絵モジュールを起動していますが、ドットデータ部分と色指定、ピクセルレート(拡大率)を変えることでオリジナルを表示する事が可能です。
 

【仕様】
 

色指定部分は、配列でCSSの色指定文字列を記入しています。
※今回は1桁の数値のみでの対応にしているので、数字は10個しか登録できません。
 

データ部分は、ドット絵を横一列にして数字を羅列していますが、数字部分は、色指定の配列番号を記載しています。
 

ピクセルレートは、1ドットを何ドット分で表示するかの指定ですが、サンプルコードでは10倍に表示してみやすくしています。
 

注意点としては、webkitブラウザにしか対応していないということと、外部のcssライブラリなどを使うと、ドット絵が崩れる可能性があります。
 

もう少し汎用的に作ったバージョンを突き詰めたい人は、IE対応や、CSS記述などを深めに書いておくといいでしょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です