How to render a circular/radial progress bar in Libgdx? - libgdx

For a game we develop with libgdx, we need to show the user the remaining time for making a move.
How can we render a circular progress bar which shows the remaining seconds?
In the following answer there is a javascript solution :
Circular / radial progress bar
Thanks.

First create a texture (region) with the full circular progress bar. Next deform a shape (mesh) made up of one or more triangles to fit the actual area which should be shown.
For this, think of a line from the center of the image to the bounds of the image. Calculate the intersection point (and "wall", i.e. left, right, top or bottom of the image) of the line at the given angle. This will give you the portion of the texture (region) that needs to be drawn.
For example, if the line at rest (angle is zero) crosses the bottom wall of the image at the middle, your image is square and you want to rotate clockwise, then everything between 45 and 135 degrees hits the left wall, between 135 and 225 degrees hits the top wall, and so on.
Now you have the shape, you'll need to express it in triangle. Or to maintain compatibility with libgdx's spritebatch, an even number of triangles. Make sure to update the U and V values according to the location of the vertex.
A simple implementation of this can be found over here: https://github.com/xoppa/world/blob/master/src/com/xoppa/android/misc/RadialSprite.java

You could use an OpenGL shader to generate a circular progress bar. Here is an animated timer that would be a good place to start: http://glsl.heroku.com/e#10201.0
However, I don't think there is any good Libgdx infrastructure for dropping in shaders like this. You would have to use the OpenGL APIs (see https://code.google.com/p/libgdx/wiki/OpenGLShader).

Related

How to have accurate collisions in Flash CS6 (AS3)

