高専プロコンのGUIをOpenSiv3D Linux版で開発した話

#はじめに
この記事はSiv3D Advent Calendar 2018 16日目の記事になります。

はじめまして、ひがしと申します。
この記事では私たちのチーム「塗、無言、枡目にて。～私はずっとそうやって過ごしてきた～」が
OpenSiv3D Linux版で高専プロコン競技部門のGUIを作成したときの話をしていきたいと思います。
また、この開発したGUIは下記リポジトリのkyonフォルダ内にあります。
https://github.com/kurokoji/procon29-kyogi

#高専プロコン29競技部門のルール

Nマス×Mマスのフィールドがあり、そのマスには点数が書かれており、
そのマスをとりあい、獲得点数がより多いチームの勝利というルールでした。

#OpenSiv3Dを選んだ理由
最初のチームのミーティングにてリーダーから

• OpenSiv3D
• Qt
• JavaFX

の中から使うものを決めようと言われました。

GUI担当のメンバーで話し合った結果、
C++で書きたいということでJavaFX以外になりQtとOpenSiv3Dそれぞれをみんなでためすことになりました。
そして次のミーティングで日本語の資料が豊富という理由とこのルールに合わせたGUIを作成するならOpenSiv3Dのほうがいいという結論にいたり、OpenSiv3Dで開発することになりました。

#ルールを見てGUIに必要と判断した機能

• 特定のイベントが発生した場合に色が変わるボタン
• ソルバからの指示を受け取り、ハンドサインを表示する
• QRコードリーダーから受け取った値を使ってN*Mマスのフィールドを表示する

この3つが必要と判断されたため、それぞれの担当メンバーを振って開発をすることになりました。
因みに私はボタンの実装をすることになりました。

#完成したもの

#procon29 沖縄高専のGUIはこんな感じ OpenSiv3DをLinuxで使っています pic.twitter.com/GwJ3AoeMS2

— kurokoji (@kur0k0ji) 2018年10月30日

こちらが完成したGUIになります。

#Linux版環境構築に関して
Ubuntu18.04の環境構築になります。
まずは

sudo apt install gcc clang git cmake libx11-dev libxi-dev libxinerama-dev libxcursor-dev libxrandr-dev libjpeg-dev libpng-dev libgl1-mesa-dev libglu1-mesa-dev libglib2.0-dev libfreetype6-dev libturbojpeg-dev libopenal-dev libfontconfig-dev libudev-dev libboost-dev libboost-all-dev libglew-dev libbox2d-dev libgif-dev libopencv-dev

で必要なライブラリをインストールします。
その後、

$ git clone https://github.com/Siv3D/OpenSiv3D.git
$ cd OpenSiv3D
$ git checkout -b linux origin/linux
$ cd Linux
$ cmake .
$ make
$ cp -rf resources Test
$ cd Test

のそれぞれを実行し、CMakeLists.txtの61行目、
${PROJECT_SOURCE_DIR}/../Debug/libSiv3D.aを
${PROJECT_SOURCE_DIR}/../libSiv3D.aに書き換えます。

そして最後に

$ cmake .
$ make
$ ./Siv3D_Test

でサンプルコードが実行できると思います。

ただ、開発前にkyonフォルダの中にあるsetup.shを実行することで環境構築が済むように先輩がscriptを書いてくれました。

#ボタンについて
開発が始まったときにはOpenSiv3DにはButton classがありませんでした。
なので、描画をするためのdraw()、ボタンの座標を指定するためのsetPos()、クリックの判定をするためのleftClicked()それぞれをメンバ関数で使えるようにしたButton classを作成しました。

Button.cpp Button.hpp FieldSquare.cpp FieldSquare.hppが作成したButton classとその派生になります。

#ハンドサインの表示
ソルバから受け取った値に応じて用意しておいた画像を表示する必要がありました。
こちらはOpenSiv3Dの画像を表示する機能を使いました。

CommandGUI.cpp CommandGUI.hpp がハンドサインの表示をするためのclassです。

#フィールドを描画する
TCP通信で値をとってきてその後範囲for文でN*Mマスを描画しました。
最初は通常のfor文で描画しようとしていたのですが、通常のfor文だと描画がされないということで、範囲for文で描画することになりました。

#最後に
今回OpenSiv3Dを大会の開発で使わせていただくことで、GUIの作成について知識がつき、とてもいい経験になりました。
GUI開発経験が一切なかった自分でも簡単にGUIを作成することができたので、
GUIに興味がありそうな後輩にどんどん進めていきたいと思います。
また、もし来年も競技部門に出ることになったらGUIはOpenSiv3Dを使えればと思っています。

つたない文章でしたがここまで読んでくださりありがとうございました。