I have a number of 2D shapes that interlock with no gaps. I can extrude them to 3D without a bevel and they continue to fit together correctly. However if I add a bevel when extruding, the shapes grow which means they overlap each other when adjacent:
Here you can see that the top of red shape (translated +Z for clarity) is the same width as the gap in the blue shape but that the sides of the red shape have expanded.
Is there any way to achieve an inner bevel which doesn't change the shape's outer dimensions?
Related
I'm using this Line of sight library which works similar to the demo. When you move the player character around it constructs a polygon for the visible area, see the yellow polygon in the screenshot below.
However, I would like to get the inverted polygon or the "negative" polygon, so the blue area in the example screenshot. The inverted polygon can be used to block any sprites and elements by filling it with solid black color.
The yellow visibility polygon is an array of x,y positions, for example like this:
// viewport 640 x 640 px
// example of visibility polygon
var visibilityPolygon = [ [640, 334], [502, 248], [402, 248], [406, 246], [406, 202], [246, 170], [353, 170], [353, 100], [278, 0], [548, 0], [480, 128], [480, 200], [549, 200], [640, 195], [640, 334] ];
In the example screenshot the blue area is one continuous shape, and the problem is that sometimes the visibility polygon will break up the game area into 2 or more invisible parts. I think it is theoretically possible to always draw the blue polygon as one single polygon by using the edges of the viewport to connect any seperate parts. So this can result in infinitely thin lines along the viewport edges but that's not a problem. Another consideration is that it has to redraw every frame, so it needs to be efficient enough to run at 60fps.
I don't know how to create such an algorithm to get the inverted polygon. Btw the starting point can vary, sometimes it's on the edge of the area but sometimes somewhere in the middle. In the example screenshot it starts on te bottom-left corner of white rectangle.
So my question is, what would such an algorithm look like? Are there any known example of this using just JavaScript?
What you call the negative polygon is essentially the original polygon from which you remove the edges on the square outline, which results in one or more open polylines, and to which you add closing segments drawn on the square outline, in the reversed traversal order.
In your second case, drop the edges 6-7-8-9, then close 9-10-11-12-13 with 13-X-9, close 14-15-16-4 with 1-14 and close 2-3-4-5-6 with 6-Y-2 (X and Y are corners).
This is a matter of rearranging the chains of vertices.
I have a skinned mesh of a 'snake', exported from blender.
The snake has bones (like a spine) which I want to animate along a curve (SplineCurve3)
I can calculate points along the spline, and the angles between those points, but I'm struggling setting the rotations of the bones correctly.
The problem is that each bone is a child of the previous bone, so rotating one also rotates the others.
Here's an image:
The outer shape is the snake.
The pink line is a section of a SplineCurve3.
The blue/green lines are the bones (THREE.SkeletonHelper).
Each bone is rotated using SplineCurve3.getTangentAt. Because the parent is rotated too, the snake curls up. I basically need the bones to be where the pink line is.
How can I 'compensate' for the rotation of the parent(s) when calculating the rotation of a bone?
Also, in the image the path is flat, but my goal is to move the snake in 3 dimensions. It's a flying snake.
Can you clarify which rotation is which (maybe draw some angles and label them for reference)?
If the whole snake is at an angle to the axes, then just subtract that angle from the bone angle.
Surely, however, the bone angles are defined relative to the parent bone, not as absolute angles against the axes? If you are using the absolute angles subtended with the x-axis as relative angles, then that would produce the behaviour you see of increasingly rotated bones.
Assuming the bone angles should be given relative to the parent bone, then you want:
childRelativeAngle = childAbsoluteAngle - parentAbsoluteAngle
I'm trying to write a game engine in js (canvas). So far so good.
But i got one problem my world is diamond shaped and i render the tiles from top to bottom.
The problem is when i have a tile that's bigger than 1 tile (so 2x2 as example) this will happen:
The house is defined on tile (2,1).
The left rock is placed on (1,0)
The tile (1,0) is rendered first and the next tile is (2,1) because it's on the same row and on the right.
How can you solve this?
You should be able to avoid the problem by breaking your graphics down into smaller pieces - one piece per tile on the grid. A good way to think of it is like this: If you could view the grid from directly above, each sprite should not overflow the edges of the cell they're allocated to.
For example, this cell below should probably only contain the front section of the house shown by the smaller cube:
At some point you may need to also micromanage multiple sprites in the same cell, but that's the same concept in a smaller space.
For this specific example there's a simpler solution.
Right now the house occupies these spaces: 2x0, 3x0, 2x1, 3x1
And you're drawing the house from position 2x1
If you instead drew the house from position 2x0 (and still occupy the same original 4 tiles) all the tiles would draw in correct order.
As long as you're drawing tiles top (back) to bottom (front) in screen rows, you can use oversized tiles that are 2x2, 3x3, 4x4, or any square size easily without slicing. Just draw these larger tiles along their middle row position. I often use the left corner as the grid anchor for these large tiles. It makes sense in my head this way because as soon as you draw the leftmost (or right) corner of a big isometric square, you separate everything already drawn behind it from what comes in front of it.
Rectangular oversized tiles (e.g. 2x1, 2x3, 2x4, 3x4, 4x5) usually require a more complex draw order algorithm than just screen rows top to bottom. I opt to slice these into square tiles.
Side note, that medieval house tile does already have original parts split into vertical slices if you want to go that route (my originals are on OpenGameArt).
I think the best solution here is clearly to divide your graphics using a pre-defined metric (width of a tile for instance).
The tile-based system is widely used for 2D-game, including isometric games.
Example: http://www.spriters-resource.com/pc_computer/fallouttactics/
My solutions (Also thanks to Marty Wallace!)
I can cut the sprite in 3 pieces shown on the image below
The first part gets drawed on coord (2, 0)
The second part gets drawed on coord (2, 1)
The third part gets drawed on coord (3, 1)
So we slice it vertically on the bottom tiles (the drawed tiles are like a V shape)
This should work for every tile size like 4x4
We can forgot about the tile (3, 0)
Blue: The actual png
Red: the cut lines
The lines are a bit off, but it's about the idea
And i need some sleep (that last 2 is 3 ofcourse)
This also gives us a simple calculation:
sizeX - 1 = The number of sides on the right of the middle section (the big one)
sizeY - 1 = The number of sides on the left side of the middle section
And every slice is half the tile width, and the middle slice is the full tile width.
The right slices contain only the most right part of the tile, and the left the most left side.
We can easily use tiles like 3x1 or 1x4 etc
How to draw sale down rectangle inside another rectangle? Let say I have coordinates of a rectangle which is transformed at position x,y. Now, I need to draw a scale down rectangle inside the previous recangle, Just like this,
http://www.uploadimage.co.uk/thumbs/849968trim%20Rect.png
The idea is simple, if you have the outer rectangle coordinates you must take the following steps:
find the center of the outer rectangle
move outer rectangle so that its center will coincide with origin (0,0)
scale the edge coordinates of outer rectangle by a ratio (ex: 0.7)
compute inner rectangle coordinates
move both outer and inner rectangle back in position
If you know a little bit of math you can actually combine all those transformation into a single one so it will be faster.
I'm drawing a game grid with rect() and I'd like some borders of my rectangle have different colors.
exemple: I'd like a rectangle with left and right borders green but top and bottom borders blue, do you see a way ?
Thanks
You can't color rect borders differently, but you can retrace your rect with separate lines:
stroke(0,0,255);
rect(50,50,100,100);
stroke(0,255,0);
line(50,50,50,150);
line(150,50,150,150);