dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

9VAeスマホ版にマウス操作をつけたときの話

アニメ制作フリーソフト9VAeきゅうべえは、AfterEffectsやAdobe Animate のようなキーフレーム補間機能をもったベクトルグラフィックスソフトだ。パソコンだけでなく、スマホでも動く。

  • ところが「トレス動画の作成」Android版9VAeでやってみると、原画が指で隠れてしまうので、とても使いにくかった。
  • そこでマウス操作をつけると、パソコンと同じ操作ができるようになり、ずいぶん使いやすくなった。
  • iPhoneでも iOS(13.4以降) からBlueToothマウスが使える。

ここでは、9VAeスマホ版にマウスをつけたときの開発について紹介する。

マウスと指タッチが両方使えるデバイス

マウスと画面の指タッチが混在できるデバイスをまとめる。パソコンのタッチパッドはマウスに分類する。ユーザーインタフェースが関係するのは、指で画面が隠れる指タッチだ。ペンは画面を触る前に座標が取得できる電磁誘導ペン(ワコム)と、画面をさわるまで座標がわからない圧力ペンでは動作が違う。(アップルペンシルもさわるまで座標がとれない)

OS マウス 指(画面)タッチ ペン
Windows ○2in1 ワコムタブレットなど
Mac X ワコムタブレットなど
Android ○タッチペン
iPad ○アップルペンシル
iPhone iOS13.4以降 ○タッチペン

マウスと指タッチの違い:カーソル、ホバー、精度

マウス動作 言葉 指タッチ
左ボタンを押す ペンダウン 画面をタッチする
左ボタンを離す ペンアップ 画面から指をはなす
ボタンを離した状態でマウスを動かす ホバー(hover) X
ボタンを押した状態でマウスを動かす ドラッグ(drag) 画面を指で押したまま移動
  • 指タッチには、ホバーがない。そのため正確な位置にペンダウンできない。

  • そこでペンダウンからペンアップするまで画面を更新し、どの位置になるか調整できるようにして、ペンアップで処理を実行する。(ペンアップするまでボタンをキャンセルできるので、マウスでもそうすべき)

ホバー処理

アップルペンシルにもホバーがない。ペン先が見えるし、正確なので不要かもしれないが、ペンダウンする前に何がおこるか表示できるのは便利だ。指タッチにはホバーがない。iPhoneFlashを禁止したのはFlashがホバーをつかってたせいかもしれない。なお画面をさわらずに操作したい要望はあり、離れた位置の手の形で操作するなどが提案されているようだ。

9VAeでもホバー処理を使っていて便利である。 f:id:dnjiro:20200707171718g:plain

  • カーソルを移動させると画面下にボタンの説明や使い方が表示される
  • 図形選択時、ボタンを押す前に選択される図形がわかる。
  • ボタンをはなした状態で、選択した図形を移動し、離れた図形との重なりの上下関係を確認できる。確認したあと画面外に移動させると元の位置に戻る。
  • 点を順番にうって多角形を入力するとき、ボタンを押す前に線が見える。

これらの機能は、iPad/iPhone に移植できない。

指タッチはドラッグすると画面が隠れる

  • ボタンを押す前にカーソルで位置がわかるため、マウスは細かい選択ができる。

そのため、マウスと 指タッチでは反応範囲をかえる必要がある。さらに指で隠れないようにするため、以下の処理をもうけた。

f:id:dnjiro:20200707172405g:plain

  • 1点を移動する場合、点が指で隠れないように点のまわりに反応範囲を広げ、点が見えた状態で移動できるようにした。
  • 移動、拡大、回転、各種変形を行うときに、変形コマンドをメニューで選んだあと、変形処理の開始点をもう一度画面上で選べるようにした。これで好きな場所を確認しながら、移動、変形操作ができる。

これらマウス処理、タッチ専用処理を切り替えるために、内部的に、マウスか指タッチか区別する状態をもち、次の命令で切り替えるようにした。

