ステップ3:GUIの作成

=前置きの前置き=

 平日に作るゲームの目処は立っているものの、作成に時間がかかるのとモードがまだちゃんとコーディング状態になってない(ネタ出しモードになってる)ので、実際にUPするのは来週末ぐらいになる予定。
 ということで、ゲームをUPするまでは休憩時間などにやっているAndroidの作業ログを上げることにする。

=前置き=

 Androidでまず何を作るかを色々と考えた結果、「ツールならJavaだけでも作りやすそう」「素材があれば平日の方に作るゲームの幅も増える」などの理由により、まずは「ドット絵エディタ」を作ることにした。

 ということで、以下の本の3章〜4章を元にGUIの作成を進める。

=ドット絵エディタ=

 今回のドット絵エディタは以前の「色と陰を分けたドット絵エディタ」のAndroid版にする予定。前回は結局色々な問題があって「自分だけのツール」になってしまい、今回はさらに「マテリアルと模様も分ける」という感じで複雑化したため「さらに自分だけのツール」になってしまうかもしれない。

 ということで、初めてのAndroidアプリでもあるので公開できるかは極めて怪しいものの、作成過程は上げていくことにする。

=レイアウト=

 AndroidGUIの設定は、Flashmxmlの設定にかなり似ている。そのため、レイアウト部分はかなり簡単に作成できた。なので、特に書くことがない。

 そうでなくても基本部分は上の本に書いてあるので、以降ではドット絵エディタを作る際に調べる必要があったことを書く。

 ちなみに、基本的なレイアウトの確認については以下のページが参考になった。

 LinearLayoutとRelativeLayoutの使い方をまとめてみた - プログラミング雑記

=コンボボックス=

 今回のドット絵エディタでは「色」「陰」「マテリアル」「模様」を分けることにした。それぞれにキャンバスが用意してあるので、それを切り替える処理が欲しい。当初は左右にボタンを付けてスライドするように切り替えるデザインを考えていたものの、コンボボックスの方が分かりやすそうだったのでコンボボックスで作ることにした。

 コンボボックスの中身は固定なので、コードで動的に作る必要はない=XMLだけで完結すべきと考えて、それができる方法を探したところ以下のページが参考になった。

 Android 奔走記: Spinner を使ってみた

=ViewFlip=

 上のコンボボックスで項目を選んだら、対応するキャンバスに切り替えたい。つまり、同じ位置に複数のキャンバスを用意しておき、コンボボックスに応じてそのうちの一つだけを表示したい。別の言い方をすれば、タブのないタブウィンドウを作っておいて、プログラム側でウィンドウを切り替えたい。

 そういう処理がmxmlではViewStackで実現できたように、AndroidではViewFlipで実現できるらしい。ということで、以下のページが参考になった。

 http://techbooster.jpn.org/application/1816/

 コンボボックス(Spinner)では「何番目を選んだか」がpositionとしてゲットできるので、これをそのまま「何番目のViewを表示するか」という風にsetDisplayedChildで設定すればOK。この対応付けはJava側のコードとして書いた。もしかしたらXMLだけで記述する方法もあるかもしれないが、以前のキャラ絵エディタの作成の際に「XMLはレイアウトだけ。コード側で接続などを行う」という方針にした方が良さそうだったのでコードで接続している。接続は接続でまた別のXMLで設定できればそっちの方が良さそうだけども。

=自前のViewの作成=

 お絵かき用のキャンバスの挙動は「画面上でだいたい1cmくらいのマスを表示し、そこに触れると色を塗る」という感じの挙動で、さらに「法線に応じた明度を云々」という処理まで入るので独自のViewとして作成したい。

 ということで、「レイアウトはちゃんとXMLでやる」という方針でカスタムViewを作るための参考になったのは以下のページ。(他のページだとコードでレイアウトしてたりする)

 http://www.saturn.dti.ne.jp/~npaka/android/CustomViewEx/index.html

 ただ、自分用に書き直したものは何故かエラーが出てしまい、その対応で参考になったのは以下のページ。

 カスタムビューの実装 - プログラミング雑記

 どうやら全てのコンストラクタをちゃんと設定しないとエラーが出るらしい。Javaではデフォルトコンストラクタとか生成されないのか、という疑問は湧くがあまりJavaを突き詰める気もないのでこれ以上は調べずに次に進むことにする。

=次の予定=

 ここまではわりと一般的な処理だったけど、そろそろドット絵エディタ固有の処理に入っていくので、ひとまずここで一区切り。次のステップからは「タッチした部分のピクセルを塗る」などのドット絵エディタ固有の処理をメインにログを書いていく予定。