I need your advice on the best way to implement a scrollable playing field in a simple game. The field consists of multiple rows, with 9 cells in each row. The rows can be dynamically added and removed during the course of the game. Each cell has a digit in it, and optionally several overlayed images, like selection, selector over, crossed out, etc. (see the pic below). The user should be able to click on individual cells of a row to select/deselect/cross the touched cells. At any point in the game there can be from 0 to 3000 cells (0 to about 333 rows). The field should scroll up and down smoothly.
I was thinking about having a ListView with its each row being a row on the field. That way i could add/remove rows dynamically during the game. However, how exactly should i implement a row: have one bitmap representing a row, and then when the user touches it -- get the coordinates of the touch area, and find out what cell was affected, and then act upon that. Is it possible to get the touch coordinates of a row in ListView? If not, should I place 9 dummy image placeholders in each row, and then act on user touching those? What about performance?
Or should I have one huge bitmap / canvas representing the entire field, place it inside a ScrollView and then calculate all the coordinates and update it as the user interacts with it? Is it going to be faster or slower than the ListView?
Any other solutions?
I prefer it to be a "regular" app type game, not a loop-based game, as I don't think I really need to redraw 30 times a second.
I am pretty new to Android. Thank you for your suggestions.
You can easily make that kind of setup run quickly with a "game loop" / SurfaceView combination. That means no ListView, only custom drawing and event handling. Luckily the event handling isn't that difficult, and you'll win later on because you'll have much greater control over the interface than if you had gone with a bunch of customized views and layouts.
I'd avoid that www.droidnova.com tutorial, it uses HashMaps unnecessarily, which will only cost you in performance.
Here's how I'd go about it:
Create an object to hold your cell data. For this example, I'd use an object with an id (to print), and an x and y for where to draw on the screen.
Decide on a board size which will fit on your screen without scrolling, say 10x10. You'll add the scrolling later.
Create a 2-dimensional array of cell objects with lengths boardSize x boardSize. Fill the objects with id and x and y position on the screen.
In your custom onDraw, iterate through each "row" and "column" of your single array and draw the object at its stored x and y value.
So now you've got a grid of objects displaying on your screen. Now you want to restrict the number of rows currently displayed and add some functionality to change which rows are visible. This is done as follows:
During initialization, set up some global ints as mCurrentRow = 0 and mNumVisibleRows = 3. These define your "view window".
Modify your drawing code to only draw rows starting at mCurrentRow and ending at mCurrentRow + mNumVisibleRows. The result of this should be that you only ever see mNumVisibleRows rows, and which group of rows you see depends on what you set mCurrentRow to.
Add some triangles to the right of your grid drawing and have tap touch events in those areas map to increments/decrements of mCurrentRow. Obviously, you should not allow that value to go outside your row count bounds.
If you want to get classy, draw a line between your triangles for a scroll area, and map touch events there to something like newCurrentRow = (touch.y / canvas.height()) * boardSize; That needs some tweaking, but you get the idea.
This approach has the downside of only showing a full set of rows at a time, so scrolling wouldn't be smooth. However, you have complete control over your canvas and what you draw, so with a little more math you could implement a smooth scrolling mechanism which would offset by a fractional row height in the y-direction instead of whole rows.
I dont know if you can create a game like you described with good performance. I would look into basic tile game programming.
But by avoiding the standard view components are have to write all the logic yourself requires quite some work. Things like handling "click" events on different rows needs to be calculated by the tile position relative to the game camera. So theres alot of new stuff in learning to develop game at a lower level.
You also have to take the rendering of your game into your own hands by developing a game loop that constantly updates and draw's your tiles from a background thread to reflect the scroll / state of your game.
You can get more infomation on the basics of a game loop at:
http://www.rbgrn.net/content/54-getting-started-android-game-development
If you want to learn more you should see the following keynotes from android.
http://developer.android.com/videos/index.html#v=U4Bk5rmIpic
http://developer.android.com/videos/index.html#v=7-62tRHLcHk
Those give you a very good insight in developing games for andriod at a low level where you can fine tune for performance.
Related
Recently I played a simple game on android called Pou, and one of it's inside games was a connect the dots on the field game. Here is a screenshot to better explain the situation.
At the beginning of the game you are given n-pairs of dots and you have to connect the same colored ones. While doing this you need to fill the matrix field.
Generating such a field is not a problem, but how can I be sure that it is solvable?
My question would be how can I generate a field that has a solution?
Is this a graph problem? Or some kind of a connectivity problem?
Of course I can always produce a brute force solution, but I am looking for something better
Actually you can generate the matrix in such a way that you can be sure it is solvable.
The main idea is as follow. Let say that you need i pairs of dots and the matrix is n by n
Set i randomly chosen cells (start points) as heads and to each assign a different color.
At each iteration for each color move its head randomly (left, right, up, down) into an uncolored cell and color it with i-th color. (if there is no legal such moves do not consider this color any more -- that will be the end point)
When you are finished and there is no uncolored cells you created a legal coloring of the board.
If there are some uncolored cells -- it may be quite challenging but for sure doable to modify / extend the coloring you obtained to fill those regions with some color -- the easiest way would be to exclude those regions from the matrix altogether :-)
Some other very loose thoughts:
each region that consists of more than 2 uncolored cells can be made legal (or at least some part of it) by assigning two additional dots to it;
you can split your initial n by n matrix into smaller rectangular parts and assign to each part some number of dots (proportional to the area) and use the above method -- for sure there will be less uncolored cells when you merge those parts back (on the other hand the puzzle will be bit easier).
UPDATE
once still in phase of coloring, if the next move produces a single, isolated cell: chose a different move and if no such move exists stop the coloring process for this color.
if you want to have a predefined number of dots (or the number close to it), check not only for single isolated cell, but for whole isolated regions. [btw. mind the possibility of coloring a candidate for isolation region by extending its start point]
for relative small n you can try using above method(s) until you hit full-coloring (so generate, check if legal, if not: generate again)
UPDATE II
If you have time you can try generating colors once at a time, with some probability of stopping, that depends on the length / area of the coloring. So basically just choose a random uncolored position and execute the above method. It should be easier to implement.
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.
I am developing a puzzle game, where user has to arrange the images in the grid. The screenshot is given below
I want to able to drag the image of one cell of the grid to another cell. I searched many sites and every where I found examples with Drag and drop API (I.e. by using OnDragListener etc.) which was introduced in Android 3.0, but my application should run in Android 2.2.
So please help me how to implement it using Touching API (I.e. OnTouchListener etc.)
One way of doing it would be take the x & y location of the touch in relation to the grid.
IE. at 10x10 grid on a 100x100 area.
If the touch was at 25,25, it would choose square 2,2(using an array). You could then save that location to a variable (so as to move whatever piece to it that you are changing it with) and on drag update the bitmap x,y in relation to the touch.
Once you lift your finger at say, 75,75, it would set the puzzle piece at 7,7 and move that piece to 2,2.
I used something similar, less the drag, on my Lazer Maze Lite game. Mine was basically moving mirrors and bombs on touch though, but....
http://developer.android.com/guide/topics/ui/drag-drop.html
I'm developing an Android application to read "electric meters". The user enters the counter - the application calculates the consumption and sends it to a server.
The representation of the counter should look like a old electricity meters
old electricity meter
I've already integrated the counter-numbers as images. I will have an animation that if the user enters a number (keyboard) then the relevant section begins to rotate to the correct number position.
For example: The user enters the number 5 for the first digit, then rotate the digit from 0-5. The animated numbers flip to the correct position. How can I do this? Any idea?
thank u!!!
There is a custom view which I've created for a custom application. Initially, i also tried searching for this type of view but couldn't found any. So created one of my own.
You can see the code here: https://github.com/Vinayrraj/Android-FlipDigitView
Also this video might help you: http://youtu.be/d6-M2nN2Gzg
You can take a look to Ticker, an Android text view with scrolling text change animation:
Ticker is a simple Android UI component for displaying scrolling text.
Think about how an odometer scrolls when going from one number to the
next, that is similar to what Ticker does. The Ticker handles smooth
animations between strings and also string resizing (e.g. animate from
"9999" to "10000").
I'd have one spinning animation - but make it fast and blurred so you can't see what number it's on - play that for 1 second, then replace with the correct position - it's a trick, but will save you doing lots of different animations.
If I got your need, I would use two different approach:
1) one big animation with numbers from 0 to 9; when you have an inoput number, you should launch the animation and stop at the right frame (just a math calculation matter);
2) one animation for each number; you could think about a number flipping as if its rotating on itself vertically; then, when the user put his number X, you have to flip between X different animations until the good one and stop.
I am relatively new to Android. I am working on an application wherein
i want to display digital signals. But the problem is once I occupy
the available screen width how to i add a scrolling feature to
continue viewing the signal. Also i am drawing the signal using using
drawLine(), so what co-ordinates should i set for drawing the lines
when scrolling is enabled? Can somebody please give a simple example
where a line extends more than the available screen width and you can
scroll through to see the remaining line.
Thanx in advance.
I've written a few of these before in other languages, so I can ive you the principles, rather than an example. I'm assuming you have some sort of buttons to the left and right that allows the user to scroll through the data, and that your signal data is stored in an array. You will be able to determine how much data you can fit into one screen width based on whatever scaling factor you are using. Say your screen can display ten values at a time, then you simple store the starting point in your signal array and use that as the left most point to display on your screen. Then all you have to do is show the next ten values in your array. When the user selects the button to move left or right through the data simply increment or decrement the starting point. If you are streaming in your signal, then the stream can increment the starting point whenever you receive a new piece of data. A redraw after each start value change will give the impression of scrolling. Watch out for start and end conditions (i.e. you don't want to scroll until you have at least a full screen of data). All you are doing is creating a window onto the data you have.
Hope this helps.