Like everyone else, I'm having trouble following how libgdx's coordinate transformations. I'm creating a scrabble-like game, and dragging a finger on the screen pans the camera. The tiles are Actors on a Stage, and I'm doing the camera transformations on the stage's camera. That all works. Now I'm trying to give it a fancy background for the tiles to sit on. I can't quite figure out the draw method to make it work.
//Assets class
static final Texture feltBackground = new Texture(
Gdx.files.internal("felt_background.png"));
feltBackground.setWrap(Texture.TextureWrap.Repeat,
Texture.TextureWrap.Repeat);
//board rendering snippet
private void drawBackground() {
batch.setProjectionMatrix(board.getCamera().combined);
batch.begin();
screenUpperLeft.set(0, 0, 0);
screenLowerRight.set(Gdx.graphics.getWidth(),
Gdx.graphics.getHeight(), 0);
board.getCamera().unproject(screenUpperLeft);
board.getCamera().unproject(screenLowerRight);
batch.draw(Assets.feltBackground,
0, 0,
(int)screenUpperLeft.x, (int)screenUpperLeft.y,
(int)screenLowerRight.x, (int)screenLowerRight.y);
batch.end();
}
What I'm attempting in drawBackground is:
set boundary points to screen bounds
unproject those points into world space to find the region of the texture I should draw
draw that region to the screen origin
However, with the code like this I'm having various weird problems like the lower boundary of the background region starting offscreen, the upper boundary moving when the camera is zoomed, the texture panning faster than my finger's movement (although the boundaries of the background region pan correctly), the y axis pans mirrored, etc. Changing the code changes these symptoms, but I haven't found a pattern to try to get closer to being correct. Any words of wisdom for drawing like this?
Edit:
Here are some screenshots to add clarity.
When I open the game, there is no background.
I can drag up, which moves up the upper boundary of the background (if there is a lower boundary, I can't ever find it)
I can drag the left boundary right, but like the bottom I can't ever find a right boundary (if it exists)
Whenever you see weird synchronization issues between your camera and the stuff you're trying to draw, it's generally a symptom of confusing world coordinates with viewpoint coordinates (or vise versa) somewhere in your code.
You're using a SpriteBatch to do the rendering, right? When I look up the API for the version of SpriteBatch#draw() which you are calling, it says that those first two floats are the position that you're rendering the sprite in the world, and the four integers have to do with the source and height of the source image.
When you pass (0,0) as the position, it is drawing the image at 0,0 in your game world, which is not (0,0) on your viewport.
I would recommend a simpler approach- instead of trying to project or unproject the coordinates, set the draw location (those first two floats) to stage.getCamera().position.x and stage.getCamera().position.y.
Related
I am trying to move a sprite to the mouse position on click.
However, the coordinates I am getting from Gdx.input.getX()and Gdx.input.getY() is relative to the top left corner, and the setPosition() method of Sprite is relative to the bottom left corner.
Why is this so, and how do I position my sprite where the mouse was clicked?
Screen coordinates come from Android and use a Y-down frame of reference. Cameras in libgdx by default use a Y-up frame of reference (because OpenGL by convention also uses a Y-up frame of reference).
If you prefer the Y-down frame of reference, you can use camera.setToOrtho(true); method to flip it upside down. You might prefer this if coming from a Flash background.
But in general, the safe way to translate screen coordinates from a touch into the camera's coordinate system is to do the following. This will work regardless of what platform you're on and whatever coordinate system you chose for the camera. For example, for some types of games, you wouldn't even be using a camera that matches the screen resolution, but you'd still want screen coordinates converted to camera coordinates. Also, if you have a camera that moves around the world, this will automatically change the touch point to world coordinates.
tempVector3.set(Gdx.input.getX(), Gdx.input.getY(), 0);
camera.unproject(tempVector3);
//now tempVector3 contains the touch point in camera coordinates.
It uses Vector3 because this also works for 3D cameras.
I only want to show a portion of a shape drawn on a canvas.
My line is essentially this, and it works fine:
ctx.fillRect( xPosition, rectHeight - offsetV , rectWidth, rectHeight);
The second variable there is going to be negative. So, my quesiton is: is it bad practice (or am I setting myself for errors down the road) to draw a path that starts off the canvas (with a negative coordinate) and then continue drawing on to the canvas.
No problem at all. If you have very large number of drawing object you can (like GameAlchemist said) prevent drawing that object .If you use canvas like map for explore (zoom out/in ctx, translate whole context) that preventing draw can cost more that clip cost. And its complicated ...
I have some expire with drawing object out of canvas. You can have a problem if you put calculation and other (no drawing) staff intro draw function.
Important :
-Make canvas draw function code clear(only draw canvas code).
-If your app no need for const update make update call only when it needs.
-Clear canvas only in (0,0,canvas.w,canvas.h)
-Use style only when it needs (stroke,fill,font etc.)
I am working on a Action Script 3.0 application , in which i ill be allowed to load the image and make them draggable. Consider i am loading the deer image and making it as draggable.
Problem with this is , if i click on the translucent area ( white space around the bitmap ), i dont want the bitmap to draggable.is there any way to draw the deer boundary region exactly without the white space around it.
You can use BitmapData methods to get each pixel color, and then, you can either :
On creation, for each pixel if it's not fully transparent (!= 0) you can draw a point of a Shape, which will be transparent, and make it dragable in place of your bitmap (as noticed in comment, it will be quite CPU consuming, so use the second method)
On click, get the click coordinate relative to the bitmap, check if the pixel is transparent and make it drag only if it's not.
In either way, that will be quite CPU consuming. You may also consider convert your bitmap to a vector image (Sprite). This will allow flash to detect real images boundaries.
I'm currently working on a game with html5/js, using box2dweb for the collision but I'm running into the issue where I am required to scroll the level with the player. Box2d renders directly to the 2d context so I think in it's current state there is no way to shift the render portion of the canvas?
In as3 you could just put everything in a movieclip and change it's position accordingly.
So, is it possible in anyway to have control of a camera of some sorts or the render portion of the canvas object to shift it's 'position' to keep the player centered at all times?
Thanks in advance,
M0rph3v5
Box2D, by itself, doesn't draw anything, it just calculates positions/collisions.
It offers the so-called "Debug Drawing", but it's purpose is... debug.
Anyway you could start from there to add all the needed features.
http://code.google.com/p/box2d/wiki/FAQ
Yeah I figured, turns out I had to use a context.translate right before the debugdraw as well to 'shift' everything. Got it working nicely now.
EDIT:
The code I'm currently using
context.save();
context.translate(-1*xpos+(canvas.width/2),-1*ypos+(canvas.height/2));
context.rotate(cars[carid].angle);
context.drawImage(carSprite, -carspritewidth/2, -carspriteheight/2);
context.restore();
where xpos and ypos are the x and y positions of the car, after that i just draw the actual car sprite at 0,0 (with the carsize divided as the center).
Hi to keep it short and simple let's say I have a stage with 400x400 size in pixels, but I've drawn a map of 1000x1000 size in pixels. I want my player to be able to "walk" about the stage, but it appears stage.x and stage.y are read-only? Is there any method or way to have the stage "scroll" about, without having to move each object on the map?
Don't move the stage, move the 1000x1000 object,then it'll look like the whole thing is moving.
You should see the stage like a window. You can see everything behind it depending on the size of the window. You cannot change the size of the stage, or move it.
Just like a window you can measure the size of the stage. You can use this to navigate for example movieclips across the stage with actionscript.
Why don't you put the map and the other objects in a seperate layer, and move the map around. Other objects (for example a big red dot to tell the user its' location on the map) are on a fixed position on the map. Just move the map following a sort of path according the red dot.
Not entirely sure what you want to do, but it isn't possible to move the stage.
You can put all the movieclips (the player and the map, if you want) in one movieclip, put only that movieclip on the stage and move that.
But if you only want the map to scroll, just move the map around.
The other answers are correct, but there's an alternative to moving the map:
ScrollRect
Attach a rectangle to a your map's scrollRect property. Moving that rectangle will have the same apparent effect as moving the stage around.
There are minor pros and cons to using scrollRect vs. moving the world, but try them both and see which works better for you.