読者です 読者をやめる 読者になる 読者になる

アールテクニカ地下ガレージ

アールテクニカ株式会社の製品開発・研究開発・日々の活動です

Apple Pencilを生かした書き味の実装

Author

羽田

Apple Pencilが登場してから暫く経ち、アプリ側が対応しているものも増えてきました。
指やApple Pencil以外の普通のタッチペンで書いた場合と、かなり書き味が違うのを実感された方は多いのではないでしょうか?
書き味の違いは意外と簡単に自分のプログラムに取り込む事が可能です。
RaywenderlichのApple Pencilサンプル のポイントを解説したいと思います。
※サンプル(swift)を私がObject Cで書き直したサンプルあります

f:id:artteknika_hada:20160901111049j:plain

1.Apple Pencilのサンプルプログラム

swiftで作成されたサンプルで、Apple Pencilによる重み付けされた書き味を実装されています。
※同じ機能をObjCで実装したサンプルはこちら

2.実装の解説

リンク先で全部説明されてしまっているのですが、ポイントとなる部分を解説していきます。

Apple Pencilの判定

・UITouch.type == UITouchTypeStylus
 Apple Pencilと判定できます。

・UITouch.fource
 圧力のパラメータです。こちらを反映すればApple Pencilの筆圧を反映することができます。
 Apple Pencil以外は0.0が返るので、Apple Pencilとそれ以外で処理分けにも使えます。

線の滑らかさと追尾性

f:id:artteknika_hada:20160901111043j:plain
・coalescedTouchesForTouch
 取得したポイントをそのまま描画するとカクカクした直線になってしまいますが、こちらの関数を通すとポイント間を滑らかに補正した情報に変換されます。

・predictedTouchesForTouch
 上の補正済みのポイントを描画すると、現在のペン先と少し離れた描画になってしまうので、ペン先とのズレを補間するための補正描画をします。
 この描画をすることでペン先の追尾性が上がったように見えます。

ペンの傾きによる描画切り替え

f:id:artteknika_hada:20160901111049j:plain
・UITouch.altitudeAngle
 ペンの傾きのパラメータで、ペン本体の傾きが取得できます。
 基準値以上に傾いた場合に、鉛筆を斜めにした塗りつぶしに切り替えます。

・lineWidthForShading
 Apple Pencilで取得できる情報を活かした、強弱のついた線の描画のポイントです。
 傾いた塗りつぶしの太さを取得する関数で、サンプルの中で一番難しい処理かもしれません。
 前の位置との差分から描画方向を計算し、それに対してペンの傾きを加えてラインの太さの強弱を計算しています。
 この処理によって鉛筆を倒してスライドした場合に生まれる太さの強弱がリアルに見えます。

3.まとめ

lineWidthForShadingがキモで、この実装を踏襲すれば書き心地が一段階upしたお絵かきが実装できます。

サンプルは鉛筆を意識したテクスチャと基準の太さは1つのみで実装されているので、ペンの切り替えでテクスチャや太さや色を切り替えるUIを追加すれば、それっぽいお絵かきソフトになっちゃいます。
Apple Pencilが使える環境という条件が少し厳しいですが、使える環境があるのであればサンプルをいじってみると楽しいのでオススメです。


・Object C版サンプル
 swift版を元にObject Cで書き直したサンプルです。



Author

ハダ

iOS/Android/Windows/Macなど各プラットフォームを手がけています。
前職は家庭用ゲームのプログラマでしたが、最近はスマホとPCでばかりゲームしています。

スポンサーリンク