はじめに
OpenCVで透過png画像を扱い、往年のホビーパソコンのスプライト的なことをやってみよう。
本格的にスプライトを使ったゲームを作りたい人はpygameを使うとよい。私はOpenCVの勉強をしたいだけだ。
基本 RGBA要素について
ここではいらすとやの「決めポーズを取る戦隊もののキャラクターたち（集合）」（を縮小したもの）を使う。背景は透過処理されている。
| sentai.png |
|---|
 |
RGBA画像を取り込むにはcv2.imread()でflags = cv2.IMREAD_UNCHANGEDと指定する。
実際はそんな呪文を覚える必要はなく、2番目の引数として-1を指定すればよい。引数を1にするもしくは省略するとRGBの3チャンネル画像として取り込まれる。
import cv2
filename = "sentai.png"
img4 = cv2.imread(filename, -1)
img3 = cv2.imread(filename)
print (img4.shape) # 結果：(248, 300, 4)
print (img3.shape) # 結果：(248, 300, 3)
なお、この画像をcv2.imshow()で表示したとき背景が黒になる。お絵かきソフトで透明キャンバスの上に絵を描くと、透明の部分は色要素がないために黒として扱われるわけだ。RGB成分がすべてゼロ＝(0,0,0)＝黒ということ。
RGBA各要素を取り出す
何度も書くがOpenCV画像はnumpy.ndarray形式でデータ格納されているので、トリミングだけでなく各色要素を取り出すのもスライスでできる。
import cv2
filename = "sentai.png"
img4 = cv2.imread(filename, -1)
b = img4[:, :, 0]
g = img4[:, :, 1]
r = img4[:, :, 2]
a = img4[:, :, 3]
cv2.imshow("img4", img4)
cv2.imshow("b", b)
cv2.imshow("g", g)
cv2.imshow("r", r)
cv2.imshow("a", a)
cv2.waitKey(0)
cv2.destroyAllWindows()
| 元画像 | A要素 | |
|---|---|---|
|
 |
|
| B要素 | G要素 | R要素 |
 |
 |
 |
各要素はndim=2すなわち(height, width)のシェイプとなっている。だから各要素を画像として表示させるとグレースケールになる。
アカレンジャーはたとえば(B,G,R)=(21,11,213)なので赤の輝度がかなり高い一方で青と緑の輝度は低い。
その一方でキレンジャーは(B,G,R)=(0,171,247)なので赤の輝度はアカレンジャー以上に高く、また緑要素もそれなりに高いことがわかる。
また、アルファ値は0が透明で255が不透明。透明度というより不透明度と覚えたほうがよさそうだ。
では各色要素を各色で表示するにはどうしたらよいかというと、他色成分を0としたRGB画像をあらためて作ってやればよいのだ。
import cv2
import numpy as np
filename = "sentai.png"
img3 = cv2.imread(filename)
b = img3[:, :, 0]
g = img3[:, :, 1]
r = img3[:, :, 2]
z = np.full(img3.shape[:2], 0, np.uint8)
imgB = cv2.merge((b,z,z))
imgG = cv2.merge((z,g,z))
imgR = cv2.merge((z,z,r))
cv2.imshow("imgB", imgB)
cv2.imshow("imgG", imgG)
cv2.imshow("imgR", imgR)
cv2.waitKey(0)
cv2.destroyAllWindows()
元のRGB画像で不必要な色の輝度を0にするというやり方もある。
import cv2
import numpy as np
filename = "sentai.png"
img3 = cv2.imread(filename)
imgB = img3.copy()
imgB[:, :, (1,2)] = 0 # 3ch(BGR)の1番目(G)と2番目(R)を0にする
imgG = img3.copy()
imgG[:, :, (0,2)] = 0 # 3ch(BGR)の0番目(B)と2番目(R)を0にする
imgR = img3.copy()
imgR[:, :, (0,1)] = 0 # 3ch(BGR)の0番目(B)と1番目(G)を0にする
cv2.imshow("imgB", imgB)
cv2.imshow("imgG", imgG)
cv2.imshow("imgR", imgR)
cv2.waitKey(0)
cv2.destroyAllWindows()
| B要素を青で | G要素を緑で | R要素を赤で |
|---|---|---|
 |
 |
 |
