How do I move an object up and down by dragging it? - unity3d-2dtools

I have a 2D mobile pong game in Unity. I want to move the paddle up and down with finger drag motion. I want the paddle to have a movement speed. I was able to do this in the codes I tried, but the paddle moves at the same speed as my finger and teleports to the position where my finger is.
How can I do?
foreach (Touch touch in Input.touches)
{
Vector3 touchPosition = Camera.main.ScreenToWorldPoint(touch.position);
Vector2 myPosition = rb.position;
if(Mathf.Abs(touchPosition.x - myPosition.x) <=2){
myPosition.y = Mathf.Lerp(myPosition.y, touchPosition.y,10);
myPosition.y = Mathf.Clamp(myPosition.y, -3.7f,3.7f);
rb.position = myPosition;
}
}

Related

Cocos Creator face to pointer

i am struggling with angles in cocos creator.
I am trying to make my sprite facing my mouse when i am moving it. But i cant make it at all.
Image shows what i want to accomplish
I wanna from this gun to move and face the mouse, just like crosshair.
Ive done some coding, and this is what i have for now:
var canvas = cc.find('Canvas');
canvas.on('touchmove',function(event){
var pos = this.node.getPosition();
var ang = pos.angle(event.getLocation());
var degr = cc.misc.radiansToDegrees(ang);
this.node.setRotation(degr);
console.log(degr);
},this);
This is in onLoad function and connected to my gun sprite.

How to pan and then immediately pinch with hammer js?

I'm using hammerjs like this
this.hammer = new Hammer.Manager(this.canvas);
const pinch = new Hammer.Pinch();
const pan = new Hammer.Pan({
threshold: 5,
});
this.hammer.add([pinch, pan]);
But if I start panning I can't do a pinch.
When I mean pan and then pinch I mean, put one finger and pan, keep that finger on, add another finger and pinch. Note that you never remove the first finger.

Zoom chart in mouse focus

I have a custom chart which I scale using the following code:
final double SCALE_DELTA = 1.1;
treePane.setOnScroll(new EventHandler<ScrollEvent>()
{
#Override
public void handle(ScrollEvent event)
{
event.consume();
if (event.getDeltaY() == 0)
{
return;
}
double scaleFactor = (event.getDeltaY() > 0) ? SCALE_DELTA : 1 / SCALE_DELTA;
treePane.setScaleX(treePane.getScaleX() * scaleFactor);
treePane.setScaleY(treePane.getScaleY() * scaleFactor);
}
});
I noticed that when I scroll the chart with mouse wheel I cannot zoom the chart where my mouse points. Instead of this the chart is zoomed to left or right for example.
I would like when I zoom with the mouse wheel to scale the chart where my cursor points. Is there any solution?
I haven't worked with javafx, but I will try to answer anyway. From my experience with Win32Api/GDI and XNA you should definitely be able to read mouse coordinates. Anything you display is displayed at coordinates x,y. When you want to scale and zoom to the cursor's location, you will redraw with this in mind: (assume zoom factor = z, mouseX and mouseY the mouse coordinates X and Y the new coordinates)
your cursor will have to point at the same pixel, so if the image is z times bigger now, so will the mouse coordinates be, relative to the source of the picture. To these coordinates, essentially the distance from the top and left of the image, you have to add the coordinates of the source itself, which should remain unchanged relative to the window's top-left corner. This eventually means that mouseX - X = (mouseX - x)*z, which means X = mouseX - (mouseX - x)*z
Same goes for the Y coordinate. In theory this should work perfectly, i have not tried it with code but it seems right on paper. You will notice X and Y seem to be getting smaller, essentially they might even turn out negative since by scaling and keeping the mouse on the same pixel, you push/stretch the top-left corner further up and left, possibly out of the screen.
You will probably work with the scrollbars though, same philosophy on their displacement.
Play around with the variables a bit to make them fit the drawing mode, I do not know if the libraries you are working with start from the screen's (0,0), or the window's, or the working areas, so you will have to adapt it to the rest of the code, but this is the math/geometry behind it.

Drag and drop bounding box offset math

I'm creating my own drag and drop using canvas. In order to select the ball, I've created an invisible bounding box around it. Clicking in this area will allow you to drag the ball.
On mouse move, I'm using
xBall = xMouse;
yBall = yMouse;
So the ball will follow the mouse. This is great except at the very start of the drag, the center of the ball will jump to where the mouse is which I don't want. So I need to take into account the offset between the Mouse and Ball.
Can anyone explain the maths behind this? From my reasoning, I need to add the offset on to the mouse's position. So I get xBall = xMouse + (xBall - xMouse) but as you can see, this just ends up giving me xBall = xBall which is no use.
Where am I going wrong?
You need to determine where the initial click occured and the offset calculation should be carried out with respect to this initial coordinates.
On mouse down, store the initial clicked coordinates:
xInitial = xMouse;
yInitial = yMouse;
movingFlag = true;
On mouse move:
if (movingFlag) {
xBall = xBall + xMouse - xInitial;
yBall = yBall + yMouse - yInitial;
}
On mouse up :
movingFlag = false;

Scrolling a Tiled Map in Cocos2D

I've got an issue that I simply can't figure out; probably because I don't have the correct knowledge.
I have a TMX map made in Tiled. The Map is bigger than the screen size (tiles are 32x32pixels and there are 100x100 tiles).
What I want to do is to be able to move the map by swiping the screen.
I've looked at various tutorials online and examined the paddle.m example but still can't get it to work.
All the tutorials I've come across all focus on moving a clamped centered sprite around a map...
Again, what I want to do is to be able to move the map by swiping/sliding the screen; much like when scrolling through your iPod or moving a picture around.
Can anyone help?
Here is my ccTouchMoved code
-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
CGPoint touchPointMap = [touch locationInView: [touch view]];
touchPointMap = [[CCDirector sharedDirector] convertToGL: touchPointMap];
touchPointMap = [self convertToNodeSpace: touchPointMap];
CCLOG(#"Touch Point Map %lf, %lf", touchPointMap.x, touchPointMap.y);
self.position = CGPointMake(touchPointMap.x, touchPointMap.y);
}
To illustrate the problem I'm seeing on screen when I swipe the screen using the code above:
It seems that if I touch the center of the screen, the bottom left corner of the map will jump to that touched coordinate and will move with my touch until my touch is lifted.
The Map's bottom left corner will always move to where I begin my touch.
Also while the map is being moved, it flashes like crazy and if moved excessively, disappears entirely.
Thanks again All, much appreciated.
Best and Kind Regards,
hiro
I found the solution to the problem.
There's a very bright person in the Cocos2D community who has written a controller to not only pan around organically, but zoom in and out.
Link to Controller, example and preview movie
You wont need to write your touchBegan, Moved and End methods; this Controller does it all for you.
My init
self.theMap = [CCTMXTiledMap tiledMapWithTMXFile: #"city_map.tmx"];
self.bgLayer = [theMap layerNamed:#"bg"];
// boundingRect is the area you wish to pan around
CGRect boundingRect = CGRectMake(0, 0, 32*50, 16*50);
theMap.anchorPoint = ccp(0,0);
[self addChild: theMap z: -1];
// _controller is declared in the #interface as an object of CCPanZoomController
_controller = [[CCPanZoomController controllerWithNode:self] retain];
_controller.boundingRect = boundingRect;
_controller.zoomOutLimit = _controller.optimalZoomOutLimit;
_controller.zoomInLimit = 2.0f;
[_controller enableWithTouchPriority:0 swallowsTouches:YES];

Resources