I am developing a mobile game for iOS and Android with Starling. I am very new to this framework. I need to add a sprite to the screen and then have the initial point on the screen that was touched be anchor point 1 and then the user will drag there finger which will adjust the second anchor point until they release their finger from the screen. Imagine several nodes that need connected by a line and you can picture what I am trying to do. The problem is that I can change the pivot to be at the beginning of the line but I dont know how to make the other anchor point work. I also cannot use anything other than a sprite as the line is animated by a sprite sheet. Any help that can be provided is greatly helpful, I have been thinking about this for a while now and can't seem to figure it out. Code is helpful and preferred but just giving me an outline of the concept would help as I can probably figure out code. Thanks!
I don't know actionscript but I'm sure if it is for android the touch event has 3 phases (generally): touch down, touch move, touch up.
You say you only have a sprite so define some variables:
initX, initY, finalX and finalY. All floats (or ints if you cast them). And a couple of booleans: set1 and set2 all false
On touch down you ask if set1== false if so, set initX=eventX and initY=eventY (eventX and eventY would be here the X and Y of the touch event). Then set set1=true
On touch move you do the same as above, with set2. if set2==false, set finalX=eventX and finalY=eventY, then set2=true.
and you draw your sprite from (initX,initY) to (finalX,finalY) or if you're using width/height then finalX-initX for the width, finalY-initY for height.
I hope this helped. I didn't even know starling existed but since it's actionscript it must be pretty close to java in its syntax
Related
I am trying to develop an Android app which is trying to draw a perfect line directly in front of me. My reference point is my phone, which means that the line has to parallel to my phone's left side.
I have following issues:
I am using Sceneform, so there is no "onSurfaceCreated" callback.(?)
I assume that the white-dots shows the surface. But, then I think if there is a detected surface then I can place a Shape on it. But is can not happen sometimes. And sometimes, I can place a Shape even if there are no visible white-dots.
When I try to draw a line between the points (0,0,0) to (1,0,0), it is not always parallel to the left side of my phone. I assume that the reason of this is related with the following fact :
angle between the left-bottom corner of the detected surface and the left-top corner is not zero. (If we consider the coordinate system as follows : phone's left side is y-axis, bottom is the x-axis.)And this angle changes each time I reopen the app.
These are more theory questions than the implementation. So, I need someone to prove or disprove, or give me guideline.
1) There isn't method like onSurfaceCreated.
2) Not all the detected planes are covered with white-dots. Is is intended because if all the detected planes are rendered with white-dots, it would confuse the users
3) When you talk about the points(0,0,0) and (1,0,0), is it world position or local position? Whether it is world position or local position, you can not draw a line parallel to your left side of phone in the way you approach.
I'm struggling with something I would expect to be straight forward with libgdx.
In short this is a "finger paint" app where I want to draw a path of a certain width where the user touches the screen.
I've earlier done this by using a plain Android android.view.View. I had a android.graphics.Path in which I stored the coordinates of the user's current touch. In the onDraw() method of the view I drew the path to the android.graphics.Canvas. Whenever the user released a finger I drew the path to an offline canvas/android.graphics.Bitmap which also was drawn in the onDraw() method. Plain and simple.
How can that be done using libgdx?
I have tried using a com.badlogic.gdx.graphics.Pixmap that I can draw a line to whenever the user moves a finger. This works well except the fact that I'm unable to control the witdh of the line using Gdx.gl.glLineWidth(). I know I can draw a rectangle instead of a line to set the width, but Pixmap doesn't seem to have any means of rotating, so I don't see how this can be done.
I can use a com.badlogic.gdx.graphics.glutils.ShapeRenderer for drawing lines (or rectangles) in com.badlogic.gdx.Screen.render(). As far as I can see I then need to store every single touch point of the current touch, and then draw all lines on render. Whenever the user relases a finger I guess I can store the screen as-is with something like com.badlogic.gdx.utils.ScreenUtils.getFrameBufferPixmap(). Hopefully there is a easier way to achieve what I want.
I ended up drawing circles on a pixmap where the line should be:
One circle on touchDown
Several circles from last touch point to next touch point reported to touchDragged
I'm not very happy with this solution, but it kinda works.
Maybe you can calculate line dot coordinates manually and use triangles to draw them on pixmap? Like use 2 triangles to form (rotated) box?
Is it possible to detect every pixel being touched? More specifically, when the user touches the screen, is it possible to track all the x-y coordinates of the cluster of points touched by the user? How can I tell the difference between when users are drawing with their thumb and when they are drawing with the tip of a finger? I would like to reflect the brush difference depending on how users touch the screen, and would also like to track x-y coordinates of all the pixels being touched over time. Thanks so much in advance for any help.
This would be very tricky primarily because every android phone is going to behave differently. There are some touch screen devices that are very, very sensitive and some that are basically "dull" by comparison.
It also sounds more like you are wanting to track pressure - how hard is the user pushing on the screen - which is actually supported on android devices.
I think some of your answer may be found by monitoring all of the touch events - in practice, most applications ignore a great number of events or perform some kind of "smoothing" of the events since there is literally a deluge of touch events when the user is manipulating the screen. Doing this may negatively impact your applications performance though.
I would recommend that you look into pressure sensitivity and calculate a circular region around the primary touch point based on pressure, then build your brush around that.
Another idea would be to incorporate more of a gesture approach to what you are trying to do - for example, visualize touching the screen with the tip of two fingers together (index and middle) and rolling the middle finger around the index finger or simply moving the middle finger up and down in relation to the index finger. Both fingers would be moved together for painting. This could be used to manipulate drawing angle on the fly or perhaps even toggle between a set of pre-selected brushes or could change brush size on the fly as you are painting.
Some of the above ideas I would love to see implemented - let me know when you have your app ready.
Good luck!
Rodney
If you have a listener on your image it will respond that there was a touch within that bounding box, basically.
So, to get what you want, you could, but, I would never do this, create a box around every pixel, or small group of pixels, and listen for a touch.
Wherever you get a touch, it may fire off an event, then you can react accordingly.
I can't think of any other solution that will give you each pixel that a person touched, at one time.
You may want to read up on multitouch though, as there are some suggestions in here that my help you:
http://android-developers.blogspot.com/2010/06/making-sense-of-multitouch.html
If you're looking for a way to get your content view as a View after Activity#setContentView(int), then you can set an id on the outer-most element of your layout:
android:id="#+id/entire_view" and reference it in your onCreate() method after setContentView:
View view = getViewById(R.id.entire_view);
view.setOnTouchListener( ... );
I am currently working on a 3D model viewer for Android using OpenGL-ES. I want to create a rotation effect according to the gesture given.
I know how to do single-axis rotation, such as rotate solely on the x-, y- or z-axis. However, my problem is that I don't know how to combine them all 3 together and have my app know in which axis I want to rotate depending on the touch gesture.
Gestures I have in mind were:
Swipe up/down for x-axis
Swipe left/right for y-axis
swipe in circular motion for z-axis
How can I do this?
EDIT: I found out that 3 types of swipes can make the moment very ugly. Therefore what I did was remove the z-axis motion. After removing that condition, I found that the other 2 work really well in conjunction with the same algorithm.
http://developer.android.com/resources/articles/gestures.html has some info on building a 'gesture library'. Not checked it out myself, but seems to fit what you're looking for
Alternatively, try something like gestureworks.com (again, I've not tried it myself)
I use a progressbar view for zooming in and out. I then use movement in x on the GLSurfaceView to rotate around the y axis and movement in y to rotate around the x axis
The problem with a gesture is that the response is not instant as the app tries to determine what gesture the user used. If you then use how far the user moves their finger to determine the amount to rotate/zoom then there is no instant feedback and so it takes time for the user to learn how to control rotate/zoom amount. I guess it would work if you were rotating/zooming by a set amount each gesture
It sounds like what you are looking to do is more math intensive than you might know. There are two ways to do this mathematically. (1) using quaternions (2) using basic linear algebra (but will result in gimbal lock if you arent careful.. but since you are just spinning then this is not a concern to you).. Lets go the second route since its easier.. What you need to do is recieve the beginning and end points of the swipe via a gesture implement and when you have those two points.. calculate the line that it makes. When you have that line, you can easily find the perpendicular vector to that line with high school math. That should now be your axis of rotation in your rotation matrix:
//Rotate around the axis based on the rotation matrix (rotation, x, y, z)
gl.glRotatef(rot, 1.0f, 1.0f, 0.0f);
No need for the Z rotation since you can not rotate in the Z plane with a 2D tablet. The 1.0f, 1.0f are the values that should be variables that represent the x,y of your vector. The (rot) should serve as the magnitude of the distance between the two points.
I havent done this in a while so let me know if you need more precision.
Math has come on my way again and has defeated me. I need your help to regroup and attack again.
What I've got:
I've got a surfaceview and a circle as a bitmap. I need to rotate the bitmap as the user moves the finger around the circle edge. The faster the user slides, the more I need to rotate the image. Seems simple but not really easy to implement.
What I need
I need to calculate the angle on which to rotate the image on onDraw event. From what I've thought so far I need two things:
- the angle between new touched point and the old one. I've done a simple function that takes care of this:
private int getAngleBetweenTwoTouchedPoints(double oldX, double oldY, double newX, double newY)
{
return (int) Math.abs(Math.atan2(newY - oldY, newX - oldX));
}
the angle returned by this varies from 0 to 1 and I believe it is correct. By incrementing the image rotation matrix angle by this value I get a slow rotation, basically by 1 unit. So, there is a chance to work, but not ok yet.
- so, the second thing I may need is the speed with which the user slides the finger around the screen. So basically something like this:
rotationAngle += angleBetweenTouches+speed
Speed, or velocity as I saw it named is the problem in my case, considering that I don't move only on X or Y but around the circle. I have no idea how to calculate it. I saw VelocityTracker on Android help but I don't know how it could help.
So to recap: I need to be able to rotate the image as the user moves the finger around the image border. Even simpler, when the user stops sliding, the pixel of the image that was below the finger on slide start should be the same when the slide stops.
Any help is greatly appreciated. Thank you
I had the same task but for a different purpose with angles. i hope this link might give you some clue
http://www.andengine.org/forums/post9226.html#p9226
For time difference did you try getting getTime() from Date class between two different clicks?
Hope this give you some idea.
I suspect that given "Even simpler, when the user stops sliding, the pixel of the image that was below the finger on slide start should be the same when the slide stops. ", what you might be better off with is absolute rotations rather than relative ones.
Incrementing the rotation with each event may accumulate errors that lead to the bitmap not appearing to "stick" to the finger.
If you just keep track of the initial event and the last event, then always transform from the initial view to that appropriate for the last event your code will be simpler (avoiding speed), and behave better.