【初心者向け】KivyによるWindowsアプリ作成18 ポップアップの表示方法

今回から、前回紹介したタイピングゲームを題材として、Kivyの使い方のうち、これまで紹介できなかった点を中心に紹介していきたいと思います。

今回のテーマは、Kivyにおけるポップアップの表示方法です。

作成したコードはGitHubにもアップしていますので、必要に応じてご参照下さい。

<スポンサーリンク>

ゲーム内でのポップアップ表示タイミング

まずはポップアップを実装する前に、タイピングゲーム上、どこでポップアップが呼び出されているのかを説明します。

前回紹介した通り、アプリを起動するとまずはタイトル画面が表示されます。

ここでStartボタンを押すと、ゲーム画面に切り替わりますが、その前面にゲームの開始を促すポップアップが表示されます。

今回の記事では、タイトル画面、ゲーム画面(クラス定義のみ)、ポップアップ、そして、これらの間の画面遷移を実装します。

なお、ポップアップはこのアプリ上、ゲームオーバーになったタイミングでも表示されますが、そちらについては別途実装する予定です。

実装

タイトル画面、ゲーム画面、画面遷移の実装

ポップアップの実装を始める前に、これまでの記事で紹介した内容だけで実装できる部分だけ実装しておきます。

まず、main.pyというファイルを作成し、以下のように中身を記述してください。

from kivy.config import Config
Config.set("graphics", "resizable", False)
Config.set("graphics", "width", 800)
Config.set("graphics", "height", 600)

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen

sm = ScreenManager()

class TitleScreen(Screen):
    def startButtonClicked(self):
        sm.current = "game"

class GameScreen(Screen):
    pass

class TypingApp(App):
    def build(self):
        sm.add_widget(TitleScreen(name="title"))
        sm.add_widget(GameScreen(name="game"))
        return sm

if __name__ == "__main__":
    TypingApp().run()

次に、Typeing.kvというファイルを作成し、中身は以下のようにして下さい。

<TitleScreen>:
    BoxLayout:
        orientation: "vertical"
        Label:
            size_hint_y: 0.8
            text: "Typing Game"
            font_size: 80
        BoxLayout:
            size_hint_y: 0.2
            Button:
                text: "Start"
                font_size: 36
                on_press: root.startButtonClicked()
            Button:
                text: "Difficulty"
                font_size: 36

<GameScreen>:

ここまでの記述で、タイトル画面の作成とレイアウト定義、ゲーム画面の作成(レイアウトは未定義)、そして、タイトル画面のStartボタンを押したときにゲーム画面に遷移する処理を実装しました。

ここまでの実装に必要なKivy関連の文法等は、すべて過去の記事でも紹介していますので、もしもコードの内容で不明な点がある場合には、過去記事を参照してみて下さい。

ポップアップの実装

それではいよいよポップアップの実装に移ります。

Kivyでポップアップを実装するために使えるクラスには複数あるのですが、ここでは、

  • ポップアップにタイトルを表示しない
  • ポップアップが表示される際、背景を薄暗くする

という特徴を持つ、ModalViewというクラスを利用します。

まずはPythonファイル側に、ModalViewクラスを使うためのimport文を記述します。

#省略
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.modalview import ModalView #この行を追加
#省略

次に、同じくPythonファイル側に、ModalViewを継承した新たなクラスを作成します。ここでは、「ReadyView」というクラス名にし、GameScreenクラスの後ろに記述しておきます。また、ポップアップ上のYesボタンをクリックされた際に実行される処理を、「yesButtonClicked」という名称のメソッドとして定義しておきます。

#省略
class GameScreen(Screen):
    pass

class ReadyView(ModalView): #このクラスを追加
    def yesButtonClicked(self):
        self.dismiss()

コードの中のdismissとは、ModalViewクラスに定義されているメソッドで、自分自身を消す処理を行うものです

今回、タイトル画面でStartボタンを押すと、ScreenManagerにより画面をゲーム画面に切り替えた後、その前面に今作成しているポップアップを表示します。したがって、dismissメソッドが実行されることにより、ポップアップが消え、ゲーム画面だけが表示されるようになります。

ここまで出来ましたら、今度はKvファイル側にReadyViewのレイアウト定義を行いましょう。

#省略
<GameScreen>:

<ReadyView>: #このWidgetを追加
    size_hint: None, None
    size: 400, 400
    auto_dismiss: False
    BoxLayout:
        orientation: "vertical"
        Label:
            text: "Are you ready?"
            font_size: 48
        BoxLayout:
            padding: 100, 75
            Button:
                text: "Yes"
                on_press: root.yesButtonClicked()

基本的に目新しい内容はあまりありませんが、2点だけ補足説明をします。

まず、「size: 400, 400」という記述で、ポップアップウインドウのサイズを400×400に設定しています。しかしながら、実はこの記述だけではウインドウサイズを指定のものにすることができません。

その理由は、ModalView Widgetはデフォルトで「size_hint=(1, 1)」という、ポップアップのサイズを背後のScreenに合わせる属性が暗黙的に指定されており、これが「size:」の記述に優先して適用されてしまうためです。

そこで、「size_hint: None, None」という記述を入れて、size_hint属性を無効化する必要があります。

もう1点ですが、デフォルトではポップアップウインドウ外の領域をクリックしたときに、ポップアップが消えてしまいます。これを無効化するため、「auto_dismiss: False」という属性指定を入れています。

さて、最後にPythonファイルに戻り、タイトル画面でStartボタンを押したときに、ゲーム画面に遷移するだけではなく、このポップアップも呼び出す処理を追記しましょう。

#省略
class TitleScreen(Screen):
    def startButtonClicked(self):
        sm.current = "game"
        readyView = ReadyView() #追加
        readyView.open() #追加
#省略

StartScreenクラス内のstartButtonClickedメソッドに2行追加しています。

まず5行目で、先ほど作成したReadyViewクラスのインスタンスを作成しています。

次に6行目で、そのインスタンスのopenメソッドを実行することにより、ReadyViewポップアップが表示されるようにしています。

実行

さて、実装作業は以上です。プログラムを実行してみましょう。

タイトル画面が立ち上がり、Startボタンを押すと、背景にブランクのゲーム画面が表示され、その前面にReadyViewポップアップが表示されます。

さらに、ポップアップ上のYesボタンを押すと、ポップアップが消えます。先ほどKvファイルで指定した「auto_dismiss: False」が有効になっているか、ポップアップ外の領域もクリックして確認してみて下さい。

終わりに

今回はModalViewクラスを使ったポップアップ画面の実装について主に紹介しました。

次回から複数回に分けて、ゲーム画面であるGameScreenクラスの実装を進めて行きながら、ゲーム処理そのものを固めていきます。時間の経過に伴って動的に変化するWidgetや、キータイプを受け付ける処理の実装など、やるべきことはたくさんありますが、1つ1つ順に対応していきましょう。

<スポンサーリンク>

シェアする

フォローする