CloverPaint雑記

CloverPaintの解説・開発状況・内部仕様・利用法などについてつらつらと

ストローク遅延レンダ

久々のアップデートです。

 

現在レイヤー関連の大幅な機能追加作業を行っていますが、仕様が大きく時間がかかっています。ビルド環境が変更されていてバグ修正部分だけを公開するのも難しく、ストロークやイメージ処理のエンジンの深いところから変わっていて非常に不安定なので公開したくてもできなかったというのが実情です。

最近ようやくエンジンを変えた事で発生していた不安定さが解消されてきたので、レイヤー関連の処理を切り離し、公開できる部分をまとめて今回のアップデート内容としました。

 

というわけでメジャーアップデートではなくバグ修正と細かい機能追加なのですが、主な変更点を備忘録として以下にまとめておきます。

 

 

ストローク遅延レンダの実装

ブラシをキャンバスのイメージデータに描き込む前に、ダミーとしてスプライトを表示しておく機能です。

ペイントソフトの多くは基本的に、ペンストロークに沿ってブラシ形状のデータを書き込むことで画像を描いていくわけですが、太いブラシや複雑な計算が必要な混合ブラシ等ではどうしても書き込みに遅延が発生します。そこで実際の書き込みの前段階、ブラシ形状をどこに書き込むかのデータだけを先に計算してそこにダミーのスプライトを表示しておくことで、見た目の遅延を少なくしようという考え方です。

 

表示できるのは単色の単純なスプライトを回転させる程度のものなので、テクスチャを貼っていたり混合など複雑なブラシでは一時的に全く違ったイメージが表示されることになりますが、あたりがつくので心理的には無いより良いと思われます。

 

ストローク遅延レンダは、以下のオプションでその機能を調整できます。

 

・ スプライト表示

ストローク遅延レンダ機能自体のON/OFFスイッチです

 

・ スプライト色の固定/スプライト表示色

スプライト色の固定をOFFにすると、現在のブラシ色でスプライトを表示します。ONにした場合はスプライト表示色で設定した色が常にスプライトの色として使用されます。

 

 ・ 暫定ストローク

ストローク遅延レンダは、キャンバスイメージへの描き込みがまだ終わっていない部分をスプライトで表示するものですが、これをONにするとスプライン補間などで必要なデータが揃っていないために確定していないストローク部分もスプライトで表示するようになります

 

ストローク予測

これまでのストロークポイントの動きから、その先のポイントを予測してスプライトを表示します。(この機能はCloverSC寄付版を購入・インストールしている場合のみ有効になります)

これまでワンショットUndoとして実装していた機能は予測したポイント部分のストロークもキャンバスイメージへの描き込みで実現していましたが、余分なストロークを毎回描いては消す処理が発生して極端に重くなるため、かなり細くて軽いブラシでしか満足な動作が得られませんでした。

そのため今回ストローク遅延レンダ実装と同時に過去の機能を削除し、こちらのストローク遅延レンダによるダミースプライト表示によるストローク予測表示に変更しました。

ただし、個々のブラシのパラメータは有効なので、ブラシ側のワンショットUndoに関する設定をしておかなければこちらのスイッチは無効です。こちらはワンショットUndoをまとめてON/OFFするマスタースイッチだと考えてください。

 

ストローク遅延カーソル

現在キャンバスイメージに実際に描画されているストロークの最新部分と、ダミーのスプライトによるストロークの境界部分にカーソルを表示する機能のON/OFFスイッチです。

 

ストローク遅延レンダ進行バー

ストローク遅延レンダーが動いてる間、その進行度合いを示すバーのON/OFFスイッチです。

 

・ マルチ・ストローク遅延

前回のストロークレンダリングが終わってない状態で、次のストロークを描ける機能のON/OFFスイッチです。

 

ストローク遅延レンダーが動いている間、レイヤー操作等ストロークの描画に影響を与える機能は一時的に使えなくなります。レンダリングが終わるまでお待ち下さい。

 

 

大きな画像を表示した時のパフォーマンスを改善

Clover Paintは半透明ピクセルを含むアイコンの編集や、モバイル端末でのラフスケッチなどの用途を想定してデザインされています。「4000pixelを超えるような大きな画像を全画面表示しながら複数レイヤーで着色する」といった用途は当初想定してない利用シーンなのですが、多数のレイヤーでメモリ効率良く動作するよう考えて設計したために、そのように利用するユーザーが一定数存在するようです。

 

そのため当初50%に設定していた縮小制限を画像サイズに合わせて緩和する措置を入れるなどして対応していましたが、表示する画像が大きくなると描画処理が重くなりフレームレートが下がってカクカクする(特にナビ表示など画面全体が入るウインドウを複数表示した場合に顕著)という問題が発生していました。

 

今回キャンバスの表示データ構成と描画エンジンを修正することでこの問題を解決したため、大きな画像で重くなる現象はなくなりました。同時にこれまで50%が下限だった縮小制限のオプションを10%に緩和しました。

 

 

その他修正点

細かい部分ではレイヤーのクリップオプション項目が増えています。

修正されたバグも多いのですが、エンジンを変えたために見た目機能は変わらなくても様々な部分で修正が入っています。そのため新たにバグが発生している部分もあるかもしれません。その場合はお知らせください

 

定規ツール実装

Clover Paint v1.24をアップしました。

今回のアップデートではAndroid 5.0 Lollipopで起動しない問題の修正と、新しい機能として定規ツールを実装しています。

基本的にはごく普通の定規ツールですが、多少特殊な操作もありますので、以下簡単に説明しておきます。

 

まず、以下のように「ツール選択」から「定規」を選択します。

f:id:CloverPaint:20141120152340p:plain

 

 

以下のように、画面中央に定規ツールのCloverアイコンが作成されます。

このアイコンを選択していると、画面上に定規ツールが表示され、利用することができます。非選択にすれば定規の現在のパラメータを保存したまま、一時的に無効にすることができます。

f:id:CloverPaint:20141120152544p:plain

定規は上の画面で水色の部分にストロークを当てた時にのみ、機能します。

他の部分では定規を出したまま、普通にフリーハンドの描画ができます。

また、四角のボタンは並行移動(原点)、丸いボタンは方向指定(取手)となります。

大まかに分けて定規には、直線・集中線・円・楕円の種類がありますが、直線の場合のみ、黄色い帯が表示されます。この部分を使って一本指で並行移動、二本指(ピンチ)で回転操作を行うこともできます。

 

画面左側に現在フォーカスのある定規(Cloverアイコン)のパラメータを操作することができます。

f:id:CloverPaint:20141120152921p:plain

上から

・シェイプの種類

ストロークが定規から影響を受ける範囲

・操作つまみ

・表示

・パラメータ数値

これらの設定ができます。

シェイプの種類設定から、定規(Cloverアイコン)の複製を行うこともできます。

  

f:id:CloverPaint:20141120153743p:plain

定規Cloverアイコンは複数同時に選択することができます。

左上が点灯しているアイコンが選択された状態です。

アイコンが明るいものはフォーカスを持っていて、上述のパラメータ操作ウインドウや操作つまみが表示されます。

選択状態ではフォーカスがなくても水色の部分が有効です。また、「操作設定」内の「吸着」を有効にすると、他の定規ツールのライン上や制御点に現在操作中の制御点がくっつくようになります。

 

