Am trying to break image in shattered pieces, but am unable to catch the logic, please give me way how to achieve.
I hope the below image can give my idea, what I want, Breaking the bitmap into a shattered pieces like triangle or any shape. later i will shuffle those bitmap shapes and giving puzzle to enduser rearrange them in order.
OK, if you want to rearrange the pieces (like in a jigsaw) then each triangle/polygon will have to appear in a rectangular bitmap with a transparent background, because that's how drawing bitmaps works in Java/Android (and most other environments).
There is a way to do this sort of masking in Android, its called porter-duff compositing. The Android documentation is poor to non-existent, but there are many articles on its use in Java.
Basically you create a rectangular transparent bitmap just large enough to hold your cut-out. Then you draw onto this bitmap a filled triangle (with transparency non-zero) representing the cut-out. It can be any colour you like. Then draw the cutout on top of the source image at the correct location using the Porter-Duff mode which copies the transparency data but not the RGB data. You will be left with your cutout against a transparent background.
This is much easier if you make the cutout bitmap the same size as the source image. I would recommend getting this working first. The downsides of this are twofold. Firstly you will be moving around large bitmaps to move around small cutouts, so the UI will be slower. Secondly you will use a lot of memory for bitmaps, and on some versions of Android you may well run out of memory.
But once you have it working for bitmaps the same size as the source image, it should be pretty straightforward to change it to work for smaller bitmaps. Most of your "mucking about" will be in finding and using the correct Porter-Duff mode. As there are only 16 of them, its no great effort to try them all and see what they do. And they may suggest other puzzle ideas.
I note your cutout sections are all polygons. With only a tiny amount of extra complexity, you could make them any shape you like, including looking like regular jigsaw pieces. To do this, use the Path class to define the shapes used for cutouts. The Path class works fine with Porter-Duff compositing, allowing cutouts of almost any shape you can imagine. I use this extensively in one of my apps.
I am not sure what puzzle game you are trying to make, but if there is no special requirements of the shattered pieces,
only the total number of them which can span the whole rectangle, you may try doing the following steps,
the idea is basically by knowing that n non-intersecting lines with two end points lie on any of the 4 edges of the rectangle, n+1 disjoint areas is formed.
Create an array and store the line information
For n times, you randomly pick two end points which lie on those 4 edges of the rectangle
2a. Try to join these two points: start from either end point, if you get an intersection with another line you drew before, stop at the intersection, otherwise stop at the other end point
You will get n+1 disjoint areas with n lines drawn
You may constrain your lines choosing if you have some special requirements of the areas.
For implementation details, you may want to have a look of dot product and euler's theorem
Related
I am drawing some dots to represent players of two teams on a map.
Each team has its own colour.
Important to note that the dot contains two circles, outer border and a inner fill so there will be two colours, with the border always being the same.
It makes sense for me to generate this at runtime rather than packing a texture for each combination.
Upon research, there seems to many ways to achieve this but each has a associated problem
ShapeRenderer
ShapeRenderer is for debugging purposes and should not be used for usual drawing as stated by a LibGdx developer here
http://badlogicgames.com/forum/viewtopic.php?t=8573&p=38930
For this reason I avoided using this
Pixmap
This was very promising, I liked the idea that I could just generate two textures and re-use them for each sprite. The biggest problem with this is that Textures made via Pixmap are un-managed so if the OpenGL context is lost and regained (This can be easily reproduced in an Android application, if the user backgrounds the app and restores it from foreground). I am primarily targetting Android so this an issue for me
Texture Re-Colour
Was thinking I could create a grey scale dot and re-colour it but since my asset has two parts to it, I am not sure how I could selectively choose the inner circle and fill it.
Question 1 How Do I Restore Pixmap Texture On Context Loss?
I have not found an example which details how to do this? I assume it is going to be done in the resume lifecycle callback but what do I need to do?
Question 2 Alternative Way?
Is there an alternative way for my issue perhaps?
Thanks for reading!
Load just one texture with white circle. Use SpriteBatch to draw players: first call batch.setColor(borderColor) and draw the circle Texture with outer radius, then call batch.setColor(fillColor) and draw it with inner radius. Sure there is a some performance impact because of drawing fill part twice, but if circles are small enough the impact is going to be negligible.
Let's say for example I have a bitmap image of a tree, and I want to position other images (such as bitmaps of apples) on the tree leaves. Is there a way that I could put markers on the leaves... red dots for instance... and then and then programmatically place apple images centered on those dots?
As a very basic test, I have image with a white background with one red pixel in the center. I'd like to calculate the coordinates of this red point, and then set an ImageView to be placed on those coordinates.
How might I go about this?
It depends, where your 'red point' marker is. If it's in the center or in any specific point (like 2/3 of width, 1/3 of height), you can just divide layout width and height to get right coordinates.
In other cases it would be better to set white background and draw markers manually in overriden dispatchDraw method. In such case you would just know the coordinates of the marker.
You want to position an image over the red dot, right?
I'm thinking of two different ways:
A-> You could make the red dot to be an ImageView itself, and then centering it by using gravity in order to transform it into another kind of image.
Or...
B-> Make a container that uses the white background with red dot as background resource. Then center it by using gravity too, and finally, positioning your image to the center of the container so it will be over the red dot.
No calculation is needed if you thing this could help.
It sounds like you are the one putting the markers onto your bitmaps.
If that is the case, is there a really good reason why you would want to be trying to embed the markers as data in the bitmap itself? That leads you to the problem of having to rediscover the locations. This could be a fuzzy task...what if there is a red barn next to the tree? Are you going to put an apple image on every red pixel making up the barn?
What you might actually want is to define a format which has a bitmap with no markers on it, and then a separate list of coordinates for where you want the apples to go. That doesn't require discovery of any kind...you just ship the image along with the list and you are done.
There are some cases where there is no "place on the side" that you can put information, and you actually need it to go into the bitmap file. If so, consider also that there are some hidden places you can put data in bitmaps... metadata like Exif:
http://en.wikipedia.org/wiki/Exchangeable_image_file_format
So that's a middle-ground, where you can manage to get the list of points to "stow away" into the file containing the image without actually requiring the modification of the pixels.
If you find you are really stuck in a situation where you must put these coordinate specifications into the image data, then something a little bit more unique than a red dot would be easier to detect with certainty. Maybe there's something you know about your images... for instance, that they are PNG files and do not have any transparency. You could make transparent dots indicate substitution points.
The larger and weirder the pattern, the more rare it is...so if you know your objects being pasted are always going to be bigger than 3x3 you could come up with a very unusual 3x3 pixel imprint for your markers that would be unlikely to occur in nature. Uncompressed in 24-bit color, a sufficiently random pattern would only happen 1/(2^24^9) by accident. Small number; although compression would create more gray areas.
But greater point being: if you don't have a good reason to turn a simple problem into a complex image-recognition exercise, don't. Just keep the list of points on the side somewhere so you don't have to hunt for them in the image.
I want to recognize shapes like a circle,triangle and rectangle which is drawn on screen.My main aim is a user draws a shape on screen and I need a code to recognize this shape.How should i approach this problem?
What you are trying to achieve can be quite tricky, but I happened to implement something similar a while ago, and here is the approach that I used:
stick to black & white drawings
have a smallish database of (black & white) drawings (50 or so) with a fixed resolution, let's say 256x256 (you can store them in sqlite as binary blobs if you wish). Make sure that you use decently thick lines for these drawings (10 px should be OK, or something about twice as thick as the user's input drawing). Also, the drawings should be normalized, meaning that they must have at least one of their dimensions as large as the image itself.
extract the shape drawn by the user and process it:
a) if it has an aspect ratio close to a square, then simply crop the white space around it and enlarge it such that it has the same size as your database images
b) Otherwise, it will most likely have one dimension about two times larger than the other one, in which case you crop the white space, rotate it to have the height as it's biggest dimension, enlarge it to 256x128 and then add on both sides 64 px of white space.
you'll have to compare your drawing with each of your database images pixel by pixel and determine the amount of black pixels which overlap for each database image. Then you sort these numbers and you'll get the best match. Even if the best match has less than 20% overlapping pixels, the results are usually good.
Because some shapes can be considered the same, even if they are rotated (imagine various ways to place a triangle in an image: one tip pointing up, or down, or towards one side etc), you'll probably want to rotate your input drawing around 12 - 24 times (by 15 - 30 degrees at each step) and compare each rotation to every image in your database. Given that this step will most likely require a lot of processing power, you might consider storing all the rotations of your initial database drawings in the database, as different pictures, thus making the database bigger, but saving you the effort of rotating the input image, which is costly.
Given that the above algorithm is a bit of a resource hog, you might consider having a server somewhere, which can do the actual comparisons, especially if you want to add many images to your database. Since I already implemented this algorithm for a demo application, I can already tell you that you're going to have to do a lot of pixel operations. Also, rotating images with the Android SDK can be annoying, because it changes the image dimensions...
If you are feeling adventurous, here are a couple of papers describing state of the art algorithms for tackling this problem: "Shape contexts enable efficient retrieval of similar shapes" by Greg Mori, Serge Belongie and Jitendra Malik (2001) and "Shape Matching: Similarity Measures and Algorithms" by Remco C. Veltkamp (2001). The maths might be a bit heavy, though.
You should look into GestureOverlayView.
A good tutorial is: http://www.vogella.com/articles/AndroidGestures/article.html
I'm using AndEngine, and within that framework, I'd like to make a circular timer graphic. Specifically, I'd like to display the wait period for reuse of an ability. The idea is to dynamically fill the arc as the timer progresses. Something like this:
The java.awt.Graphics object has a fillArc() method that seems perfect for me. In fact, the above graphic was drawn using fillArc(50,5,100,100,75,-40). Great! Now here's the problem:
AndEngine doesn't use Graphics() objects, it uses its own Shape implementation (for OpenGL) and there's no defined "Circle" shape, much less a circle shape with a fillArc() method.
Possible Solutions and Their Respective Problems
Looking around for a solution I ran into "Drawing a circle using Andengine". That Q&A is not of much use to me as the only answer "Indeed, you can't directly draw a circle" offers two alternatives: (1) "Rendering a quad with a circle texture" - this won't work for me as I need to dynamically modify the circle to produce the arcfill; and (2) "Rendering a circle that's actually a circle of connected triangles." Maybe option two would work, but there's no guidance there as to how to do that.
I also ran into "Creating circle in android andengine by box2d?". I suspect someone may be tempted to say, you can simply create a circle like this:
Body circleBody = PhysicsFactory.createCircleBody(pWorld, pSprite,
BodyType.StaticBody, FixtureDef);
That really doesn't help me. I'm not looking to create a 2D physics body of a circle. I'm looking to display one.
Finally, I found this discussion, which is promising. In particular, there's a suggestion:
Use Canvas to draw [it] into a Bitmap, and load that Bitmap as a TextureSource.
Sounds reasonable, although I'm still unclear how to do that.
Update: My Cheating "Solution"
Rather than dwell on this, I decided to cheat (for the moment at least). I made a spritesheet that looks like this:
Rather than actually have the timer display the perfect fillArc(), I just pull the appropriate index of the sprite from the spritesheet based on rounding the proportion done (from 0 to 1) to the appropriate index on the spritesheet. Like this:
public void setTimer(float amount) {
this.setCurrentTileIndex(Math.round(amount * 20));
}
For my purposes, this actually works just fine--I'm using the timers over about 2 seconds, so you really don't see the lack of detail. But maybe I'll get around to replacing this with the "proper" solution if someone posts it. Also, maybe this spritesheet will be useful for someone doing the same thing. Here's the version using transparency instead of a green background. (So it's white on the white background of stackoverflow, but it's there):
There is a third solution that requires a single texture and a custom object. So it's a trade off between your solutions, where one requires a lot of triangles and the other one a texture memory.
You need only one image, i.e. the full circle in your "cheat sequence" above.
Create a custom object consisting of 8 triangles (one 'fully drawn' triangle will represent 45° each).
The progress determines:
How many of the triangles to draw. I.e.:
100% ==> 360° ==> 8 full triangles
50% ==> 180° ==> 4 full triangles
37.5% ==> 135° ==> 3 full triangles
25% ==> 90° ==> 2 full triangles
20% ==> 72° ==> 1 full triangle and one triangle with one vertex moved so that it represents the remaining 27° (== 72° - 45°).
If you ask me this is the coolest solution, since it can be applied to any texture. =)
I'm trying to create a jigsaw puzzle app for Android. I am fairly far into the coding, and I am kind of stuck with one issue.
I need a way to change a Bitmap into a bunch of puzzle pieces. My current code simply cuts the image into rectangles, and it works pretty well, but now I need a way to create more complex piece shapes.
I had a couple of ideas:
Use a separate bitmap file that contains only black and white pixels, and use that to cut up the picture. I thought this was a pretty good plan, until I went to code it. I really had no idea how to do it.
Use a Path object to create the border. This would probably work, except I'm not sure how to keep track of the sides so that the pieces connect with each other.
Any ideas? I'm open to any suggestions.
You can use Path and/or Region to set a clip for your Canvas when drawing a Bitmap.
Take a look at this example. Here are some ways of clipping your drawing to any shape.
You could try making squares or rectangles fitted inside complex figures that can still be pieced toguether, when there's a match, the full rectangle covers the space. Imagine it like a 9 patch, when two sides match, you show the border rectangle.
This is not a explicit solution but I wonder if it would be possible to use bezier curves or paths to create lines along x and y , in conjunction with a parameter(fed with random value) to control the amount of deviation from a straight line and how much in a given distance ie; pixels/ per inch - this would be to create tongues on the pieces. Then use Region to extract the resulting shape at a given side of an intersection. Have the shape object get its center xy coordinate at instantiation and make it so that piece cannot be set if its current coordinate does not match the one it had when it was created.