CodeZine(コードジン)

特集ページ一覧

「レイヤー」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(87)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/10/20 14:00

解説

 レイヤーは、セル画のように透明な部分を持った画像を重ね合わせる機能のことです。また、そうして表現される、セル画に相当する各画像も指します。

 アルファチャンネルを持った画像を合成することで、ゲームなどでも、このレイヤーを表現することができます。ゲーム開発ツールによっては、こういった機能を、レイヤー機能と呼ぶこともあります。

サンプル

 擬似的にレイヤーを体験するコードを、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>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5