動作 命令
指タッチモードにする qVAnTOUCHset
マウスモードにする qVAnMOUSEset

ペンダウンのときに指タッチかマウスかを調べて状態だけ切り替える。いつでも切り替えできる。

各OSによるイベント処理の違い

各OSごとにイベントの扱いが異なる。9VAe共通イベントに変換して処理している。

Windows(Win32) の場合:マウスイベントが指タッチでも使える

  • Windows はマウス用プログラムが無修正でタッチパネルで動くようにするため、指タッチでもマウスイベントが発生するようにした。
  • そのうえで、マウスかタッチを区別する、タッチの場合にマウスイベントをださないようにする手段が追加された。
動作 イベント
ペンダウン WM_LBUTTONDOWN
ペンアップ WM_LBUTTONUP
ホバー WM_MOUSEMOVE
ドラッグ WM_MOUSEMOVE
マウスとタッチの区別 GetMessageExtraInfo();
タッチの場合 MOUSEEVENTF_FROMTOUCH フラグがON

Android (DX library) の場合:マウスとタッチは別関数

  • 9VAeは Dxライブラリという C言語から呼び出せるライブラリをつかって、Android版を作っている。
  • DXライブラリはイベントループを自分で作成する。
  • マウスを取得する関数とタッチを取得する関数が異なる。最初はマウスを取得する関数でタッチ座標を取得していたが、途中からタッチ座標を取得する関数と別になり、アプリが動かなくなった。
動作 処理
タッチしている箇所の数 GetTouchInputNum()
タッチ座標の取得 GetTouchInput(0, &mousex, &mousey, NULL, NULL)
マウスボタンの状態取得 GetMouseInput()
マウス座標の取得 GetMousePoint(&mousex, &mousey)
  • ペンアップ、ペンダウンイベントは、状態変化を検出して、自分で作成。

iPhone/iPad : iOS(13.4以降) から可能、ホバー座標が取得できない?

AppleWindowsを比べるとおもしろい。まずあくまで1ボタンにこだわった。2ボタンやホイールが実際は便利なので、かわりに、2本指、3本指操作をつけ、マウスにも搭載。それをスマホと共通化。ディスプレイにタッチをつけるのは拒否しキーボードの上部にタッチを搭載。そのあとiPad にキーボードやマウスをつけた。

  • iPhoneでは、「設定」「アクセスビリティ」「タッチ」「AssistiveTouch」をONにし、そのページにある「デバイス」から「Bluetoothバイス」をタッチしペアリングすればマウスが使えるようになる。
  • iPhone の場合、Windowsとは逆にタッチアプリがマウスで動くようにした。そのためホバーに対するイベントがないようである。
動作 イベント
ペンダウン - (void)touchesBegan:(NSSet )touches withEvent:(UIEvent )event
ペンアップ - (void)touchesEnded:(NSSet )touches withEvent:(UIEvent )event
ホバー 対応するイベントがない
ドラッグ - (void)touchesMoved:(NSSet )touches withEvent:(UIEvent )event
マウスとタッチの区別 UITouch *touch = [touches anyObject];
マウスの場合 if([touch type]==UITouchTypeIndirectPointer)
  • 何も設定しなければ、マウスとタッチを区別できない。Info.plist に、UIApplicationSupportsIndirectInputEvents を追加すると [UITouch* type]がマウスの場合、UITouchTypeIndirectPointer になる。
動作 [touch type] メモ
画面タッチ UITouchTypeDirect
画面以外 UITouchTypeIndirect 説明がない
アップルペンシル UITouchTypePencil
マウス UITouchTypeIndirectPointer 13.4以降、Info.plist に設定必要

まとめ

マウスとタッチの扱いが、OSごとに違う。それぞれの環境で同じように動作するアプリを作ろうとすると、なかなかおもしろい。