Androidのアプリを はじめて作ってみる #6 コマを配置

コマを表現するクラスPieceと、コマを動かす準備のメソッドをつくったので、いよいよタップでコマを動かしていきます。

ソースコード
https://github.com/et79/Game15

本当は、タッチしてスライドさせて動かすのが自然だと思うので、ゆくゆくはそういう操作感にしたいと思いますが、とりあえず今は、動かせるコマをタップすると、開いてるセルにコマが動く、という処理にします。

画面タッチイベント

画面タッチイベントメソッドonTouchEventをオーバーライドしていきます。

// 画面タッチイベント
@Override
public boolean onTouchEvent(MotionEvent event){
    int action = event.getAction();

    // 今は、指が画面から離れたタイミングで処理をしています
    if(( action & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP)
    {
        // 枠内を触った場合
        if( gridRect.contains(event.getX(), event.getY()) )
        {
            // 座標から位置Idx取得
            int clickPosIdx = getPosIdx(new Point((int)event.getX(), (int)event.getY()));

            // コマが動かせる場合
            if( isPieceMoveAble(clickPosIdx) )
            {
                // 動かす対象のコマを、空白セルの場所に移動
                pieces.get(clickPosIdx).setPosIdx(emptyPosIdx);

                // 空白セルを、動かしたコマの位置に移動
                pieces.get(emptyPosIdx).setPosIdx(clickPosIdx);

                // 空白セルの位置Idxを更新
                emptyPosIdx = clickPosIdx;

                // 位置Idxとアレーの並びを合わせる
                Collections.sort(pieces, new PieceComparator());

                invalidate();   // 再描画
            }
        }
        // 枠外をタッチ
        else
        {
            // 今はシャッフル実行
            shufflePieces();
            invalidate();   // 再描画
        }
    }
    return true;
}

これで、

• 枠内で動かせるコマをクリックすれば、移動
• 枠外をクリックで、コマをシャッフル

という動作が実装できました。

後は、描画するだけです。

OnDrawの拡張

まず、格子を書くのはやめました。狭い範囲に線が密集するのは、あまり素敵ではなかったので。

コマの描画は、piecesアレーの要素に順次アクセスし、それぞれのインスタンスに対してdrawPieceを呼ぶコトで実現します。

@Override
public void onDraw(Canvas canvas){

    // ペイントの基本設定
    paint.setAntiAlias(true);           // 線が滑らかになる
    paint.setStrokeWidth(0);            // 線幅なし
    paint.setStyle(Paint.Style.FILL);   // 塗りつぶしあり

    // 外枠
    paint.setColor(Color.parseColor("#b7b7b7"));
    canvas.drawRoundRect( gridRect, 10, 10, paint);

    // コマ描画
    boolean fNumAllOk = true; // 数字の並び順があっているか？
    // コマに順次アクセス
    for( int i = 0; i < pieces.size(); i++ )
    {
        // 空白セル以外を描画
        if( pieces.get(i).numIdx != 15 )
            pieces.get(i).drawPiece(canvas);

        // 数字と並びがあっているか？
        if( pieces.get(i).numIdx != i )
            fNumAllOk = false;
    }

    // タイトル
    paint.setColor(Color.parseColor("#38949d"));
    int titleSize = 100;

    String mess = "15 Game";

    // すべて順番に並んだら、"Done!!"を表示する
    if( !isInit & fNumAllOk ) mess += " Done!!";
    paint.setTextSize(titleSize);

    // タイトルを書く
    canvas.drawText(
            mess,
            gridOrg.x,
            gridOrg.y - titleSize / 2,
            paint );

    isInit = false;
}

意外と、シンプルになりました。これで、GitHubにあるのと大体同じ状態です。よしよし。

次は、

• USBデバック環境を使った、実機でのテスト
• キャンバスサイズへのフィッティング
• 時間の計測
• 音対応
• 広告をつける

なんかをやって、最後にGoogle Playにアップロードしたら、ひとまずおしまいですね。もう少し、頑張ります。