ちょっと、キッカケがあって、週末までに動く所まで持って行きたかったので、一気に作ってしまいました…。
まだ、完成ではないです。キャンバスサイズのフィッティングとか、シェイクして並べ替えるとか、コマを動かすときのアニメーションとか、音とか。フォントもデフォルトでのままだし。。広告つけて、Google Playにも登録したいし。
でも、見た目もっとダサい感じになると思っていたので、大きな声では言えませんが、今の状態に以外と満足しています。。でも、キャプチャーで取ると、色が暗いですね…。画面で見てるときは、もう少し明るい感じなんだけどな。。なんでだろ・・・。
ちなみに、色はこちらのサイトを参考にさせて頂きました。便利な物があるんですね、ありがたい限りです。
で、ガーッとやっちゃうと、後からブログに載せるのが難しくなるんですよね…。でも、ちょっと、せっかくなので、がんばって振り返りつつ、リファクタリングしつつ、メモを残してみます。
イメージの状態のソースコードを、GitHubに上げてます。ご参考まで。
https://github.com/et79/Game15
コマクラス/Piece追加
１つのコマを表現するクラスを追加しました。
描画もこのクラス内でしたいので、座標やペイントのオブジェクトを持てる様にしています。
public class Piece {
private Paint paint; // ペイント
private Point pieceOrg; // コマの座標
private int oneWidth; // 一辺の長さ
private GameView gameView; // 親のゲームビュークラス
public int numIdx; // 表示する番号（から-1した数）
public int posIdx; // 位置インデックス
public double ratio = 0.9; // コマ一辺とマス一辺のサイズ比
コンストラクタでは、ゲームビューの情報から、コマのサイズと座標を算出して保持しています。
// コンストラクタ
public Piece(Paint argPaint, GameView argGameView, int argPosIdx)
{
// 初期化
paint = argPaint;
gameView = argGameView;
numIdx = argPosIdx;
// コマの一辺の長さを算出→マス一辺 * 0.9
oneWidth = (int)((gameView.gridWidth/4) * ratio);
// 位置座標設定
setPosIdx(argPosIdx);
}
座標をあとで変えられるようにPublicな関数setPosIdxを用意していて、その中身がこんな感じです。
// 位置Idxから位置座標の算出／設定
public void setPosIdx( int idx )
{
posIdx = idx;
// マス一辺の長さ
int gridOneWidth = gameView.gridWidth/4;
// マージン
int margin = ( gridOneWidth - oneWidth )/2;
// コマの描画原点
// 横軸の位置→グリッドの原点 + 位置インデックス/4の余り + マージン
int xPos = gameView.gridOrg.x + gridOneWidth * (idx % 4) + margin;
// 横軸の位置→グリッドの原点 + 位置インデックス/4の商 + マージン
int yPos = gameView.gridOrg.y + gridOneWidth * (idx / 4) + margin;
pieceOrg = new Point(xPos, yPos);
}
マスに左上から順に位置インデックスを振っていて、位置インデックスを４で割った余りが横軸の座標、商が縦軸の座標になる、という仕組みで考えてます。
ちょっとややこしいですね。。
最後に描画。変化が欲しかったので、位置座標と表示番号が一致している時に、色を替える仕組みを入れています。
で、コマは角丸四角にしてみました。
// コマを描画
public void drawPiece(Canvas canvas)
{
// 色設定／正解の位置にいる場合は、色を替える
if( posIdx == numIdx )
paint.setColor(Color.parseColor("#38949d"));
else
paint.setColor(Color.parseColor("#48b5c0"));
// 描画
RectF rect = new RectF(
pieceOrg.x,
pieceOrg.y,
pieceOrg.x + oneWidth,
pieceOrg.y + oneWidth );
canvas.drawRoundRect(rect, 10, 10, paint);
// 数字を書く
paint.setColor(Color.parseColor("#d0d0d0"));
paint.setTextSize( oneWidth/3 * 2 );
// 書く位置
// 表示を見ながら、微妙な調整を入れています…。
int numPosX = pieceOrg.x + ( ( numIdx + 1 < 10 ) ? oneWidth/3 : oneWidth/9 );
int numPosY = pieceOrg.y + oneWidth/4 * 3;
// 数字描画
canvas.drawText( String.valueOf(numIdx + 1), numPosX, numPosY, paint );
}
数字は、コマの中心ら辺に書くために微調整をしています。
ホントは、文字のサイズから中心を割り出すべきなんでしょうが、、、とりあえずこれで。
これで、コマを書くための部品が出来ました。
後はゲームビュー側の実装になります。
続きは、また今度。
コメント