2011年9月26日

Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成!

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月の第一回目からちまちまと作って来て、ほぼ3ヶ月かかってしまった。。。

せっかくここまで作ったので、近いうちにマーケットに一般公開できる状態まで持って行きたいと思う。いくつか面白い機能追加のアイデアはあるので、その部分を作り込んだらぜひアップしたい。

このプロジェクトでは、SurfaceView を使わなくても普通の View でここまで出来るという事が分かった。次は SurfaceView を使って何か作りたい。その次は GLSurfaceView の攻略だ。

まだまだ先は長いな。(笑)

Androidでオセロゲームを作ってみる (1)
Androidでオセロゲームを作ってみる (2) ゲームロジックの実装
Androidでオセロゲームを作ってみる (3) 思考ルーチンの実装
Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法
Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成!











2011年9月5日

今注目すべき7インチAndroidタブレットは?

iPadは下に置いて使う分にはいいのだけれど、仰向けに寝転がって使うには重さがあり過ぎる。

そこで自然と300グラム台のタブレットが欲しくなる。。。となると7インチだ。

試しにAmazon.comで7インチのAndroid タブレットを検索して見たら、あまりにもたくさんヒットしたので驚いた。1年前と比べると格段に多くの選択肢があって嬉しい。

ただこれからAndroidタブレットを買うのなら、CPUは1GHz以上でOSのバージョンは3.x以上のものにしたいところ。

もしクリスマス頃に余裕があったらどれを買うかなあ、などと考えながらいくつか注目すべき機種をピックアップして見た。



速報:サムスン Galaxy Tab 7.7発表、スーパー有機ELプラス & 1.4GHzデュアルコア、335グラム








国内初のAndroid 3.2搭載7インチタブレット「GALAPAGOS A01SH」の発売日が決定。8月30日より販売開始
イーアクセス、Android 3.2搭載の7インチタブレット「GALAPAGOS(A01SH)」 - YouTube
2011-09-05 - 新・たけぞう瀕死の日記 | GARAPAGOS A01SH買った





動画:レノボから199ドルの7型 Androidタブレット IdeaPad Tablet A1







Android 3.2搭載の7インチタブレット「MediaPad」、Huaweiが発表 - ITmedia ニュース







Camangi、Android 3.1搭載7インチタブレット「Mangrove 7・WiFi」を正式発表。8月中旬に発売へ







2011/09/27 追記: これもいいかも。

7インチAndroid 3.2搭載タブレット「Acer ICONIA Tab A100」開封の儀 - ガジェット通信

Iconia Tab A100 Review - SlashGear





う~ん、スペック的にはサムスンのGalaxy Tab 7.7が最先端を走っている感じ。デュアルコアで1.4GHzとは、相当早そうだ。

最先端のスペックを求めないのであれば、レノボのIdeaPad A1というのも良さそうだ。$200ドルを切るのであれば、ヨメにも気軽に「買っていい?」と言えそうな気がする。^^
ただこれはOSがAndroid 2.3との事。3.2以上にアップデートされるなら真剣に考えたい。



最後にこちらにも注目! 意外と良いかも。

AmazonがKindleタブレットを7インチにとどめたのは賢明―モックアップ写真あり!

iPadに強敵現る? Amazon Kindleタブレット、こんな感じです! : ギズモード・ジャパン









2011年8月16日

Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法

Androidでオセロゲームを作ってみる (1)
Androidでオセロゲームを作ってみる (2) ゲームロジックの実装
Androidでオセロゲームを作ってみる (3) 思考ルーチンの実装
Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法
Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成!


前回までで思考ルーチンがそこそこ動く様になってゲームとしては結構遊べる状態になったので、今回からは少しずつグラフィックを改善して行きたい。

ひとまずこんな感じで、ゲーム終了時の結果表示の文字列をぐるぐる回してみた。
http://www.youtube.com/watch?v=AYld0bnjxeI

FrameLayoutを使ってオーバーレイ表示


前回まではカスタムのReversiViewの中でdrawTextを使って勝ち負けを表示していた。今回はその代わりにAndroid標準のアニメーション機能を使いたいので、ReversiViewの中心に重なる様にTextViewを配置して、そこに文字列を表示した。

複数のViewを重なる様に配置するには、FrameLayoutを使うと良いらしい。

TextViewには標準でドロップシャドウの機能が付いているのでこれも利用した。


文字列を画面の中心に配置するのは、

 android:layout_gravity="center"

とするだけで出来た。素晴らしい。^^

ちなみにTextViewの上のViewは、ゲーム終了時に画面の背景を暗くするアニメーションを入れる為に使っている。




AnimationをXMLファイルで定義


AnimationをXMLファイルで定義するには、res/の下にanimフォルダを作ってそこに適当な名前でXMLファイルを作成する。

色々試行錯誤して見た結果、こんな形になった。
回転しながらズームイン&フェードインして、一瞬止まった後でスーっと上に動く感じ、が作りたかったので。

また文字列を回すのと同時に、背景を少しずつ暗くするのもalphaアニメーションを使って行なっている。

あと、ちょっとハマったのは、setタグの属性として「xmlns:android=...」を付けないと set全体にfillEnabledとfillAfterの属性を付けられなかった点だった。




AnimationをTextViewに適用


ActivityのonCreateでAnimationUtils.loadAnimation()を呼んで上で定義したアニメーションを準備しておく。

実際にアニメーションを開始するには、TextViewのstartAnimation()を呼ぶだけだ。





ソースコードと次回の予定


現時点のプロジェクト全体のソースコードはこちら。
mikehibm/MiReversi at ver4 - GitHub

次回はいよいよコマをひっくり返す時のアニメーションを作りたい。それが出来たら一応完成かな?


Androidでオセロゲームを作ってみる (1)
Androidでオセロゲームを作ってみる (2) ゲームロジックの実装
Androidでオセロゲームを作ってみる (3) 思考ルーチンの実装
Androidでオセロゲームを作ってみる (4) 文字列をぐるぐる回す方法
Androidでオセロゲームを作ってみる (5) 裏返しアニメーションを付けてついに完成!








 .