i am creating an endless runner game and the player as to jump over an obstacle, and if he touches it he looses health. The current collision code is this:
if (man_mc.hitTestObject(crate_mc)) {
health--;
health_txt.text=health.toString();
which is inside a loop. But the problem is that my obstacles are triangles, so when you jump over them if you touch the 'hit box' or dimensions of the triangle you loose health. So how do i make it so the collision is only true if my player is touching the triangle. (and the triangle is a png with transparent background)
EDIT: I found that i could use hitTestPoint instead of hitTestObject but how do i know what co ordinates to put into the parameters?
I would abandon the use of hitTestObject() (or even hitTestPoint()) for collision detection. Instead, I'd use another algorithm for collision detection in your game
I'll assume your player is a (pretty) skinny box and you said that your obstacles are triangles. I'd first try using a basic method of checking if any of the triangle's points are within the player's bounding box. If it is, then you have a collision.
You could also go the other way and check if a player's points in the bounding box are within any triangle, but you may end up with an odd case where a triangle is poking in to the player, but none of the player's points are within the triangle (which can happen if a player gets a triangle right up between the legs >.> ). Also, by going triangle first, there are less points to check per player and triangle pair.
Note that using this simple method won't tell you how much intersection there is, but I'm guessing you may not need that, since you were using the hitTestObject() method before.
Following my comment
I won't write the code for you line by line, but it's pretty easy to figure it out. So I'll describe one method:
Let's say your player is a rectangle that is 50px wide by 100px tall and the center of the player rectangle is set as the player's position. Half the width of the player is 25px and half the height is 50px.
So if the player is at say 240, 370 (a random spot I made up on screen), then to check if a point falls within you'd check if the x point is within 215 to 265 (240 +/- 25px) and if it is, then you'd check if the y point is within 320 and 420 (370 +/- 50px). If both these conditions are true, then the point is either touching or within the player box (so there is a collision). If any of them are false then the point is not (you could stop checking if the first condition is false, saving you a extra check operation).
Once you have that working (a point vs box test), then you'd just run a triangle's points through it to see if the triangle is intersecting the player box. How you get your triangle's points would vary based on your triangles.

How do I create collision detection with an object and part of a background?

I am just starting to attempt to make my own game using java and libgdx, and the extent of my success so far has been showing the background image on screen, and spawning a little square the user controls with WASD. The background is just a solid color, with a vertical rectangle that is red inside and has black edges. I want to make it so the tiny square (player) can move anywhere within the red rectangle, but not be able to cross over the black edges (out of the rectangle). How would I go about doing this?
Since I am a complete beginner to this stuff I must ask these related questions...
Should the player be just a texture? Should the background be a texture? or a sprite?
I'm not sure the difference between the two yet.
I recommand you to read tutorials about libGDX and Box2D like this one : http://www.gamefromscratch.com/post/2014/08/27/LibGDX-Tutorial-13-Physics-with-Box2D-Part-1-A-Basic-Physics-Simulations.aspx
to answer you're questions, in short :
a texture is an image in memory
a sprite is a part of a texture (or the whole texture) transformed (translation, scale, rotation) to be drawn on screen.
so basically, in the view model, your player is represented by a sprite, your background is a sprite as well.
Player 1 and 2 are 2 different sprites but may reffer to the same texture (bitmap).
with box2D, in the physics model, your player will be represented as a dynamic body and your background as a static body.

Box2D, libGDX slope collision

I have created a Box2D based map for my platformer using ChainShape which has different angle slopes (no more than 45°).
My problem is the slope collision with my player. The player' body has 2 fixtures, a rectangle and a circle below it. Whenever I move the player (the method doesn't matter the results are the same) and I stop on the middle of a slope I slowly glide down. I managed to temporarily fix that but the main reason for this post is the fact that whenever I leave a slope l I shoot out because I still have some impulse left from the previous movement. Same thing happens when I enter a downwards slope, or when I stop on a slope and I start moving again.
Entering / leaving the slope:
(The red lines are the desired movement, the black is the movement I have right now)
Start moving on a slope:
(The red lines are the desired movement, the black is the movement I have right now)
Could you please help me out with this problem? I don't mind if your answer is detailed either.
I've found the easiest way to stop the character sliding on a slope is to set the bodies linear dampening to Infinity when they player releases the move button and the body is grounded, which I'm using ray tracing to test for.
As for your issues with the character not following the slopes, this is simply due to momentum. When you reach the top of the slope, your body still has a some upward momentum which it has to clear. Same as when you're approaching a downward slope - your body still has some horizontal momentum to clear. I've had some success with ray tracing to find the normal of the slope below the player's position, and manually setting the body's velocity to match the tangent, however this not be applicable in your application.
As for your second issue, with starting movement on a slope, I expect you are applying a direct horizontal impulse, which is throwing the body off the slope. Again this could be rectified by finding the gradient of the slope where the player is standing, and applying the force at the appropriate angle.

Drawing over terrain with depth test?

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.

AS3: having problems implementing correct rotation with atan2

I have the following scenario: player is in the middle of the screen and never moves from those coordinates. If I click with the mouse on the far right of the screen, the A* script kicks in and moves the background the player is on according with its own walkable/not walkable criteria, so for example if there is an obstacle in between the center of the screen where the player always is in the far right of the screen, the background correctly moves in the opposite direction And when needed moves around the obstacle, so you have the illusion of player walking, but instead only the background moves.
my problem is that I don't know how to rotate my player to simulate that he is following the path that the actual background is making. For example, in the beginning, the player is facing down. If I click on the right side of the screen, the player should face right. When an obstacle is present, the player should face the direction of the path around the obstacle and so on
but again technically my player never moves, so I don't know what coordinates should I have the atan2 use. In my mind I thought that the player should rotate toward the center of the next best hop in the array of best path created during the A* script, but for some reason I can't figure out the correct coordinates y and x for the atan2 command
I bet this is a simple thing I overlooked, but apparently my mind is in shutdown mode, so I can use a new fresh perspective :-)
thanks!
First, do not code in brain shutdown mode, this can save you lots of brainhurt time.
You don't need atan2() in this scenario, since your player is technically on a grid instead of on the screen. Give the player internal coordinates on the grid that will be updated as the player walks around the world, and use them in your A* script. The A* script generates a sequence of tiles the player should walk, thus you derive player's facing from current and next tile, for example, if the next tile to walk is adjacent upwards, you make the player face up and continue moving.