I can detect touch for my tiles and it works well from programmer's point of view. But I would love to increase an usability as well. See screenshot:
The idea is simple - if user touches some tile an action is performed. The problem is when user touches point close to two tiles. Currently I just do simple maths and select one. But this is not ergonomic. User might wanted to touch the second tile but his touch was not precise enough.
I am looking for best practice for such situation. onTouchEvent returns a single event so I cannot guess the touch direction. I lean to build some tolerance (e.g. 5 dp) and ignore such ambiguous events. Is there a better practice? And how big the tolerance area shall be?
I'd like to create a custom map. It should be or look like one picture, but according to the part of which the user clicks, it should move the user to a different location (i.e. start a different activity). I've seen it done in several games but I don't know how to do it myself.
The part of the picture should have non-geometrical borders (obviously it would be easily done with many square images). Sadly, I don't even know what term describes what I want to do so I wasn't able to find any helpful tutorials or discussed topics.
Example:
Picture: http://i236.photobucket.com/albums/ff40/iathen/mapEx.png
If the user touches the purple slide, (s)he should be leaded to activity_1
If the user touches the blue slide, (s)he should be leaded to activity_2
If the user touches the green slide, (s)he should be leaded to activity_3
In my experience there are 2 main (most used) ways to achieve this.
The first (my favorite):
Get the data from a PNG
You should write multiple layers to a canvas. These layers constitute your "zones" (blue, green, purple in the image). To obtain the data of these areas, you get it from PNGs (with transparencies off course) to write the canvas with whatever you want. You must store the values where there can be a tap from the user (non-transparent areas). Notice that this values can be scaled up/down depending on the map size, screen resolution, map dimensions, etc.
Once you've written the layers to the canvas you should check for a match of the user tap and the stored areas you have. You should take into consideration here the order in which the user tap is processed in your code. For instance, in your image, the purple layer is on top so it must be processed first, the blue as second, and the green as the last one. This way you can have an "island" inside a bigger area.
The second way:
Generate the boundaries programmaticaly
I think this solution is self-explanatory. The only I've faced with this variant is that when the surfaces boundaries get messy, it's really complicated to generate the proper equations.
EDIT:
Using the first approach you can employ multiple PNGs to load data or use a single PNG with data coded into the bytes (i.e. RGB values). It's up to you to decide which one to implement.
Hope it helps!
Since a touchscreen itself isn't very accurate, your collision detection for the buttons doesn't need to be either. It would be a waste of time to try to make a complicated collision detection algorithm to detect a touch within those weird shapes.
Since you are making a game, I assume you know how to handle custom touch events, as well as canvas (at least). There are many ways to do what you want, but in the specific example image you linked is kind of a special case.
You could create a giant bounding circle around the three blobs, and then check if the user touched within the bounds of the circle (ie check if the distance from the touch to the center of the circle is less than or equal to the radius). Once you determine that it is, you could check which section of the circle it falls into by splitting it up into 3 equal sections. Requires some math, but shouldn't be that complicated.
It wouldn't be a perfect solution, but it should be good enough. Although, you might have to change the buttons a little so they aren't so stretched out horizontally, otherwise a bounding circle wouldn't be ideal.
Personally, in my games I always have "nodes" that represent the visual elements of the game, such as buttons. Instead of using a large image like you are doing, I would create separate images for each button, and then check their collisions with touch events independently. That way I could have each button check with their own individual bounding circles, or, if absolutely necessary, I could even have custom algorithms for each individual button.
These aren't perfect solutions. If you do want a pixel-perfect solution, you'll need to implement some polygon collision detection algorithms
One thing to consider is screen size and ratio. The only constants you should use are for percentages.
Background:
I am doing a research project and am required to create a complex UI that is composed of a collection of odd shapes (i.e. not rectangles or circles, it would be best described as polygons). The complexity is that user interactions (i.e. touch events) should select/deselect individual areas, which can sometimes be very small. And selecting an area should change the color of that specific area!
So the requirement would be to draw a collection of shapes and detect if a touch event falls within the bounds of ones of the shapes/areas and identify which area it is.
If anyone has any idea's or pointers as to where I could start with this, please advice!
Many Thanks!
I have received requirement like this http://www.youtube.com/watch?v=7MYQicokwmY&feature=plcp I am reviewing this requirement.As per requirement we have to build touch detection like in video link for Android enabled Tablets.
In that video toys (toys with circular, star or rectangle shape) uses Conductive Silicone Sensors with that they are detecting touch on screen & deciding shape of external world object like triangle,circle or a star & further processing the shape.
I have to use same touch detection for android tablets.Can anybody help me to find the way to implement this on Android platform ? Is there any API or framework to implement it?
If you see the video around 1:13, they show what I am guessing are some prototypes, the circle has three points, the hexagon too...
My best guess is that the biggest part of the object is non-conductive and only has a few points that are conductive and would actually register as touch points on the screen. The key is that each of them will be different enough that you would be able to recognize them no matter what the orientation is, what the position (and depending on your requirements whether you have several of those objects at the same time on the screen).
You can also play with the area of each conductive points so in your code, you will get the touch information, you can get different pressure values from the MotionEvent
Now how you place the conductive points and how many on each shape is completely up to you and would really depend on what your requirements are (recognizing arbitrary shape is not an option...)
Most touch screens would reject the touch if the area is too large (that's palm rejection), so I don't think there are much other ways to do this...
One thing I find many Android games and emulators get wrong is when the user presses multiple (on-screen) buttons simultaneously. I'm wondering how one could fix that.
Imagine a game like Super Mario World. You have two buttons on the right side (simplified): Y is for running and B is for jumping. Typically, you hold Y most of the time with the tip of your thumb, and when you want to jump you lay down your thumb and press B, too.
Situations like this understandably confuse Android. Instead of detecting two presses, it just moves the one from the Y button down a bit.
What I'd need to fix this is one of the following:
Raw touch data as a bitmap (but probably too computationally expensive, and doesn't leave the touchscreen anyway)
The detected touch points in more detail, e.g. as best-fit ellipses or polygons
The ability to define touch regions. If a finger overlaps such a region a certain amount, the region fires.
(The points are from low- to high level, e.g. if I had the first I could emulate the other ones.)
Any ideas?