Above are four images of a character walking along the ground from the bottom right towards the upper left. You can see that the drawing order isn't correct in the third panel.
There doesn't seem to be a "correct order" here. For example if instead of a small guy we had a sprite of a looooong cat going through the door, then no matter if you draw the door first or the cat first, it would be wrong.
How do other game engines handle this? Some hack to prevent this situation from happening? Draw a z-buffer by hand? Some other option that didn't occur to me?
The trick is simply to split the tile into pieces. Draw the right half of the arch, then the character, and then the left half.
An alternative to splitting the tile is to just render everything with z-values and a z-buffer like a proper 3d app would. If you generate your graphics in a 3D package you can probably generate the relative z values at the same time.
Related
I am trying to draw a concave circle, e.g. something like a soup bowl to form the "pips" on a die in a Yahtzee like program I am working on using C#.
It seems to me that in graphics "concave" has a different, and quite complex, meaning to what I am trying to achieve - the opposite of convex.
I can draw quite a realistic ball using a PathGradientBrush with white at a position one third of the way across and one third down and SurroundColors of the ball colour and I had hoped by moving the white spot to two thirds across and down I might get what I want but sadly not.
Can anybody give me a steer please? Even a pointer to what might be better search term would be a good start.
Many thanks.
Using tile maps is pretty convenient, but there is one drawback. All tiles are on the same layer. This does not allow performing some operations with graphics, as, for example, in my case
I need that when my character is in front of some tile (wall), his sprite is drawn in front, and when in the back, vice versa.
This can be achieved by changing the position of the tilemap layer, but then only one tile will be drawn correctly. The tiles on the other side of the character will be drawn at the same level. How can the problem be solved?
Add a YSort node to your scene and place your player inside of it. The YSort arranges nodes so that the lower they are on the screen, the closer they are to it.
For example, if my player were below a fence, he would stand in front. If he were above the fence, he would be drawn behind it.
This video displays the effect you're going for, using autotile and YSort together https://www.youtube.com/watch?v=RPgTlxb7Bno.
<------This is an image I made in Photoshop...
It's basically a 160 x 160 box of white with a texture applied.
Below is what it looks like with "background-repeat" in the CSS. I was hoping it'd balance out. Is there a certain percentage the textile has to be at, or size of the original box? For it to be a perfect repeatable texture?
Im trying to do this myself, since I cant find grid patterns that fit the style.
Question: Whats the trick on making textures in Photoshop, that appear as balanced whole backgrounds when repeated?
If you look at the below image where it's in effect, on the very basic start of what Im working on, you can notice it doesnt quite fit together.
Any and all help greatly appreciated. Thanks in advance.
If you want that background for a webpage is better the use of repeating-linear-gradient. It is very easy of implement, less assets to download and it is supported by major browsers.
Look in the top left corner of your image. You'll note that the dark line starts at roughly 4-5 pixels from the top. Then look at the top right corner, and you'll note that the top line starts at just perhaps 2px from the top.
When this image is repeated twice side by side, there will be a disconnect. Just crop the image and shave off the two or three pixels until your lines connect. Repeat by cropping the bottom of the image for vertical alignment.
If you want to do this experimentally, increase the size of your canvas, and copy the pattern into a new 160x160 layer. Place them side by side, and then move the layers one pixel at a time so that they overlap. Where the overlap aligns is where you should crop the image.
I succeeded in retrieving the exact tile my player is on, at runtime when walking around the tiledmap. I'd like now to add some alpha marks on the terrain when passing over, and to do that I need to modify the color of some pixels of the tile.
I really don't know how to do it right now.. any hints?
thanks.
You probably want to draw decorations on top of the tiles, rather than modifying the tiles themselves. The tile images are shared across all cells using a tile, so if you modify the tile itself you would see the change everywhere it was used. Further, modifying the texture is a relatively expensive operation that you probably should try to avoid.
To draw on top the tiles, you might draw additional sprites, or use a custom shader.
Crayon Physics Deluxe is a commercial game that came out recently. Watch the video on the main link to get an idea of what I'm talking about.
It allows you to draw shapes and have them react with proper physics. The goal is to move a ball to a star across the screen using contraptions and shapes you build.
While the game is basically a wrapper for the popular Box2D Physics Engine, it does have one feature that I'm curious about how it is implemented.
Its drawing looks very much like a Crayon. You can see the texture of the crayon and as it draws it varies in thickness and darkness just like an actual crayon drawing would look like.
(source: kloonigames.com)
(source: kloonigames.com)
The background texture is freely available here.
What kind of algorithm would be used to render those lines in a way that looks like a Crayon? Is it a simple texture applied with a random thickness and darkness or is there something more going on?
I remember reading (a long time ago) a short description of an algorithm to do so:
for the general form of the line, you split the segment in two at a random point, and move this point slightly away from it's position (the variation depending on the distance of the point to the extremity). Repeat recursively/randomly. In this way, you lines are not "perfect" (straight line)
for a given segment you can "overshoot" a little bit, by extending one extremity or the other (or both). In this way, you don't have perfect joints. If i remember well, the best was to extends the original extremities, but you can do this for the sub-segment if you want to visibly split them.
draw the lines with pattern/stamp
there was also the (already mentioned) possibility to drawn with different starting and ending opacity (to mimic the tendency to release the pen at the end of drawing)
You can use a different size for the stamp on the beginning and the end of the line (also to mimic the tendency to release the pen at the end of drawing). For the same effect, you can also draw the line twice, with a small variation for one of the extremity (be careful with the alpha in this case, as the line will be drawn twice)
Last, for a given line, you can do the previous modifications several times (ie draw the line twice, with different variations) : human tend to repeat a line if they make some mistakes.
Regards
If you blow the image up you can see a repeating stamp-pattern .. there's probably a small assortment that it uses as it moves from a to b - might even rotate them ..
The wavering of the line can't be all that difficult to do. Divide into a bunch of random segments, pick positions slightly away from the direct route and draw splines.
Here's a paper that uses a lot of math to simulate the deposition of wax on paper using a model of friction. But I think your best bet is to just use a repeating pattern, as another reader mentioned, and vary the opacity according to pressure.
For the imperfect line drawing parts, I have a blog entry describing how to do it using bezier curves.
You can base darkness on speed. That's just measuring the distance traveled by the cursor between this frame and the last frame (remember Pythagorean theorem) and then when you go to draw that line segment on screen, adjust the alpha (opacity) according to the distance you measured.
There is a paper available called Mimicking Hand Drawn Pencil Lines which covers a bit of what you are after. Although it doesn't present a very detailed view of the algorithm, the authors do cover the basics of the steps that they used.
This paper includes high level descriptions of how they generated the lines, as well as how they generated the textures for the lines, and they get results which are similar to what you want.
This article on rendering chart series to look like XKCD comics has an algorithm for perturbing lines which may be relevant. It doesn't cover calculating the texture of a crayon drawn line, but it does offer an approach to making a straight line look imperfect in a human-like way.
Example output:
I believe the easiest way would simply be to use a texture with random darkness (some gradients, maybe) throughout, and set size randomly.