テーブルを使ったシンプルなドット絵エディタを作ってみる - jQuery入門

テーブルによるドット絵エディタ

エクセルを方眼紙のようにして書類を書く人いますよね。自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。

ドット絵エディタのデモ

16×16ドット限定です。下に一列に並んだパレットから色をクリックして塗ります。

ドット絵エディタのソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>ドット絵エディタ</title>

<script>

$(function() {

  var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];

  var pushed = false;

  var color = '';



  var row = '<tr>';

  for (i = 0; i < 16; i++) row += '<td>&nbsp;</td>';

  row += '</tr>';



  for (i = 0; i < 16; i++) $('#canvas').append(row);



  $('#palette').html(row);

  for (i = 0; i < 16; i++) $('#palette td').eq(i).css({backgroundColor: '#' + pals[i]});



  $('#canvas td').mousedown(function() {

    pushed = true;

    $(this).css({backgroundColor: color});

    return false;

  }).mousemove(function() {

    if (pushed) $(this).css({backgroundColor: color});

    return false;

  });

  $(document).mouseup(function() {

    pushed = false;

  });



  $('#palette td').click(function() {

    $(this).css({borderColor: 'yellow'}).siblings().css({borderColor: 'gray'});

    color = $(this).css('background-color');

  }).eq(0).click();

});

</script>

<style>

table {

  border-collapse: collapse;

  margin-bottom: 16px;

}

td {

  border: 1px solid gray;

  width: 16px;

  line-height: 16px;

  cursor: pointer;

}

</style>

</head>

<body>

<table id="canvas"></table>

<table id="palette"></table>

</body>

</html>

プログラムの解説

変数定義


var pals = ['000', '088', '00d', '438', '800', '888', '8cf', 'aa2', 'b82', 'c18', 'fbb', 'e00', 'fd0', 'feb', 'ddd', 'fff'];

var pushed = false;

var color = '';

palsはパレットの色を16進数3桁（CSSの定義方法）で定義しています。16個のパレットがあるので配列も16個です。pushedはマウスのボタンが押されているときだけtrueになるフラグです。colorには現在選択している色が入ります。

画面生成


var row = '<tr>';

for (i = 0; i < 16; i++) row += '<td>&nbsp;</td>';

row += '</tr>';

rowには1行分のグリッドのHTMLが入ります。


for (i = 0; i < 16; i++) $('#canvas').append(row);

1行分のグリッドを16回繰り返して16×16のグリッドを生成しキャンバスとしています。


$('#palette').html(row);

for (i = 0; i < 16; i++) $('#palette td').eq(i).css({backgroundColor: '#' + pals[i]});

配列palsの色を背景色として下部パレット部分を生成しています。

キャンバスの色塗り処理


$('#canvas td').mousedown(function() {

  pushed = true;

  $(this).css({backgroundColor: color});

  return false;

キャンバスのグリッド上でマウスが押下されたとき、pushedフラグを立てて背景色を現在選択中のパレットの色にしています。


}).mousemove(function() {

  if (pushed) $(this).css({backgroundColor: color});

  return false;

});

キャンバスのセル上でマウスを移動したとき、マウスが押下されているときのみ背景色を現在選択中のパレットの色にしています。


$(document).mouseup(function() {

  pushed = false;

});

画面のどこであっても、マウスのボタンを離したときに、pushedフラグをクリアしています。

パレットの選択処理


$('#palette td').click(function() {

  $(this).css({borderColor: 'yellow'}).siblings().css({borderColor: 'gray'});

  color = $(this).css('background-color');

パレットのセル上でクリックしたときの処理です。まずクリックしたセルのボーダー色を黄色にして選択されていることを明確にし、それ以外のセルを灰色にしています。siblings()は自分の兄弟要素、つまり自分以外のセルということになります。次に変数colorに選択されたパレットの色をセットしています。


}).eq(0).click();

初期状態として、一番左のセルをクリックした状態にします。

注意点とおまけ

ちなみに、このドット絵エディタには「保存」ができないという致命的な欠点があります。JavaScriptのみだと保存は難しいのですが、ひとつ解決策を考えました。
ドット絵エディタ（保存付き）
保存ボタンを押すとテキストエリアに文字列が出てくるので全選択して、拡張子ppmのファイルで保存してください。ppmファイルはPhotoshopやIrfanViewなどのフリーのビュアーで見ることができます。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト