Rendering a TiledMap is easy in LibGDX, however the layer offsets are not rendered at all but appears correct in TILED (Tiled Map Editor).
The rendered map appears as all offsets are at 0 (no offsets at all).
Is this feature even supported in Libgdx TiledMap renderer? I've been through the documentation but found no information regarding this.
Thanks very much,
Regards,
Found it.
There are TWO offset properties in TILED, very easy to confuse.
One is "Layer offset" which just offsets the layer in TILED (no effect when rendering in libgdx).
The second is "Dawing Offset" and can only be reached by going into "Tileset Properties". This is the one you want.
Changing Drawing Offset will solve the problem and render the offset correctly in LibGDX.
Related
i'm trying to render geometrical shapes over uneven terrain (loaded from heightmap / shapes geometry is also generated based on averaged heights across the heightmap however they do not fit it exactly). I have the following problem - somethimes the terrain shows through the shape like showed on the picture.
Open Image
I need to draw both terrain and shapes with depth testing enabled so they do not obstruct other objects in the scene.. Could someone suggest a solution to make sure the shapes are always rendered on top ? Lifting them up is not really feasible... i need to replace the colors of actual pixel on the terrain and doing this in pixel shader seems too expensive..
thanks in advance
I had a similar problem and this is how I solved it:
You first render the terrain and keep the depth buffer. Do not render
any objects
Render solid bounding box of the shape you want to put on the terrain.
You need to make sure that your bounding box covers all
the height range the shape covers
An over-conservative estimation is to use the global minimum and maximum elevation of the entire
terrain
In the pixel shader, you read depth buffer and reconstructs world space position
You check if this position is inside your shape
In your case you can check if its xy (xz) projection is within the given distance from
the center of your given circle
Transform this position into your shape's local coordinate system and compute the desired color
Alpha-blend over the render target
This method results in shapes perfectly aligned with the terrain surface. It also does not produce any artifacts and works with any terrain.
The possible drawback is that it requires using deferred-style shading and I do not know if you can do this. Still, I hope this might be helpful for you.
I've spent several hours trying to work around this issue... when rendering really simple shape (ie. a cube with very low complexity) and using a texture map feature of Three.js, when you rotate the cube the image seems to be distorted while in rotation, and then you can see a line which runs across the surface of the cube which appears as distortion.
http://screencast.com/t/VpSPRsr1Jkss
I understand that is a limitation of canvas rendering - but it seems like this is is a really simple thing to do - rotate a cube that has an image on one face without the distortion.
Is there another canvas library or approach i can take? I was really looking forward to using Three.js for animating some logos and other elemnets - but we can't have distortion like that in a logo or a customer facing landing page.
Thanks for reading, I'm open to suggestions here.
I don't accept increasing the complexity of the face as a solution because that just distributes the distortion through out the face. I really just want to render the image to a flat surface and be able to rotate that object.
The distortion you see is because only two triangles make that plane.
A quick fix is to have more detailed plane.
If you are using PlaneGeometry, increase the number of segments.
If you are using CubeGeometry, increase the number of segments on the plane you need (2 out of 3).
It will take a bit of fiddling to find the best balance between a decent look and optimal performance (as more segments will require more computing). Hopefully for simple scene you'll get away with no major delays.
I am working on a map application and I have come across an issue with how my tiles are laying while scaling.
Here is a basic look at my structure:
There is obviously a lot more going on, but you get the idea. Now, I scale the Map App Sprite to zoom in. When that scaling occurs, there is a gap between each tile.
You can see the gap where 4 tiles meet here:
I am caching everything as a bitmap. For each Layer (which all extend Bitmap), I have smoothing set to true and pixelSnapping set to PixelSnapping.ALWAYS (pixel snapping shouldn't help here, but it shouldn't hurt either).
Does anyone have any suggestions on how to fix this issue?
(For the sake of completeness, the Map app is built entirely using AS3 and it is embedded in a Flex app)
Using integers for tile x,y locations and calculating those locations correctly is most likely the fix here, unless the images have seams in them!
The code that calculates and sets the x,y locations would be needed to properly pinpoint the issue in the code.
But, also if you are scaling that container sprite, you would want to ensure that you scale so that the width/height of a tile is an integer value.
For example, if you scale your sprite that contains these tiles, the widths/heights of the individual tiles might not always be integers, therefore creating those seams you see.
What you could do in that case is do your scaling by adjusting your width/height values by integer values, taking into account proportions, as opposed to using scaleX and scaleY on your container sprite.
Without seeing your code it's difficult to be sure, but it is possibly just a visual artifact due to scaling - eg: a 250px wide bitmap scaled to 155% should be rendered at 387.5px wide but thats impossible so its rendered at 388px wide - with the 0.5px part rendered as 1px at 50% alpha to give 'appearance' of 0.5px.
Ensuring scaled bitmaps widths/heights are always integers may solve it?
This looks like a rounding error.
Without code it's hard to know: it would be a great asset to you and us if posted a barebones example of your tiling class. In the process of subtraction you may very well discover your solution.
I'd offer that you should test what happens when you scale and algin four 100x100 bitmap images at various fine grain steps, to detect if it's a Flash rendering issue or a defect in your class.
i tried the hello example on the adobe site.
http://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html
it works, but the context3D seems work on the stage's background in the lowest level. if i draw anything it will cover the 3d context.
i want to bring it to front or set it to a certain level. how can i do that?
also i was told if use 2d api and 3d api together , it will lower the performance of 3d,is it truth?In my works ,i still need 2d api ,for example, drawing the textfield .
Everything goes like this (from bottom to top):
StageVideo (1 or more instances) > Stage3D (1 or more instances) > Your regular display list.
And yes, regular display objects may degrade performance of Stage3D, therefore it may be better to use Stage3D alternatives of those. Some Stage3D accelerated frameworks already has some of those built in (like TextField in Starling).
No, you can't bring it to front.
2d and 3d not relates to each other. But of course, if you write 2d stuff that eat 100% of cpu, you'll get overal slow performance.
the only way is to get from the bottom layer of stage3D instance the rendered bitmap and display it on top of you displayList.. but it should work on each frame, thing that will affect the performance a lot and of course no mouse interaction... this solution will work only to display rendered scene on top of stage3D.. just a simulation
I have an image of a basic game map. Think of it as just horizontal and vertical walls which can't be crossed. How can I go from a png image of the walls to something in code easily?
The hard way is pretty straight forward... it's just if I change the image map I would like an easy way to translate that to code.
Thanks!
edit: The map is not tile-based. It's top down 2D.
I dabble in video games, and I personally would not want the hassle of checking the boundaries of pictures on the map. Wouldn't it be cleaner if these walls were objects that just happened to have an image property (or something like it)? The image would display, but the object would have well defined coordinates and a function could decide whether an object was hit every time the player moved.
I need more details.
Is your game tile based? Is it 3d?
If its tile based, you could downsample your image to the tile resolution and then do a 1:1 conversion with each pixel representing a tile.
I suggest writing a script that takes each individual pixel and determines if it represents part of a wall or not (ie black or white). Then, code your game so that walls are built from individual little block, represented by the pixels. Shouldn't be TOO hard...
If you don't need to precompute anything using the map info. You can just check in runtime logic using getPixel(x,y) like function.
Well, i can see two cases with two different "best solution" depending on where your graphic comes from:
Your graphics is tiled, and thus you can easily "recognize" a block because it's using the same graphics as other blocks and all you would have to do is a program that, when given a list of "blocking tiles" and a map can produce a "collision map" by comparing each tile with tiles in the "blocking list".
Your graphics is just some graphics (e.g. it could be a picture, or some CG graphics) and you don't expect pixels for a block to be the same as pixels from another block. You could still try to apply an "edge detection" algorithm on your picture, but my guess is then that you should rather split your picture in a BG layer and a FG layer so that the FG layer has a pre-defined color (or alpha=0) and test pixels against that color to define whether things are blocking or not.
You don't have much blocking shapes, but they are usually complex (polygons, ellipses) and would be unefficient to render using a bitmap of the world or to pack as "tile attributes". This is typically the case for point-and-click adventure games, for instance. In that case, you're probably to create path that match your boundaries with a vector drawing program and dig for a library that does polygon intersection or bezier collisions.
Good luck and have fun.