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

2018年2月8日

Javascript Tool テクノロジー プログラミング

昔からゲームデータの王道はドット絵で構成されてます。 マリ○や、ドラク○や、F○も今や3Dグラフィックが増えているけど、レガシーなブランドはドット絵。 当たり前ですが、パソコンのフォントやアイコンなどは、ドット絵です。 あまり知られていませんが、リッチに見えるゲームの3Dグラフィックでも、データで使われているテクスチャという画像データは、ドット絵で書かれているものが多いです。

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

ドット絵が活用される一番の要因は、データ容量を必要最低限に抑える事ができるからでしょう。 ゲーム業界には「ドット絵職人」という作業員も存在するぐらい、ドット絵を描く事は難しいのですが、慣れてしまうと素人でもある程度のドット絵は描けます。 僕の好きな本です。気になる人がいたら一度手にとって読んでみてください。

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

WEBページを作っている時に、アイコンや装飾などで便利にドット絵が使えたら・・・と考えた事があるデザイナーの人は、今回のツールを使うと、思った通りのページデザインが作れるかもしれません。 古いIEでは、border-radiusなどの角丸処理がCSSだけでできないなどの使い勝手の悪さがあり、フォントサイズや他のエレメントサイズに合わせて、今回のドット絵ツールで、画面装飾を行なっていたという過去があり、 今現在のブラウザだとこのようなツールで対応する必要がないかもしれませんが、マルチブラウザ対応などを考慮した時に、便利に使えるかもしれませんね。

ソースコード

<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tooltip</title> <link rel="stylesheet" href="common.css"> <script src="pixel.js"></script> </head> <body> <h1>Pixel</h1> <div class="pixel"></div> </body> </html> .pixel{ position:static; display:inline-block; } .pixel .pixel-parent .pixel-dot{ display:inline-block; } /** * option { data , color , pixelRate(default:1) } */ ;(function(){ var $$ = function(option){ option = $$.prototype.options(option); $$.prototype.setStyle(option); var elm = $$.prototype.data2elm(option.data); return elm; }; // default-set $$.prototype.options = function(option){ // pixel-rate if(typeof option.pixelRate === "undefined"){ option.pixelRate = 1; } return option; }; // data -> element $$.prototype.data2elm = function(data){ var div = document.createElement("div"); div.className = "pixel-parent"; for(var i=0; i<data.length; i++){ var line = document.createElement("div"); line.className = "pixel-line"; for(var j=0; j<data[i].length; j++){ var dot = document.createElement("div"); dot.className = "pixel-dot pixel-color-"+data[i][j]; line.appendChild(dot); } div.appendChild(line); } return div; }; $$.prototype.setStyle = function(option){ var elmStyle = document.createElement("style"); var sheet = elmStyle.sheet; for(var i=0; i<option.color.length; i++){ var rule = ".pixel-color-"+i+"{background-color : "+ option.color[i] +"}"; elmStyle.innerHTML += rule; // var index = sheet.cssRules.length; // sheet.insertRule(rule , index); } if(typeof option.pixelRate !== "undefined"){ var rule = ".pixel .pixel-parent .pixel-dot{ width: "+option.pixelRate+"px; height: "+option.pixelRate+"px; }"; elmStyle.innerHTML += rule; } document.querySelector("head").appendChild(elmStyle); }; window.$$PIXEL = $$; })(); ;(function(){ window.addEventListener("load",function(){ var color = [ "#FFF", "#000", "#F00" ]; var data = [ "11111111", "10000001", "10000002", "10000021", "12000201", "10202001", "10020001", "11111111" ]; var elm = new $$PIXEL({ data:data , color:color, pixelRate:10 }); document.querySelector(".pixel").appendChild(elm); },false)})();

実行画面イメージ

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

解説

index.htmlとcommon.cssは、特別な仕様はありませんが、1点だけ、今回のソースは「.pixel」というクラス名のdivタグに、ドット絵データを作り出す仕様になっています。 jsファイルの後半で、ドット絵モジュールを起動していますが、ドットデータ部分と色指定、ピクセルレート(拡大率)を変えることでオリジナルを表示する事が可能です。

仕様

色指定部分は、配列でCSSの色指定文字列を記入しています。 ※今回は1桁の数値のみでの対応にしているので、数字は10個しか登録できません。 データ部分は、ドット絵を横一列にして数字を羅列していますが、数字部分は、色指定の配列番号を記載しています。 ピクセルレートは、1ドットを何ドット分で表示するかの指定ですが、サンプルコードでは10倍に表示してみやすくしています。 注意点としては、webkitブラウザにしか対応していないということと、外部のcssライブラリなどを使うと、ドット絵が崩れる可能性があります。 もう少し汎用的に作ったバージョンを突き詰めたい人は、IE対応や、CSS記述などを深めに書いておくといいでしょう。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。