【初心者向け】KivyによるWindowsアプリ作成19 画面遷移方向の指定

今回からタイピングゲームのメイン画面である、ゲーム画面を作り込んでいくことにより、Kivyの更なる使い方を紹介していきたいと思います。

今回のテーマは、画面遷移方向の指定についてです。

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

<スポンサーリンク>

ゲーム画面の土台の実装

まず初めに、ゲーム画面であるGameScreenクラスの土台を作成しましょう。今後、この土台に新しい機能を加えていきます。

先にKvファイル側の修正を行います。

現在中身が何も設定されていないGameScreen Widgetを、以下のように記述します。

<GameScreen>:
    BoxLayout:
        orientation: "vertical"
        BoxLayout:
            size_hint_y: 0.099
            Label:
                size_hint_x: 0.4
                text: "Typing Game"
                font_size: 48
            Label:
                size_hint_x: 0.2
                text: "Score"
            Label:
                id: score
                size_hint_x: 0.2
                text: "0"
            Button:
                size_hint_x: 0.2
                text: "to Title"
                on_press: root.returnButtonClicked()
        Label:
            size_hint_y: 0.001
            canvas.before:
                Color:
                    rgba: 1, 1, 1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        Label:
            size_hint_y: 0.9

特に目新しい内容はありません。

次に、Pythonファイル側に、ゲーム画面の「to Title」ボタンが押されたときに、タイトル画面に戻るためのメソッドを実装しましょう。

class GameScreen(Screen):
    def returnButtonClicked(self):
        sm.current = "title"

単純に画面を切り替えるだけですね。こちらも内容的に目新しいものはありません。

ここで、一度プログラムを実行してみましょう。

タイトル画面からゲーム画面に遷移すると、Kvファイル上の記述に基づいて、ゲーム画面が表示されます。

ここで、画面右上の「to Title」ボタンを押してみましょう。タイトル画面に遷移するはずです。

しかし、実際に動かしてみると、何か違和感を感じないでしょうか?

「戻る」ためのボタンを押しているのに、画面が左から右に切り替わる、つまり「進んで」いるように感じるのが、その違和感の正体です

画面遷移方向の指定

それでは、その違和感を解消するために、プログラムを一部修正してみましょう。

現在実装済みの範囲では、画面遷移は2つのタイミング、タイトル画面でStartボタンを押した時と、ゲーム画面でto Titleボタンを押した時に発生します。ここで、前者については左から右への画面遷移(進んでいる感じ)、後者は右から左への画面遷移(戻っている感じ)になるようにしてみます。

Kivyで画面遷移を実現するために利用するScreenManagerクラスでは、遷移方法を指定するための「transition」という属性を持っています。さらに、この属性の中に、画面表示の方向を指定する「direction」という属性も持っています。

そこで、この属性に適切な値を指定することにより、上記の画面遷移方向を実現したいと思います。

Pythonファイル上で画面遷移が発生する2か所に、記述を追加します。

class TitleScreen(Screen):
    def startButtonClicked(self):
        sm.transition.direction = "left" #この行を追加
        sm.current = "game"
        readyView = ReadyView()
        readyView.open()

class GameScreen(Screen):
    def returnButtonClicked(self):
        sm.transition.direction = "right" #この行を追加
        sm.current = "title"

まず3行目ですが、startButtonClickedメソッド内で、ScreenManagerクラスをインスタンス化したsmを使って、「sm.transition.direction = “left“」と指定することにより、タイトル画面のStartボタンを押した時には画面を左から右へ表示するようにしています。以降、directionの指定がない限りは、画面が左から右へ表示されるようになります。

ただ、ゲーム画面からタイトル画面に戻る時には逆に、画面を右から左へ表示したいので、10行目、GameScreenクラスのreturnButtonClickedメソッド内で「sm.transition.direction = “right“」と指定しています。

このボタンを押すとdirectionがrightのままになりますが、再びタイトル画面上のStartボタンを押した時には前述の「sm.transition.direction = “left“」が適用され、画面が左から右へ表示されます。

実行

それでは、プログラムを実行してみましょう。

ゲーム画面でto Titleボタンを押したときに、画面は右から左方向へ「戻る」ように遷移していますでしょうか。

また、その後改めてタイトル画面上のStartボタンを押してみて、今度は画面が左から右へ「進む」ように表示されることを確認して下さい。

終わりに

さて、ゲーム画面ではメインの処理として「時間の経過とともに文字を表示させる」必要があります。

次回の記事ではGameScreenクラスの機能を拡張し、この処理を実装していきたいと思います。

<スポンサーリンク>

シェアする

フォローする