「逆転オセロニア」を画像解析して自動ダメージ計算  part2 (文字識別編)

# 逆転オセロニア画面を解析して自動でダメージ計算

逆転オセロニアとはオセロのルールで駒を置いていき、スキルやコンボを駆使して相手のHPを削ったら勝ちという対戦型のスマホゲームアプリになります。

そのためダメージ計算はかなり重要な部分になってきます。

詳しくは

[逆転オセロニア最速攻略wiki](https://xn--cckp5c6czi2302avwxa.gamematome.jp/game/964/wiki/%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8)

で確認してみてください。

その逆転オセロニアのダメージ計算を自動で行うためのプログラムを1年ほど前に作成していましたが、その時の作業手順を思い出しながら少しだけ解説していこうと思います。

---
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">オセロニアの画面を解析してダメージ計算できるプログラムを作ってみました(●´ω｀●) <br><br>端数の計算が間違ってるなど、まだまだ問題だらけです(＠_＠;) <a href="https://t.co/WL7FaiBmz3">pic.twitter.com/WL7FaiBmz3</a></p>&mdash; とよとよ (@toyotoyo_) 
<a href="https://twitter.com/toyotoyo_/status/1055465528242786305?ref_src=twsrc%5Etfw">October 25, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---
## 前回の記事

[「逆転オセロニア」を画像解析して自動ダメージ計算 part1 (iPhone PC表示編)](https://qiita.com/toyotoyo_/items/eb1198074eafabcc8a67)

前回の記事では「逆転オセロニア」をPCで表示し、Pythonでスクリーンキャプチャをするまでの手順を紹介しました。

## 今回の記事

今回の記事は前回の続きで、スクリーンキャプチャした画像の数値部分の解析を行いプログラムで使用できる用にする部分までを紹介したいと思います。


## ATK部分の画像抽出

前回の記事で行ったようにLonelyScreenで「逆転オセロニア」を全画面表示させます。

![オセロニア画面表示2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/d74c5d83-6127-2497-65bf-e85f18ef63eb.png)

この画面からエルツドラッヘ(左から2番目のキャラ)のATK部分を取得してみます。

Jupyter Notebookを開き

```
from PIL import Image, ImageTk, ImageGrab
url_img = 'othellonia_atk2.png'
ImageGrab.grab(bbox=(881, 978, 950, 999)).save(url_img)
```

を実行すると「othellonia_atk2.png」というファイルが作成され、数値の部分のみ取得できます。

![othellonia_atk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/badbcf0a-0860-bb56-0a36-cabc4e43400c.png)

bbox=(881, 978, 950, 999)

の部分の数値は

bbox=(左, 上, 右, 下)

という座標を指定しています

※ 解像度を合わせても環境によって座標は少し変わることもあります。

# 数値部分を解析

画像から数値を取り出す部分については自分で機械学習させて、「逆転オセロニア」専用に認識精度の高いモデルを作りこむことも可能です。

ですが作りこむのに時間がかかるため、今回は学習済みでPythonでも使えるの Tesseract OCR を使いたいと思います。

## Tesseract OCR のインストール

[GitHubのtesseract/wiki]
(https://github.com/tesseract-ocr/tesseract/wiki)

このページから環境にあったインストール方法を確認します。
今回はWindows10の64bit環境の手順になります。

![tesseract_wiki.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/3e20dcbe-55a5-3f8c-2b9f-7e8ea42820b1.png)
---

Windows用のインストーラーを使用するため [Tesseract at UB Mannheim.](https://github.com/UB-Mannheim/tesseract/wiki) を選択します。

---
![Tesseract at UB Mannheim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/87e9ef18-ef6f-d125-09b8-10b2fa040671.png)
---

約1年前の自動ダメージ計算プログラムを作成したときは Tesseract 3.05 をインストールしていましたが、 Tesseract 5 のalpha版が出ていてよさげなことを書いているので、今回は検証もかねて最新版の Tesseract 5 をインストールしてみたいと思います。

「tesseract-ocr-w64-setup-v5.0.0-alpha.20191010.exe (64 bit) resp.」

 をリンクを押下

インストーラーがダウンロードされるので実行

インストールが終了したらシステム環境変数に Tesseract OCR のPathを設定します。

コントロールパネルのシステム画面([Windows]キー＋[Pause/Break]キー)を表示し、
「システムの詳細設定」画面を開きます。

![システムのプロパティ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/7aeb7991-1713-4562-ab72-1a4eb3753d73.png)

「環境変数」ボタンを押下し「システム環境変数」の「Path」をダブルクリック

![環境変数名の編集.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/67961513-71dc-07e5-2f1b-e47abadca7fc.png)

新規ボタンを押下し

「C:\Program Files\Tesseract-OCR」

を入力しOKボタン押下

Tesseract OCRのインストールは終了です。

## pytesseractのインストール

Tesseract OCRをPythonから呼び出すためにpytesseractをインストールします。

pytesseractはpipでインストールするのでAnaconda Prompt (Anaconda3)を開きます。

スタート メニュー> Anaconda3 (64-bit) > Anaconda Prompt (Anaconda3)

コマンドプロンプトが開いたら pip install pytesseract を実行

```
(base) C:\Users\toyotoyo>pip install pytesseract
Collecting pytesseract
  Downloading https://files.pythonhosted.org/packages/47/e5/892d78db0d26372aa376fc1b127e9cd4cc158727a76e0802069115fcbd6e/pytesseract-0.3.0.tar.gz
Requirement already satisfied: Pillow in c:\users\toyotoyo\anaconda3\lib\site-packages (from pytesseract) (6.1.0)
Building wheels for collected packages: pytesseract
  Building wheel for pytesseract (setup.py) ... done
  Stored in directory: C:\Users\toyotoyo\AppData\Local\pip\Cache\wheels\78\c9\ac\4cb76bd547f9970070522439e5203ba7926c5c5c4f131583ea
Successfully built pytesseract
Installing collected packages: pytesseract
Successfully installed pytesseract-0.3.0

(base) C:\Users\toyotoyo>
```

これでPythonでTesseract OCR を動かす環境が出来ました。

## pytesseractを実行

Jupyter Notebookでpytesseractを実行し、先ほどスクリーンキャプチャをしたATKの画像を読み込んでみます。

```
from PIL import Image, ImageTk, ImageGrab
import pytesseract
url_img = 'othellonia_atk2.png'

img = Image.open(url_img)
number = pytesseract.image_to_string(img, config = "--psm 7 nobatch digits")
print(number)
```

を実行

文字の位置を特定している画像を使っているので--psm 7を指定しています。
さらに読み取る内容も数値だけなのでnobatch digitsを指定しています。

※ TesseractNotFoundError: tesseract is not installed or it's not in your path
が出た場合は環境変数が読み込まれていないのでJupyter Notebookを再起動してみてください


![OCR実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/f90f497f-68d6-105a-6d5c-f9e6f1cc0fda.png)


結果 1547 と出力されました！！

正しく表示されていそうですね。

これでオセロニア画面上に表示されているATKの数値をプログラム上で使用することが可能になります。

# おまけ
約1年前の自動ダメージ計算プログラムを作成したときは、数値部分を識別しやすいように画像加工処理も行っていました。

今回のケースでは正しく数値を認識できていましたが、画像によっては認識できないケースもあると思うので、画像変換処理の部分も紹介します。

Pythonでの画像編集にはOpenCVを使っています。

## OpenCV のインストール

pytesseractのインストール時と同様にAnaconda Prompt (Anaconda3)を開きます。



スタート メニュー> Anaconda3 (64-bit) > Anaconda Prompt (Anaconda3)

コマンドプロンプトが開いたら pip install opencv-python を実行

```
(base) C:\Users\toyotoyo>pip install opencv-python
Collecting opencv-python
  Downloading https://files.pythonhosted.org/packages/1f/51/e0b9cef23098bc31c77b0e06221dd8d05119b9782d4c2b1d1482e22b5f5e/opencv_python-4.1.1.26-cp37-cp37m-win_amd64.whl (39.0MB)
     |████████████████████████████████| 39.0MB 107kB/s
Requirement already satisfied: numpy>=1.14.5 in c:\users\toyotoyo\anaconda3\lib\site-packages (from opencv-python) (1.16.4)
Installing collected packages: opencv-python
Successfully installed opencv-python-4.1.1.26

(base) C:\Users\toyotoyo>
```
これでPythonで OpenCV を動かす環境が出来ました。

## 画像変換後にOCR実行

Jupyter Notebookで画像キャプチャ+色の反転+グレースケール変換+しきいち処理+OCR処理を行います。

```
from PIL import Image, ImageTk, ImageGrab
import pytesseract
import cv2
url_img = 'othellonia_atk2.png'
ImageGrab.grab(bbox=(881, 978, 950, 999)).save(url_img)
```

![othellonia_atk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/403564e6-df0b-ea5f-421d-c83ea0142c5e.png)

```
# 入力画像の読み込み
img = cv2.imread(url_img)

#色の反転
img = cv2.bitwise_not(img)
# 結果をファイルに出力
cv2.imwrite("bitwise_not_" + url_img, img)
```

![bitwise_not_othellonia_atk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/324124ed-4bdf-b27d-a0d6-c31368417399.png)


```
# グレースケール変換
gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
# 結果をファイルに出力
cv2.imwrite("gray_" + url_img, gray)
```

![gray_othellonia_atk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/364a5df4-9d40-d0d7-442f-1a222862a76d.png)


```
#しきいち処理       
t = 100  # 閾値
ret, th2 = cv2.threshold(gray, t, 255, cv2.THRESH_BINARY)    
# 結果をファイルに出力
cv2.imwrite("threshold_" + url_img, th2)
```

![threshold_othellonia_atk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/dfa3301f-be7a-ad88-5edb-2c95f13700f2.png)

```
# OCR実行
number = pytesseract.image_to_string(th2, config = "--psm 7 nobatch digits")
print(number)
```

1547と出力！

※ 途中でファイルに出力していますが記事のために出力しているだけで、OCRのプログラムだけが必要な場合は、ファイルに出力する部分は必要はありません。

## まとめ
今回はここまでにします。

OCR処理さえ出来れば、いろいろ応用も出来そうですよね！

~~気力があれば続きも書いていきたいと思います。~~

続きを書きました！
[「逆転オセロニア」を画像解析して自動ダメージ計算 part3 (キャラ識別編)]
(https://qiita.com/toyotoyo_/items/2ecbe7205b828db74bcb)