JavaScript でドット絵アニメーションを描いたりして遊んでたんだけど、使いやすいようにライブラリ化した。
ソース: pixel.js
サンプル:
http://jugyoo.org/pixel/pixel_3.html
サンプルのソース:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>pixel.js sample</title>
<script type="text/javascript" src="pixel.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
function on_load() {
// キャンバスを作成
create_canvas('canvas', 40, 40, 2);
// アニメーションをセット
set_animation(function(count) {
if (count % 2 == 0) {
draw_pixel(30, 16, "red");
draw_pixel(30, 24, "transparent");
} else {
draw_pixel(30, 16, "transparent");
draw_pixel(30, 24, "red");
}
}, 100);
// 絵を描く
draw_rect(10, 10, 16, 20, "red");
draw_line(20, 5, 18, 10, "red");
draw_line(20, 34, 18, 29, "red");
draw_line(26, 16, 29, 16, "red");
draw_line(26, 24, 29, 24, "red");
draw_pixel(16, 16, "white");
draw_pixel(16, 25, "white");
// アニメーション開始
start_animation();
}
-->
</script>
</head>
<body onLoad="on_load();">
<div id="canvas" style="margin: 0 auto"></div>
</body>
</html>
