I have two images, a gameboard and the same gameboard with all posible player positions in a pressed state. When a player moves to a position on the board, I put the board image over the pressed board image and slice using context.drawImage() on the pressed image, to display the pressed position through the slice. However, my game board contains positions which are not rectangular but different shapes.
Is it possible with html 5 canvas, to cut a non-rectangular shape out of an image to display the underlying image?
I found it's possible to use clip() on shapes but I can't find a similar option on images.
you can create a third image that is a mask with transparent (alpha-channel) pixels and non-transparent pixels, and use a
globalCompositeOperation
to merge the mask and the to-be-masked image into a new image ( think you can use an xor or source-out here..
Related
I have a number of square regions in my game screen which, when actors move across these regions, I want the background image to show through from behind.
So, is it possible to draw to a SpriteBatch such that a region is subtracted/deleted from the texture (effectively "punching a hole" in it)?
I can't think how else to achieve this... Scissors seem incredibly impractical for my purpose, as I want to clip the areas INSIDE a number of squares. This is the inverse of Scissors - which clip areas OUTSIDE the scissors' bounds. The thought of calculating dozens of Scissor regions to fill the inverse areas between an assortment of square regions seems too impractical to be the solution... especially if the regions are moving.
Any help or suggestions appreciated!
UPDATE: Image attached.
I want the background to always be visible in the areas marked with the dotted lines. The dotted areas will move, so I'd rather not create more sprites from the background to lay on top, but rather have parts of the actors intersecting the dotted squares not be drawn. (Or any method that will achieve the same effect.)
I think the best hack is to not try and be so precise about clipping your actors, but to just re-draw the background on top the actors (and to clip that).
Specifically:
draw the whole background
draw your actors/sprites
draw the background with one cliprect for one part that "shows through"
draw the background with another cliprect for the other part that "shows through"
draw the dotted boxes around your cliprect areas
Great image, by the way. Easily worth 1000 words. :)
This is the situation: I need to do a "splatter" effect to show the content behind (be it a body background image, or a google map). I'm thinking of overlaying a canvas on top of the actual content. The canvas will have an opaque (white) background initially. Then, I'll mask it with the splatter images and interval to show the underlying content.
I've found this fiddle that does something similar: http://jsfiddle.net/VqCbv/43/
However, the mask is drawn with fillRec and createLinearGradient Can I modify the code somehow to use an actual image for the mask, for a more flexible shape?
Thanks in advance.
All you need to do is to first create and load in an image with the "splatter". Then you set composition mode of the canvas to destination-out and simply draw the image on top of your canvas:
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 0, 0);
What will happen is that all pixels that are in the image will remove the pixels on the canvas leaving the area the image was in as a transparent area. The other pixels (the white) will be intact.
Demonstration (click canvas to splatter):
http://jsfiddle.net/AbdiasSoftware/4A4Qv/
As you can see a hole is punched in the canvas so the background is visible.
Is it possible to apply transformations to an image to transform it in a trapezium?
The image initial state is a rectangulum.
The way my scene is build, I have a polygon that allows dragging on the edges, and an image with the same size and position.
I would like the image to have the same shape of the polygon aways, so it would became a trapezium when one polygon axis is dragged. Is this possible?
I assume you're talking about something like an isosceles trapezoid rather than a simple rectangle.
The answer is No, but Yes...
No, not possible with 2D transforms--canvas.getContext("2d"). That's because 2d transforms use a 3x3 matrix that only makes parallel transforms. Since a trapezoid is non-parallel, you cannot possibly transform an image (rectangle) into a trapezoid.
But, Yes...you can use webGL (canvas 3D transforms) to do non-parallel transforms and therefore you can use canvas 3D to convert an image into a trapezoid.
I have a spotlight that moves on a stage.
Now I rotate the spotlight but its not rotating on the correct point/origin.
I am trying to do something like
myOject.setOrigin = {x , y};
//and then rotate it about x,y.
I have manually set the white circle in the correct place and when I rotate the
object with the mouse on the screen it works.
Can somebody help me?
Make sure the registration point is in the middle of your symbol. It's not the white circle that appears when you use the Free Transform Tool:
But the crosshair that appears when you edit your movie clip:
You can easily center the object by selecting everything, then opening the Align panel and aligning its horizontal and vertical axes to the center using the two "center" icons under the Align section. If your MC has multiple items per layer, group each layer before aligning, then ungroup after aligning:
The white circle is not what will be used as the origin, it's the little cross. Adjust your clip to have that in the center (you'll have to move all of it's contents). Another option, if moving is not possible, is to wrap your clip in another clip and move it within that.
Select symbol and click CTRL+E - Then move it to positioning cross.
This probably will be very easy for some, but I am stuck on this. I have a map in a movieclip(mc_map) on stage and a small square which acts as a mask to the really bigger size of the same map. What I am want to do is that when I move the mouse on the mc_map(eg: say my cursor is on New York), the small sqaure window will unhide the same area, or will move that bigger image such that the same area is shown under the square mask. I also want to add another cursor(or crosshair) to the stage which is live only in the area of the square and replicates the position of mouse on map. Any help on this will be great thanks.
There are a lot of tutorials on this type of "magnify" effect. See if this one helps: http://www.flashuser.net/flash-actionscript-as3/create-a-magnifying-glass-in-actionscript-3-0.html