Why does my image have a thick black line around?

LazySloth13

In Pygame, I have wrote a Minesweeper clone. However, when I blit the final image stating YOU LOSE or YOU WIN, I get this result:

enter image description here

I'm sure you notice the thick black line surrounding the text. Here is the function in which the image is blitted onto the window:

def play():
    SIZE = (WIDTH, HEIGHT) = (16, 16)
    MINES = 40
    PIXELS_PER_CELL = 30
    pygame.init()
    screen = pygame.display.set_mode((WIDTH * PIXELS_PER_CELL,
                                      HEIGHT * PIXELS_PER_CELL))
    pygame.display.set_caption("PyMines")
    board = create_board(SIZE, MINES)
    board.draw(screen)
    while True:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif (event.type == pygame.MOUSEBUTTONDOWN and board.is_playing and
                  not board.is_solved):
                board.mouse_handler(event, screen)

        message = None
        if not board.is_playing:
            board.show_mines(screen)
            message = pygame.image.load("images/lose.png").convert_alpha()
        elif board.is_solved:
            message = pygame.image.load("images/win.png").convert_alpha()

        if message:
            message = pygame.transform.scale(message, (screen.get_width(),
                                                       screen.get_height() //
                                                       5))
            screen.blit(message, (0, 0))
        pygame.display.update()

As I am not sure which part of the code you should be looking at, here is the full code.

Another reason why I think this behaviour is so bizarre, is that when I first created PyMines, the image blitted perfectly like so (as you can see, there is a very slight shadow to the text):

enter image description here

This however, is not a optimized version, as after each cycle, the whole board is redrawn (so it takes a very long time on a 16x16 board as shown in the first image, so I used a 9x9 - but the results are the same). Here is the play() function of the original version:

def play():
    SIZE = (WIDTH, HEIGHT) = (9, 9)
    MINES = 10
    PIXELS_PER_CELL = 30
    pygame.init()
    screen = pygame.display.set_mode((WIDTH * PIXELS_PER_CELL,
                                      HEIGHT * PIXELS_PER_CELL))
    pygame.display.set_caption("PyMines")
    board = create_board(SIZE, MINES)
    while True:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif (event.type == pygame.MOUSEBUTTONDOWN and board.is_playing and
                  not board.is_solved):
                board.mouse_handler(event, screen)

        message = None
        if not board.is_playing:
            board.show_mines()
            message = pygame.image.load("lose.png").convert_alpha()
        elif board.is_solved:
            message = pygame.image.load("win.png").convert_alpha()

        board.draw(screen)
        if message:
            message = pygame.transform.scale(message, (screen.get_width(),
                                                       screen.get_height() //
                                                       5))
            screen.blit(message, (0, 0))
        pygame.display.update()

I would attach a link to the full code, but pastebin is down, so here is the full code for the original game without the strange black line.

EDIT: I have already tried dropping the convert_alpha() and adding convert() or even nothing at all.

.convert():

enter image description here

NOTHING:

enter image description here

Why are all these black lines there, how do I get rid of them and which version (convert/convert_alpha/NOTHING) should I use (and how to decide which one to use).

Russell Borogove

The text has a black shadow with an alpha channel. In your original version, you render the board, then render the text, and the shadow gets blended with the board.

In the revised version, you render the board, then repeatedly render the text over it. On the first pass, it renders correctly, with the shadow blending with the board. On the second pass, the shadow blends with the shadow you've already rendered, making a slightly darker shadow. On the next pass, the shadow gets slightly darker, and so on.

You can't use alpha blending without keeping tight control over what you're blending over. Each time you render the text, you'll need to render at least the section of the board behind the text, if not the full board.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Why does my image have space underneath?

From Dev

Why does my Handlebars not have a compile method?

From Dev

Why does this basic imagejpeg() resizer returns a black image?

From Dev

Why does my launch image have a stretched icon image behind it, and how do get rid of it?

From Dev

Why does my ComboBox have a red outline?

From Dev

Why does my div have no height?

From Dev

Why does my applet have warning signs?

From Dev

Why are my dc-js axes showing up so thick and brush filter appearing opaque black?

From Dev

Why does my CrawlerProcess not have the function "crawl"?

From Dev

Why does my image have right margin whitespace in flexbox?

From Dev

Why does my image resize code always product a completely black output image?

From Dev

Why does my struct have to be declared as a pointer?

From Dev

Why does my Canon inkjet printer require two black cartridges?

From Dev

How to get black shadow around the image dynamicaly?

From Dev

Why does my listview have triangle mark?

From Dev

Why Does My Image Overlap My Banner

From Dev

Why does my applet have warning signs?

From Dev

How to create a super thin border ( black ) around a border that is super thick and multi color

From Dev

Why am I getting a black line around my 32-bit context in Cocos2D?

From Dev

Why does one of my GenyMotion emulated devices show a black screen?

From Dev

Why are my dc-js axes showing up so thick and brush filter appearing opaque black?

From Dev

Why does my Image not rotate?

From Dev

Why does my image have right margin whitespace in flexbox?

From Dev

Why does my image resize code always product a completely black output image?

From Dev

why is my image saved as all black with this code snippet?

From Dev

Why does my desktop screen go black?

From Dev

Why does autofocus leave a dotted line around the button?

From Dev

Why do I have white spacing around my positioned nav?

From Dev

Create a black frame around an image

Related Related

  1. 1

    Why does my image have space underneath?

  2. 2

    Why does my Handlebars not have a compile method?

  3. 3

    Why does this basic imagejpeg() resizer returns a black image?

  4. 4

    Why does my launch image have a stretched icon image behind it, and how do get rid of it?

  5. 5

    Why does my ComboBox have a red outline?

  6. 6

    Why does my div have no height?

  7. 7

    Why does my applet have warning signs?

  8. 8

    Why are my dc-js axes showing up so thick and brush filter appearing opaque black?

  9. 9

    Why does my CrawlerProcess not have the function "crawl"?

  10. 10

    Why does my image have right margin whitespace in flexbox?

  11. 11

    Why does my image resize code always product a completely black output image?

  12. 12

    Why does my struct have to be declared as a pointer?

  13. 13

    Why does my Canon inkjet printer require two black cartridges?

  14. 14

    How to get black shadow around the image dynamicaly?

  15. 15

    Why does my listview have triangle mark?

  16. 16

    Why Does My Image Overlap My Banner

  17. 17

    Why does my applet have warning signs?

  18. 18

    How to create a super thin border ( black ) around a border that is super thick and multi color

  19. 19

    Why am I getting a black line around my 32-bit context in Cocos2D?

  20. 20

    Why does one of my GenyMotion emulated devices show a black screen?

  21. 21

    Why are my dc-js axes showing up so thick and brush filter appearing opaque black?

  22. 22

    Why does my Image not rotate?

  23. 23

    Why does my image have right margin whitespace in flexbox?

  24. 24

    Why does my image resize code always product a completely black output image?

  25. 25

    why is my image saved as all black with this code snippet?

  26. 26

    Why does my desktop screen go black?

  27. 27

    Why does autofocus leave a dotted line around the button?

  28. 28

    Why do I have white spacing around my positioned nav?

  29. 29

    Create a black frame around an image

HotTag

Archive