I have replicated the classic helicopter game using libgdx. It was fairly easy. Now I want to modify it such a way that the obstacles placement will be a mixture of predefined and randomly generated positions. This way I can also place coins with nice patterns for the predefined groups of obstacles.
To do that, I need to have imaginary grids in the screen using the obstacle size. Then create some groups of predefined positions for both obstacles and coins. Maybe create 10 sets of those predefined levels. Show them once in a certain period of time randomly for the players to have a different feel.
My question is how do I create imaginary grids on a phone screen considering different sizes, resoultion, and densities?
N.B. Please don't give me links of android developer pages for reading on different sizes and how to handle them. I have read many times and still do read once in a while.
You can account for different size screens by using relative instead of absolute values for your grid. E.g., you can set the height of a cell to be screenHeight/8, rather than "40". This way, whether the screen is 320 pixels or 400 pixels tall, you can still be sure that your grid will be 8 "boxes" tall.
Related
I need to create a heatmap for android google maps. I have geolocation and points that have negative and positive weight attributed to them that I would like to visually represent. Unlike the majority of heatmaps, I want these positive and negative weights to destructively interfere; that is, when two points are close to each other and one is positive and the other is negative, the overlap of them destructively interferes, effectively not rendering areas that cancel out completely.
I plan on using the android google map's TileOverlay/TileProvider class that has the job of creating/rendering tiles based a given location and zoom. (I don't have an issue with this part.)
How should I go about rendering these Tiles? I plan on using java's Graphics class but the best that I can think of is going through each pixel, calculating what color it should be based on the surrounding data points, and rendering that pixel. This seems very inefficient, however, and I was looking for suggestions on a better approach.
Edit: I've considered everything from using a non-android Google Map inside of a WebView to using a TileOverlay to using a GroundOverlay. What I am now considering doing is having a large 2 dimensional array of "squares." Each square would have a long, lat, and total +/- weights. When a new data point is added, instead of rendering it exactly where it is, it will be added to the "square" that it is in. The weight of this data point will be added to the square and then I will use the GoogleMap Polygon object to render the square on the map. The ratio of +points to -points will determine the color that is rendered, with a ratio closer to 1:1 being clear, >1 being blue (cold point), and <1 being red (hot point).
Edit: a.k.a. clustering the data into small regional groups
I suggest trying
going through each pixel, calculating what color it should be based on the surrounding data points, and rendering that pixel.
Even if it slow, it will work. There are not too many Tiles on the screen, there are not too many pixels in each Tile and all this is done on a background thread.
All this is still followed by translating Bitmap into byte[]. The byte[] is a representation of PNG or JPG file, so it's not a simple pixel mapping from Bitmap. The last operation takes some time too and may possibly require more processing power than your whole algorithm.
Edit (moved from comment):
What you describe in the edit sounds like a simple clustering on LatLng. I can't say it's a better or worse idea, but it's something worth a try.
If I have an image of a table of boxes, with some coloured in, is there an image processing library that can help me turn this into an array?
Thanks
You can use a thresholding function to binarize the image into dark/light pixels so dark pixels are 0 and light ones are 1.
Then you would want to remove image artifacts using dilation and erosion functions to remove noise (all these are well defined on Wikipedia).
Finally if you know where the boxes are, you can just get the value in the center of each box to determine the array value, or possibly use an area near the center and take the prevailing value (i.e. more 0's is a filled in square, more 1's is and empty square).
If you are scanning these boxes and there is a lot of variation in the position of the boxes, you will have to perform some level of image registration using known points, or fiducials.
As far as what tools to use to do this, I'd recommend first trying this manually using a tool like ImageJ, which has a UI and can also be used programatically since it is written all in Java.
Other good libraries for this include OpenCV and the Java Advanced Imaging API.
Your results will definitely vary depending on the input images and how consistenly lit and positioned they are.
The best way to see how it will do for your data is to try applying these processing steps manually to see where your threshold value should be, how much dilating/eroding you need to get consistent results.
I'm working on small project which requires: Change clothes (shirt/pants etc.) of a person in any 2D image he chooses to upload. So somehow edges needs to be detected and relevant areas are supposed to be filled with new patterns. I do see a lot of other complications, but let's assume simple patterns have to be filled only.
For a web application, is it possible to do it in HTML5? Any other alternatives?
For a standalone application, what kind of technology would be preferred, C++/Java?
Update
Based on Bart's comment:
Any useful pointer like Bart's would be really useful
Assumption: Clear traceable 'standing' human figure in 2d image
Since it's an image, there is no real-time scenario
Assumption: Clear traceable 'standing' human figure in 2d image
A way to do this is to require the user to take two pictures. One picture is the one with the user in it, the other picture must be taken in the same camera position and orientation, but the user steps out of the frame for that one.
Since both pictures will have the same background you can compare pixel by pixel between the two images and flag those pixels that have a difference over some threshold. Of course the threshold must be selected so that camera noise isn't detected as a difference. Once you have the collection of pixels that are different you can filter them and calculate an approximate silhouette for the user from the pixels on the edge.
A simplification of the above method can be done if you have control over the background. You could use a bluescreen to avoid having to have a second picture with the background.
My question is similar to this one, but is more specific in scope.
In my card game application, I would like for users to be able to click on words located in a scanned jpeg image. Please see this sample Pokemon trading card.
In this case, the user should be able to hover his mouse over the text "Scratch", upon which a pulsing rectangular border will appear around the text, indicating that it is clickable. The problem is how to detect the border of the text. There will be an array of words KNOWN BEFOREHAND that the user may click on (these will be retrieved from a database on a card-by-card basis). To continue our example, the array in this case will be ["Scratch", "Live Coal"]. Once the user clicks on "Scratch", the application must know via a call-back that "Scratch" was chosen instead of "Live Coal".
I was thinking of using optical character recognition libraries to solve this problem, but the open-source options for this are poor in quality (e.g. GOCR) and/or not well-tested on multiple platforms (e.g. Tesseract). I only care about Windows and Mac compatibility. Am I missing an obvious/simpler solution/algorithm that does not require OCR? I cannot simply hand-code in bounding boxes for each card, as there will be thousands of scanned cards in my database. The user may also upload his own custom card scans with an accompanying array of clickable text.
Text color is not always black. See this panorama of different card and text styles that will be permitted. The black cards have white text, and the third-to-last card (Zekrom) has black text with a white outline.
Solutions in any programming language are appreciated. However, please note that I am looking for open-source algorithms and/or libraries. If there is a solution in Ruby or Java, even better, as my code is primarily in these two languages.
EDIT: I forgot to mention that the order of the words/phrases in the array will be the same as on the card. Thus, the array will be ["Scratch", "Live Coal"] instead of ["Live Coal", "Scratch"]. I am mentioning this because it can potentially simplify the task. Thus, for this example, I can simply look for black pixels (though I have to watch out for the black star in the white circle). However, there will be more difficult cases where there is descriptive text under the attack name in a smaller font (again, see the panorama for examples).
I would just write a program that allows you to visually draw a bounding box around your text for simplicity but could could do this buy detecting differences in pixel color. Since the text is black you could see where the upper-left most black pixel is without large indents and within the bottom half of the card.
When the cursor is stationary, check if there is a black pixel either underneath or to 4 pixels around the cursor. If it is, check the first three consecutive (because there still might be a non-black pixel between the letters) non-black pixels to the left of the cursor, to the right, to the top and at the bottom. If yes, use these locations to draw a square. You can use OpenCV.
I'm trying to develop a 2D game to android using opengl.
I know how to print images on the screen and animate them. But in my game I have a map and a want to zoom in and out and scroll the map. But I can't figure out the best way of doing it.
Can anybody help me?
I don't have any api examples but I did games design at college so I'll give my two bits.
The method you use will depend on your map style, size, functionality and format.
For example if you are looking for a very static non changing map, use a simple picture image. You can use the API frame for a picture view, enabling you to zoom in and out as you do in the gallery and to scroll on zoomed images, or in this case, zoom locations on your map.
Alternatively, if your map is based off a tiling system, a good example of this is the original Pokémon and Legend of Zelda games from the old game boy, then each area stores a tile 'thumbnail' for itself as a bitmap. These are then put into their appropriate locations on a grid depending on what areas are discovered.
This is the probably the most flexible way to build your map as you are not relying on a set bitmap for the entirety your map meaning it can change its look efficiently; you can build it as desired to show areas of choice (useful for if the map only reveals places the gamer has covered) and it also means you can do tile based overlay:
ie - if a certain area should contain treasure, theres a treasure icon overlayed on that tiles x,y position on the map grid.
I used the tiling option in my game projects from college and it made everything else map related easier. It also made the map side of things smaller storage wise.
The simplest approach would be to just call glTranslatef(-scrollX,-scrollY,0) followed by glScalef(zoom,zoom,zoom) before you render your map.