image is not refreshing in pygame - pygame

I am learning pygame. I was playing with the code catanimation.py which comes with the pygame example. In this code, If I remove the line DISPLAYSURF.fill(WHITE), it draws multiple images (i.e. it does not refresh). What is the reason? Do I have to make surface white to refresh the image?
Thanks.

think of the surface as a drawing canvas. it is going to blit upon your already used canvas, leaving something similar to a trail behind moving objects. filling the screen with white(or any color) will get drawn over the previous frame such that it is no longer visible.

Related

Pygame collision detection, transparent border

For my pygame project, I must detect collision betweeen various .png image that move on the screen.
I have put the image inside sprite, and the sprite inside group, then I use this :
pygame.sprite.spritecollide(perso, zombie_group, False)
However, sometime, my image don't touch, but pygame detect a collision...
This is due to the fact that my images are png with transparent borders.
The transparent border collide, and pygame detect this :(
Any idea to stop the transparent border from colliding ?
Ok the sprite will take the image he can't detect if it was on a trasnparent BG or a color bg, he basically is just seeing a rectangle right now.
If you are using irregular shapes and a rectangle approximation is not enough I would recommend using collide_mask also check masks it is probably what you want
update
Regarding performance from the tutorial :
There are other ways to do this, with ANDing sprite masks and so on,
but any way you do it in pygame, it’s probably going to be too slow.
For most games, it’s probably better just to do ‘sub-rect collision’ –
create a rect for each sprite that’s a little smaller than the actual
image, and use that for collisions instead. It will be much faster,
and in most cases the player won’t notice the inprecision.

LibGDX TextureRegion draw bug when using split method and scaling

I get a graphical glitch whenever I try to split my tileset into a TextureRegion[][] and drawing them. It works fine when I am using the default aspect ratio but when the window has to stretch, it seems to be accessing a line of pixels from the next tile in the tileset and drawing them. Here is a picture (The lines I am referring to are the 2 vertical brown lines in the water. They seem to be from another tile in my tileset):
The lines also move when I move the player. And when I run the game on my tablet, a similar effect happens except its the bottom layer of my player's feet that appear above its head.
I saw a similar problem in stackoverflow (stackoverflow.com/questions/285...) but the solution did not work for me. It said I should put a padding but that just makes the lines transparent and you see the background color.
Here is the solution I found. Someone on stackoverflow asked a similar question and they got a working response. They made a tile bleeding fix method. Here is the post: White vertical lines and jittery horizontal lines in tile map movement
Credit to grimrader22. Thanks a lot!
Thanks everyone else who helped get me on the right track to getting the solution.
As you said, the usual solution is to add a padding.
The padding should be of the same color as the border of the tile. For example the water tiles should have a blue padding and the sand a yellow one.
That way you won't get the transparency and it will be seamless.
Hope it helps.

'Runner' Game, loop sliding background, remove children when outside

I've just started using actionscript 3 and I am currently trying to make a scrolling runner game in Flash CS5, similar to the Flood Runner games from Tremor games. The difference is, however, that my game is not an endless runner game and the character has a destination that she must reach before time runs out. Alot of the tutorials I've read on the subject use the player character's x and y positions to scroll, but in my game the background scrolls independent of the character. The tutorials I've read about this do not address my problems specifically.
TL;DR: I do not want to loop my background but have a series of multiple background images.
I am trying to figure out the best way to patch together multiple background images seamlessly. Currently, I have one background movie clip object at the maximum pixel width. The background object scrolls to the left independently of the position of the player character, who can only jump.
What I am thinking about doing is this:
Every time a point at the far right edge of one background image reaches the far right stage boundary, I have my actionscript call an addChild command for the next background object and instantiate it at the far right stage boundary. It will scroll at the same speed as the preceding background object.
I also need to figure out how to remove the background objects once they have completely exited the stage for memory purposes.
So, what would be the best way to tackle this?
Your basic concept will work, and to remove you just need to evaluate when the background image is off the screen :
if (backgroundImage.x < -backgroundImage.width)
{
// image is no longer on the screen.
removeChild(backgroundImage);
}

How to properly clear all images that were "blitted" onscreen using pygame?

I was wondering how does pygame.blit manages the images blitted on screen. When I blit an multiple images on the screen, I see that each image is stacked on top the previous one.
How do I clear all these images? Wouldn't(somehow) there be a big problem when there are LOTS of images stacking on top of each other on the screen? Currently, I'm just blitting a white bg or custom bg on the whole screen to "clear" the screen. So far no problems or anything since the app I am working on is very small.
When you blit an image to a surface, it basicly draws it on the surface. The location of the blitting or the object blitted is not saved and cannot be changed. It's like if you were painting the images onto a canvas. The new ones would go over the old ones and there would be no way to get rid of one image if it were colliding with another image.
The most common approach to solving this is to just completly clear the screen using surface.fill(), and redraw the images each frame.
To answer your question about if there woudl be problems when there are lots of images, no. The window will only be saved as each individual pixel being a certain color, much like a regular picture you would take a camera, so no matter how many objects you blit, the game will always take the same amount of time.
There are multiple approaches:
Clean the whole background, as you are doing.
If the computer keeps up with the fps, perhaps it's better to leave it like this.
Clean only the areas where you blitted objects (see pygame.sprite.RenderUpdates)
In your case, if you have many stacked objects, perhaps it's better to write your own solution, trying to find the union between colliding rectangles, to avoid reblitting the same background over and over.

HTML5- What is the best way to move images that are already on a canvas

I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.
I already have it so when a button is pressed, a picture of a pony comes up on the canvas.
My question now is, what is the best way to move multiple images when they are already on the canvas?
It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.
So, are there any other dragging images on Canvas tutorials out there?
Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.
Any ideas?
You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).
None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.