2025年7月19日

Ver. 0.1.5を公開

管理人のワロタロです。

本日、Ver. 0.1.5を公開しました。 今回の主な更新内容は、新線画スタイルのベータ版公開、パレットとスタイルの調整モードUIの改修、境界線レイヤーの個別指定機能追加です。

新線画スタイルのベータ版公開

前回の記事でも書いていた通り、線やブラシのスタイルのクオリティ向上を目的に、ストロークの描画の改善を行いました。ただ、まだまだ改善の余地があるように感じるので、ベータ版と銘打って公開することにしました。

新版のブラシスタイル

具体的にどういう改善をしたのかというと、一つは新しいシェーダのアルゴリズムです。大雑把にいうと、全体に適用するテクスチャとエッジ部分に適用するテクスチャを分けて描画するようにした感じです。

エッジ部分の可視化

最初は鉛筆の粒子をシェーダで再現しようとしたのですが、原理的にクォリティもパフォーマンスも出せないことが分かったので、けっきょくテクスチャ方式に戻りました。

うまくいかなかった鉛筆シェーダ

実現できないと判断を下すまで1カ月くらい試行錯誤していたと思います。シンプレックスグリッドを初めて実装してみたりと勉強になったことも多かったんですけど、そのへんの経緯はここではちょっと書ききれないので別の場所(Qiitaとか)で記事にしたいと思います。

でもこの記事を書いている間に思いついたんですけど、鉛筆で紙に線を1本引いたものをスキャンしてそのままテクスチャに使えばよかったんじゃ…まぁ、それもいずれやってみたいと思います。

改善の二つ目は実写取り込みのテクスチャ素材です。

今まではシームレステクスチャを計算で生成できるツールで作成していました。しかし、計算で本物を再現するというのはやはり難易度が高く、正直を言うと納得いくクオリティのものではありませんでした。シェーダで頑張ってみて感じたことと同じかもしれません。結局、パターンが見えてしまうことと解像度に限界があることを妥協すれば、写真が一番リアルなんだよな…というのが自分の今の結論です。

取り込む紙の写真とシームレステクスチャの例

それで、本物の紙を鉛筆で塗りつぶして、スキャナで取り込みました。水彩のスタイルは水彩色鉛筆、クレヨンのスタイルは本物のクレヨンで塗りました。クレヨンは小学生のときに親に買ってもらった100色セット(安物)を引っ張り出してきました。30年経ってから役に立つとは思いませんでしたね…。

しかし、きれいに塗りつぶすのって難しいもんですね。テクスチャの素材にするためにはムラなく塗りつつも風合いが残るようにしないといけないですし。紙質の影響も大きくて、鉛筆の場合、画用紙を使うと画用紙のパターンが出すぎて鉛筆のテクスチャとしては使えなくなります。もっとスベスベした紙がいいかと思ってコピー用紙も試してみましたが、塗りつぶしてみると奇妙な縞模様が出てきたりしました。たぶん製造工程でメーカーごとに独特の模様が出るんでしょうね。

完璧を目指してもきりがない感じがしたので今回はコピー用紙で妥協しましたが、もっと色々な紙で素材を用意したら楽しそうです。シェーダと違って素材を増やしやすいのはテクスチャの利点ですね。

パレットとスタイルの調整モードUIの改修

パレットとスタイルの調整モードUI

調整モードはもともとある機能ですが、もろにキャンバスに重なって絵が見えなくなってしまう問題がありました。スマホだとなおさら見えなくなります。

ある日、ふっと、上下に分けてしまえばいいんじゃないかと思いついたんですよね。新しいスタイルを表示するスペースをどう確保しようか、どうも画面が狭くて困るなぁと悩んでいたときだった気がします。

ちなみに上下黒帯にしたほうが没入感があるかなぁとも思ったりしましたけども、UI部品の色合いが黒背景を前提としていないために見辛い感じになったので、他のUIと同じスタイルでいくことにしました。

囲み塗りの境界線レイヤーの個別指定が可能に

下のイラストのようにキャラクターがお互いに前後に重なっている構図だと、レイヤーの分け方が複雑になりがちです。基本的にどちらのキャラクターを上や下のレイヤーにしたとしてもうまくいかないので、パーツ事に細かく分けることになります。

キャラクターが相互に重なっている構図の例

このアプリであればグループを作らないで全部同じ階層にすればできなくないですが、でもやっぱりグループでレイヤーを管理したいですよね。

ということで、囲み塗りのはみ出し防止の境界線として使うレイヤーを、個別に指定できる機能を追加しました。

囲み塗りの境界線レイヤーの個別指定

(キャラクターにテクスチャがかかってるのは筆者が遊んでただけなので無視してください)

これで、パーツごとのレイヤー分けとか、はみ出し防止のための見えない線を用意するとかいった面倒くさいことがかなり減らせます。実際に、上のイラストでは男の子と女の子の線画と塗りで合計4つのグループだけで描くことができました。

近況・今後

いつも何か一つは絵を自分で描いてみてからリリースすることにしているんですが、今回は本当にまったく手がつかなくて、何もしていないのにリリースが大幅に遅れてしまいました。この記事も最初は5月くらいに書き始めたんですが…

実は、ずっと前から自作2Dアニメ制作をしようと思っていて、延々と手がつかないでいます。絵をちゃんとした絵にしたいんですが、自分の絵柄が決められなくていい年して悩んでいます。あと、長いこと人の顔を描いてなくてどこから手を付ければ描けるのかすら忘れてしまった。そのためリハビリをしつつ、好きな漫画とかイラストを参考にして目の描き方とか顔の輪郭とかのディテールを模索している状況です。ちなみに、その流れでAI絵をトレースしたらどうなるか試してみたときの絵が、境界線レイヤーの個別指定のところで出てきたイラストだったりもします。

今後ですが、線やブラシのスタイルのクオリティ向上については、いったん様子を見させていただきます。しばらく自分で使ってみてどうなのか確かめたいと思います。

そして、次はグラデーション機能を実装したいと思っています。アイデアとしては文字入れ機能もあって、そちらもアイデアが固まってきているので悩ましいんですが、自分個人でいうとグラデーションの方が需要があるのでグラデーションを先にやることにしました。

グラデーションは実現方法がたくさんありすぎて、かつ「これが一番いい」という方法もあまりないので悩みに悩んだ結果、グラデーショングリッド方式を発展させた方式にすることにしました。さてさて、どうなるやら、乞うご期待。

…あんまり期待しないでくださいね。

その他の更新

  • 画像ファイルレイヤーでドラッグ&ドロップでファイルを選択する操作をしても動作しない問題の修正
  • 1倍以外のスケールでエクスポート時にエラーになる問題の修正
  • SHIFT+Qでビューのリセットをするとき等倍表示にリセットするよう変更
  • CTRL+Gで線のアクティブ化機能をON/OFFするショートカットキーの追加
  • 編集モードでストロークのコピー&ペーストができない問題の修正
  • ストロークのシード値をストロークに記憶するよう変更
  • レイヤー名のテキスト入力を入力用のウィンドウを表示するよう実装