アリーナっぽいゲームを作ってみたい Part 2　背景に合わせるScreenの追加

　前回、背景をボタンで切り替えましたが、今回はそこにメニューを表示させるScreenを追加します。kivyではScreenManagerというWidgetで複数のScreenを管理していて必要に応じてScreenを切り替えることが出来ます。
　ここではScreenに文字と背景色を付けて追加されているかを確認します。

arena.py

前回と同じ。

Arena.kv

<Menu>:
    Image:
        source:root.BG
        size:root.size
    BoxLayout:
        orientation:'vertical'
        size:root.size
        ScreenManager:
            id: place
            Screen:
                name:'MA'
                canvas:
                Label:
                    text:'Main'
                    color:1,0,0,1
            Screen:
                name:'W'
                Label:
                    text:'Weapon Shop'
                    color:1,0,0,1
            Screen:
                name:'M'
                Label:
                    text:'Magic Guild'
                    color:1,0,0,1
            Screen:
                name:'G'
                Label:
                    text:'Gym'
                    color:1,0,0,1
            Screen:
                name:'C'
                Label:
                    text:'Colosseum'
                    color:1,0,0,1 
        
        BoxLayout:
            orientation:'horizontal'
            size_hint: 1,.2
            padding: ('10dp', '10dp', '10dp', '10dp')
            canvas:
                Color: 
                    rgba:0,0,1,.2
                Rectangle:
                    size:self.size
            Button:
                text: 'Weapon Shop'
                on_press:
                    root.place_W()
                    place.transition = NoTranslation(duration =0)
                    place.current ='W'
            
            Button:
                text: 'Magic Guild'
                on_press:
                    root.place_M()
                    place.transition = NoTranslation(duration = 0)
                    place.current ='M'
            
            Button:
                text: 'Gym'
                on_press: 
                    root.place_G()
                    place.transition = NoTranslation(duration = 0)
                    place.current ='G'

            Button:
                text: 'Colosseum'
                on_press: 
                    root.place_C()
                    place.transition = NoTranslation(duration = 0)
                    place.current ='C'
            

            Button:
                text: 'Main'
                on_press: 
                    root.return_M()
                    place.transition = NoTranslation(duration = 0)
                    place.current ='MA'



<Screen>:
    canvas:
        Color: 
            rgba:1,0,1,.2
        Rectangle:
            size:self.size
            

　ここではScreenManagerに管理されている各ScreenにLabel ウィジェットで文字を追加し、下部のところで一括してScreenに色を付けています。Screenごとに色を変えたい場合はそれぞれのScreenの中にcanvasを追加します。

で、実行してみたのですが、なぜかScreenがずれたようになってしまいました。どうやらメイン画面のScreenは相対座標を参照し、他の画面のScreenは絶対座標を参照しているようです。どうしてそんなことになるのか全く分かりませんが、学習を進めていけばそのうち理解できることを期待して先に進むことにします。解る方、こうなんじゃないかという方はコメントしていただけたら幸いです。