画像を合成する
ここからが本番。
背景画像は「宇宙のイラスト（背景素材）」とする。jpeg画像で、アルファ値は持たない。
背景の上に重ねる画像は「宇宙飛行士のイラスト」（を縮小したもの）。
| space.jpg |
|---|
 |
| uchuhikoushi.png |
 |
事前準備
RGBA画像からRGB画像とマスク画像を作る。先ほど「A要素」として挙げたのは1チャンネルなので背景画像と合成することはできない。B要素を青くR要素を赤くしたのと似た方法で、RGB3チャンネルのマスク画像を作る。
import cv2
filename = "uchuhikoushi.png"
img4 = cv2.imread(filename, -1)
img3 = img4[:, :, :3] # RGBAのうち最初の3個すなわちRGB
mask1 = img4[:, :, 3] # RGBAのうち0から数えて3番目すなわちA
mask3 = cv2.merge((mask1, mask1, mask1)) # 3チャンネルのRGB画像とする
| 元画像（RGBA） | RGB画像 | マスク画像 |
|---|---|---|
|
 |
 |
また、背景から前景と同サイズの画像を切り出しておこう。
方法1 透明色を設定する
前景画像の中に「この色は主たる画像の一部ではなく、背景として使われているだけだ」という色がある場合、numpy.where()を使って透明色を設定できる。クロマキーのようなものだ。
最小限の要素のみ書くとこうなる。
# backとfrontは同じシェイプである必要がある
transparence = (0,0,0)
result = np.where(front==transparence, back, front)
| back | front | result |
|---|---|---|
 |
|
 |
