ENGINEER BLOG

ENGINEER BLOG

PythonのGUIライブラリーkivyでゲームを作ろう

こんにちは。アプリケーションサービス本部の松尾です。

今回は、PythonのGUIライブラリーkivyとRaspberry Piを使って、簡単なゲームを作ってみたので、ご紹介いたします。

kivyって何?

タッチパネルやタッチパッドに触れることで操作を可能とするプログラムを開発する道具です。イメージとしては、指で操作するスマホのアプリを作るものだと思ってもらうとわかり易いと思います。色々と特徴はありますが、今回は初心者向きの内容なので、この程度の認識で大丈夫です。

今回の主な材料

・Raspberry Pi3 Model B
 超小型のシングルボードコンピュータ。 Raspberry Piを動かすためには、micro SDカード、モニター、USB充電ケーブル、モニター、キーボードなどの周辺機器が必要ですが、細かいところは割愛。

・タッチスクリーン
 タッチパネルを備えたディスプレイ。タッチスクリーンであれば何でもOK!

・日経ソフトウェア2017年 6月号
 プログラミングおよびソフトウェア開発の技術と喜びをお伝えする雑誌。今回の参考書でもある。(https://shop.nikkeibp.co.jp/front/commodity/0000/SW1229/

・開発機
 普段使うPCでOK! Raspberry Piの初期設定で必要なOSをダウンロードする際に使います。開発については、Raspberry Pi単体で行うこともできますが、やっぱり普段使いのPCをRaspberry Piに接続した方が便利です。

今回のゴール

右から流れてくる障害物を避けるゲームを作ります。
タッチスクリーンを指で触ると自機が上昇し、指を離すと自機が低下します。

ゲームを作るまでの道のり

STEP1 : Raspberry Piの初期設定
STEP2 : kivyのインストール
STEP3 : kivyによるアプリケーション開発

以上がゲームを作るまでの道のりになっています。今回はSTEP1、STEP2に軽く触れた上で、STEP3の説明を行います。

STEP1 Raspberry Piの初期設定

Raspberry Piを動かすためには、OS(オペレーティングシステム)のインストールを始めとした初期設定が必要なのですが……これが慣れてない人にとっては苦労します。買ったはいいけど、初期設定をする気力が沸かず、押入れにRaspberry Piが眠っているなんて人もいるのでは?

でも大丈夫! Raspberry Piの初期設定に関する文献は、ネット上に多数あります。基本的には、手順に従って対応すればOKです。ただ、注意すべき点としては、「自分が選んだRaspberry Piのモデル」の初期設定方法を確認することです。Raspberry Piにはいくつかモデルがあり、モデルごとに機能や性能が違います。

今回、Raspberry Pi3 Model B を採用した理由は、無線LANやBluetoothが標準搭載されていて、初心者に優しいからです。基本的には、Pi2 Model より Pi3 Modelをオススメします(最新モデルとしては、Pi3 ModelB + もあるようです)。

昔のモデルに比べるとRaspberry Piの初期設定は簡易化が進んでいます。なので、あとは時間と気力の問題です……っ!

途中、キーボードがない問題も発生しましたが、iPhoneアプリ「Fing」(これがとても便利)を使用。「Fing」でiPhoneのIPアドレスを特定したあと、開発機からRaspberry Piに接続して問題を解消しました。

そんな紆余曲折を経たのち、タッチスクリーンと接続したものがこちらです。

gazo_01

ダンボールも使って、ハイセンスなシングルボードコンピュータができました!!

STEP2 kivyのインストール

Raspberry Piの初期設定を終えた後には、kivyのインストールがあります。……まだあるのかよ、と嘆きたくなりますが、Kivyには英語のマニュアルを有志が日本語化してくれた「Kivyへようこそ」というサイトがあります。

今回はRaspberry Piにkivyをインストールする手順を参考にします。
https://pyky.github.io/kivy-doc-ja/installation/installation-rpi.html

Kivyをインストールするためには、依存関係にあるモジュールもインストールしないといけないのですが、上記のサイトを参照していくつかコマンドを叩くだけです。なあに直ぐ終わる……直ぐに……。そう思ってから早30分が経過。

Raspberry Piの初期設定もそうですが、インストールの時間が思いの外かかるので、お茶菓子とか用意して気長にやるのが良さそうです。

Kivyのインストールが完了したあとは、さっそくサンプルプログラムを動かしてみましょう。あれ、Pythonはインストールしないのでいいの? と思う方もいるかもしれませんが、Raspberry Piが公式にサポートしているOS「Raspbian」にはPython2.xとPython3.xがすでにインストールされています。

標準搭載って、ありがたいですね。なので、気にせず先に進みます! ディレクトリを移動して、サンプルプログラムを実行!

昔なつかしのテレビテニスが、タッチスクリーンでプレイできるようになった……と思ったのですが、タッチスクリーンが反応しません。

動いて、動いて! と念じながら三回ぐらい指で突いても無駄だったので、対処法を調べます。どうやらタッチスクリーンを有効にするための設定が足りなかったようです。設定ファイルを一部書き換えてからリトライ!

しかしここで、一抹の不安がよぎります。私が参照していた参考文献は、Raspberry Pi用の純正タッチスクリーンを採用していることを前提に書かれたものです。果たして、安いという理由だけで買った、私のタッチスクリーンが反応するのか……緊張の一瞬です。

う、

gazo_02

動いたー!! これで心置きなく開発に取り組めます。

STEP3 kivyによるアプリケーション開発

さて、前置きが長くなりましたが、いよいよ開発です。ここで取り出だすは、日経ソフトウェア2017年 6月号です。本当は一からすべて開発できればよかったのですが、残念ながら、私にはまだそこまでの技術がありません。なので、日経ソフトウェア2017年 6月号を参照しつつ、要点だけ説明していきます。もし興味を持たれた方は「日経ソフトウェア2017年 6月号」をバックナンバーでご購入下さい。

3-1.ゲームで使用する画像作成

はじめに、ゲームで使用する32×32ピクセルの画像を用意します。いつも大変お世話になっている「いらすとや」でロケットと小惑星の画像を探したのですが、残念ながら小惑星の良い画像が見つからず……。代替として、小惑星の代わりにカーリングのストーンを採用しました。ロケットがカーリングのストーンを避けるゲーム……なんだか絵面がとってもシュールになりそうな気がしますが、気にせず画像を縮小して次に進みましょう。

3-2.PythonのプログラムとGUIの設定ファイル

Kivyでアプリを開発する際には、基本的に2種類のファイルを作成します。一つはPythonのプログラム、もう一つはGUIの設定ファイルです。今回のゲームの場合、Pythonのプログラムでは「カーリングのストーンを何秒間隔で生成する?」、「カーリングストーンはどの高さで生成する?」、「ロケットの移動はどうする?」、「ロケットとカーリングストーンの当たり判定はどうする?」といった内容を記述します。もう一方のGUI設定ファイルでは、「ロケットとカーリングストーンのサイズはどうする?」、「ロケットとカーリングストーンにはどの画像を使う?」、「画面上のスコアの表示はどうする」などといったレイアウトの設定を定義します。

3-3.Pythonのプログラム

今回はPythonのプログラムの一部を紹介します。

/*******************************************************************************
*カーリングストーンの移動
/*******************************************************************************
class Stone(Widget):
  def move(self):
    self.x = self.x - 4
    if self.x < -self.width:
      self.parent.remove_widget(self)

これはカーリングストーンが右から左に流れるプログラムになります。
Stoneが、流れるカーリングストーンという部品を、self.xがカーリングストーンのX座標を指しています。
左に4ピクセル毎移動(move)し、画面外に出ると消えます(remove)。

/*******************************************************************************
*イベントハンドラ
/*******************************************************************************
def on_touch_down(self, touch):
  self.vy = 2

def on_touch_up(self, touch):
  self.vy = -2

続いて、タッチスクリーンを触った際の反応です。
on_touch_downが、タッチスクリーンに指を触れた状態であり、def on_touch_upがタッチスクリーンに指が触れていない状態を指しています。
つまり、タッチスクリーンに指が触れた状態のときは2の値が代入され、タッチスクリーンに指が触れていない状態のときは-2の値が代入されます。
今回は省略していますが、この値を利用して、ロケットの高さを調整しています。

これらを始めとした記述を組み合わせて、完成したものがこちらです。

gazo_03

本当は動画でお見せしたかったのですが、タッチスクリーンが反射して、自分が写ってしまうトラブルがあったので断念しました。残念……。

おわりに

PythonのGUIライブラリーkivyには初めて触れたので、新鮮な体験をすることができました。今回は参考書がありましたが、ゆくゆくはオリジナルのゲームを作れればと思います。