0-MATERIAL / dottiles.js

HTML5で遊んでみよう / dottiles.js

※このページはFirefox・Safari・Chromeで閲覧してください。

HTML5ってなに？

なんか色々カッコイイことができるみたいです。おしまい。
……これだけじゃダメですか、はい。

大きな目玉としては『Canvas』という機能が実装され、ブラウザ上でアレコレ図形を描くことができるようになる（あるいは既になっている）んですが、その命令文はちょっとややこしかったりします。

var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = rgb(127,127,127);
ctx.fillRect(10,12,5,8);
ctx.closePath();

具体的に書くとこんな風に（↑）なりますが（※ちなみにこれは「X=10・Y=12の座標から、横幅5・縦幅8の、灰色の四角形を描いてね」という意味になる）、正直あまり直感的じゃないよね、コレ。うーん。

じゃあもっと分かりやすいフォーマットを作って、ドット絵みたいに描画させればいいんじゃない？
──というわけでドットタイル描画ライブラリ『dottiles.js』を作ってみました。

具体的に何ができるの？

『dottiles.js』では、JSON形式のファイルを画像データとして利用しています。
JSONというのはデータフォーマット形式のひとつで、こういう書き方をすればJavaScriptからカンタンに扱えるよ、というモノです。決してチェーンソーを持ってる怪人の名前だったり、ジェイムス・エディソンの略称とかいうことではありません。誰も間違えないか。

ごちゃごちゃとした説明は後回しにして、ひとまず分かりやすいサンプルを。

{
  "protocol" : {
    "dialect"  : "0-material",
    "type"     : "plane",
    "version"  : "0"
  },
  "canvas" : {
    "col"      : "12",
    "row"      : "16",
    "width"    : "6",
    "height"   : "6"
  },
  "brush" : {
    "shape"    : "square",
    "margin_x" : "0",
    "margin_y" : "0"
  },
  "tiles" : {
    "0"        : "000111110000",
    "1"        : "001111111110",
    "2"        : "002223323000",
    "3"        : "023233323330",
    "4"        : "023223332333",
    "5"        : "022333322220",
    "6"        : "000333333300",
    "7"        : "002212220000",
    "8"        : "022212212220",
    "9"        : "222211112222",
    "10"       : "332131131233",
    "11"       : "333111111333",
    "12"       : "331111111133",
    "13"       : "001110011100",
    "14"       : "022200002220",
    "15"       : "222200002222"
  },
  "palette" : {
    "0"        : "transparent",
    "1"        : "rgba(220, 40, 0, 1)",
    "2"        : "rgba(140, 115, 0, 1)",
    "3"        : "rgba(255, 165, 60, 1)"
  },
  "effect" : {
    "shadow"        : "True",
    "shadowColor"   : "rgba(187, 155, 89, 1)",
    "shadowBlur"    : "10",
    "shadowOffsetX" : "5",
    "shadowOffsetY" : "5"
  }
}

このJSONデータを『dottiles.js』ライブラリに読み込ませてみると──（↓）

ご覧の通り、どこかで見たことのあるヒゲのおじさん（職業配管工、アルバイトでテニスの審判）が！
勘のいい人はもう気づいたかもしれませんが、さっきの文字列の中の

  "tiles" : {
    "0"        : "000111110000",
    "1"        : "001111111110",
    "2"        : "002223323000",
    "3"        : "023233323330",
    "4"        : "023223332333",
    "5"        : "022333322220",
    "6"        : "000333333300",
    "7"        : "002212220000",
    "8"        : "022212212220",
    "9"        : "222211112222",
    "10"       : "332131131233",
    "11"       : "333111111333",
    "12"       : "331111111133",
    "13"       : "001110011100",
    "14"       : "022200002220",
    "15"       : "222200002222"
  },

この部分がそっくりそのままドット絵のパターンになっています。分かりやすく色を付けてみると、

000111110000
001111111110
002223323000
023233323330
023223332333
022333322220
000333333300
002212220000
022212212220
222211112222
332131131233
333111111333
331111111133
001110011100
022200002220
222200002222

こういうことに。この方が直感的にCanvas機能使えるんじゃないー？なぁ飯塚ー？（誰だよ

どうやって使うの？

『dottiles.js』は『jQuery』を介して利用することができます、というかそうするのがたぶん一番手っ取り早いです。
jQueryというのは、ウェブコンテンツをあれこれ便利にできる超優れたライブラリの名称で、あんなことやこんなことが出来るんですが、面倒なんであとはぐぐってください。

具体的な利用法としては、<head>要素内でjQuery本体とdottiles.jsをロードして、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="dottiles.js"></script>

<body>要素内に描画先となる<canvas>を配置、

<canvas id="cs1" width="100" height="100"></canvas>

あとは適当なところで以下の通り、外部参照ファイルとcanvasのidを指定すれば

<script type="text/javascript"><!--
onload = function() {
	var jsonDataUrl = "mario.json";
	$.getJSON(jsonDataUrl,function(json){
		DotTiles("cs1",json);
		return;
	});
};
//-->
</script>

動くはずです。たぶん。
分かりにくかったら、このページのHTMLソースを見てもらうのが一番早いかもしれません。汚いソースですが。見られちゃうの恥ずかしい！どっちだよ。

詳細な画像フォーマット解説