だいたいの操作は以上の通りです。

「平行線・同心円」を選択した場合は、同時に範囲を「全体」に指定して、画面全体でストロークが影響を受けるようにして利用してください。(集中線だけは例外的に範囲指定がなんであっても画面全体が影響範囲になります)

 

デジタイザーを利用されている場合、これまではスタイラス設定内の「指でのUI操作を禁止」や「一本指でのキャンバス操作」の指定により、自動的にキャンバス内のボタン操作(定規のボタン・帯・変形ツールのボタン等)も同時に無効になっていましたが、このバージョンから「指でのキャンバス上のUI操作を禁止」として別のスイッチになりました。通常は禁止になっていませんので、禁止したい場合はONにしておいてください。

 

また、定規ツール用のショートカット操作も追加されています。左手デバイス等を利用されている場合は、こちらもご確認ください。

 

ポストストローク編集機能を実装

Clover Paint v1.23では、新しい機能「ポストストローク編集」が実装されました。

 

これはラスター系ツールに一部ベクタ系ツールの考え方を採り入れたものです。

どういうものかというと、ペンで線を引いた後に、その線を少し移動させたり、太さや色を変えたり、さらには制御点を細かく移動し自由に曲げる事もできます。

f:id:CloverPaint:20140406225542p:plain

 

なお、ツールのUI設計仕様の都合上、この機能はEfT版Clover Paintに限定した機能となっています。(EfT版機能は2014年4月末日まで試用可能に設定してあります)

 

ペンを入れた引いた後で、

「あ、ちょっと開始位置がズレた」

「ここの線の太さがちょっと気に喰わない」

「少し斜めになってしまった」

「ここだけ線がブレてる他は完璧なのに」

などということはありませんか?私はしょっちゅうです。

その度にUndoしたり、消しゴムで細かく消したりするのは、とても面倒です。

そのせいで私は綺麗な線でペン入れするのは諦め、これまでラフくらいしか描いていませんでした。

「ポストストローク編集」はUndo、消しゴムの出番をペン入れに関しては完全に無くす威力を持ったツールになっています。

 

ポストストローク編集は線を描いた後に「ツール選択→ペン→線の編集」で起動します。

 

内部的には「簡易モード」と「詳細モード」の2つに分かれています。

 

「簡易モード」はストローク全体に影響するパラメータを設定します

「詳細モード」ではそれに加え、Knot(制御点)単位のパラメータを設定できます

 

「簡易モード」

移動・回転・スケールの設定と、パースを伴った自由変形が行えます。

色やブラシの設定もここで行えます。

 

f:id:CloverPaint:20140406230406p:plain

特に重要なのは、左下ウインドウにある「補正」ボタンです。

これをONにすると、右下に出ている縦長のウインドウが出てきます。

ここでリアルタイムに線の調子を確認しながら、「手ぶれ補正」のパラメータを変更できます。

ここでカスタムを選択し、Knot遅延生成タイプを「一定時間間隔」または「一定距離間隔」を選ぶことでKnotの間隔を調整できます。簡易モードで調整したKnotやパラメータはその後詳細モードに引き継がれます。詳細モードでは遅延パラメータを変更することはできませんので、ここでKnotをその後編集しやすい数に調整しておくことをお勧めします。(というか、元々そのために実装したパラメータです)

「初期化」ボタンを押すと、「簡易モード」で行った編集は破棄され、元のストロークの状態に戻ります。ポストストローク編集では、このモードにローカルなUndo情報を持っていますが、それもリセットされるのでご注意ください。

下の「モード選択」を選ぶと詳細モードに移行できます。

 

「詳細モード」

 詳細モードではKnot(制御点)単位での移動や筆圧・経過時間の調整ができます。

また、不要なKnotを消してストロークを短くしたり、一部にKnotを追加して、きめ細かな曲線の制御を行う事もできます。 

f:id:CloverPaint:20140406231722p:plain

 

「詳細モード」は「簡易モード」の変更を引き継ぎます。編集したあとで「初期化」ボタンを押すと「簡易モード」の状態に初期化されますのでご注意ください。

ペイントモードでの初期ストローク状態まで戻したい場合は、一度「簡易モード」に戻って初期化ボタンを押す必要があります。

また、ついでに説明しておくと、ポストストローク編集はUndoスタックに積まれた、「やり直し」用のストローク情報の内容を読み取り、書き換えることで実現しています。そのため、このツールでの編集結果はメインのUndo履歴としては残りません。(残そうと思えば残せますが・・・まあ、仕様です)また、Undoスタック内のストローク情報を利用するため、Undoスタックのトップがペンストロークの場合ならば起動できます。3つのストロークを描いた後に、最初のストロークを編集したいと気づいた時にはUndoで戻って編集できます。(編集するとその後描いた2つのストロークは消えてしまいますが)

 

さて、「詳細モード」は以下7つのサブツールで成り立っています。

 

ブラシ  Knotごとの頂点位置を移動します

変形  範囲選択した部分のKnotをまとめて移動・回転・スケールします

フリー  範囲選択した部分のKnotをまとめてパース付き自由変形します

筆圧  Knotの筆圧を変えます

時間  Knotの時間を変えます

Knot追加  Knotを追加します

Knot削除  Knotを削除します

 

「Kt選択」ボタンを押すと、頂点範囲選択モードになり、どのツールを選んでいる時でもキャンバス上のKnotをなぞり、その選択範囲を指定できます。

範囲選択に意味があるツールでは、下のシーケンサー画面の上にあるルーラー部分をなぞる事でも範囲選択を行えます。 

f:id:CloverPaint:20140406233341p:plain

ルーラーに表示されているのは、ストローク開始からの経過時間(ミリ秒単位)です。

また、シーケンサー画面上で上下にドラッグすると、タイムスケールを変える事ができます。

 

ブラシ

f:id:CloverPaint:20140407012446p:plain

 

「ブラシ」サブツールを選択すると、ブラシの太さや種類のパラメータを設定するウインドウが出ます。「つまむ」はブラシのタッチ位置に一番近い、ストローク上の点を引っ張るイメージでKnotを移動します。「移動」はブラシの範囲内のKnotをタッチ位置から相対移動させます。「スマッジ」はブラシ移動中に範囲内に触れたKnotをブラシ移動量だけ移動させます。「滑らかに」はブラシ移動量だけ、前後のKnotとのガウスぼかしを通し、滑らかなカーブにします。

通常は「つまむ」と「滑らかに」の2つしか使わないと思われます。

太さで影響範囲を決め、「つまむ」の場合は、「ぼかし硬さ」により、ストロークの曲げ具合が調整できます。硬くするとタッチした部分だけを引っ張る感じになり、柔らかくすると範囲境界あたりでグニャリと曲がる感じになります。

「滑らかに」は「つまむ」でちょっと凸凹になった時に、仕上げとして使うといいでしょう。

ブラシツールでは、選択範囲は影響するKnotのマスクとして扱われます。あまり利用価値はないでしょうが・・・

 

変形

「変形」サブツールは選択したKnot範囲にのみ、移動・回転・スケールをかけることができます。

 

フリー

「フリー」サブツールは選択したKnot範囲にのみ、自由変形をかけることができます。 

 

筆圧

「筆圧」サブツールはKnot単位での筆圧を設定できます。

