【初心者向け】KivyによるWindowsアプリ作成34 難易度調整画面の見た目修正その2

今回は、前回に引き続き難易度調整画面の見た目修正ということで、難易度ボタンを押したときにボタンの色を変えて、現在どの難易度が選択されているかが一目で分かるようにしていきます。

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

<スポンサーリンク>

実装方針の検討

今回の実装する内容もそれほど難しいものではありませんが、簡単に実装方針を確認しておきましょう。

まず、ボタンを押した時に実行する処理は、既にDifficultyScreenクラスのdifficultySelectedメソッドに定義されています。ですので、このメソッド内に、押されたボタンの色に関する属性を書き換えてやる処理を追加すれば良さそうです。

何色に変えるかについて、現在、ボタンが押されていない時の背景色はグレーですが、これを、ボタンが押された時の背景色であるブルーに変えたいと思います。これにより、ボタンを押されたときにそれが押されっぱなしであるかのように見えることになります

1点だけ留意しなければならないのは、どれかボタンが押された後に別のボタンを押した場合、先に押されたボタンの色を元に戻す必要があるという点です。と言っても、これも上記と同様、色に関するボタンの属性を書き換えてやるだけですから、それほど難しくはなさそうですね。

実装

それでは、上記方針を踏まえて、実装を行っていきましょう。

まずは、押されたボタンの色を変える処理を、difficultySelectedメソッドに追記します。

def difficultySelected(self, btn):
        global difficulty
        difficulty = btn.text.lower()
        self.ids["difficulty_description"].text = DIFFICULTY_DESCTIPTION[difficulty]

        self.ids[difficulty].background_normal = "atlas://data/images/defaulttheme/button_pressed" #この行を追加

追加した1行の内容を説明します。

等号の左側のうち、「self.ids[difficulty]」という記述で、押されたボタンを指定していますが、そのさらに後に「background_normal」という属性が付されています。

この「background_normal」属性は、押されていない状態におけるボタンの背景を指定するためのものです。

さて、この属性に指定する背景ですが、前述の通り、一旦押されると放された後も押されっぱなしになっているように見える、言い換えると、ボタンが押されていない時の背景(background_normal)を、ボタンが押された時のものと同一にするという形にしたいと思っています。

では、ボタンが押された時と同一の背景にするためには、この「background_normal」属性に何を指定すれば良いでしょうか?

実はボタンのデフォルト背景は、押された場合、押されていない場合の両方とも、kivyがインストールされたフォルダ中の、とある画像データとして保存されています。この画像データは少々特殊なもので、「Atlas」という、複数の画像を1つのファイルにまとめることができる形式のファイルの中に含まれています。

このファイルから、ボタンが押された時の背景画像を指定するための記述が、等号の右側にある、「”atlas://data/images/defaulttheme/button_pressed”」という表現です

ですので、追加された1行により、ボタンが押されていない時の背景を、ボタンが押された時の背景と全く同じにすることができます。

さて、ここまでの記述だけでは、一旦ボタンが押された後に別のボタンが押された際、先に押されていたボタンの背景色を元に戻すという処理が実装できていません。

この実装方法も色々やり方がありそうですが、処理を「押されたボタンの背景を押されていないものに切り替えるとともに、それ以外の2つのボタンの背景は通常に戻す」というものが最も簡単だと思います。

そこで、先ほど追記した、

self.ids[item].background_normal = "atlas://data/images/defaulttheme/button_pressed"

という記述を、以下のような複数行の記述に置き換えます。

for item in ["easy", "normal", "hard"]:
    if item == difficulty:
        self.ids[item].background_normal = "atlas://data/images/defaulttheme/button_pressed"
    else:
        self.ids[item].background_normal = "atlas://data/images/defaulttheme/button"

見た感じでなんとなく処理の内容は想像つくかもしれませんが、Easy, Normal, Hard全てのボタンにアクセスし、押されたボタンであるかそうでないかによって、背景を何に切り替えるかを選択指定しています。

なお、「”atlas://data/images/defaulttheme/button”」は、ボタンが押されていない時のデフォルト背景を指定する記述ですので、これを使うことにより、ボタンの背景を元に戻すことができます。

テスト実行

それではここでプログラムを実行してみて、ボタン押下時の挙動が意図した通りのものか確認してみます。

Easyボタンが押された場合

Normalボタンが押された場合

Hardボタンが押された場合

ご覧の通り、どのボタンが押されたが、ボタンがはなされた後でも分かるようになっています。

一旦あるボタンを押し、さらに別のボタンを押してみることにより、もともと押されていたボタンが正しく元に戻るかどうかも確認しておきましょう。

終わりに

今回で、難易度調整に関する処理の実装はすべて完了です。お疲れ様でした。

次回は、画面の遷移や文字を表示など、ゲームの様々なアクションが実行されるたびに、それにふさわしい効果音を鳴らすようにして、ゲームを完成まで持っていきたいと思います。

<スポンサーリンク>

シェアする

フォローする