2022/05/31(火)Processing AndroidModeのcontrolP5ボタン
それは、定番なProcessingGUIライブラリのcontrolP5ライブラリをAndroidModeで利用する場合、ボタンイベントが所望の動作にならないというものです。ざっと調べた結果仕様っぽかったので、手軽に使いたい自分には悲しい状況になりました。
どうやらボタンイベントに関する挙動で、マウスXY/クリックによるボタン操作と画面タップによるボタン操作の違いに起因してるようです。
他の方法としては正攻法なAndroidSDKのコンポーネントを使うだとかあるみたいなのですが、難しいことは分かりませんし、カジュアルに使えてアプリ作っていきたいので今回簡易的にボタンコンポーネントクラスを作りました。
- TapButton.pde
public class TapButton { float x; float y; float w; float h; String s; int fontsize; boolean visible; TapButton(float _x, float _y, float _w, float _h, String _s) { x = _x; y = _y; w = _w; h = _h; s = _s; fontsize = int(w / s.length()); visible = true; } void Draw() { if (visible) { rectMode(CENTER); textAlign(CENTER, CENTER); textSize(fontsize); fill(255); rect(x, y, w, h); fill(0); text(s, x, y, w, h); } } void Visible(boolean b) { visible = b; } boolean Tapped(TouchEvent touchEvent) { int tapNum = touchEvent . getNumPointers( ) ; float tap_x, tap_y; if (0 < tapNum) { tap_x = touchEvent . getPointer( 0 ).x ; tap_y = touchEvent . getPointer( 0 ).y ; if ( abs(tap_x - this.x) < (w/2) && abs(tap_y - this.y) < (h/2) && this.visible) { return true; } } return false; } }
- Test.pde
import android.os.Bundle; import android.view.WindowManager; static int LetterBox = 16; //Letterbox of application draw area int sizeW, sizeH; boolean flag_backpress = false;//back button press flag boolean flag_exit = false; TapButton tb1 = new TapButton(500, 400, 300, 100, "button1"); TapButton tb2 = new TapButton(500, 600, 300, 100, "button2"); public void settings() { sizeW = displayWidth - LetterBox; sizeH = displayHeight - LetterBox; size(sizeW, sizeH); } public void setup() { frameRate(30); } void backPressed() { flag_backpress = true; } public void draw() { //DRAWING PROCESS -------------------------------------------------------------- background(150); if (mousePressed) { textSize(50); fill(0); textAlign(TOP, LEFT); text(Integer.toString(mouseX) + "," + Integer.toString(mouseY), 0, 500); } textSize(32); fill(0); textAlign(TOP, LEFT); text(Integer.toString(displayWidth), 0, 150); text(Integer.toString(displayHeight), 300, 150); ellipseMode(CENTER); // Set ellipseMode to CENTER fill(100); // Set fill to gray ellipse(mouseX, mouseY, 100, 100); // Draw gray ellipse using CENTER mode //TapButton draw --------------------------------------------------------------- tb1.Draw(); tb2.Draw(); //MAIN LOOP PROCESS ------------------------------------------------------------ if (flag_backpress) { flag_backpress = false; textAlign(CENTER, CENTER); textSize(100); fill(255); rect(0, sizeH/2 - 80, sizeW, 160, 32); fill(0); text("Exiting...", sizeW/2, sizeH/2); flag_exit = true; } else if (flag_exit) { delay(1000); exit(); } } public void touchStarted(TouchEvent touchEvent) { int tapNum = touchEvent . getNumPointers( ) ; float x = touchEvent . getPointer( 0 ).x ; float y = touchEvent . getPointer( 0 ).y ; //TapButton if (tb1.Tapped(touchEvent)) { tb1.Visible(false); } if (tb2.Tapped(touchEvent)) { tb1.Visible(true); } }
グローバル変数の
TapButton tb1 = new TapButton(500, 400, 300, 100, "button1");
でボタンを定義して、Draw()内の
tb1.Draw();
で描画、タップイベントは
public void touchStarted(TouchEvent touchEvent)内で、
if (tb1.Tapped(touchEvent))
{
tb1.Visible(false);
}
のようにifで判定してタップ時の処理を書きます。(ソースコード一部修正：2022/6/12)