このモードではキャンバス上のKnot操作は常に範囲選択モードになります。

そして範囲選択領域があるときには、シーケンサの横にパラメータをまとめて操作するためのレンジバーがあらわれます。

 オフセット すべてのKnotの筆圧を一定量上下させます

 乗算 すべてのKnotの筆圧に一定数を乗算します。負の場合は上下が逆転します

 フェード 時間によって段階的に変化する値を乗算します

 硬さ いまある値をべき乗数して変化を硬く・柔らかくします

 滑らかに 前後の筆圧にガウスぼかしをかけて滑らかにします

 

なお、選択範囲に関係なく、シーケンサ上に表示されているKnotを上下すれば1Knot毎の筆圧を設定できます。

 

※テクニック備考

まず、全体を選択してオフセットを上げ、すべて1にします。

フェードを1.0、次にフェードを-1.0かけます。

乗算2.0を二度かけます。

これで中央が膨らんだカーブを作ることができます。

あとは硬さを好みに調整すれば、綺麗な入り抜きになります。

 

時間

シーケンサ上で左右にKnotを動かすとKnotの時間を移動させることが出来ます。

速度による動的効果のついたブラシ(組み込みブラシではCloverSC)で影響が出ますが、あまり利用することはないでしょう。

 

Knot追加

他のKnotの中間位置に、Knotを追加できます。

カーブを細かく曲げたい時、太さを細かく指定したい時、いまあるKnotでは表現しきれない場合に利用してください。キャンバス上のストロークを指定、あるいはシーケンサのルーラーからも追加できます。

 

Knot削除

余計なKnotがあった場合、それを削除できます。

キャンバス上のストローク範囲、あるいはシーケンサのルーラーの範囲指定で削除するKnotを指定できます。

 

「None/BSpline/C-R」ボタン

Knotを補間するときのカーブのアルゴリズムを指定します。

Noneを選ぶと単純な直線になります。

BSplineはKnotの付近を通る滑らかな曲線を描きます。

C-RはKnot上を必ず通る曲線を描きます。

Knotが密な場合はあまり違いはありませんが、補正パラメータを調整するなどしてKnotを少なくすると、かなりの違いが出てきます。通常はBSplineかC-Rのどちらか扱い易い方を使うと良いでしょう。

「更新」ボタン

このボタンのチェックを外すと、常にストロークを簡易ポリゴン表示するようになります。

チェックしている場合はパラメータ変更中のみ簡易表示され、変更が終わると正式なラスタライズが行われます。

「ライン」ボタン

Knot間をつなぐラインの表示ON/OFFです 

 

 

 その他追加機能

ポストストローク編集では「簡易・詳細」モードの表示ボタンの中に、Cloverアイコン作成ボタンがあります。また、このバージョンからセーブ・範囲選択・移動・変形ツールに関してもCloverアイコンを作成できるようになりました。ご活用ください。 

 

また、移動・変形ツールを、「範囲選択→コピーor切り取り」後の自動遷移(キーコンフィグから動作を設定可能)により起動した場合、「適用」ボタンにドロップダウンボタンで「+統合」ボタンが表示されます。

この統合ボタンを押すと、通常の移動・変形動作の後に「選択範囲のクリア」「選択中レイヤーの下との統合」「ペイントモードに戻る」の3つの動作が自動的に行われます。場合により使い分けてください。

 

手ぶれ補正実装

Clover Paint v1.22を公開しました。

このバージョンでは新しく「手ぶれ補正」機能が実装されています。

この手ぶれ補正機能は、非常に強力なカスタマイズ機能を備えていて、ちょっとした”ひずみ”の修正はもちろん、設定によっては品質の悪いタッチパネルでの線ヨレまで完全に除去できます。

 

手ぶれ補正を使うには適当なブラシのメニューを開きます。

f:id:CloverPaint:20140203210916p:plain

 

「手ぶれ補正」ボタン

設定画面を開きます。(現状、設定情報はグローバルに保存されます。)

 

「+手ぶれ補正」ボタン

選択中のブラシの、手ぶれ補正ON/OFFを切り替えるCloverショートカットアイコンを作成します。

f:id:CloverPaint:20140203211702p:plain

手ぶれ補正のON/OFFはブラシ設定内にスイッチがありますが、これをキャンバス上に作って操作した方が便利だと思われます。

 

 

手ぶれ補正の設定画面

「手ぶれ補正」ボタンを選択すると、このような設定画面が開きます。

f:id:CloverPaint:20140203214339p:plain

 

 

通常は一番上にある「手ぶれ補正タイプの簡易選択」から選べば十分だと思われます。

左が一番軽く弱い補正、右になるほど強い補正になると考えて間違いありません。

 

オススメの設定は、

 

・ラフに近い時 →「頂点座標平坦化(ぼかし)」
デジタイザーを使ったペン入れ →「慣性運動タイプ・手ぶれ補正(弱)」
・タッチパネル(指)でのペン入れ → 「慣性運動タイプ・手ぶれ補正(強)」

 

・・・こんな感じです。

 

ちょっとここが違う・・・という場合は「カスタム設定」で細かく指定する事もできます。

 

カスタム設定のパラメータ詳細

 

カスタム設定ではすべてのパラメータを細かく設定することができます。

まず、Clover Paintの手ぶれ補正は、内部処理的に3つの独立したステージから成り立っています。

・頂点座標前処理(ガウスぼかし)

ストローク変化(遅延処理または慣性運動による) 

・Knot生成(Knot[ストロークの制御点]を、手ぶれ補正処理でカスタム生成)

 

独立しているので、これらの処理はそれぞれ個別に有効/無効にできます。 

 

 

・頂点座標前処理

これは最も単純な処理です。

ちょっとしたストロークの歪みを補正する効果が期待できます。

前後の頂点座標を「ガウスぼかし」という少し重みをつけて平均を取る処理を通すことで、滑らかにしています。0でガウスぼかしなし、1で前後1頂点の平均、以下同様です。

 

ストローク変化

これは実際のペン先座標から、ストロークをわざと遅延させて滑らかにすることを狙った処理です。効果を強くすると遅延も大きくなりますが、タッチパネルでの線ヨレも完全に除去できるなど、効果も絶大です。以下のパラメータを自分で調整し、自分の感覚に合った設定を探すのも面白いでしょう。

遅延処理タイプは常に今のペン先に向かってストロークが進行しますが、慣性運動タイプではストローク自体に加速度運動がついています。通常は慣性運動の方が滑らかになると思われますが、操作しやすい方でどうぞ。

 

筆圧の遅延補間の変化硬さ

ストローク変化が有効な時、筆圧の変化もストロークに合わせて遅延します。遅延から追いつくときに、どのようなカーブを描いて筆圧が変化するかをここで設定できます。

 

追従割合(遅延追従用)

一回のポイント処理で、どの程度の割合、遅延したストロークからペン先まで移動するかをここで指定します。ここで指定した値が大きくなるほど遅延は少なくなります。

 

最低速度 (遅延追従用)

追従割合により計算した移動距離が、ここで指定した最低速度より小さい場合、この最低速度に合わせます。

 

加速度の加算量(慣性運動用)

加速度の強さを指定します。ここで指定した値と、現在のストロークからペン先までの距離を乗算したものが、加速度の強度になります。

 

