I want to draw an image over another image. Then I want to rotate the images separately.
Is it possible?
How?
Many Thanks
It is possible to draw image one over the other. You can do draw as many image as you want one over the other.
Basically when you draw the image you need to provide positions. If you provide the same positions for multiple images, depending on the order of the images being drawn, they will be drawn one over the other.
So let's say you have a Tank and its's cannon as separate images. What you will do is draw the tank on the screen. Now you need the cannon image with transparent background and same dimensions as the tank(can be different dimensions) and draw on the same position. That will give an illusion that the cannon is attached to the Tank. Now u can rotate these 2 images separately.
Below is an example :
Sprite tankSprite = new Sprite(new Texture("tank.png"));
Sprite turretSprite = new Sprite(new Texture("turret.png"));
//Set the rotations
tankSprite.setRotation(angle);
turretSprite.setRotation(angle);
//Set the positions
tankSprite.setPosition(x, y);
turretSprite.setPosition(x, y);
//Draw the sprites, using spritebatch
tankSprite.draw(batch); // Drawn first
turretSprite.draw(batch); //Drawn over tank
Let's say this is tank body -
Let's say this is the turret (cannon) -
Now this is the result (ignore the background)-
I have rotated the turret to 90 degrees and tank is at 0 degrees. You can make changes accordingly.
Related
I have a complex shape that's been generated from an SVG file that we're clipping images to in canvas.
However, all of the bezier curve coordinates are based on 0,0. Our shape's size scales depending on the size of the canvas (which scales based on the user's screen width).
Is there a way to take the shape that's already been drawn and then move it to a certain position on the canvas? Much like ctx.scale(#, #) will scale the drawn shape?
Thanks!
Use ctx.translate() to change the position of items on your canvas.
See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating
Using translate will alter the position of everything that is subsequently drawn on the canvas. If you just want to move one thing, you can either do:
ctx.translate(x,y);
// draw something
ctx.translate(-x,-y);
or you can do:
ctx.save();
ctx.translate(x,y);
// draw something
ctx.restore();
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. :)
How to add border on an irregular polygon in flash with perspective?
I have a Movieclip which let the user draw a surface and then apply a bitmap to fill in. I want the clip should be applied as a floor tile and then apply a custom border to the sprite which also has the same perspective as the floor?
Thanks in advance.
does anybody know, how to drag the stage "behind" a certain shape or shape-group, so the shape doesn't get dragged around with all the other items on the stage and of course, the stage itself?
In my example I have a stage with many items outside of the visible part of the<canvas>-tag which can only be reached by dragging the stage to the left/right, but one of the shapes should be always on position (0, 0) of the <canvas>-element and shouldn't change its position while the stage is dragged.
I couldn't find a way to do this yet, so I would be very glad if anyone knows a way to get this working.
If the one shape left at (0,0) of the canvas is always the same shape and never changes, you can add all other elements to a group excluding the shape that is positioned at (0,0) and drag the group instead of dragging the stage.
If you must drag the stage, then you'll have to calculate the distance of x that the mouse has moved while dragging, and apply that to the position of the shape at (0,0).
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..