I have a texture of a circle, which gets drawn to a new position when a touch drag occurs. It isn’t set up as a body.
I have made a physics map using Aurelien Ribon's Physics Body Editor Loader GUI to the circle's upper and lower part, and I’d like to draw that mask over the texture’s position, and to its new position when a drag occurs.
How can I do this? In my create method I initialize the variables, the mask gets drawn to the texture’s initial position, but when I move it the mask stays at the circle’s initial position.
Here's my code:
Create() method:
//... rest of the method ommited for clarity
karika = gameWorld.getKarika();
World world = new World(new Vector2(0, 0), false);
Box2DDebugRenderer renderer = new Box2DDebugRenderer();
BodyEditorLoader karikaLoader = new BodyEditorLoader(Gdx.files.internal("data/collision-masks/karika.json"));
BodyDef karikaDef = new BodyDef();
karikaDef.type = BodyType.DynamicBody;
karikaDef.position.set(karika.getPosition().x, karika.getPosition().y);
karikaDef.angle = karika.getRotation();
Body karikaBody = world.createBody(karikaDef);
FixtureDef karikaFixture = new FixtureDef();
karikaFixture.density = 0.5f;
karikaFixture.friction = 0.8f;
karikaFixture.restitution = 0.6f;
karikaLoader.attachFixture(karikaBody, "karika", karikaFixture, karika.getWidth());
Vector2 karikaBodyOrigin = karikaLoader.getOrigin("karika", karika.getWidth()).cpy();
//rest of the method ommited for clarity
My render() method:
//...
batch.begin();
batch.draw(karikaTexture, karika.getPosition().x, karika.getPosition().y, karika.getWidth() / 2, karika.getHeight() / 2, karika.getWidth(), karika.getHeight(), 1, 1, karika.getRotation(), 0, 0, karikaTexture.getWidth(), karikaTexture.getHeight(), false, false);
batch.end();
renderer.render(world, cam.combined);
world.step(1 / 60f, 6, 2);
//...
The texture that is being drawn in the render method is my circle's texture. As said before, I haven't set that up as a body, only the collision mask.
What I'd like to do, is attach the mask to the texture, and keep up with it's position, for example when I drag the circle, the mask should stay on the circle.
Look into the DebugRenderer. It works very well, and does precisely what you're asking.
Here's how to use it.
debugRenderer.render(this.world, camera.combined);
And here's a more thorough tutorial.
I recommend you assign your circle's position using physics object's position rather than trying to assign the physics object to your texture's position.
In your code, it looks like you create your karikaBody using the current position of karika, but the karikaBody position is never being updated after that. So your "collision mask" (your physics body) position never changes.
Related
This problem seemed very obvious for me to solve, but whatever I try, it doesn't work. What I'm trying to do is to incorporate a mini-version of my PlayScreen in a ScrollPane as a tutorial where you can read text and try it out immediately.
Because I didn't find any better solution to add this to the Table inside the ScrollPane, I edited the draw() method of the PlayScreen to take the ScrollPane.getScrollPercentY() and offset the camera of the PlayScreen accordingly.
What I want to do now is to only render only part of the viewport that would be normally visible in the real game. Subsequently, I want to be able to control the size and position of this "window".
I also want to be able to resize and move the content, while cutting off the edges that are not visible to the camera. This is what I tried inside the PlayScreenDraw:
public void draw(final float yOffset,
final int xTiles,
final int yTiles) {
view.getCamera().position.y = yTiles / 2f - yOffset * yTiles / HEIGHT; // HEIGHT = 800
view.getCamera().position.x = xTiles / 2f;
view.setWorldSize(xTiles, yTiles); //Do i even need to change the world size?
b.setProjectionMatrix(view.getCamera().combined);
b.begin();
...
b.end();
view.update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}
What this gives me, in terms of the picture above, is this
How do I need to change the viewport and/or the camera? Btw., this is how i set the two up:
cam = new OrthographicCamera();
cam.setToOrtho(false, WIDTH, HEIGHT); // WIDTH = 8, HEIGHT = 16
batch.setProjectionMatrix(cam.combined);
view = new FitViewport(WIDTH, HEIGHT, cam);
The Pixmap class can help you achieve what you want since you stated that you wanted to "cut off" the parts outside of the green selection box.
You need to render what the camera sees to an FBO and then get the pixmap from the FBO itself.
Framebuffer Objects are OpenGL Objects, which allow for the creation of user-defined Framebuffers. With them, one can render to non-Default Framebuffer locations, and thus render without disturbing the main screen.
-- OpenGL wiki
// Construct an FBO and keep a reference to it. Remember to dispose of it.
FrameBuffer fbo = new FrameBuffer(Format.RGBA8888, width, height, false);
public void render() {
//Start rendering to the fbo.
fbo.begin();
//From the camera's perspective.
batch.setProjectionMatrix(camera.combined);
batch.begin();
//Draw whatever you want to draw with the camera.
batch.end();
// Finished drawing, get pixmap.
Pixmap pixmap = ScreenUtils.getFrameBufferPixmap(0, 0, width, height);
//Stop drawing to your fbo.
fbo.end();
}
After getting the pixmap you can iterate through the pixels and set the alpha of the pixels outside your green selection window to 0 making them invisible or "cutting them off"
#Override
public void create()
{
batch = new SpriteBatch();
shape = new ShapeRenderer();
velocity = new Vector2(100, 0);
position = new Rectangle(0, 5, 100, 100);
font = new BitmapFont();
font.setColor(Color.BLACK);
font.getData().scale(3f);
camera = new OrthographicCamera();
confCamera();
}
#Override
public void render()
{
if(Gdx.input.isTouched())
position.x = Gdx.input.getX() - position.width/2;
position.y = (Gdx.input.getY() - position.height/2);
shape.begin(ShapeRenderer.ShapeType.Filled);
shape.setColor(Color.BLACK);
shape.rect(position.x, position.y, position.width, position.height);
shape.end();
}
It's a simple code, but I'm not undestanding Y axis, my shape moves like a mirror. If I touch on top, my shape goes to bottom. If I touch on bottom, my shape goes to top. How to fix it?
LibGDX (by default) for rendering uses coordinate system where 0 is at bottom of the screen and the more you go up Y coordinate grows.
Also, when you read input coordinates (touches, moves...) you get screen coordinates, but when you render your graphics you are using "world" coordinates. They are in 2 different coordinate system so to convert from screen to world you have to use camera.unproject() call. Should be like:
Vector3 touchPos = new Vector3(Gdx.input.getX(), Gdx.input.getY(), 0);
camera.unproject(touchPos);
and then use touchPos.x and touchPos.y.
The similar question is asked here so you can find more answers there:
Using unProject correctly in Java Libgdx
im kinda new here, anywho... i am interested in the android gaming app development and i am learning on my own how to do so, using Libgdx as my game-engine and already made a small game not something exciting.
i have recently started to learn how to use the World variable and creating bodies in it, i want to create a class that extends Actor, give it animations (i know how to give animations) and to try and display it on the body, so where ever the body goes, the animation is played on it (basically below the animation is the body that is not displayed ofc)
so my question is : is there a way to give this costume actor into the body so it will play it over the body? (attaching them)
Will appreciate the help!
** NOTE : be aware that my knowledge is still limited, i am a college student for Program Engineering and i am not fully into much depth in java yet (my college not teaching game-engines) **
UPDATE
i have created a costume class, made animations to each action (like herowalk, herosit ... etc...)
i wrote a render method in it :
public void render(SpriteBatch batch) {
float posX = bbody.getPosition().x * PPM;
float posY = bbody.getPosition().y * PPM;
float rotation = (float) Math.toDegrees(bbody.getAngle());
sprite.setPosition(posX,posY);
sprite.setRotation(rotation);
sprite.draw(batch);
}
and created a body, placed it in the middle of my screen and attached the sprite to it using SetUserData() :
BodyDef bdef = new BodyDef();
bdef.position.set(160 / PPM, 200 / PPM);
bdef.type = BodyDef.BodyType.DynamicBody;
PolygonShape shape = new PolygonShape();
shape.setAsBox(5 / PPM, 5 / PPM);
bbody = world.createBody(bdef);
Bodyarray.add(bbody);
FixtureDef fdef = new FixtureDef();
fdef.shape = shape;
fdef.filter.categoryBits = BIT_BOX;
fdef.filter.maskBits = BIT_PLATFORM | BIT_BALL;
bbody.createFixture(fdef);
bbody.setUserData(sprite);
and in my main class where i draw with batch i wrote :
player.sprite.setRegion(player.getAnimationup().getKeyFrame(dt, true));
dt += elapsedTime;
player.render(batch);
to constantly change the animations depends on if the player turns to the right, left, up , down.
the only problem i have is that the sprite it self (the animation works perfectly) is being drawn on the bottom left side of the screen (not on 0,0, it looks like it got the x,y of the body but still away from it) and can see that its attached to it when moving the body (i put controls to control the body movement) and i see the sprite moving with it.
for example im trying to check the coordination of X,Y for both the body and the sprite with Gdx.app.log as usual and both have the SAME exact X and Y. (ofc the sprite has his multiplied by PPM (placed it as 100) since the sprite is not a physical body)
what is causing the wrong location of the sprite?
Welcome to Stack Overflow!
The answer to your question is "Not exactly." Box2D gives you a method called Body#setUserData() which lets you create a reference from the Body to any object (in this case an Animation object, but it is up to you to keep their positions in sync. See the pseudo-code below adapted from the libGDX wiki:
// Create an array to be filled with the bodies
// (better don't create a new one every time though)
Array<Body> bodies = new Array<Body>();
// Now fill the array with all bodies
world.getBodies(bodies);
for (Body b : bodies) {
// Get the body's user data - in this example, our user
// data is an instance of the Entity class
Animation anim = (Animation) b.getUserData();
if (anim != null) {
// Update the entities/sprites position and angle
TextureRegion frame = anim.getKeyFrame( ... );
// Now draw the frame using b.getPosition() and b.getAngle()
}
}
By the way, the libGDX wiki is an excellent resource and reference as you start learning libGDX.
I'm heaving heavy problems with drawing a Sprite on a Box2D body.
I'm creating a platformer and I did draw a sprite on a body before but then realized that my gravity is really floaty. After googling I found out that I should work with meters when using Box2D and I changed my code to work with a pixel to meter conversion ratio of 25.
Since then I can't get everything to work though, my sprite just won't draw on my body.
Camera:
float width = Gdx.graphics.getWidth() * PIXELS_TO_METERS;
float height = Gdx.graphics.getHeight() * PIXELS_TO_METERS;
camera = new OrthographicCamera(width / 2, height / 2);
camera.position.set(camera.viewportWidth / 2, camera.viewportHeight / 2, 0);
camera.update();
Here is the code for my body:
idleRegion = new TextureRegion(xeonTexture, 20, 13, 50, 65);
xeonSprite = new Sprite(idleRegion);
//Physics
bodyDef = new BodyDef();
bodyDef.type = BodyDef.BodyType.DynamicBody;
bodyDef.position.set(100 * PIXELS_TO_METERS, 100 * PIXELS_TO_METERS);
bodyDef.fixedRotation = true;
body = world.createBody(bodyDef);
PolygonShape shape = new PolygonShape();
shape.setAsBox((xeonSprite.getWidth() / 2) * PIXELS_TO_METERS, (xeonSprite.getHeight() / 2) * PIXELS_TO_METERS);
FixtureDef fixtureDef = new FixtureDef();
fixtureDef.shape = shape;
fixtureDef.density = 1f;
fixtureDef.friction = 1f;
fixtureDef.restitution = 0f;
fixtureDef.isSensor = false;
physicsFixture = body.createFixture(fixtureDef);
Here is how I set the position of my sprite:
final float widthD2 = (xeonSprite.getWidth() / 2);
final float heightD2 = (xeonSprite.getHeight() / 2);
final float angle = this.getBodyAngle();
xeonSprite.setOrigin(widthD2, heightD2);
xeonSprite.setPosition(body.getPosition().x - xeonSprite.getWidth() / 2, body.getPosition().y - xeonSprite.getHeight() / 2);
xeonSprite.setRotation((float) Math.toRadians(angle));
I also tried the following:
xeonSprite.setPosition(body.getPosition().x - xeonSprite.getWidth() / 2 * METERS_TO_PIXELS, body.getPosition().y - xeonSprite.getHeight() / 2 * METERS_TO_PIXELS);
And here is how I draw my Sprite:
penguinBatch.begin();
xeon.getPenguinSprite(stateTime, Gdx.graphics.getDeltaTime()).draw(penguinBatch);
penguinBatch.end();
This is yet another case of "Pixels do not exist in your game world", they are only there to represent you game world to your client. A camera man for TV need to know as much about your TV as you need to know about your clients screens. Just capture what you want to show and let LibGDX do the rest.
So, you should never, ever work with pixels. In the case you want pixel perfect drawing you might want to setup your camera to the amount of pixels of the screen you are targeting but after that you treat these "pixels" as units.
Box2D does not work with pixel per meter. It works with 1 unit == 1 meter and you should stick to that. But how much meters a pixel should represent is still up to you.
If you want to draw a 1m x 1m box you should not multiply by some number you create based of screen pixels like you do now, you should just give it 1 x 1 to represent the box.
shape.setAsBox(1, 1);
Your sprite should be exactly the same
xeonSprite.setSize(1, 1);
And you should position them on the same position. It's really that simple, 1 UNIT == 1m and there is nothing more to it, the camera does the rest. If you want to show 9m x 16m of your game world you setup your camera like this.
camera = new OrthographicCamera(9, 16);
If you want to represent the empire state building you would give the body and sprite a size of 57, 443 and then your camera needs to represent a much larger area, if you don't want to render a small portion of it. If you want to fit the height exactly on screen without stretching you need your own conversion.
float camHeight = 443;
float aspectRatio = Gdx.graphics.width / Gdx.graphics.height
float camWidth = aspectRatio * 443;
Although those Gdx calls give the pixels your clients are running you should still not treat these as pixels about these since you don't know at what screen I will be playing your game.
Now forget about the empire state building example and your camera's center is positioned at 0, 0 world space so bottom left is at -4.5, -8 so you might want to translate it and don't forget to .update the camera. You are currently doing this in your code.
If you start drawing your sprite and updating Box2D you will see a ball drop from the center of your screen. Of course you need to keep updating your sprites position to match the body position for it to move along with the Box2D body.
Just forget pixels, unless you want to code your own camera or viewports, which you probably do not want because you chose LibGDX. The rest of your game code does not need to work with pixels in any way. The OrthographicCamera can calculate world position to screen position for you by camera.unproject(touchVector).
I am trying to use a Box2D Debug Renderer along with my LibGDX Sprites and Bodies. The problem I am having is that the Renderer draws the Box Body in the center of the screen and then the Sprite is draw at its default location of (0,0) the bottom left of the screen. When I move the Car Sprite both the Car and Debug Box move making them not overlap.
I know the problem is with the camera because I have been messing around with different camera values for a couple of days now. Some times they overlap but then the Box2D Debug Body moves faster than the Car Sprite.
Some times the Box2D body is at the same position as the Sprite but extremely small. I am using 2 cameras. One which is 720 x 480. The Debug Camera is in meters so its, 24 x 16.
Here's some code where the problem might lie (I'm using Stages and Actors) :
BattleScreen.java:
public void show() {
battleStage = new Stage( 720, 480, false );
// The Box2D Debug Renderer will handle rendering all physics objects for debugging
debugRenderer = new Box2DDebugRenderer( true, true, true, true );
debugCam = new OrthographicCamera( 24, 16 );
}
public void render() {
// Set the Camera matrices
battleStage.getCamera().update();
// Update the Physics World, use 1/45 for something around 45 Frames/Second for mobile devices
physicsWorld.step( 1/45.0f, 8, 3 ); // 1/45 for devices
// Again update the Camera matrices and call the debug renderer
//debugCam.update();
debugRenderer.render( physicsWorld, debugCam.combined );
// Update all Game Objects then Draw them
battleStage.act(delta);
battleStage.draw();
}
Car.java: (Also an Actor)
public Car(Texture texture ) {
super( "Car" );
mSprite = new Sprite( texture );
mSprite.setSize( 54, 105 );
mSprite.setOrigin( mSprite.getWidth()/2, mSprite.getHeight()/2); // set the origin to be at the center of the body
FixtureDef carFixtureDef = new FixtureDef();
mBody = Physics.createBoxBody( BodyType.DynamicBody, carFixtureDef, mSprite );
}
public static Body createBoxBody( final BodyType pBodyType, final FixtureDef pFixtureDef, Sprite pSprite ) {
final BodyDef boxBodyDef = new BodyDef();
boxBodyDef.type = pBodyType;
// Temporary Box shape of the Body
final PolygonShape boxPoly = new PolygonShape();
final float halfWidth = pSprite.getWidth() * 0.5f / Consts.PIXEL_METER_RATIO;
final float halfHeight = pSprite.getHeight() * 0.5f / Consts.PIXEL_METER_RATIO;
boxPoly.setAsBox( halfWidth, halfHeight ); // set the anchor point to be the center of the sprite
pFixtureDef.shape = boxPoly;
final Body boxBody = BattleScreen.getPhysicsWorld().createBody(boxBodyDef);
boxBody.createFixture(pFixtureDef);
boxPoly.dispose();
return boxBody;
}
And to make things worse. It really gets complicated when I try to make the Main Camera follow the car.
What about battleStage.getCamera().combined ? Combined worked fine for me.
You have to apply following statement to combine body with the texture drawn
stage.setCamera(camera);