ゲームシステムのエフェクト以外を実装したので、マップの作成を開始した。
具体的には Tiled Map Editor でマップ作成をするために、タイルセットを作成するのと、Tiled Map Editor の保存データをこのゲーム用のデータフォーマットに変換するスクリプトを作ります。

で、できたタイルセットがこれです。

このゲームでは高低差があるマップを表現したかったので、タイルセットに高さを示す数値を書き込んで、それで高低差を実現することにしました。

Tiled Map Editor が出力する tmx ファイルは見ればわかるフォーマットなので、Python スクリプトを作って自分のゲーム用のデータに高さを使うようにした上で変換しました。

Tiled Map Editor で作成したマップをゲームに取り込めた。ゲームでは YAML フォーマットで定義したマップファイルを読み込むように実装してたので、Python スクリプトで tmx ファイルを変換している。 pic.twitter.com/mgzEewzX2n

— Satofumi (@satofumi_) May 5, 2018

あとは、ゲームで使う画像をカラーから白黒にしたかったので、これも Python スクリプトで作成しました。

from PIL import Image
import sys
import os
 
original_file = sys.argv[1]
img = Image.open(original_file)
gray_img = img.convert('LA')
 
filename, ext = os.path.splitext(original_file)
output_file = filename + '_grayscale' + ext
gray_img.save(output_file)

このスクリプトは下記サイトのものを参考にしました。

https://qiita.com/gigegige/items/aad577f49cf4f203f03d

ここまででマップ作成もエディタでできるようになったので、ゲーム起動からゲームまでの流れとか、ストーリーとかを考えようと思います。

いい感じです。

クリアしました。クリアしてなんともいえない気分になってしまったので、今日の創作活動報告はありません。

ゲームエンジンは Python 製でした。

「すけすけゴーグルくん」アプリの記事を見て「あ、これなら私にも作れるかも」って思ったので作り始めた。 画像処理の勉強も兼ねようと思ったので、「実践コンピュータビジョン」(O’REILLY) を見ながら進めた。

作る前の準備

まず、どう作るか考えた。

透過なしの場合の描画内容

ーーーー  ← メガネのフレーム画像
ーーーー  ← カメラで取得した画像

透過する場合の描画内容

ーーーー  ← レンズ部分に透過画像をはめ込んだ画像
ーーーー  ← メガネのフレーム画像
ーーーー  ← カメラで取得した画像

ここまでで、透過前、透過後、そしてメガネの画像が必要そうなのがわかった。
で、必要な素材を「いらすとや」さんで探してきた。

いらすとや さん、ありがとう！
次に、適当な Web カメラがないのに気づいたので、最寄りのビックカメラで一番安いやつを買ってきた。

なんだろな、ここまで準備がガバガバだと、「本当に思いつきで始めたんだなー」って自分で客観視できて良いです。

作り始めた

私が勉強していく過程でわかったこととかを説明し直すのは面倒なので、作業途中のスクリーンショットだけ貼っていきます。

同じ画像で SIFT 特徴量を用いたマッチングをしたはずなのに、対応位置がずれてショックを受けたときのスクリーンショット。

ふて寝した後で見なおしたら、あっさり修正できたときのスクリーンショット

ホモグラフィーとか RANSAC を使って、モニタをカメラで撮った画像に対して検出できた画像の枠を青色で描画してみたときのスクリーンショット。 それなりに動作してちょっと嬉しかった。

最後に、眼鏡内に透過後の画像をはめ込むようにして、実際に動作させたときのスクリーンショット。 縮小してない画像に SIFT を適用して処理が激遅だったり、アフィン変換が RGB 画像だと失敗する理由がわからなくて、透過画像が白黒になったりしている。

とりあえず、動作したことにした！

まとめ

• 実践コンピュータビジョンの内容に沿って進めたら、それなりに動作して嬉しかった。
• ちゃんと動くものを作るなら、何かの AR ライブラリを利用して作るのが簡単だと思う。
• 和牛の垂れ幕が透けても、あまり嬉しくないのがわかった。

今回の記事のソースコードとかは、以下にあります。
https://bitbucket.org/satofumi/transparent_glasses