CodeZine(コードジン)

特集ページ一覧

「マスク」
~マンガでプログラミング用語解説

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

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

解説

 マスクは、マスク画像のような言葉で使わます。マスキングテープで色を塗る範囲を限定するように、マスク画像を使い、黒い部分を切り抜いた画像を作成します。

 現代では、グレースケールの画像が利用されることが多く、アルファチャンネル(透明度)を持つ画像と似たような概念です。

 古いゲームなどでは、白黒2値のマスク画像を用意しておき、高速に背景をくりぬき、キャラクターの画像などを合成していました。以下、例を示します。

背景画像 マスク画像 前景画像
88888888  FF0000FF  00AAAA00
88888888  F000000F  0AAAAAA0
88888888  F000000F  0AAAAAA0
88888888  FF0000FF  00AAAA00
↓
背景画像とマスク画像をアンド演算して
背景をくりぬいた画像を作る
88000088
80000008
80000008
88000088
↓
背景くりぬき画像と前景画像をオア演算して
高速に合成する
88AAAA88
8AAAAAA8
8AAAAAA8
88AAAA88

サンプル

 マスクを体験するコードを、JavaScriptで簡単に書いてみます(※このソースコードはUTF-8形式で保存してください)。

 高速に演算するなら「bg[i] & msk[i] | frnt[i]」とすればよいのですが、過程が分かるようにループを2回まわしています。

<!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">
        // 変数の初期化
        var sz = 5, SZ = sz * sz * 3;
        var R = [255,  0,  0];
        var G = [  0,255,  0];
        var B = [  0,  0,  0];
        var W = [255,255,255];

        var bg = [].concat(
            R,R,R,R,R,
            R,R,R,R,R,
            R,R,R,R,R,
            R,R,R,R,R,
            R,R,R,R,R
        );
        var msk = [].concat(
            W,W,B,W,W,
            W,B,B,B,W,
            B,B,B,B,B,
            W,B,B,B,W,
            W,W,B,W,W
        );
        var frnt = [].concat(
            B,B,G,B,B,
            B,G,G,G,B,
            G,G,G,G,G,
            B,G,G,G,B,
            B,B,G,B,B
        );
        var res1 = [], res2 = [];

        // 背景とマスクをアンド演算(res1)
        for (var i = 0; i < SZ; i ++) {
            res1[i] = bg[i] & msk[i];
        }

        // res1と前景画像をオア演算
        for (var i = 0; i < SZ; i ++) {
            res2[i] = res1[i] | frnt[i];
        }

        // DOM準備後に出力
        $(function() {
            out(bg,   "背景画像");
            out(msk,  "マスク画像");
            out(frnt, "前景画像");
            out(res1, "背景とマスクをアンド演算(res1)");
            out(res2, "res1と前景画像をオア演算");
        });

        // 出力用関数
        function out(arr, nm) {
            // canvasを作成
            var cnvs = $('<canvas width=5 height=5>').get(0);
            var ctx = cnvs.getContext("2d");

            // 画素の取得
            var idt = ctx.getImageData(0, 0, sz, sz);
            var d = idt.data;

            // 描画
            for (var i = 0; i < 25; i ++) {
                var P = i * 4, p = i * 3;
                d[P + 0] = arr[p + 0];
                d[P + 1] = arr[p + 1];
                d[P + 2] = arr[p + 2];
                d[P + 3] = 255;
            }

            // 画素の反映
            ctx.putImageData(idt, 0, 0);

            // 表示
            $("body")
            .append($(cnvs).css({width: "50px", height: "50px"}))
            .append(" " + nm + "<br>");
        }
    </script>
    <style>
    /* ドット絵風表示 */
    canvas {
      -ms-interpolation-mode:nearest-neighbor;
      image-rendering:-webkit-optimize-contrast;
      image-rendering:-moz-crisp-edges;
      image-rendering:-o-crisp-edges;
      image-rendering:pixelated;
    }
    </style>
  </head>
  <body></body>
</html>
出力結果
出力結果
フィードバックお待ちしております!

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



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

バックナンバー

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

もっと読む

著者プロフィール

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

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

あなたにオススメ

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