LibGdx render a sprite on top of a isometric tile - libgdx

So I have this isometric map, and I want to draw sprites on top of tiles.
but ofcourse if I get the position of the isometric tile, and I draw a sprite on that position, it wont draw on top of the tile since the isomap is rotated.
here if I draw a color cube for each tile position....
##
So my question is, what I have to do to draw this sprite on top of the tile?
Im using IsometricTiledMapRenderer
Thanks in advance, I have been searching for this the whole day and my lack of english vocabulary is not helping for searching
EDIT: #dfour answer almost did the trick.. heres how it looks now...

What you need is to convert Cartesian values to isometric values.
This Isometric Tutorial should help.
//Cartesian to isometric:
isoX = cartX - cartY;
isoY = (cartX + cartY) / 2;
//Isometric to Cartesian:
cartX = (2 * isoY + isoX) / 2;
cartY = (2 * isoY - isoX) / 2;
These functions show how you can convert from one system to another:
function isoTo2D(pt:Point):Point{
var tempPt:Point = new Point(0, 0);
tempPt.x = (2 * pt.y + pt.x) / 2;
tempPt.y = (2 * pt.y - pt.x) / 2;
return(tempPt);
}
function twoDToIso(pt:Point):Point{
var tempPt:Point = new Point(0,0);
tempPt.x = pt.x - pt.y;
tempPt.y = (pt.x + pt.y) / 2;
return(tempPt);
}

Related

Scaling points to match background. Actionscript 3