空気抵抗(慣性運動用)

慣性運動にかかる抵抗値のうち、現在の速度に比例して大きくなる抵抗値を指定します。

 

摩擦抵抗(慣性運動用)

慣性運動にかかる抵抗値のうち、速度に関係ない抵抗値を指定します。

 

はらい制御用パラメータ

ストローク変化では遅延している分のストロークを、ペンが離れた時点で自動的に生成する機能があります。

これを”はらい”と呼んでいます。

はらい部分ではストローク末端に向けて筆圧が0になるようなカーブを描き、さらにそれまでのストロークの回転に合わせてはらい部分も自動回転します。

 
はらいの長さ

はらいの長さを指定します。1が標準で0だと完全になくなります。

 

はらいの曲率減衰

Knot自動生成毎に、この割合だけ回転を減衰させます。

 

はらいの方向補正

はらいの向いている方向を、実際のペンストロークの最後に払った方向に向かうよう補正します。Knot自動生成毎にここで指定した割合だけ補正されます。

 

 

・Knot生成

ストロークの制御点を指定した一定間隔で生成することで、滑らかにします。

通常タッチパネルでは16ms前後間隔で頂点座標が送られてきます。

デジタイザーでは通常8ms前後、AT703では5ms)

Clover Paintはこの頂点座標をそのままストロークの制御点として扱っていましたが、ここでKnot生成することができるようになりました。

指定した一定時間や一定距離間隔でKnotを生成することで制御点を減らし、見かけ滑らかな線にすることができます。(ただし、特に一定距離での生成を指定した場合、細かなカーブ表現はできなくなります)

 

以上です。

相変わらず非常に調整項目の多いツールになりました。

こだわる人は好みの設定になるよう調整してみてください。

Clover Paint開発の経緯とEfTについて

Clover Paintのv1.00を公開してから、今日で(この記事公開は一日遅れましたが)ちょうど一年になります。

いい機会なので、私自身何を考えてClover Paintを作っていたのか、どうしてこんなツールになったのかを、ここで出来る限り思い出し、振り返ってみたいと思います。

EfT版のアプリ内課金が比較的高い理由についてもその流れの中で説明します。

 

わりとウザくて泥臭い自分語りになっています。

ツールを利用するうえで役立つ情報は何もないので、興味がない人はここで読むのを中断した方が良いでしょう(時間の無駄です)

 

 

Androidアプリ開発以前

Clover Paintに連なる、Androidでのアプリ開発を始めたのは2012年4月のことです。

それまでフリーのゲームプログラマーとして色々な会社を転々としていた私ですが、とあるエンタメ系ネット企業(微妙な言い回し……)の外注仕事がクライアントの組織改編の都合(?)で三ヶ月弱で打ち切られることになり、その仕事の後に始めたのがAndroidアプリ開発ということになります。

 

 

それまではコンシューマ系ゲーム会社でプログラマーとして仕事をすることが多かったのですが、市場規模の推移を見れば一目瞭然、昨今そんな仕事は殆どありません。(あるとしてもパチスロ組み込み系が殆ど。それもその頃はすでに落ち目)そもそも私自身が据え置きコンシューマ系ゲームをやらなくなって久しいので、自分が楽しめない業界の仕事を無理してやってもなぁ……というのが本音でした。

そこで心機一転、ネット系の会社もいいんじゃないかと思い、その会社の扉を叩いたのがその前の年、2011年の11月頃なわけですが、実際に配置されたのはPS Vita用のアプリ制作チームでした。職歴はちょっとした事では振り払えないものです。(完全に違う業界に行けば別でしょうが) 

 

その会社の外注仕事が2012年3月末で終わり、次の仕事はどうするかと考えた時に思い出したのが、その会社の人事というかディレクター系の人に連絡を取って最初に話して痛感したことでした。つまり、新しく仕事を探すには相手にわかりやすいよう、自分の技術力を示す個人としての作品を作っておいた方がいいな、ということです。 

その頃の流行りと言えばDeNAやグリーです。据え置きコンシューマ系畑の人間として、iモード等携帯アプリの仕事なんかはあまりにもつまらなく思え、それまで蹴っていたのですが、昨今はスマートフォンなどというものが流行っていて、近い将来かなり本格的なゲームがスマートフォンで動くようになるだろう……という予想もありました。 

それならツテを辿ってiPhoneAndroidの開発をしている会社に……と普通はなるんでしょうが、そこでさっきの「何か作品を作っておいたほうが話が早いのではないか?あらかじめ少しは環境に慣れておいた方がいいのではないか?」というような考えが浮かんできて、スマホなら自分一人で開発環境も揃えられるし、なんか軽く簡単なゲームでも作ってから、改めて仕事を探すか……ということになったわけです。

 

 Android開発当初

とりあえず一人で作れるゲームでスマホ向きなもの・・・ということで色々考えた末に、比較的グラフィックパーツが少なくてもそれなりのゲーム性が確保できるストラテジ系のゲームにしてはどうだろうと考えました。

最初はターン制で、その後操作に慣れたら徐々にリアルタイム性を採り入れて操作とゲーム難易度を上げていく・・・そんな感じです。

しかし、そう当たりをつけてAndroidの開発環境を見てみると、UIまわりで環境整備されているのはJavaでの開発だけで、しかもJavaを使うと重すぎてゲームにならないということがわかってきました。C++など、いわゆるネイティブ言語と呼ばれる環境と比べると、場合によっては数百倍の速度差が出るし、JavaOpenGL(3D表示用のAPIですが、2DでもGPUを叩くときに使う)を使うと定期的にガベージコレクションが発生してカクカクするのです。

 

一応AndroidにもNDKといってC/C++で開発できる環境が用意されてはいるのですが、これは本当にむき出しの通常の開発環境だけで、Androidでのサポートライブラリは一切ありません。フォントを読みだして文字を表示することすら、すべて自前で用意しなければならない……そんな状態です。しかし私は元々コンシューマ系ゲーム開発者で、そんな事はむしろあたりまえの世界でずっと生きてきたので、そこでは臆しません。

 

というわけで、C/C++の環境で、フォント表示や簡単なゲーム用のメニューやマップを動かせるようにしようという方針を立てました。しかし、そこから作るとなるとちょっとしたストラテジ系ゲームを作るということすら、かなり遠い目標になります。

 

そこでマップやメニュー表示を作りながら、それを組み合わせて出来る1番手軽なアプリはなんだろう?と考えた所、ああ、手書きメモアプリというジャンルがあるじゃないかと思い至ったのが、後々Clover Paintを開発することになる決定的な瞬間だったと思われます。

 

アプリ開発進捗

私は毎日テキストにその日やった作業を書き残すようにしています。

f:id:CloverPaint:20140120115629p:plain

そのテキストを検索してみると、メモ版の記述が最初に見つかったのは2012年5月11日でした。この頃にはすでにメモを作ろうという計画を持っていて、プロジェクトを作ったということはCloverMemoというアプリ名もこの辺りで決定していたものと思われます。4月頭からなので1ヶ月と11日で、OpenGLを使ってキャンバスを表示し、ピンチ操作を実装するところまで作っていたようです。

 

