CODEWITHSUNDEEP
pythonkivykivy-language
Ben Quigley
Ben Quigley

Reputation: 727

Confused about Kivy's placement of a "center" of a circle -- screenshot and code included

I am trying to use Kivy just to experiment with a little game. I've been loosely following a tutorial, but I'm basically confused about the way the float layout renders graphics on the screen.

I'm trying to draw the "player" as a rectangle in the middle of the screen. But it clearly isn't rendering in the center (which I've indicated by rendering crosshairs at the center):

Why is there an offset?

Here's the code: 

<Game>:
    FloatLayout:
        size: root.size
        Widget:
            id: game
            canvas:
                Color:
                    rgb: dark
                Rectangle:
                    pos: root.center_x/5, 0
                    size: root.width*4/5, root.height
                Color:
                    rgb: violet
                Rectangle:
                    pos: root.center_x, 0
                    size: 2, root.height
                Rectangle:
                    pos: 0, root.center_y
                    size: root.width, 2
        Player:
            id: player
            size_hint: 300, 300
            center_x: root.center_x
            center_y: root.center_y

<Player>:
    canvas:
        Color:
            rgb: crimson
        Rectangle:
            pos: self.pos
            size: self.size_hint
        Color:
            rgb: dark
        Ellipse:
            pos: self.x+5, self.y+5
            size: self.size_hint_x-10, self.size_hint_y-10

The Python code is really minimal right now; I'm just trying to learn my way around the graphics:

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty, ListProperty, NumericProperty
from kivy.graphics.vertex_instructions import(Rectangle, Ellipse)
from kivy.graphics.context_instructions import Color

class Player(Widget):
    pass

class Game(Widget):
    player = ObjectProperty(None)

class GameApp(App):

    def build(self):
        game = Game()
        return game


if __name__ == '__main__':
    GameApp().run()

Upvotes: 1

Views: 943

Answers (1)

Daniel
Daniel

Reputation: 3454

Try the code below. Use explicit sizes instead of size_hint and position them relative to the parent.

<Game>:
    FloatLayout:
        size: root.size
        Widget:
            id: game
            canvas:
                Color:
                    rgb: 1, 0, 0 
                Rectangle:
                    pos: root.center_x/5, 0
                    size: root.width*4/5, root.height
                Color:
                    rgb: 1, 1, 0
                Rectangle:
                    pos: root.center_x, 0
                    size: 2, root.height
                Rectangle:
                    pos: 0, root.center_y
                    size: root.width, 2
        Player:
            id: player
            center_x: root.center_x
            center_y: root.center_y

<Player>:
    size_val_r: 300
    size_val_e: 290
    canvas:
        Color:
            rgb: 0.8, 0.6, 0
        Rectangle:
            size: self.size_val_r, self.size_val_r
            pos: root.width/2 - self.size_val_r/2, self.height/2 - self.size_val_r/2
        Color:
            rgb: 1, 1, 0.6
        Ellipse:
            pos: root.width/2 - self.size_val_e/2, self.height/2 - self.size_val_e/2
            size: self.size_val_e, self.size_val_e

Upvotes: 2

Related Questions