Python Kivy Image has unwanted padding

[Ferenc Fazekas]

Hi team,

I am experiencing unwanted padding on Image objects in Python kivy.

Context

I am making a simple game written in Python/Kivy. I am generating images for the game using Photoshop.

Issue

It appears that for some images is a significant offset between two images of the same position for some images. I have confirmed that:

• there is no extra transparent space at the bottom of the image to be scaled up.
• the issue persists even if I paint bucket colour the whole image with a single colour.

Question

Does anyone know where the extra padding at the bottom might be coming from?

The images that I have tested with and the test results are here:

bush1.png 

bush1.png test

bush2.png

bush2.png test

Code

I have simplified my code down to be the following:

from kivy.app import App

from kivy.core.window import Window

from kivy.uix.image import Image
from kivy.uix.widget import Widget


class GPRunner(App):
    def __init__(self, game):
        super(GPRunner, self).__init__()
        self.game = game

    def build(self):
        return self.game


class Renderer(Widget):
    def __init__(self, **kwargs):
        super(Renderer, self).__init__(**kwargs)
        self.tick = None
        self.window = Window

    def run_sync(self):
        runner = GPRunner(self)
        runner.run()

    def add_component(self, component):
        if component.ktype == "GP":
            self.canvas.add(component.kcol)
            self.canvas.add(component.kobj)
        elif component.ktype == "WGP":
            self.add_widget(component.kobj)


class Img(Widget):
    def __init__(self, imagepath, **kwargs):
        super(Img, self).__init__()
        self.kobj = Image(source=imagepath, pos=self.pos, size=self.size, **kwargs)
        self.ktype = "WGP"

    def move(self, x, y):
        self.pos = (x, y)
        self.kobj.pos = self.pos

    def resize(self, width, height):
        self.size = (width, height)
        self.kobj.size = self.size


if __name__ == '__main__':
    renderer = Renderer()
    file = "bush4.png"
    img1 = Img(file)
    img1.resize(200, 100)
    renderer.add_component(img1)
    img2 = Img(file)
    img2.resize(50, 50)
    renderer.add_component(img2)
    renderer.run_sync()

[Elliot Garbus]

The Image class has attributes keep_ratio and allow_stretch.  The defaults will keep the ratio of the image, and not allow stretch.  The size of the image is different than the size of the widget.   If you change these attributes, the image will stretch to fill the widget.

 

 class Img(Widget):
    def __init__(self, imagepath, **kwargs):
        super(Img, self).__init__()
        self.kobj = Image(source=imagepath, pos=self.pos, size=self

.size,
                          allow_stretch=True, keep_ratio=False, **kwargs)
        print(self.pos, self.size)
        self.ktype = "WGP"

 

 

A suggestion, put your widgets in a Layout, rather than another widget.  In this case you would want to use a FloatLayout.

 

There is a tool called the inspector that is part of kivy.  See: https://kivy.org/doc/stable/api-kivy.modules.inspector.html?highlight=inspector

 

This tool allows you to interactively look at widget sizes and attributes.  Using the tool I was able to see that your image was a different size than the widget.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/9ff066e1-76ea-4261-ac50-ccc3a9d6e451n%40googlegroups.com.

 

[Ferenc Fazekas]

Thank you! That worked and was very helpful. Also appreciate the tip and the comment about best practices.