ここから先はウェブ関係の技術知識が多少必要となりますが、使う上ではどうしても避けられない内容なので、なるべく分かりやすく順番にフォーマットの定義を解説していきます。

【フォーマット定義】

  "protocol" : {
    "dialect"  : "0-material",
    "type"     : "plane",
    "version"  : "0"
  },

現在は特に意味はありません。いきなり未使用かよ。
将来的な拡張・派生フォーマット誕生時の下位互換性のために予約してあるだけです。~~このまま永遠に使われない可能性もありますが。~~

【キャンバス設定】

  "canvas" : {
    "col"      : "12",
    "row"      : "16",
    "width"    : "6",
    "height"   : "6"
  },

上から順に、「ドットタイルの横方向の枚数」「ドットタイルの縦方向の枚数」「ドットタイルひとつあたりの横ピクセルサイズ」「ドットタイルひとつあたりの縦ピクセルサイズ」です。
この例では、6×6サイズのドットタイルが、横に12枚・縦に16枚並ぶことになります。

【筆形状設定】

  "brush" : {
    "shape"    : "square",
    "margin_x" : "0",
    "margin_y" : "0"
  },

上から順に、「ブラシの形状」「ドットタイルの横方向の空き間隔」「ドットタイルの縦方向の空き間隔」です。
ブラシの形状は現在のところ「square」「circle」「dia」「stitch」がサポートされています。

例えばこれを、

  "brush" : {
    "shape"    : "circle",
    "margin_x" : "1",
    "margin_y" : "1"
  },

に変更すると、

こんな感じになります。
また「dia」は菱形、「stitch」は縫目形となります。

【ドット配置設定】

  "tiles" : {
    "0"        : "000111110000",
    "1"        : "001111111110",
    "2"        : "002223323000",
    "3"        : "023233323330",
    "4"        : "023223332333",
    "5"        : "022333322220",
    "6"        : "000333333300",
    "7"        : "002212220000",
    "8"        : "022212212220",
    "9"        : "222211112222",
    "10"       : "332131131233",
    "11"       : "333111111333",
    "12"       : "331111111133",
    "13"       : "001110011100",
    "14"       : "022200002220",
    "15"       : "222200002222"
  },

さっき上で説明した通りなので割愛します。
ちなみにここでは数字のみを用いてパターン作成していますが、実際はアルファベットでも特に問題はありません。

【パレット設定】

  "palette" : {
    "0"        : "transparent",
    "1"        : "rgba(220, 40, 0, 1)",
    "2"        : "rgba(140, 115, 0, 1)",
    "3"        : "rgba(255, 165, 60, 1)"
  },

タイルで指定した文字列（＝パレット番号）に対して、それぞれ個別に色を指定します。
この例では、「1」と指定されたタイルに、「R:220 G:40 B:0 不透明度:1」の色が描かれます。
不透明度は「0」～「1」の間で指定できます。もちろん「0.2」とかの小数点もOk。
また、色に「transparent」と記載されている場合のみ、そのパレット番号は透明色として扱います（この例では「0」番のパレットがそれに該当）。

例えばこれを、

  "palette" : {
    "0"        : "transparent",
    "1"        : "rgba(250, 250, 250, 0.5)",
    "2"        : "rgba(0, 150, 50, 0.5)",
    "3"        : "rgba(255, 165, 60, 0.5)"
  },

に変更すると、

こんな感じに、影の薄い弟（長所：高飛び、短所：ブレーキゆるゆる）になります。

【効果設定】

  "effect" : {
    "shadow"        : "True",
    "shadowColor"   : "rgba(187, 155, 89, 1)",
    "shadowBlur"    : "10",
    "shadowOffsetX" : "5",
    "shadowOffsetY" : "5"
  }

上から順に「影効果の有無」「影の色と透明度」「影の範囲」「影の横位置」「影の縦位置」です。
「shadow」は「True」か「False」で指定してください。~~今のところTrueかそれ以外かでしかチェックしていませんが。~~
「shadowOffsetX」と「shadowOffsetY」は負の値を指定することもできます。

FAQ

『dottiles.js』ライブラリの商用利用はできますか？

どうぞご自由に。
というか私が仕事で使いたいけど会社で作ってる時間ないから、通勤電車の中とか自宅でちまちま書いたものをMITとGPLのデュアルライセンスで公開して、仕事で利用しようという腹づもりなので。
~~追記：結局、使う前に会社辞めちゃったとかそういうアレ。~~

拡張したライブラリを公開・配布してもいいですか？

どうぞご自由に。特に義務はありませんが、その旨をご一報いただけると喜びます。

パレットの色って何種類まで同時に使えるの？

理論的には1バイトで表現できる範囲内ということになりますが、現実的に考えた場合は0-9・A-Z・a-zの合計数程度に留めておいたほうがいいと思います。

エラーが出て動かないんですが

「 } 」の閉じ忘れとか「 , 」「 ; 」の有無とか、「 : 」と「 ; 」の間違いとか、あとは文字コードとか、もう一度隅から隅まで調べてみるといいかもね！

木枯さんって何の仕事しているんですか

なんだろう。

ぱんつ穿いてください

はい。

ダウンロード

Filename : dottiles.js
Version : 0.2

Dual licensed under the MIT and GPL.
Author : Fubuki Kogarashi