基礎編（その七）

画像の加工 part1

今回から三回にわたって、画像をそのまま表示するのではなく、エフェクトブースターの機能で加工して表示する方法を説明します。

これは、特にアニメーションと関連が深い内容です。
あらかじめ加工済みの画像を用いればエフェクトブースターを用いなくても同じようなことが出来るでしょうが、アニメーションによる連続的な画像加工を行う場合は、何枚も画像を用意しなければならず、手間も容量も増えてしまいます。
エフェクトブースターを用いれば（用意されている機能に限りますが）それらを節減することが可能です。

画像を加工するパラメータは、単独で機能するものと、ふたつ組み合わせて効果を発揮するものとがありますが、今回は単独で機能するパラメータを幾つか紹介します。

画像加工の基本

画像を加工するのは簡単で、そのために用意されたパラメータに値を設定するだけです。

サンプルとしては、基礎編（その一）で作成したものと同様、冒険者の宿の画像を用いることにします。
つまりベースは以下の画像で、これにさまざまな加工を加え、見比べていくことにします。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0

画像を変色させる

まずはシンプルなものからはじめてみましょう。
colormap パラメータは画像の色調を変化させます。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: colormap=1

12 行目にパラメータが追加されました。これを実行するとこのような表示になります。

どことなく遺影っぽくなりましたが、これは colormap パラメータの効果によってグレイスケール化したことによるものです*1。
colormap パラメータは設定値を 1 以外の値にすることで、様々な色調で画像を表示することが出来ます。

設定値	色調
0	通常色（デフォルト値）
1	グレイスケール
2	セピア
3	ピンク
4	サニィレッド
5	リーフグリーン
6	オーシャンブルー
7	ライトニング
8	パープルライト
9	アクアライト
10	クリムゾン
11	ダークグリーン
12	ダークブルー
13	スワンプ
14	ダークパープル
15	ダークスカイ

たとえば colormap = 10 （クリムゾン）にすると・・・

こんな風に、色をつけることができるわけです。暗室っぽい雰囲気で・・・と言っても若い人には通じないかもしれませんが、状況によっては使い道がありそうです。
他の色については、実際にみなさん自身で試してみてください。

画像にフィルターを適用する

filter パラメータの使い方は colormap と似ていますが、画像に特殊な加工を施します。設定値によってさまざまな効果をもたらすことが可能で、 editor128.chm によれば、その効果は以下の通りです。

設定値	効果
0	フィルターなし（デフォルト値）
1	ぼかし
2	シャープ
3	サンパワー
4	カラーエンボス
5	ダークエンボス
6	エレクトリカル
7	モノクロ
8	拡散
9	ネガポジ反転
10	エンボス

それぞれの効果については実際に見るのが早いでしょう。以下に実行例を示します。

filter = 1（ぼかし）

filter = 2（シャープ）

filter = 3（サンパワー）

filter = 4（カラーエンボス）

filter = 5（ダークエンボス）

filter = 6（エレクトリカル）

filter = 7（モノクロ）

filter = 8（拡散）

filter = 9（ネガポジ反転）

filter = 10（エンボス）

ちなみに filter = 7 の「モノクロ」は（先ほどのグレースケールと異なり）二値化したものです。

ハッチングと網掛け

maskというパラメータは、画像に平行ないし格子状の線を加える効果があります。

設定値	効果
0	なし（デフォルト値）
1	平行な縦線
2	平行な横線
3	縦横の格子状の網掛け

たとえば mask = 2 を指定するとこうなります。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: mask=2

画像に横線が入りましたよね。この横線の色は（CardWirth における）透明色、つまり「画像の左上のドットの色」です。ということは transparent パラメータを有効にすると、その部分は透けて見えるようになる、ということです。
実際に 11 行目の transparent パラメータを 1 に変えるとこうなります。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=1
12: mask=2

背景の地図が透けましたね。
試しに、先に紹介した filter も組み合わせてみましょう。設定値は 8 （拡散）にします。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=1
12: mask=2
13: filter=8

反転と回転とバグ

エフェクトブースターには画像を反転したり回転したりして表示する機能があります。以下の三つです。

パラメータ	概要	設定値	デフォルト値
flip	画像を上下反転する	0: 何もしない 1: 上下反転	0: 何もしない
mirror	画像を左右反転する	0: 何もしない 1: 左右反転	0: 何もしない
turn	画像を九十度回転する	0: 何もしない 1: 右（時計回り）に回転 2: 左（反時計回り）に回転*2	0: 何もしない

使用するには、それぞれのパラメータを記述するだけです。たとえば冒険者の宿を上下反転するにはこうします。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: flip=1

12行目に flip パラメータを追加しました。これを表示すると以下のようになります。

上下が逆になって表示されました。
同様に、左右反転もやってみましょう。 flip の代わりに mirror を指定します。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: mirror=1

ちゃんと左右反転していますね。
これらのパラメータは同時に指定することも出来ます。つまり上下反転して左右反転すると、180 度回転したのと同じ結果になります。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: flip=1
13: mirror=1

次は 90 度の回転です。turn を用います。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=400
 8: height=260
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: turn=1

その実行結果は・・・

いちおう回転はしているのですが、少し予想外の結果になりました。ちゃんと width と height を指定しているのですが、入れ替わって表示されてしまっています。検証のために width と height をそれぞれ 1/2 にしてみます。

 1: [init]
 2: backwidth=632
 3: backheight=420
 4: fileName=MapOfWirth.bmp
 5: 
 6: [冒険者の宿]
 7: width=200
 8: height=130
 9: fileName=AdventurersInn.bmp
10: position=116,15
11: transparent=0
12: turn=1

この実行結果はこの通りです。

やはり width と height が逆に解釈されているようです。CW 1.50 の turn パラメータの挙動にはバグがあるので注意が必要です。
ちなみに Py では以下のように表示されます。

画像としては（アスペクト比が変わってしまい）奇妙ですが、エフェクトブースターとしての動作はこちらの方が正しいといえます。

まとめとおさらい

今回のポイントは以下の通りです。

• 画像を加工するには、加工用のパラメータを追記するだけでよい
• 加工用のパラメータは、設定値によって幾つかの効果を持つものがある
• 異なる加工用のパラメータを組み合わせて使用することができる

今回登場したパラメータは以下の通りです。

パラメータ名	機能
colormap	画像の色調を変化させる
filter	画像に特殊な効果をもたらす
mask	画像に平行線や網掛けを付与する
flip	画像を上下反転させる
mirror	画像を左右反転させる
turn	画像を90度回転させる（CW1.50ではバグあり）

次回は、二つのパラメータをセットで使用する画像加工について紹介します。

戻る：基礎編（その六）

目次

進む：基礎編（その八）

---

*1 普通の日本語ではこの種の画像を「モノクロ」とか「白黒」といいますが、コンピュータにおける画像の用語としては「厳密に白と黒の二種類しかない画像」と「白と黒とその中間の濃淡がある画像」を区分する傾向があり、「モノクロ」「白黒」はどちらとも取れるので、濃淡がないものを「二値画像（バイナリイメージ）」、あるものを「グレイスケール」と呼ぶことがあります
*2 editor128.chm には 1 が「左に回転」、2 が「右に回転」とありますが、誤りです