昔からゲームデータの王道はドット絵で構成されてます。
マリ○や、ドラク○や、F○も今や３Dグラフィックが増えているけど、レガシーなブランドはドット絵。
当たり前ですが、パソコンのフォントやアイコンなどは、ドット絵です。
あまり知られていませんが、リッチに見えるゲームの３Dグラフィックでも、データで使われているテクスチャという画像データは、ドット絵で書かれているものが多いです。
何故今だにドット絵なのか？
ドット絵が活用される一番の要因は、データ容量を必要最低限に抑える事ができるからでしょう。 ゲーム業界には「ドット絵職人」という作業員も存在するぐらい、ドット絵を描く事は難しいのですが、慣れてしまうと素人でもある程度のドット絵は描けます。
books
『もったいない本舗』 ※通常24時間以内出荷。※商品状態保証。法能店
(2024-04-07 時点)
今回のモジュールについて
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)})();
実行画面イメージ
上記ソースコードをそのまま表示すると、下記のような画面が現れます。
