ステップ４：お絵かき処理
＝前置き＝
必要なパーツの設定方法は前回のステップでだいたいできた。今回からはもう少しドット絵エディタ特有の設定をしていく。
今回のステップは例の本はあまり使わなかったけど、「キャンバスはボタンを並べたやつを使った方が良いのかな」とか考えた際に「数独で試したけどめんどいよ」という記述があったのを思い出すなどして役に立つ部分もあった。
＝お絵かき処理＝
まずは普通のドット絵エディタとして「お絵かき処理」が欲しい。つまり、タッチした位置に色を塗るようにしたい。しかし、たったそれだけのことでも真面目にやると複雑なので、いくつかのステップに分けて考える。
まず、「表示とデータは違う」と考える。データの１ピクセルを普通にそのまま表示すると、かなり小さくなってしまう。見にくいのもさることながら、狙ったピクセルをタッチで更新するのに無理がある。そのため、表示はデータを何倍かしたものを使う。
ということで、「データはどう持てば良いか」「拡大表示はどうすれば良いか」「タッチ処理はどうすれば良いか」に分けて考える。
＝データ＝
AndroidのデータはBitmapで持つことにする。これはAS3のBitmapDataとほぼ同じ感じ。なので特に書くことがない。
生成方法については以下のページの中盤あたりが参考になった。
＝拡大表示＝
普通の表示方法は先ほどのページに書いてあるものの、今回必要なものは拡大表示での表示方法。これは特に難しくなく、上のページで使われてる関数drawBitmapを(Canvasなどの単語と一緒に)ググったらリファレンスが出てきたので、それを参考にする。
drawBitmapは単純な位置指定の他にMatrix指定のものがあった。これなら拡大表示ができるし、将来的に必要そうな「表示位置をズラす処理」にも対応できそう。ということで、これを使うことにする。
ただ、完全に自分用と割り切れば別だけど、「どの程度拡大すれば良いか」というのは端末ごとに異なるのが困る。タッチで操作できる最小単位は1cm×1cmくらいっぽいけど、Bitmapを普通に１０倍とかすると表示は「１０ピクセル」になって端末ごとに長さが変化してしまう。AndroidではGUIの長さを"dip"という「長さ」で設定する方法があるので、それをコードでも使いたい。ということで以下のページが参考になった。
http://handalab.com/android/dev-2/device/149/
これを使えば「データの１ピクセルが1dipになるように拡大する」という処理が可能になる。単位が独特なのが難点だけど。
＝タッチ処理＝
あとはタッチした位置にあるピクセルを変更し、Bitmapを表示すれば良い。
タッチイベント自体は単純にonTouchEventをオーバライドするだけなので、以下あたりを参考にする。
http://www.adakoda.com/android/000123.html
将来的にはちゃんとラインとか引けた方が良いかもしれないが、それは他のツールと一緒にやることにして、ここでは単にピクセルを塗りつぶすことにする。
ただし、ここで得られるタッチ座標は「表示上での座標」なので、これを「データ上の座標」にするため、上で使った倍率で割った値を使う必要がある。
あと、表示データを更新する場合はinvalidateを呼ばないといけないらしいので、更新があった場合はこれを呼ぶことにすればOK。
＝予定＝
ここまでは「普通のドット絵エディタ」で必要な処理だった。次からはだんだんと「独自HLS計算」などの「自分用ドットエディタ」で必要な処理に入っていく。