Using some code I found online has helped me create a zoom function for a program I am attempting to make. It is to make a map that allows a user to mark points. Currently the code scales in on the map image alone but I cant get the point icons to realign to where they originally where. I cant workout the maths of it.
Code to zoom in and out
if (mev.shiftKey) {
image.scaleX = Math.max(scaleFactor*image.scaleX, minScale);
image.scaleY = Math.max(scaleFactor*image.scaleY, minScale);
}
if (mev.ctrlKey) {
image.scaleX = Math.min(1/scaleFactor*image.scaleX, maxScale);
image.scaleY = Math.min(1/scaleFactor*image.scaleY, maxScale);
mat = image.transform.matrix.clone();
MatrixTransformer.matchInternalPointWithExternal(mat,internalCenter,externalCenter);
image.transform.matrix=mat;
This allows the image to scale up with the following factors
public var scaleFactor:Number = 0.8;
public var minScale:Number = 0.25;
public var maxScale:Number = 2.0;
The problem occurs when I try to move the pointer icons that are overlaid on this image. They are not to grow or shrink at the moment but they I cant get the maths to get them to move the correct number of pixels away from the mouse location so that they are still in line. Currently I am using the following formulas
//decrease zoom
stage.getChildAt(i).x = stage.getChildAt(i).x * scaleFactor;
//increase zoom
stage.getChildAt(i2).x = stage.getChildAt(i2).x / scaleFactor;
Any thoughts ? Code I am using came from
http://www.flashandmath.com/howtos/zoom/
Quite a few elements missing from the question like the moving map underneath. Anyway now that it's sorted out ...
If you are not a math genius and can't tackle 2 math formulas at the same time then don't and tackle them one by one then combine them. Once again don't use the x,y property of point for calculation but create specific property (like in a custom class for example). I will name them here origin for convenience.
Given a point with origin property of x:100, y:200, its position on the map is (assuming map is top left coordinate, if not adapt accordingly):
point.x = map.x + point.origin.x;
point.y = map.y + point.origin.y;
the positioning is solved now you need to solve for scale which is easy:
point.x = point.origin.x * scaleFactor;
point.y = point.origin.y * scaleFactor;
Both systems are solved now you can combine the two:
point.x = map.x + (point.origin.x * scaleFactor);
point.y = map.y + (point.origin.y * scaleFactor);

how to move polygon points depending on movement of one point?

i have polygon say (Hexagonal with 6 lines) this Hexagonal connected from center with 6 point That make 6 triangles
I need when move any point(cause to move triangles) ,, other points move like this point i mean if the left point move to lift other points move to the left and so on
the code I want like this ptcP1.x and ptcP1.y the point that i moving it other point move depend on ptcP1 movement note that, this equations work fine in square shape ,, put in Penta and hexa ..etc this equations in valid so can any one help me
function button1_triggeredHandler( event:Event ):void
{
mode="mode2";
//trace(list.selectedIndex);
if(list.selectedIndex==1)
{
DrawSqure.ptcP1.x = Math.random() + 50;
DrawSqure.ptcP1.y = Math.random() + 50;
DrawSqure.ptcP2.y = 50-DrawSqure.ptcP1.x;
DrawSqure.ptcP2.x = DrawSqure.ptcP1.y;
DrawSqure.ptcP3.x = 50-DrawSqure.ptcP1.y;
DrawSqure.ptcP3.y = DrawSqure.ptcP1.x;
DrawSqure.ptcP4.x = 50-DrawSqure.ptcP1.x;
DrawSqure.ptcP4.y = 50-DrawSqure.ptcP1.y;
}
As stated in the comments, storing the vertices/points into a container (Array or Vector) and then adjusting those positions when you move is the best way to do it. Here is an example of how that might work:
//setup array or vector of vertices
var polygonVertices:Array = [DrawPolygon.ptcP1, DrawPolygon.ptcP2, DrawPolygon.ptcP3, DrawPolygon.ptcP4];
This method will take all the vertices and apply the translation:
//function for adjusting all the vertices based on the distance you pass
function moveShape( vertices:Array, dx:Number, dy:Number ) {
var i:int;
for ( ; i < vertices.length; i++ ) {
vertices[i].x += dx;
vertices[i].y += dy;
}
}
Then you would just need to know your distance X & Y your shape has moved and you can call moveShape( polygonVertices, 100, 100 );
I inserted 100,100 as the distance parameters as an example, but this should give you the results you are looking for.

Strange stability issues with Matrix scale/rotation in Actionscript

I have a Flash app where I am performing a scale and rotation operation about the center of _background:MovieClip (representing a page of a book). I have simple event listeners on the GESTURE_ROTATE and GESTURE_SCALE events of this MC which update some variables currentRotation and currentScaleX, currentScaleY. I then have the following code trigger on the ENTER_FRAME event of the app.
The problem I am encountering is upon rotating the MC beyond the limits of roughly 60 or -60 degrees, or scaling slightly and rotating, the MC begins to oscillate and finally spin wildly out of control and off the screen. I've tried several things to debug it, and even tried Math.flooring the currentRotationValue and rounding the values of currentScaleX/Y to the tenths place (Math.floor(currentScale * 10) / 10), but neither of these seems to remedy it. I'm a little stuck at this point and have tried researching as much as I can, but couldn't find anything. Any suggestions? Is there an issue with doing this operation on each frame perhaps?
private function renderPage(e:Event) {
var matrix:Matrix = new Matrix();
// Get dimension of current rectangle.
var rect:Rectangle = _background.getBounds(_background.parent);
// Calculate the center.
var centerX = rect.left + (rect.width/2);
var centerY = rect.top + (rect.height/2);
// Translating to the desired reference point.
matrix.translate(-centerX, -centerY);
matrix.rotate(currentRotation / 180) * Math.PI);
matrix.scale(currentScaleX, currentScaleY);
matrix.translate(centerX, centerY);
_background.transform.matrix = matrix;
}
I'm not certain what behaviour you're trying to produce, but I think the problem is that centerX and centerY define the middle of _background in _background.parent's coordinate space. You're then translating the matrix so that _background is rotated around the values centerX, centerY, but in _background's coordinate space.
Assuming you want _background to rotate around a point which remains static on screen, what you actually need to do is use two different Points:
matrix.translate(-_rotateAroundPoint.x, -_rotateAroundPoint.y);
matrix.rotate(currentRotation / 180) * Math.PI);
matrix.scale(currentScaleX, currentScaleY);
matrix.translate(_centerOnPoint.x, _centerOnPoint.y);
Where _rotateAroundPoint is the point around which _background should turn in it's own coordinate space, and _centerOnPoint is the point around which it should turn in its parent's coordinate space.
Both of those values only need to be recalculated when you want to pan _background, rather than every frame. For example:
private var _rotateAroundPoint:Point = new Point(_background.width * 0.5, _background.height * 0.5);
private var _centerOnPoint:Point = new Point(50, 50);
private function renderPage(e:Event) {
var matrix:Matrix = new Matrix();
matrix.translate(-_rotateAroundPoint.x, -_rotateAroundPoint.y);
matrix.rotate((currentRotation / 180) * Math.PI);
matrix.scale(currentScaleX, currentScaleY);
matrix.translate(_centerOnPoint.x, _centerOnPoint.y);
_background.transform.matrix = matrix;
}