その後メモ版がリリースされるのは11月29日なのですが、Paint版も作ろうという方針が決まったのはそのだいぶ前で(前述のテキストで最初にPaint版に関する言及があらわれたのが8月20日なので)8月頃のようです。これにはメモを作っていてそれが結構面白くなってきたのと、Androidで個人開発の有料ペイントアプリが結構売れていた(LayerPaintがその頃すでに1万本程度売れているのを見た)ことが大きく影響しています。(まあこれに関してはかなり見通しが甘いということが後からわかりますがそれはまた別の話)

 

そんなわけでPaint版のプロジェクトを作り、メモ版が形になってくるにつれてそろそろ公開に向けて色々準備しようかなということでTwitterを始めたのが2012年9月15日頃だったようです。

(Clover Paintという名前を検索してみたら昔ザウルスに同じ名前のペイントソフトがあったようだと気づいたのもこの頃のはずで、ここで「Cloverって名前色んなプロジェクトやアカウントにつけちゃったし、サポートが終わったハードも違うソフトの事は別にどうでもいいだろう」と考えたのが後々ちょっとした騒動の原因になるわけですが、まあこれに関してはザウルスの作者さんとその後連絡を取り、お互い了承・解決済みなのでいいでしょう)

 

  というわけでClover Paintが基本ポートレイト固定だったり、Androidの標準UIを完全に無視していてすべてOpenGL自前描画だったりするのは、別に移植性が~とか、そういうことを考慮したわけでは全くなく、単に最初はゲームを作るつもりだったから、ということです。ウインドウを半透明表示したり、かなり凝ったUIを自由に作れることに繋がったので結果オーライですが。

 

アプリリリース後

メモ版アプリをリリースしたのは2012年11月29日、その後Paint版をリリースしたのが一年前の2013年の1月19日なのですが、開発当初、私が使っていた端末はN-05Dという、普通の4インチサイズのスマホでした。年末頃タブレットサイズのものも試したいと思いKindle Fire HDを買いましたが、これももちろんデジタイザーには対応していません。

しかし、N-05Dは指の触れている面積等で変化する静電容量を筆圧として渡してくれるようで、それを使って一応筆圧だけはメモ版公開当初から対応していました。

 

 

そんな感じでメモ版を公開した直後のことですが、Cloverメモを買ったとある海外のゲーム関連のデザイナーから非常に熱いメールが届き、その中の要望で「私はGALAXY Note 10.1を使っているんだが、スタイラスのボタンに対応できないか?」というものがありました。

当時ペン付きAndroid端末にそれほど興味がなく、GALAXY Note 10.1についてもそれまで知らなかったような私が、そのユーザーの熱意に押されるような形でGALAXY Note (初代)を買ったのが、2012年の年末~2013年始頃です。

 

驚きましたね。これは使いやすいと。

 

スタイラスで使うと、同じモバイルのペイントアプリがここまで化けるということに対する認識が甘かったと痛感し、早速その後のPaint版のリリース前にボタンへのショートカット登録や、キャリブレーションを実装して、1月19日にPaint版をリリースしたわけです。

 

ところでヤフオクで買ったGALAXY Note (初代)に関しては、S-Penへの対応が終わってすぐにまたヤフオクで売ったのですが、やはりスタイラスがないと不便だと感じるようになり、どうせ買うならタブレットサイズのものの方がいいのではないかということで、Paint版リリース後2月頭くらいに(並行輸入品ということで不安はありましたが)GALAXY Note 10.1を買いました。

 

そして、Paint版をGALAXY Note 10.1に入れて使ってみた瞬間、これは非常に大きな失敗をしてしまったなと後悔しました。

 

どうして私がそう感じたのか、この時点でわかる人はいないと思うので、これから順を追って説明していきますが、簡単に結論を言えば「Paint版はGALAXY Note10.1で動かすことを考えると、安すぎた」という事です。

 

最近はなんでも、フリーミアムだなんだと、無料のサービスでネット上は溢れています。このブログにしてもそうですが、(あたりまえですが)本来そこには人件費なりネット管理費などといった費用がかかっています。

無理な競争で低価格を追求した結果は、邪魔な広告や、品質の低下、歪んだ費用負担などといった形で結局はその業界の構成員や、頻繁に利用するユーザーが不利益を被ることになります。しかし、だからといって一社が有料で高品質なサービスを提供しても、1ユーザーが金を払っても、全体としてこの状況は覆ることはないでしょう。その選択で全体としては全員が損をすることになるとしても、「自分だけは得をしたい、あるいは損をしたくない」という行動を制限できない以上、こうなるのはどうしようもないことです。

 さて、極論として仮にLayerPaintが無料だったとしましょう。前述の通り、恐らくClover Paintはこの世に生まれていません。LayerPaintが有料ソフトで、それなりの数売れていたからこそ、もしかしたら儲かるかもしれないということで、Clover Paintが作られたわけです。身も蓋もないですが、当たり前といえば当たり前でしょう。

これと同じ事で、仮に私がいまClover Paintを無料で配布しだしたとしたらどうでしょう?恐らく後続のアプリ・あるいは現存する他の有料アプリにとって、良い影響があるようには思えません。

 

あり得ない話だと思われますか?そうでもありません。

白状すると私は、常にClover Paintを無料にしてしまいたい衝動に駆られています。

それについて考えない日は無いと言っていいくらいです。

 

というのも、私の当初の目的を考えれば明らかでしょう。本来私はゲーム開発者で、別にペイントアプリにそこまで執着があるわけではありません。作り始めれば確かにそれなりに奥深くて面白いことは面白いものの、私でなければ作れないようなものでもないし……といったところです。

もっと切実な問題は、大して儲からない……というか、そもそも最低限の生活すらままならない程度の、生活保護の半分よりさらに低い程度の利益しか出ていないということです。もはやこれでは趣味かボランティアです。趣味やボランティアなら、もういっそのこと有料アプリはやめて金は別の仕事で儲ければ良いということになります。本来の目的であった「こんなアプリ作りました」という実績を利用する方向で考えれば、無料にして出来る限り知名度を上げたほうが、結局私にとっても利益になります。それでなくても普通に仕事を探せば、Clover Paintのアプリ販売で得られる利益の少なくとも5倍~10倍の稼ぎは簡単・確実に得られるわけです。

むろん、そうなった場合そちらの仕事が忙しくなり、他の山のように放置された無料アプリ同様、Clover Paintの更新はほぼ完全になくなるでしょう。ネット乞食は喜ぶでしょうが、新規にAndroidでペイントアプリを作ろうとする人にとっては、最低でもClover Paintを超えなければ有料アプリとして出せなくなり、高い壁となるはずです。

単純に私個人の利益を考えれば、有料アプリとして作り続ける意味は殆どないと言っていいのに、それでもなぜ作り続けるのか?その理由は大きく分けて3つほどありますが、2つはあまりにも個人的なのでおいといて(Twitterでの私の発言から想像はつくでしょう)、最後の1つは、自分の都合でこの業界の発展を少しでも阻害するような事は私自身のポリシーに反するから嫌だ、ということになります。

 

そんなわけでアプリにはその分野の発展のために、価値に見合った値段をつけるべきだというのが私の考え方なわけですが、GALAXY Note 10.1で動いているClover Paintはどう考えても500円の価値ではなく、普通に考えて2000円、下手すると人によっては5000円以上払ってもいいという価値を持つものに見えたわけです。(実際Twitter上では、「650円出して使えなかったらどうしようと思ってたけど、これ6500円の価値が有る」というような人もいました。まあスマホサイズのギャラノでのそれは誇張表現だとしても、タブレットサイズではそう感じる人が数割いてもおかしくないと私自身感じました)

 

