Android: How to Zoom, Pan(Scroll) Tic Tac Toe Board View

Question

So, I have a custom BoardView class extends View. I implemented drawing board, lines and drawing "O" drawable when user press on the cell.

But, I could not implement following problems correctly:

1. Zoom BoardView when user doing pinch(multi touch).

2. Scroll BoardView to left, right, top, bottom if BoardView bigger than BoardView initial width or height.

3. Find right cell coordinate when user pressed on the cell after zooming or scrolling.

This is my first game project, please help me if anybody know how to solve this problem.

I tried but did not work properly. BoardView width equal width screen width and BoardView height equal to BoardView width. It is square board view.

I give 200 bounty to implementing this problem.

Here is my project, everyone can download and edit: https://drive.google.com/file/d/0BxNIUTd_m1x8cUQ2NGpSMDBuVVE/view?usp=sharing

Github: https://github.com/boyfox/GameTicTacToe

BoardView code: http://pastie.org/10109253 or http://pastebin.com/TRU8Ybds

I found solution self, but need improving code, you can answer to my question with your solution!

First: I don't see any bounty here. Secons: I doubt that someone will write code for you, you should try to write it yourself and post here a question containing the list of problems you can't fix. — aga, Apr 22 '15 at 14:04
I did not say to write code to me, to fix problem need code. To set bounty functionality will be appear after two days and I will be set bounty. @aga thanks for comment. — SBotirov, Apr 22 '15 at 14:11
Checked out your github project and it crashes immediately. I'd get that fixed before asking for help on anything else. — Paul Burke, Apr 25 '15 at 11:34
@PaulBurke this is not a crash I used GestureDetectorCompat, please add support4 library and v7-appcompact to project — SBotirov, Jun 09 '15 at 06:03

score 1 · Answer 1 · answered Apr 22 '15 at 14:13

Could you please move your code to github? It would be much easier to download, edit and propose changes.

If you're looking for a generic implementation of two finger zoom/rotate, take a look at my game (https://github.com/ZieIony/Gravity). The most interesting part is the GamePanel view and the dispatchTouchEvent method:

private PointF prevPos = new PointF(), prevPos2 = new PointF();
float scale = 1;
final float MIN_SCALE = 0.2f, MAX_SCALE = 2.0f;
float rotation = 0;
Matrix matrix = new Matrix();
private float prevDist;

public boolean dispatchTouchEvent(android.view.MotionEvent event) {
        if (event.getPointerCount() == 2) {
            float d = dist(event.getX(0), event.getY(0), event.getX(1),
                    event.getY(1));
            float pivotX = (event.getX(0) + event.getX(1)) / 2;
            float pivotY = (event.getY(0) + event.getY(1)) / 2;
            float prevPivotX = (prevPos.x + prevPos2.x) / 2;
            float prevPivotY = (prevPos.y + prevPos2.y) / 2;
            if (event.getAction() == MotionEvent.ACTION_MOVE) {
                float newScale = scale * d / prevDist;
                newScale = Math.max(MIN_SCALE,
                        Math.min(newScale, MAX_SCALE));
                float scaleFactor = newScale / scale;
                scale = newScale;

                matrix.postScale(scaleFactor, scaleFactor, pivotX, pivotY);
                float prevAngle = (float) Math.atan2(
                        prevPos.x - prevPos2.x, prevPos.y - prevPos2.y);
                float angle = (float) Math.atan2(
                        event.getX(0) - event.getX(1), event.getY(0)
                                - event.getY(1));
                rotation += prevAngle - angle;
                matrix.postRotate(
                        (float) ((prevAngle - angle) * 180.0f / Math.PI),
                        pivotX, pivotY);

                matrix.postTranslate(-prevPivotX + pivotX, -prevPivotY
                        + pivotY);
            }
            prevPos.x = event.getX(0);
            prevPos.y = event.getY(0);
            prevPos2.x = event.getX(1);
            prevPos2.y = event.getY(1);
            prevDist = d;
        }
        return true;
}

This method produces a transformation matrix, which you should use for drawing.

protected void dispatchDraw(Canvas canvas) {
    canvas.save();
    canvas.setMatrix(matrix);

    // do your drawing here

    canvas.restore();
}

I need scroll only on one touch, if user doing multi touch need scale. I edited my question please look if have a time — SBotirov, Apr 23 '15 at 07:44
I didn't know that there's ScaleGestureDetector. Nice finding :) — Zielony, Apr 25 '15 at 16:33

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

Have a look at my answer here. If the answer seems satisfactory have a look at my github code. I think it is not difficult to implement your third point

"3. Find right cell coordinate when user pressed on the cell after zooming or scrolling.",

because the scaleFactor is available in MyView.java and scroll offsets could be obtained by getScrollX() and getScrollY(), by just doing simple math.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 25 '15 at 06:59

Durgadass S

1,098
6
13

thanks for your answer, but I tired run your project but initializeScrollbars(a); method not exists in MyView.java and View classes why? – SBotirov Apr 25 '15 at 07:27
And I commented this method and seen you project, but your scroll implementation very good works, but scaling logic not good works. I already found solution to my question and I want improve my code or find new best solution. – SBotirov Apr 25 '15 at 07:32
@mr.boyfox Maybe i m not sure about my scaling logic. Anyway thanks for replying. – Durgadass S Apr 25 '15 at 07:38
Thanks for to you, too! If I would not get another best solution to my question then I will be accept your answer in this week. – SBotirov Apr 25 '15 at 07:45

Android: How to Zoom, Pan(Scroll) Tic Tac Toe Board View

2 Answers2