AS3 - Shutter animation

How to create a camera shutter animation (Example: shutter .gif animation) and how to make it work for different screen resolutions?
Thanks. Uli
What you want is not the shutter, but the diaphgram. Building and animating it like a real one works should be pretty easy;
Essentially there is a set of triangles attached to the frame at one of their corners, and are then rotated inwards to decide the aperture size.
http://en.wikipedia.org/wiki/Diaphragm_(optics)
Edit: I made a simple flash file to demonstrate the effect.
http://dl.dropbox.com/u/340238/share/aperture.fla
Edit 2:
For dynamic placement;
dummy.x = stage.stageWidth / 2;
dummy.y = stage.stageHeight / 2;
var stageSize:int = (stage.stageWidth > stage.stageHeight ? stage.stageWidth : stage.stageHeight);
displacement = stageSize * K + M; //Where K and M are constants that you might have to experiment a bit to get. My guess is K = 1, M = 100
You would also have to increase the size of the triangles to match.

Billboard orientation toward camera (point) without normals

So I have a circle of planes which get constructed as:
plane.x = Math.cos(angle) * radius;
plane.z = Math.sin(angle) * radius;
plane.rotationY = (-360 / numItems) * i - 90;
which calculates how many angular slices there are for total number of planes (rotationY) and places each plane into it's place on a circle of radius.
then to update their rotation around the circle I have:
var rotateTo:Number = (-360 / numItems) * currentItem + 90;
TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
as you can see planes are circling and each is oriented 90 degrees out from the circle.
I'm using this as a reference - it's pretty much that: http://papervision2.com/a-simple-papervision-carousel/
Now, what I'd like to find out is how could I calculate degree of orientation for each individual plane to always face camera without normal, if it's possible at all. I've tried plane.LookAt(camera), but that doesn't work. Basically every plane should have orientation as the one facing camera in the middle.
Somehow I think I can't modify that example from link to do that.
edit: OK I answered my own question after I wrote it. Helps to read your own thoughts written. So as I'm orienting planes individually and rotating them all as a group, what I did after tween of the group in code above, was to loop through each plane and orient it to the Y orientation of the forward plane as so:
for (var i:int = 0; i < planes.length; i++) {
TweenLite.to(planes[i], 1, { rotationY:(-360 / numItems * rotoItem - 90), ease:Quint.easeInOut } );
}
rotoItem is the one at the front. Case closed.
OK I answered my own question after I wrote it. Helps to read your own thoughts written. So as I'm orienting planes individually and rotating them all as a group, what I did after tween of the group in code above, was to loop through each plane and orient it to the Y orientation of the forward plane as so:
for (var i:int = 0; i < planes.length; i++) {
TweenLite.to(planes[i], 1, { rotationY:(-360 / numItems * rotoItem - 90), ease:Quint.easeInOut } );
}
rotoItem is the one at the front. Case closed.