そしてさらに悪いことには、Clover Paintは様々なサイズがあるAndroid端末のどれで動かしても、それなりに見れるレイアウトになるよう設計したため、タブレットサイズでもそれなりに使いやすいということです。

これがスマホサイズでなければ使い物にならないようなレイアウトであれば、タブレットサイズ用だということで別アプリを出し、それに適切な価格を付け直せばそれで済むのですが、そういうわけにはいかなくなってしまいました。良かれと思って注意深く設計したレイアウトが、値段の付け直しという観点ではむしろ仇になってしまったわけです。

 

そんなわけでClover Paintの公式Webサイトの実装予定の機能の最後にも書いてあるように、EfTを作ることにしたわけです。

ちなみに私が考える各端末での現在のClover Paintの適価はこんな感じです。

通常のスマホ → 500円

7インチ程度のタブレット → 700円

スタイラス付きスマホ → 1500円

スタイラス付き7~8インチタブレット → 2500円

スタイラス付き10インチクラスタブレット → 3000円

 

これでもう、EfTを2000円にした理由はおわかりでしょう。

スタイラス付きタブレットで動作させた時の利便性としての2500円~3000円に対し、現在の値段を引いた2000円、というわけです。

 

実のところ、EfTで実装したドッキングやフローティングウインドウの価値が2000円分あるなどとは、私自身これっぽっちも思っていません。せいぜい素のClover Paintに対して300円か、人によっては1000円の価値を追加できたかどうかといったところでしょう。タッチパネルによる操作を切り捨てることでようやく少し差別化できたといった感じです。

しかし、元がそれほど悪くない中で、スタイラス付きタブレットで動作させた場合の適価に合わせるようEfTに高い値段をつけても、なるべく不満が小さくなるよう、当初予定していたよりは、かなり頑張って色々と実装したつもりです。(私自身が最高の環境に最適化されて動作するClover Paintを使ってみたかった、というだけのことでもあるのですが)

 

EfT版Clover Paintにつけた約3000円という価格は、AndroidでClover Paintを超える、スタイラス付きタブレット専用の優れたペイントアプリを1から作ろうという人のモチベーションを削らないギリギリのラインだと思っています。是非、我こそは思われる人は作ってみてください!(結果について責任は持てませんが……)

 

というわけで、EfTがなぜ高いのかを、Clover Paint開発の経緯と絡めて説明してみました。

+EfT版Clover Paint公開

EfT(Extension for Tablet = タブレット用機能拡張)を含むClover Paintを本日公開しました。

デジタイザースタイラスを備えた)タブレットサイズ端末専用のUIにより、これまでのUIに比べて操作性が格段に向上しています。

f:id:CloverPaint:20140119141529p:plain

スクリーンショットはGALAXY Note 10.1でEfT版UIのClover Paintを動作させたものです。

ただし、EfTの機能を使うためにはオプションからアプリ内課金で購入する必要があります。

(2014年1月31日まで試用可能です)

 

購入前の確認画面にもありますが、EfTデジタイザーでの操作に最適化されています。具体的には2x2mm角程度のサイズのボタンを間違いなく押せる精度を想定してUIをデザインしています。指操作のタッチパネルでは実用的な操作性は得られませんので、間違って購入しないようご注意ください。

また、EfTはモバイル系のツールとしては比較的高い価格設定となっていますが、推奨端末が限られていること等から決定しました。詳しい経緯は後ほど別記事として書くつもりです。

 

 さて、前置きはこのくらいにしてEfTの機能ですが、大きく分けて3つになります。

・ スクリーンの回転機能

・ Cloverアイコンのドッキング

・ フロート/ドッキング可能な新しいUI

 

以下、それぞれの機能について解説していきます。

 

スクリーンの回転機能

スクリーンの回転について、これまでClover Paintは基本ポートレイト(縦長)固定で、端末を回転させると申し訳程度に正方形なボタンの中身のみ回転させていましたが、今回タブレット用ということで、ランドスケープ(横長)にも対応しました。

f:id:CloverPaint:20140119144745p:plain

端末の回転に合わせてスクリーンを回転させるには、[Gallery → オプション][スクリーン回転]を「端末の回転に合わせる」に設定してください。

各種設定画面も端末の回転に合わせてリストの表示方向が変化します。

(ただし、システムの回転はポートレイト固定のままなので、文字入力等のダイアログは端末の回転に追従しません。これはシステムのナビバーが短辺に来て画面が狭くなることを嫌っての仕様です。KitKatではナビバーを消すことができるのでそちらに対応させるときに実装予定です)

また、地味に重要で忘れてはならないのが、スタイラス設定でのキャリブレーション情報が四方向独立して設定・保存されるようになっています。面倒ですが、端末を回転させて利用する場合は、利用する方向毎にキャリブレーションしてください。

 

 

Cloverアイコンのドッキング

Clover Paintではキャンバス上にブラシや各種機能のショートカットとしてCloverアイコンを作成して自由に配置することができます。

長押しからのオプション設定で他のUIを消している場合にも表示するなどといった事が可能なので、描画処理が遅く、UI表示処理が足をひっぱるような端末でもあまり利便性を損なう事なく高速に表示、画面を広く使えるという利点がありますが、数が増えてくるとこれも邪魔になります。

f:id:CloverPaint:20140119170253p:plain 

そこで利用頻度の低いものや似たようなブラシをひとまとめにしてドロップダウンリストにできるよう機能追加しました。

 f:id:CloverPaint:20140119170335p:plain

このようにたたむことができます。 

f:id:CloverPaint:20140119170539p:plain

たたんだ状態で、表示されていないアイコンは、たたんだアイコンをドラッグすると、ドラッグした方向へのドロップダウンリストとしてこのように表示されます。

リスト内のCloverアイコンを選んだ時の動作はユーザーがオプションで設定できます。

 

Cloverアイコンのドッキング

Cloverドッキングを利用するには、まず[Gallery → オプション]設定で、[Cloverドッキング]のチェックをONにします。

 f:id:CloverPaint:20140119172325p:plain

 オプションでドッキングを有効にすると、Cloverアイコンをドラッグ中、他のアイコンに近づけると、上の画像のように∞型のアイコンがあらわれます。そこにドロップしてやるとドラッグ中のCloverアイコンがドロップ先のアイコンの子になります。(上図ではバケツが親、鉛筆が子)

f:id:CloverPaint:20140119174232p:plain

ドッキングすると、ドッキングリストの1番親にはキャプションバーが、末尾の子にはナビゲーションバーが付きます。キャプションバーやナビケーションバーを長押しすると後述する設定ダイアログでこのドッキングリストのオプションを設定できます。(Cloverアイコン自体のオプションとは異なります)

 

ドッキングリストを開いた状態では自由に子を追加したり、途中に挿入したり、切り離したりなどといった操作を行えます。

ドッキングリストを閉じるにはナビゲーションバーをクリックします。

f:id:CloverPaint:20140119174935p:plain

閉じた状態では、キャプションバーをつまんだ時のみ、このアイコンを移動させることができます。他の部分をつまんでドラッグすると、中に含まれるCloverアイコンがドロップダウンリストとして表示され、それを選択するモードになります。

 

