Androidでオセロゲームを作ってみる (1)
Androidでオセロゲームを作ってみる (2) ゲームロジックの実装
Androidでオセロゲームを作ってみる (3) 思考ルーチンの実装
Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法
Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成！
さて、いよいよ今回は石を裏返す時のアニメーションを作ってこのアプリを完成させたい。
背景と石の描画に画像を使う
その前に、ちょっと見栄えが良くなる様に、盤面の背景と石の描画に画像を使って見た。盤面も少しだけ小さくして周りに枠が出来る様に調整した。
こんな感じで、劇的にとは行かないまでも大分見た目が良くなったと思う。
背景の画像は無料素材サイトで見つけたものを利用させてもらった。
黒と白の石の画像はInkscapeを使って何とか自分で描いた。円にグラデーションを付けただけだけど、ベタで描くよりは断然良くなったと思う。
Android 1.5でエラー発生!
さて、自慢してやろうと思ってヨメの携帯にこのアプリを入れて見た。機種は第一世代AndroidのHTC Heroだ。起動すると、何やらエラーが出て起動しない。よく見たらAndroidのバージョンが1.6ではなく1.5だった。
マニフェストのSDK VersionとプロジェクトのターゲットSDKバージョンを3に変更してやって見てもやっぱりダメだ。
Logcatを見ると、「リソースが見つからない」というエラーの様だ。Android 1.5以下では画像ファイルは res/drawable-mdpi ではなく res/drawable フォルダに配置しないと行けないのだった。
知っていれば何でもない事なのだけど、解決するまでに1時間も費やしてしまったので、忘れない様に一応書いておこう。
石を裏返すアニメーションを作る
前回の記事でTextViewの文字列をぐるぐる回すアニメーションを作った。 これはAndroid標準のアニメーション機能を使って簡単に出来た。ただ、石を裏返すアニメーションの方は標準のアニメーション機能ではちょっと難しそうだ。盤面と石の描画をカスタムViewで行っているからだ。
もし標準のアニメーションを使うのであれば、カスタムViewの上にImageViewなどをオーバーレイしてそれをアニメーションさせれば良いかなとも思ったけれど、同時に裏返される石の数は毎回異なるのでかなりコードが複雑になってしまいそうな気がする。
一方、自分でアニメーション処理を実装するのであれば、別スレッドでタイマー処理を行って一定時間ごとに描画が更新される様にすれば良い。処理の概要は次の様な感じになる。
- タイマーイベントが発生する毎に石の横幅を変化させて描画する。
- アニメーションにかける時間の半分を使って横幅を100%から0%まで減らし、残りの半分の時間で0%から100%まで戻して行く。
- その際、最初の半分は元の色、残りの半分は裏返した後の色を使う。
- 裏返し対象の石は複数あり得るのでArrayListに入れておいて、描画ルーチンの中でループして処理する。
いろいろ試した結果、0.6秒かけてアニメーションさせて、その間に15回のタイマーイベントを発生させるぐらいがちょうどいい感じになった。
Viewを使った場合は最高でも4FPSぐらいしか出ないという事を読んでいたので、もっと荒いアニメーションにしないと行けないかと思っていたけれど、実際にやって見た限りではこれぐらい細かくタイマーイベントを発生させないとアニメーションがスムーズに見えなかった。
裏返しのアニメーションを付ける前がこれ。
裏返しのアニメーションを付けた最終形がこれ。
ビットマップ画像を拡大/縮小して表示する
最初はアニメーション中に石の横幅を変えて表示する際に、サイズを指定して drawBitmap を呼んでいた。でもこれだと毎回拡大/縮小の処理をする分遅くなるので、起動時にアニメーションで必要になる分の Bitmap を createScaledBitmap を使って生成して配列に保持しておく様にした。これでスムーズに表示される様になった。
参考： Android 奔走記: Bitmap を使ってみた
ソースコード
プロジェクト全体のソースコードはこちら。
mikehibm/MiReversi at ver4 - GitHub
これでこのプロジェクトはついに完成！
6月の第一回目からちまちまと作って来て、ほぼ３ヶ月かかってしまった。。。
せっかくここまで作ったので、近いうちにマーケットに一般公開できる状態まで持って行きたいと思う。いくつか面白い機能追加のアイデアはあるので、その部分を作り込んだらぜひアップしたい。
このプロジェクトでは、SurfaceView を使わなくても普通の View でここまで出来るという事が分かった。次は SurfaceView を使って何か作りたい。その次は GLSurfaceView の攻略だ。
まだまだ先は長いな。（笑）
Androidでオセロゲームを作ってみる (1)
Androidでオセロゲームを作ってみる (2) ゲームロジックの実装
Androidでオセロゲームを作ってみる (3) 思考ルーチンの実装
Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法
Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成！