CodeZine(コードジン)

特集ページ一覧

「透明インデックスカラー」
~マンガでプログラミング用語解説

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

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

解説

 透明インデックスカラーは、インデックスカラーの特定の色を、透明としたものです。透明インデックスカラーでは半透明は表現できませんが、「描画しない」という処理だけなので、アルファチャンネルの合成に比べて、高速に画像を合成できます。また、インデックスカラーとして画像を保持することができるので、小さなファイルサイズで画像を作れます。

 似たような処理として、特定の色を透明な色として扱う方法があります。黒色や紫色、緑色を抜き色としたり、画像の左上の色を抜き色にしたります。こういった画像や処理は、ゲームの開発では、よく出てきていました。

 Web用の画像では、GIFが透明インデックスカラーをサポートしていることで有名です。

サンプル

 プログラムではなく、GIFを背景の上に描画することで、透明インデックスカラーを体験してみます。

 アルファチャンネルとは違い、半透明ではないので、画像の端の方が目立ちます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>「透明インデックスカラー」のサンプル</title>
    </head>
    <body>
        <div style="background-color: red;
        display: inline-block; padding: 16px;">
            <img src="8857_img_char.gif">
        </div>
        <div style="background-image: url('8857_img_back.png');
        display: inline-block; padding: 16px;">
            <img src="8857_img_char.gif">
        </div>
    </body>
</html>
元画像(8857_img_char.gif)
元画像(8857_img_char.gif)
元画像(8857_img_back.png)
元画像(8857_img_back.png)
表示結果
表示結果
フィードバックお待ちしております!

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



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

バックナンバー

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

もっと読む

著者プロフィール

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

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

あなたにオススメ

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