I'm following a Pygame tutorial on YouTube published by Clear Code. So far it's gone well but I've run into an inconsistency between the demo on the video and the behaviour of my code, I'm pretty sure I'm doing exactly what the tutorial instructs, but my results are different.
I'm attempting to draw a border around a rectangle, the rectangle was created from a surface that contains some text as follows.
test_font = pygame.font.Font('font\Pixeltype.ttf',50)
score_surf = test_font.render('My Game', False, 'Black')
score_rect = score_surf.get_rect(center = (400,50))
#Later in the main loop
pygame.draw.rect(screen,'Pink',score_rect)
pygame.draw.rect(screen,'Pink',score_rect, 6)
My understanding is that the first pygame.draw.rect should colour in the area of the score_rect, and the second should create a border that goes slightly outside the area of the score_rect. This should leave a bit of pink visible all the way around the text. In the video I can see this happening, but when I run the code on my system the second pygame.draw.rect that specifies a border width doesn't seem to have any effect.
I've experimented a bit by removing the first pygame.draw.rect, this works mostly as expected I get a pink rectangular border around my text, but this border is strictly insisde the score_rect.
According to the Pygame documentation specifying the width argument should cause the border to go slightly outside the score_rect. However I'm not seeing this behaviour.
Link to Pygame documentation I'm reading
https://www.pygame.org/docs/ref/draw.html#pygame.draw.rect
Link to Youtube video I'm following, and location in video
https://youtu.be/AY9MnQ4x3zk?t=4879
Edit: Sorry I forgot to note my software versions
Pygame: 2.1.2
Python: 3.10.2
OS Windows 10
Any help would be appreciated.
I've come across people asking this exact question on other sites (not in a way that's very searchable, don't worry), so I'm mainly copy pasting my last answer.
In a recent version of pygame, draw.rect was changed to give "actual rectangles." This has an advantage of looking cleaner in many situations, and the algorithm for them is now significantly faster, helping performance.
I actually talked to someone with your exact same issue (like coming from the same tutorial) on discord, and we decided to use a rect.inflate() call to grow the rectangle out before drawing it behind the text.
For example, you could do something like
pygame.draw.rect(screen, 'Pink', score_rect.inflate(10,10))
Instead of both Clear's rect calls.
Or if you want to preserve the slight corner rounding you could do
pygame.draw.rect(screen, 'Pink', score_rect.inflate(10,10), border_radius=3)
So this just uses the return value of a Rect.inflate call instead of the original Rect itself. Inflate takes an x margin and a y margin, and returns a Rect larger/smaller by those amounts, but still centered in the same location.
Related
I'll start with the pictures:
Comparison Of Different Publishing Methods From Flash CC
It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)
The shapes making up the body parts are all triangles with a solid fill and no stroke.
However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.
Any explanation or official support is greatly appreciated!
UPDATE:
The accepted answer definitely improved some of the problem but unfortunately not enough.
Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.
Here's a link of the work around being implemented if you wanted an update:
link
This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.
A possible approach would be to cache it at a larger size, and scale it down.
var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);
The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.
I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.
Plain shapes exported from Adobe Animate
Cached the shape container
Doubled the cache size
You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.
Ok I am developing a game using Libgdx and everything was fine until I noticed that when my character moves, its texture becomes slightly blurred at the edges, as if it is blending in with the background in the android version. There seems to be a slight graininess to the image as well which becomes more noticeable when it moves. I THINK these problems might be related to texture filtering, but wanted to come on and ask here to see if anyone had experienced this before. Any insight appreciated.
EDIT: Here is an the image, you can see it's quite grainy on the whole. When it moves the graininess seems move, it is hard to describe, but it looks as if the pixels on the eater are moving relative to each other slightly.
The way I draw it is pretty straight forward the following is called in my render method:
idleTexture = new Texture(Gdx.files.internal("images/GreenGuy.png"));
spriteBatch.draw(idleTexture, x, y*ppuY,width*ppuX,height*ppuY);
All other work I look at does what I am doing, but I am not totally happy with the results. I have tried changing between linear and nearest filtering but this did not change anything. I have also tried just using a smaller image instead of shrinking a large one, but I still get the same problem of the pixels not remaining relatively static while the character is moving.
I'm having trouble understand how DisplacementMapFilter works. Basically, I'm trying to create a revolving planet through a combination of fisheye/masking.
Also, how do I go about doing this via timeline? I'm not too familiar with coding within it, but this is more of an animation project than anything else, so classes are out of the question. Sorry for the lack of code -- I'm simply stuck.
As noted in the comments above, this probably only answers half the problem;
Generating a displacement map image isn't too difficult with the right tools. I'll assume you're using Photoshop, GIMP, Fireworks, or similar.
It's probably best to work on a 128x128 image or smaller with this method. Some editors have more specialised tools which let you work on pretty much any size of image, but this is a generic process that needs no special tools. You can always enlarge the end result, but the quality will begin to go down.
Start with a gradient fill. It should go from pure black on the left to dark red on the right (specifically 128,0,0). Add a vertical fill from black at the top to dark green at the bottom (specifically 0,128,0), and combine them with a LIGHTEN or ADD filter. You should now have an image which has black, red, green and yellow corners. Flatten it.
Copy this image to another layer / whatever the term-of-choice is for your editor. Apply whatever displacement filter you want to it (maybe a fish eye, maybe a manual smudge, maybe a perspective transform, anything)
Add a third layer between the two. Flood-fill it with dark yellow (128,128,0) and set it to ADD / ADDITION blend mode. Set the top layer to SUBTRACT / SUBTRACTION blend mode.
That's it. You should get a mostly yellow image which will function as a displacement map.
Update:
To use this in the example program (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DisplacementMapFilter.html#includeExamplesSummary), replace the createBitmapData function with this:
private function createBitmapData():BitmapData {
return myBitmapObject.bitmapData;
}
where myBitmapObject is the instance name (I think) of your displacement Bitmap. There are tidier ways of setting that up, but this is the easiest.
I'm new to canvas, so pardon the beginner question. I'm trying to animate a square on a canvas that changes colors, rotates, and scales up and down (this is just for practice). I'm just trying to grasp all of the concepts and create an example that does all of them at once.
What I want it to do is scale up to a certain amount, then once it reaches that amount, it scales back down to the beginning amount (and then repeats). The same goes for the color (continue animating, then go backwards through the colors). How can I accomplish this?
Here's an example of my code that I wrote:
http://jsfiddle.net/ggsFJ/1/
You'll notice a couple bugs:
Once the color gets to yellow, it stops animating.
The scaling obviously doesn't work.
The rotation isn't either clearing the canvas fast enough or something, because it's showing a trail of positions.
Where can I find some resources on accomplishing this? Any help is appreciated.
There's one small problem that's causing all the other problems (well, apart from the yellow - I'm not experiencing that particular one):
ctx.restore;
That line does nothing. You need to call ctx.restore using parentheses. Once you do that, the scaling works, and clearRect() will clear a non-transformed rectangle:
ctx.restore();
And here's the updated demo.
The problem I can see is with your restore method call.
You are just saying ctx.restore (possibly by mistake). It should be ctx.restore();
this.context.drawImage(myimage, 0, 0);
Putting the image on the canvas is pretty well covered all over the web.
But how do I remove it after it's there?
Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.
You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.
To simplify a bit, there are generally two ways:
Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.
You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.
If you want to look into libraries, take a peek at easel.js. It's pretty learnable.
Option 1:
Draw a rectangle over it of the same color as the background.
Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.
So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.