容易は容易だが、たとえばこのいらすとやの画像ならば、宇宙飛行士の黒髪に(0,0,0)が使われていないことを事前に確認しておく必要がある。失敗すると透明になったガチャピンのような事態になってしまう。
方法2 マスク処理をする
他サイトを見れば答えはすぐに出てくるが、勉強のために試行錯誤してみよう。
論理演算における恒等式
x and 1 = x
x and 0 = 0
x or 1 = 1
x or 0 = x
を、0と1のブール値だけでなく任意の値に対しておこなう。輝度は8ビットで表すから、乱暴に書くと
x(任意の色) and 255(白) = x(任意の色)
x(任意の色) and 0(黒) = 0(黒)
x(任意の色) or 255(白) = 255(白)
x(任意の色) or 0(黒) = x(任意の色)
ということ。
下の表は手作業で作ったので、間違っているところがあったらごめんなさい。
| No | back | 演算 | mask | → | tmp |
|---|---|---|---|---|---|
| 1 | |
OR | |
→ |  |
| 2 | |
AND | |
→ |  |
| 3 | |
OR |  |
→ |  |
| 4 | |
AND | |
→ |  |
この段階で使えそうなのは1番と4番だ。それらに前景画像を合成していこう。
| No | tmp | 演算 | front | → | result | 評価 |
|---|---|---|---|---|---|---|
| 1-1 | |
OR | |
→ | |
× |
| 1-2 | |
AND | |
→ | |
× |
| 1-3 | |
OR |  |
→ |  |
× |
| 1-4 | |
AND | |
→ | |
○ |
| 4-1 | |
OR | |
→ | |
○ |
| 4-2 | |
AND | |
→ |  |
× |
| 4-3 | |
OR | |
→ | |
× |
| 4-4 | |
AND | |
→ | |
× |
ということで、正解は、1-4および4-1でした。
事前に「背景が黒の前景画像」と「背景が黒で前景が白のマスク画像」を用意しておいたが、それだけでは合成はできなかった。1-4では「背景が白の前景画像」、4-1では「背景が白で前景が黒のマスク画像」が必要だった。まこと人生はままならぬものよ。
画像外への描写への対応
スプライトを名乗るならば背景画像の範囲外にも描写できなければ話にならない。
という解説を書くつもりだったが、すでに前回の記事「OpenCVで日本語フォントを描写する を関数化する を汎用的にする」で実装してしまったので説明は略。
方法3 PILを使う
OpenCVの勉強とはいえ、PILに触れないわけにはいかない。
画像に画像を貼り付けする Image.paste(im, box=None, mask=None)
- im 貼り付けする画像。
-
box 左上座標を
(x, y)であらわす。ありがたいことに元画像の範囲外でも可。デフォ値はNoneでこのときは左上となる。4要素のタプルで指定する方法もあるがそちらは省略。 -
mask マスク画像。デフォ値は
None。画像は白黒やグレースケールだけでなくRGBA画像も指定可能。RGBAのときはアルファ値がマスクとして扱われるという親切仕様。
画像に透過画像を合成するにはImage.paste(im, box, im)と1番目と3番目に同じ引数を指定するだけでよい。
さすがPILだ、これまでOpenCVでやってきたことは何だったのかと言いたくなってくる。
実行速度比較
以上、3つの方法を示した。また、前回の記事で、画像全体をPIL処理するのでなく必要な部分のみPILするという方法も習得した。
そこで、次の4つの自作関数で実行速度を見てみよう。
- putSprite_npwhere 透明色を設定しnp.whereで画像を合成する。背景画像外への対応あり。
- putSprite_mask マスク画像を設定し合成する。背景画像外への対応あり。
- putSprite_pil_all PILで合成する。背景画像全体をPILにする。背景画像外への対応は必要ない。
- putSprite_pil_roi PILで合成する。PILにするのは合成に必要な部分のみ。ROIを設定する際に背景画像外への対応をおこなっている。
実行する内容はこんな感じ。容量削減のためにアニメGIFのフレームを削っています。
ソースは長いので一番下に。
結果
それぞれ10回実行したときの平均値。
putSprite_npwhere : 0.265903830528259 sec
putSprite_mask : 0.213901996612548 sec
putSprite_pil_all : 0.973412466049193 sec
putSprite_pil_roi : 0.344804096221923 sec
プログラムが最適化されていないとか私のマシンが遅いとかそもそもPythonは遅いとかは置いといて、PILの遅さが際立っている。そしてPILを使うにしても最小限のROIのみでおこなえば速度が大幅に向上することもわかった。前々回の記事でいただいたコメントは本当にありがたい。
マスク処理とnp.where()はPILよりも速い。np.where()は十分に速いが、内部で判定をおこなっているのでマスク処理よりわずかに遅い。マスク処理はマスク画像を用意する必要があるが、画像を上書きしているだけなので処理的にはもっとも軽いのだろう。
注意事項
マスク処理とnp.where()は半透明を持つ画像には使えない。
マスク処理は0や1だから恒等式が成り立つのであって、半透明すなわち0でも1でもない値で計算したら
x(背景の色) and a(中途半端なマスク) = tmp(変な色)
tmp(変な色) or y(前景の色) = z(想定外の色)
となってしまうのは当然だ。
np.where()は工夫次第では半透明に対応できるかと思っていろいろ試してみたが、少なくとも私にはできなかった。
次回予告
次は半透明と回転への対応に挑戦したいと思います。
ソース
文字列をPythonコマンドとして使う関数eval()はこの記事をアップする直前に知った。
参考：Python - 関数を文字列から動的に呼び出す
import cv2
import numpy as np
from PIL import Image
import time
import math
# numpy.whereで合成する
# 他関数との関係上RGBA画像を取り込んでいるが
# 使うのはRGB要素のみでアルファ値は使っていない。
# 透明色(0,0,0)を決め打ちしているが良いやり方ではない。
def putSprite_npwhere(back, front4, pos):
x, y = pos
fh, fw = front4.shape[:2]
bh, bw = back.shape[:2]
x1, y1 = max(x, 0), max(y, 0)
x2, y2 = min(x+fw, bw), min(y+fh, bh)
if not ((-fw < x < bw) and (-fh < y < bh)) :
return back
front3 = front4[:, :, :3]
front_roi = front3[y1-y:y2-y, x1-x:x2-x]
roi = back[y1:y2, x1:x2]
tmp = np.where(front_roi==(0,0,0), roi, front_roi)
back[y1:y2, x1:x2] = tmp
return back
# マスク処理する
# マスク画像はRGBA画像から都度関数内で作成する。
# あらかじめマスク画像を作っておいたほうが速いが、
# こちらのほうが使いやすい。と思う。
def putSprite_mask(back, front4, pos):
x, y = pos
fh, fw = front4.shape[:2]
bh, bw = back.shape[:2]
x1, y1 = max(x, 0), max(y, 0)
x2, y2 = min(x+fw, bw), min(y+fh, bh)
if not ((-fw < x < bw) and (-fh < y < bh)) :
return back
front3 = front4[:, :, :3]
mask1 = front4[:, :, 3]
mask3 = 255 - cv2.merge((mask1, mask1, mask1))
mask_roi = mask3[y1-y:y2-y, x1-x:x2-x]
front_roi = front3[y1-y:y2-y, x1-x:x2-x]
roi = back[y1:y2, x1:x2]
tmp = cv2.bitwise_and(roi, mask_roi)
tmp = cv2.bitwise_or(tmp, front_roi)
back[y1:y2, x1:x2] = tmp
return back
# PILで合成する 背景画像全体
def putSprite_pil_all(back, front4, pos):
back_pil = Image.fromarray(back)
front_pil = Image.fromarray(front4)
back_pil.paste(front_pil, pos, front_pil)
return np.array(back_pil, dtype = np.uint8)
# PILで合成する 背景画像内にある部分のみ
def putSprite_pil_roi(back, front4, pos):
x, y = pos
fh, fw = front4.shape[:2]
bh, bw = back.shape[:2]
x1, y1 = max(x, 0), max(y, 0)
x2, y2 = min(x+fw, bw), min(y+fh, bh)
if not ((-fw < x < bw) and (-fh < y < bh)) :
return back
back_roi_pil = Image.fromarray(back[y1:y2, x1:x2])
front_pil = Image.fromarray(front4[y1-y:y2-y, x1-x:x2-x])
back_roi_pil.paste(front_pil, (0,0), front_pil)
back_roi = np.array(back_roi_pil, dtype = np.uint8)
back[y1:y2, x1:x2] = back_roi
return back
def main(func):
filename_back = "space.jpg"
filename_front = "uchuhikoushi.png"
img_back = cv2.imread(filename_back)
img_front = cv2.imread(filename_front, -1)
bh, bw = img_back.shape[:2]
xc, yc = bw*0.5, bh*0.5
rx, ry = bw*0.3, bh*1.2
cv2.putText(img_back, func, (20,bh-20), cv2.FONT_HERSHEY_SIMPLEX, 1, (255,255,255))
### 時間を計るのはここから
start_time = time.time()
for angle in range(-180, 180):
back = img_back.copy()
x = int(xc + rx * math.cos(math.radians(angle)))
y = int(yc + ry * math.sin(math.radians(angle)))
img = eval(func)(back, img_front, (x,y))
#ここは必要に応じて有効にしたり無効にしたりする
#cv2.imshow(func, img)
#cv2.waitKey(1)
elasped_time = time.time() - start_time
### ここまで
print (f"{func} : {elasped_time} sec")
cv2.destroyAllWindows()
if __name__ == "__main__":
funcs = ["putSprite_npwhere",
"putSprite_mask",
"putSprite_pil_all" ,
"putSprite_pil_roi" ]
for func in funcs:
for i in range(10):
main(func)