キャプションバーを長押しすると設定画面が開きます。

f:id:CloverPaint:20140119175253p:plain

移動の禁止や、UIの表示モードを無視して強制的に表示するというCloverアイコンにもあるオプションに加え、ドロップダウンリストからリストアイテムを選択した時の動作を以下から指定できます

 

・実行のみ

 閉じたドッキングリスト表面に表示されているCloverアイコンを変化させず、選択したコマンドを実行します。(ブラシの場合はそのブラシを選択します)

 

・選択のみ

 コマンド実行やブラシの選択などを行わず、ドッキングリスト表面に表示されるCloverアイコンを選択したものにします。

 

・実行と選択

 選択したCloverアイコンのコマンド実行を行い、さらにそれをドッキングリスト表面に表示されるCloverアイコンにします。

 

・実行と選択(ブラシの時のみ)

 選択したCloverアイコンのコマンド実行を行い、選択したCloverアイコンがブラシ系のアイコンだった場合には、さらにそれをドッキングリスト表面に表示されるCloverアイコンにします。

 

フロート/ドッキング可能な新しいUI

 

最後になりましたが、機能的にはこちらが1番大きなものになります。

 

新しいデジタイザー付きタブレット用のUIを有効にするには、[Gallery → オプション][タブレット用UI]をチェックして再起動してください。

既存のCloverリストやカラーリストのツールバーとは排他的になっていて、どちらか一方のみ利用可能です。(ナビビューのみ同時に利用可能です)

 

ウインドウの開閉

ウインドウのキャプションバーを長押しすると、設定と閉じるボタンがあらわれます。一度閉じたウインドウを開くには[表示設定 → ウインドウ]から目的のウインドウを選択してください。

カラー設定関連のウインドウはメインのパレットウインドウのアイコンがトグルになっているので、これで開閉します。

f:id:CloverPaint:20140119191220p:plain

左上からRGBバー・HSVバー・カラーピッカー

左下に移動して、カラーリスト・グラデーションピッカー・スポイト

……となります。

カラーピッカーはドロップダウンで三種類から選べるのでお好きなものをどうぞ。

 

ここのウインドウに関しては、ほぼ説明の必要はないと思われるのですが、グラデーションピッカーに関してのみ、ガンマ値設定が見慣れないかもしれないので説明します。

 

Clover PaintのグラデーションピッカーではRGBの三原色毎にガンマ値を設定できます。ガンマ値とは0.0(真っ暗)から1.0(もっとも明るい)状態までを直線ではなく、曲線で表そうというものです。通常ガンマ値は入力値のべき乗数で指定します。

例えばガンマ値が2.0ならば、0.0と1.0は2.0乗しても同じですが、中間の0.5は0.5*0.5=0.25になり、下に膨らんだカーブになります。逆に0.5乗すれば0.5は0.707..となり、上に膨らんだカーブになります。モニター等はPC上の数値(入力値)と実際の明るさ(出力値)に関して、2.2程度のガンマ値を持たせるのが一般的です。

Clover Paintではガンマ値をそのまま指定するのではなく、ガンマ値をpower(1.5, 入力値)とすることで、入力値が0で直線、マイナスで上に膨らむ、プラスで下に膨らむようにしています。

なぜこのようなガンマ値を設定できるようにしたかというと、通常の(ガンマ値が1.0、Clover Paintの設定では0.0)直線的な補間では、例えば絵の具では普通にみられる青と黄色を混ぜた時に、中間が緑になるというグラデーションが得られないためです。(青と黄色は補色のため、単純な補間では途中は灰色になる)

 f:id:CloverPaint:20140119192929p:plain

現実世界では緑が強く現れるために、このようなことにはなりません。

そこで緑のガンマ値を下げて緑を強めに、他のガンマ値を上げて弱めにしてやると以下ようになります。

f:id:CloverPaint:20140119193351p:plain

これで減色混合の絵の具に近い中間グラデーションが得られます。

(とはいえ現状他の演算にはガンマ値設定がないので、混合の場合このグラデーションピッカーから細かく中間色を拾ってやる必要はあります)

肌色等の中間グラデーションも、このガンマ値をいじることで雰囲気の違うものにできます。お試しください。

 

ウインドウのドッキング等のタイプ

各種ツールのウインドウは、表示内容に合わせて使いやすいよう、いくつかのタイプに分けてサイズ調整やドッキングの時に可能な動作を設定しています。

また、ウインドウの位置・ドッキング状態とドッキング・表示制御用のオプションフラグは、ポートレイト(縦長)とランドスケープ(横長)で別々に持っています。この仕様があるため、横長画面ではツールを多く表示、縦長画面では最小限にする、などといった事が可能です。

 

・ドッキングしたサイドに合わせて回転するもの

Cloverリスト
ブラシ設定
レイヤーリスト

これらのツールはドッキングした時に、その辺の長さに合わせて伸びます。 

幅はフロート時に調整したサイズのままになるので、フロート状態で太さを調整してからドッキングさせてください。

 

・ドッキング不可なもの

スポイト

この種類に入るのはスポイトのみです。ドッキングする意味が感じられないので不可としました。他のウインドウもオプションからドッキング不可にはできます。

 

・回転しないもの

その他すべてのウインドウ

これらウインドウはドッキングさせるとサイズを維持したままになります。余った部分は灰色になりますが、普通にストローク描画もできます。灰色部分が十分余っていればその部分にさらに他のウインドウをドッキングさせられます。

ドッキング後はサイズ調整不可になるので、フロート状態でサイズを調整してドッキングさせてください。

 

ウインドウのオプション設定

これらウインドウには共通のオプション設定があります。

 
ウインドウの強制表示

UI表示モード(通常はMENUキー)の切り替えですべてのUIを非表示にした場合もこのフラグが立っているウインドウは表示されたままになります。

ただし、ドッキングしている場合は無視されます。

 
ウインドウ移動の禁止

ウインドウを移動しないようにします。ドッキング解除もされません。

 

ウインドウのドッキング禁止

ウインドウのドラッグ中にドッキングしないようにします。

すでにドッキング中のウインドウに関しては何もしません。

 
ウインドウのサイズ変更禁止

ウインドウサイズ変更用に確保されているウインドウ下のバーを非表示にします。サイズ調整が必要ない場合にチェックしてください。

 

ツール特有のオプション設定

 ウインドウの中には、そのツール専用の設定項目を持つものがあります。

 

ナビゲーション

こちらはCloverタイプのナビゲーション実装の時のオプションとほぼ同じ内容です。

画像反転用のオプションが追加されています。(Cloverタイプの方にも)

また、倍率表示等のテキストや、カメラ操作用のボタンが並んだパネルを独立してON/OFFするスイッチが用意されています。

 

ブラシ

各バーの目盛りの対数値を設定できます。使いやすい数値に調整してください。

また、表示されている説明テキストがうるさければ消すことができます。

 

グラデーションピッカー

表示されている説明テキストがうるさければ消すことができます。

 

 

 

ブラシ作成指南(その4) ~濃度調整を使いこなす

今回はブラシ作成で一番の肝となる濃度調整に関するパラメータを少し詳しく見ていくことにします。

 

