「逆転オセロニア」を画像解析して自動ダメージ計算 part1 (iPhone PC表示編)

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

逆転オセロニアとはオセロのルールで駒を置いていき、スキルやコンボを駆使して相手の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>


---
オセロニアで画像解析を行いましたが、他のスマホアプリにも応用が利くと思います。

今回はiPhoneに表示されている画面を、Windows10でキャプチャするまでで、画像解析の前までになります。

※ プログラムの完全公開は今のところ考えていません。

## オセロニアをパソコンで表示
#### オセロニアのダメージ計算を自動でできないか？

というのを考えた結果、

#### オセロニアに映っているATKの数値をパソコンで読み取ることは可能か？

というのをまず考えてみました。

私はiPhone7とWindows10を使っているので

LonelyScreen

というソフトを入れて、とりあえずパソコンにiPhoneの画面を映し出すことにしました。
※ 他にもパソコンに映し出すソフトはあります

### LonelyScreen のインストール
LonelyScreen公式
https://www.lonelyscreen.com/download.html
<img width="1002" alt="LonelyScreen.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/57eb6905-1288-11bb-1e3a-f2d13838b9fd.png">

「Download for Windows」

ボタン押下

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

インストール完了後起動してみると確認ダイアログが出ます。

<img width="201" alt="LonelyScreen起動時の確認ダイアログ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/44332b10-bdf7-1a55-ea20-dedcb452187c.png">

今回は無料版で使うので

「Maybe Later」

ボタンを押下

iPhone側で下からスワイプしコントロールセンターを開き

<img width="375" alt="iPhoneコントロールセンター.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/485afe50-5780-3291-b413-04bb8fd2000e.png">

「画面ミラーリング」

を押下します

<img width="375" alt="iPhoneミラーリング.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/509db707-e274-294e-f299-860c85206598.png">

画面ミラーリングで

「LonelyScreen」

を押下するとPC画面にiPhone画面が表示されます。

<img width="361" alt="LonelyScreen接続完了.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/babaf5b4-7bd3-8185-ce79-8d688c15319e.png">


オセロニアを起動すると

<img width="361" alt="オセロニア画面表示.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/e8e2fdd1-a9c3-b0a3-7ce7-7fecc6a02476.png">

のようにパソコン画面でオセロニアを確認できるようになります。

## オセロニア画面をスクリーンキャプチャ準備

続いてその画面をキャプチャし、ATKの数値を読み取るため
画像処理ならPython!と安易な考えで

Anaconda

を入れてPython実行環境を作りました。

### Anaconda のインストール
Anaconda公式のダウンロードページ
https://www.anaconda.com/download

<img width="1015" alt="Anaconda公式ダウンロード.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/f93a6b03-e1d6-0b0f-c6e5-a5b7f16aa9ef.png">

Python 3.7 versionの

「64-Bit Graphical Installer (486 MB)」

を選択

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

インストール完了後スタートメニューから

「Jupyter Notebook (Anaconda3)」

を実行するとJupyter Notebookの画面が立ち上がります。

<img width="1043" alt="JupyterNotebook初期.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/7fa467c5-6ea5-235a-1efb-8926f75cd06b.png">

右上にある

New

を選択するとコンテキストが出るので
<img width="182" alt="JupyterNotebook_New.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/aea2f6c6-015e-a381-0b4c-cebfb5171385.png">

Python3

を選択

これでPythonの実行環境は完了です。


## スクリーンキャプチャ実行

スクリーンキャプチャをとるのに座標が必要なので解像度を合わせます。

ディスレイ設定を開き

拡大縮小とレイアウト
100%

解像度
1920×1080

![ディスプレイ設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/d33a401f-fb6b-d82c-6b97-d01f9072dc65.png)

に変更して進めてみます。

LonelyScreen画面を最大表示にし

Jupyter Notebookがオセロニアの右側に来るように配置します。

スクリーンキャプチャには PIL を使用しています。

In [ ]: と書いている右の枠部分にスクリーンキャプチャ用のプログラムを書きます。

```
from PIL import Image, ImageTk, ImageGrab
url_img = 'othellonia.png'
ImageGrab.grab(bbox=(600, 0, 1920, 1030)).save(url_img)
```

![JupyterNotebook_スクリーンキャプチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/1a152ebf-32ce-0259-94d9-78d7c4e6e6fc.png)


を入力後

Run

ボタンを押下

Jupyter Notebookの最初のページに戻ると

othellonia.png

ができていると思います。

![JupyterNotebook_HomePage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/18693d20-868a-9d0b-f5c7-38f826a84b17.png)

othellonia.png
を確認してみると

![othellonia.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397682/f25d0a0e-0295-32b9-10da-1028534e616a.png)


スクリーンキャプチャが取得できています。

このように座標指定でキャプチャ出来るのでLonelyScreenを最大化しておけば、ATKの座標が固定で取れますね！


今回はここまでです。

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

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