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.
Related
when using DisplacementMapFilter along with perlinNoise i can get very realistic water effect
like the one presensted here
problem is it works nicely only with small pictures, using it with big pictures (like 1024x768 pix) is too heavy, specially on mobile devices and
that's why i was hoping to find a away to apply this effect only on random parts of the picture (in loop, each time other random part of the picture is effected)
is it possible?
I think only applying the effect on random parts or partially each frame will look strange (I think you will see the "cheating").
Have you tried generating a displacement map image with half the resolution of the picture and then scale it up (with smoothing turned on) before using it as a displacement map? Maybe the lower resolution won't be that noticeable?
Is there a way to get the count of elements on a canvas? I have some code that adds images to a canvas, somewhere along the line sometimes some of the images fail. I want to run some code afterwards only if there's more than one image on the canvas, how can i get a count of the number of images on the canvas? thank you
The right answer is that a canvas doesn't have "memory", it draws what you throw at it, but it won't "know" how many images are there. All the canvas knows is that you've put content on it, whether that's one big image or several smaller ones is up to you to tell.
What this means is that if you are drawing to a canvas, you have to keep track and count of what you draw yourself. That is, whenever you draw an image on a canvas increase a counter, decrease it when you clear the area it occupied, or reset it whenever you clear the entire canvas. If it sounds simple it's because it is, you just have to remember to do it yourself.
I'm developing a visualization for certain parts of a Warehouse with Flex 3. In this visualization there are lot of blocks where 1 to x pallets can be placed where x is between 9 and 15. I need to represent each pallet with a black square, each place which is already assigned to a pallet but not physically taken with a grey square and each free place with a white square. I first thought to just use a canvas for each place on a block and change their color if the state changes. But the hundreds of canvases which are there as a result of this approach are not updated quickly enough for my purposes (screen freezes for a few seconds).
I don't want to use embedded images because of the great amount of images I had to embed in the application (those Images appear in 4 orientations).
My idea was to create background images which reflect the state of the whole block only when needed for that certain state and cache them, so that the computation time is spread over the whole runtime.
My problem now is I don't know how to create them in a way that I can use them as "backgroundImages". As far as I understand I would need them as a class object but I don't know how to achieve that, when not embedding the images.
I'm of course open to better approaches to solve my problem. Thanks for your support.
I would suggest using Graphics property of a Sprite for example. It provides basic drawing API, like drawing lines, circles and rectangles.
Besides, you can draw bitmap images on the Graphics to produce more advances results.
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.
Information:
The images have large transparent sections, so each must be overlapped to create the needed effect. Specifically, the clickable portions of each image are in weird trapezoid shapes meant to be pressed up against each other.
Images have image maps with large portions being overlapped by the transparent portions of other nearby (trapezoid) images. I don't expect any change in z indexes will solve this...
Combining the image files into a larger single one to overlay a single image map for each section seems less than ideal, especially since I may need to re-order or rename them later and such. Never mind hover animations and other possibilities down the road.
What would be the best workaround?
Alright, after much tinkering I think I've found a solution: I just took a 1px transparent gif, scaled it up to cover the whole area (with a higher z-index, of course), and then mapped the image map polygons within that. Seems to work.