解説
レイヤーは、セル画のように透明な部分を持った画像を重ね合わせる機能のことです。また、そうして表現される、セル画に相当する各画像も指します。
アルファチャンネルを持った画像を合成することで、ゲームなどでも、このレイヤーを表現することができます。ゲーム開発ツールによっては、こういった機能を、レイヤー機能と呼ぶこともあります。
サンプル
擬似的にレイヤーを体験するコードを、JavaScriptで簡単に書いてみます。
（※このソースコードはUTF-8形式で保存してください）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「擬似的にレイヤーを体験」のサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chckbox = $("input[type=checkbox]");
var img = $("img");
// 再描画用関数
var redraw = function() {
// 変数の初期化と背景の描画
var cnvs = $("canvas").get(0);
var ctx = cnvs.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 320, 160);
// ドット絵用レンダリング設定
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
// 画像を描画
if (chckbox.eq(2).prop("checked")) {
ctx.drawImage(img.get(2), 0, 0, 32, 16, 0, 0, 320, 160);
}
if (chckbox.eq(1).prop("checked")) {
ctx.drawImage(img.get(1), 0, 0, 12, 12, 20, 20, 120, 120);
}
if (chckbox.eq(0).prop("checked")) {
ctx.drawImage(img.get(0), 0, 0, 12, 12, 180, 20, 120, 120);
}
}
redraw();
chckbox.click(redraw);
});
</script>
</head>
<body>
<canvas width=320 height=160></canvas>
<table border=1 style="border-collapse: collapse;">
<tr>
<td><input type="checkbox" checked>レイヤー2</td>
<td><img src="data:image/png;base64,R0lGODlhDAAMAKIBAAAAAP////8AAK+Jif/XkQAAAAAAAAAAACH5BAEAAAEALAAAAAAMAAwAAAMzGDMhLiHG9Z5UQ5BNoKTABnhTFhLjRXHdt2TOArzvIy/BVgE8n3e2wYwRqdyIDY9AyEgAADs="></td>
</tr>
<tr>
<td><input type="checkbox" checked>レイヤー1</td>
<td><img src="data:image/png;base64,R0lGODlhDAAMAKICAP/XkQAAAP///4mvrQAA/wAAAAAAAAAAACH5BAEAAAIALAAAAAAMAAwAAAMzKDNCTiLG9Z5Ug4ANoKTBFnhTFgLjRXHdt2TOErzvIy/CVgU8n3e2wYwRqdyIDQ9ByEgAADs="></td>
</tr>
<tr>
<td><input type="checkbox" checked>レイヤー0</td>
<td><img src="data:image/png;base64,R0lGODlhIAAQAKIAAJ3d9pmip+Ps8Zm70HmIkmFXYZeNg8C+uSH5BAAAAAAALAAAAAAgABAAAAOqWKoE/jDKuAppM2tQRhgDBg2alwVdBpaiRE6C+Qg0HbTQtwI1fTS93m8g4PEGhgrhRjAEDqhDsAY1OA9Yw6FSuHEL0mnNSsZuLYZmullIEqTYYphmPdTtZGtAvw/4n1B+AmF5WgceaGoGA2ZYfXpmg45mXhZNTYAegXgBkpJmWgRfFxeWipBxgXtrSqRMmGl/f45WpKwXfh66ILy8h70efkukS7KywMjJAwkAOw=="></td>
</tr>
</table>
</body>
</html>
