Hi i am new to libgdx and try to build a ludo game.right know i could draw the board but when i try to show dice or any peaces nothing happens I attach game code .
please read and help.
public void create() {
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
batch = new SpriteBatch();
camera = new OrthographicCamera(1, h / w);
boardtexture = new Texture(Gdx.files.internal("data/ludo-boardx2.png"));
boardtexture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
boardsprite = new Sprite(boardtexture);
boardsprite.setSize(1f,
1f * boardsprite.getHeight() / boardsprite.getWidth());
boardsprite.setOrigin(boardsprite.getWidth() / 2,
boardsprite.getHeight() / 2);
boardsprite.setPosition(-boardsprite.getWidth() / 2,
-boardsprite.getHeight() / 2);
Texture dice = new Texture(Gdx.files.internal("data/dices.png"));
dice.setFilter(TextureFilter.Linear, TextureFilter.Linear);
dtemp = new Sprite(dice);
dtemp.setSize(1f, 1f * dtemp.getHeight() / dtemp.getWidth());
dtemp.setPosition(0f, 0f);
// System.out.println(w/2+" " +h/2);
// System.out.println(dtemp.getWidth()+":"+dtemp.getHeight());
// animatedDice.setPosition(new Vector2(0, 0));
System.out.println(animatedDice.getX() + ":" + animatedDice.getY()
+ "\n" + w + ":" + h);
}
public void render() {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
// camera.update();
handleInput();
batch.begin();
boardsprite.draw(batch);
dtemp.draw(batch);
//animatedDice.draw(batch);
batch.end();
// animatedDice.update();
}
You are drawing your die at a position of (w/2, h/2), which is way out of range of your viewport. You set your viewport so the X coordinate of the right side of your screen is 0.5, but your sprite's left side is at x=w/2, where w is the number of pixels wide your window is.
Even if you had set your camera size to match the window ((w, h)), you would have an issue here because you'd be drawing your sprite so its left edge matched the right edge of the screen. By default, the origin of your die sprite will be its lower left corner.
If you aren't planning to zoom your scene in and out, it might be simpler to set your camera viewport to the size of the window by using camera = new OrthographicCamera(w, h); Then you'll know that your units are equivalent to pixels.
Related
I have issue in my LibGdx program. I gave 800 height and 480 width to my camera. I am drawing target under coordinates :
randomTargetX = new Random().nextInt((350 - 100) + 1) + 100;
randomTargetY = new Random().nextInt((600 - 300) + 1) + 300;
But after clicking on target my cannonball don't overlap target rectangle.
I am doing this in Touch:
if (Gdx.input.justTouched()) {
touchX = Gdx.input.getX();
touchY = Gdx.input.getY();
camera.unproject(touch.set(touchX, touchY, 0));
if (touch.y>200) {
isTouched = true;
rectangleCannonBall.x = (width / 2) - 50 / 2;
rectangleCannonBall.y = 0;
double angle = 180.0 / Math.PI * Math.atan2(rectangleCannonBall.x - touch.x, touch.y - rectangleCannonBall.y);
spriteCannon.setRotation((float) angle);
}
}
Doesn't work.
It's a cannonball game:
First i am setting camera.
Randomly showing targets inside range of coordinates.
On touch unprojecting camera with Vector3 new position.
On touch calculating target position with cannon position and getting angle to rotate cannon.
After rotating cannon I fire ball towards target.
Now when I do Rectanglar1.overlaps(rec2) , it doesn't work because of both rectangles have different points but by visible both overlaps each other.
When I check coordinates of Rectangle of Target and Touch its different.
The line:
camera.unproject(touch.set(touchX, touchY, 0));
Doesn't do anything.
Try with:
touch = camera.unproject(touch.set(touchX, touchY, 0));
How can I drag a texture (image) without making it jump and centering itself on the mouse cursor (what I have below in my code)?
When I click on the texture, nothing should happen, and when I drag, the mouse cursor should stay in place (relative to the edges of the texture).
Example: https://s31.postimg.org/ojapwbj6j/Untitled_1.jpg
SpriteBatch batch;
Texture texture;
OrthographicCamera camera;
Vector3 spritePosition = new Vector3();
float offsetX, offsetY;
Vector3 input;
#Override
public void create () {
batch = new SpriteBatch();
texture = new Texture("badlogic.jpg");
camera = new OrthographicCamera();
camera.setToOrtho(false);
}
#Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(texture, spritePosition.x, spritePosition.y);
batch.end();
if (Gdx.input.justTouched()){
int x1 = Gdx.input.getX();
int y1 = Gdx.input.getY();
input = new Vector3(x1, y1, 0);
camera.unproject(input);
offsetX = x1 - spritePosition.x;
offsetY = y1 - spritePosition.y;
}
if (Gdx.input.isTouched()) {
spritePosition.set(Gdx.input.getX() - offsetX, Gdx.input.getY() - offsetY, 0);
}
}
What you need to do is work out the offset of the mouse position relative to your image, and subtract that, rather than half the width / height as you're doing at the moment.
Here's some very rough pseudocode to show what I mean - You'll need to rewrite as Java...
if Gdx.input.justTouched {
get mouse position from Gdx.input
camera.unproject it into cameraX and cameraY
offsetX = cameraX - imageX
offsetY = cameraY - imageY
}
if Gdx.input.isTouched {
spritePisition.set(Gdx.input.getX() - offsetX, Gdx.input.getY - offsetY)
}
Why are you using camera.unproject?
Try this:
Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.draw(texture, spritePosition.x, spritePosition.y);
batch.end();
if (Gdx.input.isTouched()) {
spritePosition.set(Gdx.input.getX() - texture.getWidth() / 2, Gdx.input.getY() + texture.getHeight() / 2, 0);
}
}
I am trying to present a map on the screen and place pins on the map at certain coordinates that are predefined. currently the issue is when the screen size changes say from device to device or when running on a desktop when the window size changes the position of all the pins moves when the map is scaled to fit the screen. I'm sure there is an obvious was to make the positions dependent on the map size or something. Could someone point me in the right direction in terms of making the objects appear in the same locations when the screen scales?
You need to unproject your coordinates with your camera.
Let's say that your coordinates that you want to transform to 'screen' coordinates are called
screenX and screenY.
Vector3 vec=new Vector3(screenX,screenY,0);
camera.unproject(vec);
Now you can use your vec.x and vec.y values.
This is how you do it correctly
public static Vector3 MultiplyPoint(Matrix4 m, Vector3 point)
{
Vector3 result = new Vector3(0, 0, 0);
result.x = m.val[Matrix4.M00] * point.x + m.val[Matrix4.M01] * point.y + m.val[Matrix4.M02]* point.z + m.val[Matrix4.M03];
result.y = m.val[Matrix4.M10] * point.x + m.val[Matrix4.M11] * point.y + m.val[Matrix4.M12] * point.z + m.val[Matrix4.M13];
result.z = m.val[Matrix4.M20] * point.x + m.val[Matrix4.M21] * point.y + m.val[Matrix4.M22] * point.z + m.val[Matrix4.M23];
float num = m.val[Matrix4.M30] * point.x + m.val[Matrix4.M31] * point.y + m.val[Matrix4.M32] * point.z + m.val[Matrix4.M33];
num = 1f / num;
result.x *= num;
result.y *= num;
result.z *= num;
return result;
}
public static Vector2 WorldToScreenPoint(float x, float y)
{
Matrix4 V = Constants.Camera.view;
Matrix4 P = Constants.Camera.projection;
Matrix4 MVP = P.mul(V); // Skipping M, point in world coordinates
Vector3 screenPos = MultiplyPoint(MVP, new Vector3(x, y, 0));
Vector3 screenPoint = new Vector3(screenPos.x + 1f, screenPos.y + 1f, screenPos.z + 1f).scl(0.5f); // returns x, y in [0, 1] internal.
return new Vector2(screenPoint.x * Constants.GlobalWidth, screenPoint.y * Constants.GlobalHeight); // multiply by viewport width and height to get the actual screen coordinates.
}
Is there a way to skew/distort only one corner using CSS3 or canvas tag in HTML5?
Here is a screenshot from Photoshop tutorial how to do it:
Update:
This is the best I have found so far, but it is not 100% accurate:
https://github.com/edankwan/PerspectiveTransform.js
Update2:
I need html5 version of this:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
This should help you .
Link1
And you should try searching before posting a question. I searched for html5 canvas skew image and it showed me so many results .
Update
Check Out this Fiddle
// Find each img, and replace it with a canvas
$('img').each(function (index, el) {
var c, // new canvas which will replace this img element
ctx, // context of new canvas
i, // loop counter
tmpCtx, // temp context for doing work
h, // height of the image / new canvas
w, // width of the image / new canvas
dh, // destination height (used in translation)
dw, // destination width (used in translation)
dy, // destination y
leftTop,// left top corner position
leftBot;// left bottom corner position
// Get the height/width of the image
h = el.height;
w = el.width;
// Create the canvas and context that will replace the image
c = $("<canvas height='" + h + "' width='" + w + "'><\/canvas>");
ctx = c.get(0).getContext('2d');
// Create a temporary work area
tmpCtx = document.createElement('canvas').getContext('2d');
// Draw the image on the temp work area
for (i = 0; i < h; i++) {
dw = Math.abs((w * (h - i) + w * i) / h);
tmpCtx.drawImage(el,
0, i, w, 1, // sx, sy, sw, sh
0, i, dw, 1); // dx, dy, dw, dh
}
// Calculate the left corners to be 20% of the height
leftTop = parseInt(h * .2, 10);
leftBot = parseInt(h * 1, 10) - leftTop;
ctx.save();
// Draw the image on our real canvas
for (i = 0; i < w; i++) {
dy = (leftTop * (w - i)) / w;
dh = (leftBot * (w - i) + h * i) / w;
ctx.drawImage(tmpCtx.canvas,
i, 0, 1, h,
i, dy, 1, dh);
}
ctx.restore();
// Replace the image with the canvas version
$(el).replaceWith(c);
});
I think this is what you are looking for.
I'm trying to scale a base image based on a movieclip's x and y position? The base image image is also a MC.
infoIconCompFit.addEventListener(MouseEvent.ROLL_OVER, zoomInCompFit);
infoIconCompFit.addEventListener(MouseEvent.ROLL_OUT, zoomOutCompFit);
function zoomInCompFit(event:MouseEvent):void {
TweenLite.to(baseImage, 1, {scaleX:2, scaleY:2});
}
function zoomOutCompFit(event:MouseEvent):void {
TweenLite.to(baseImage, 1, {scaleX:1, scaleY:1});
}
What I mean is; is it possible to scale a movieclip at another movieclip's x and y position on the stage? Like I want the base movieclip to scale (zoom in) at the position of another movieclip on Mouse ROLL_OVER then zoom out on Mouse ROLL_OUT.
I get it to where it zooms in and out on the handlers, but how do I get it to zoom at that position relative to the other MC?
(Before) http://www.marketingfanatics.co.za/images/exampleNormal.jpg
(After) http://www.marketingfanatics.co.za/images/exampleZoomedl.jpg
Yes you can. But you need to write some code and have in mind where is transformation pivot of those Objects.
/**
* Calculate position and dimensions of image to zoom.
* #param img - image to animate, need to have transformation pivot in top left corner!
* #param point - point to zoom in (or null if zoom out) that will be new center of image
* #param scale - scale in zoom in
* #param viewWidth - container width
* #param viewHeight - container height
* #return object for tween engine with parameters to animate
*/
private function centerOn(img:DisplayObject, point:Point=null, scale:Number=2, viewWidth:Number=300, viewHeight:Number=200):Object
{
var r:Object;
var mm:Matrix = img.transform.matrix;
img.transform.matrix = new Matrix();
if (point == null) { // oryginal size
r = { x: 0, y: 0, width: img.width, height: img.height };
}else { // zoom
img.scaleX = img.scaleY = scale;
point.x *= scale;
point.y *= scale;
img.x = -point.x + viewWidth / 2;
img.y = -point.y + viewHeight / 2;
r = { x: img.x, y: img.y, width: img.width, height: img.height };
}
img.transform.matrix = mm;
return r;
}
Use example:
TweenLite.to(baseImage, 1, centerOn(baseIMG, new Point(100, 150))); //zoom in
TweenLite.to(baseImage, 1, centerOn(baseIMG)); //zoom out
centerOn(img, new Point(200, 135), 4, stage.stageWidth, stage.stageHeight); // to fit stage size
Remember that your Display Object is not masked and sometimes (zoom near borders) you will see scene under it!
PS. Code tested.