まず、ブラシの濃さを決める基本的なパラメータとして流量と不透明度があります。

・流量(=ペン流量(移動トリガ))

・不透明度(=ストローク合成・不透明度)

※括弧内はブラシ設定内での名前

 

見た目、この2つのパラメータの効果は似ているのですが、内部的には全く違うことをしています。

まずこの違いを理解することが重要なのですが、そのためにはブラシの内部動作を知る必要があります。

 

ブラシ描画の内部動作

 f:id:CloverPaint:20131121095230p:plain

 図はブラシ設定内の「描画演算タイプ」に「通常」を選んだ時のブラシ描画の内部動作を、説明のため簡略化したものです。

「通常」モードは最も基本的な演算タイプで、混合を伴わないブラシは大抵この演算を使っています。

 
A: 内部濃度バッファ

1ピクセル=14bit(16384段階)のモノクロ(グレースケール)バッファです。

B: 描画色

その時選択されている色です。

 

C: ストローク内容

Bの描画色をAの濃度をマスクとして使い、切り抜いたイメージです。

これが実際に描画されるストロークになります。

 

D: 元レイヤー画像

ストローク描画される前の画像です。そのとき選択されているレイヤーです。

 

E: 最終結果

これがストローク描画した時、実際に目にする画像です。

 


 

Aに描かれているペン先形状(黒い点)の1つ1つをSpotと呼びますが、このSpotの濃度を指定するのが、「流量」パラメータです。

一方、「不透明度」とはD(元レイヤー画像)にC(ストローク内容)のレイヤーを合成演算してEを生成するとき、Cのレイヤーに適用する不透明度です。むろんレイヤーの合成演算ですから、ここでは不透明度だけではなく加算や減算等を指定して特殊なブラシを作ることもできます。(組み込みブラシのマジックは、ここで減算を使い、色を混ぜると黒くなる効果を出しています)

 

Spotの濃度演算 

さて、モノクロのバッファにSpotが描画され、それが画面に表示されるまでの流れが理解できたところで、Aの部分の演算を詳しく見ていくことにします。

 

ブラシパラメータの 「描画演算タイプ」に「通常」を選んだとき、その下に「通常時追加パラメータ」が表示されます。

f:id:CloverPaint:20131121115536p:plain

 「通常時追加パラメータ」には以下の2つのパラメータが存在し、非常に重要な効果を与えます。

重複濃度加算率

すでにバッファに描画されている濃度とこれから描画しようとしている濃度のうち、重なる部分(つまり小さい方の数値)を、バッファに加算する比率を指定します。

加算変調率

すでにバッファに描画されている濃度があるとき、これから加算しようとしている数値を、透明部分の割合で変調します。

 

文章からでは、ちょっと意味が捉えにくいと思います。

以下実際に数値を与え、どんな効果があるのか見ながら説明していきます。

(太さ40 / 流量 0.20 / 加算変調率 0.00に調整)

↓重複濃度加算率 1.00

f:id:CloverPaint:20131121121926p:plain

↓重複濃度加算率 0.30

f:id:CloverPaint:20131121122039p:plain

↓重複濃度加算率 0.00

f:id:CloverPaint:20131121122056p:plain

重複濃度加算率を変えるだけで、見た目が大きく異なる事がわかります。

 

重複濃度加算率が1.00(100%)の場合

0.20の流量がSpot同士が重なる度に100%加算されるため、ストロークの末端で0.20→0.40→0.60→0.80という濃度変化を起こし、以降はすべて1.00になっている事が見て取れます。

 

重複濃度加算率が0.30の場合

最初は0.20ですが、次の描画はmin(0.20,0.20)*0.30=0.06が加算される事になるため、0.26となります。

その次はmin(0.20,0.26)*0.30=0.06で、0.32となり、以降も0.06ずつ加算されます。

ここでは流量が一定なため0.06ですが、仮に3つめのSpotの流量が0.5だった場合は以下のような計算になります。

重複部分加算 = min(0.50,0.26)*0.30=0.078

重複なし加算 = (0.50-0.26) = 0.24

最終濃度 = 元の濃度 + 重複なし加算 + 重複部分加算 = 0.26+0.24+0.078 = 0.578

 

重複濃度加算率が0.00の場合

ここでは流量が一定なため、重複部分での加算がなくなることで、のっぺりしたストロークになります。仮に筆圧等で流量を変化させれば、その流用変化に素直に対応した濃度のストロークとなります。

 

(太さ40 / 流量 0.20 / 重複濃度加算率 0.30に調整)

↓加算変調率 0.00

f:id:CloverPaint:20131121122039p:plain

↓加算変調率 1.00

f:id:CloverPaint:20131121124145p:plain

 

加算変調率の方は効果がわかりにくいのですが、並べてみると下の方が薄くなっているのがわかります。また、ストロークの末端の方の変化は上下とも似ていて、加算変調率が1.00の方は濃くなるにつれて濃度変化が小さくなっていることが見て取れます。

これは加算変調率を与えたことによる効果です。

上の加算加算率が0.00の場合、2つめのSpotで重複する部分の濃度は0.20+min(0.20,0.20)*0.30=0.26です。

下の加算変調率が1.00の場合はどうなるかというと、

0.20+min(0.20,0.20)*0.30*(1.00-0.20)=0. 248となります。

最後の(1.00-0.20)が加算変調で、すでにバッファに描かれている濃度が0.20あるため、加算される濃度は透明部分の0.8を乗算することで弱められます。すでにバッファに描かれてる濃度が濃くなればなるほど、加算される数値が弱められることで、1.00に漸近するような濃度変化となります。

 

 ただしこれは、加算変調率が1.00の場合で、変調効果も強さを調整することができるため実際の計算は以下のようになります。

最終濃度 = 元の濃度 + (重複なし加算 + 重複部分加算)*((1.0-加算変調率) + (1.0-元の濃度)*加算変調率)

 

「描画演算タイプ」の「通常」に関しては、これで完璧に理解できると思います。

 

ついでに他のタイプも少し説明しておくと、「常に上書き」は、Aのバッファを持たず、常にSpot濃度で直接合成してしまうタイプです。通常使う場面のないものですが、互換性のために残しています。

「上書きしない」はAのバッファに0以外の数値(つまり少しでも濃度があれば)が書き込まれている場合、その後の処理をすべてスキップするタイプです。これは二値ペンを流量最大にして使う場合等、処理を軽くするために用意されています。

「カラーバッファ」「混合」に関してはややこしいのでまた別の機会に解説しようと思います。


 

Spotは、いくつかの異なったトリガで描画されます。

ペン流量(移動トリガ)

通常はこれを使ってブラシの濃さを決めます。

ペンの移動により、一定距離間隔でSpotを描画します。

間隔は別パラメータで指定します。

 

「ペン流量(停止時トリガ)」

ペンを止めた時に一定時間間隔でSpotを描画します。

エアブラシやマジック等で使います。

 

「ペン流量(時間トリガ)」 

ペンの移動速度により流量を自動変化させるタイプのトリガですが、表示品質に問題があり、利用はお勧めしません。互換性のために残してあります。

 


 

今回は重要な部分なのでかなり突っ込んだ説明をしてみました。

この辺りのパラメータを少し変えたり、筆圧による変化を与えるだけで、かなり特色のあるブラシを作れますので 是非さわってみてください。