お絵かき掲示板のペイントツールChickenPaint Beの進化
ChickenPaint Beがさらに進化
ChickenPaintを改造した派生版のChickenPaint Be(チキペBe)がさらに進化しました。
ただし、他の作者の方が書いた膨大なコードをたぐり寄せながら、手探りで改造している状態なので何日もかけて試行錯誤して、そのうちの何か一つでも成功すれば大成功…という状況ではあります。
しかし、そんなささいな改良でも、きっと誰かが、何も感じる事なく便利に使ってくれると信じて…。
何も感じる事なく???
何も感じない…つまり、一般的なペイントソフトでは当たり前にできる事が当たり前にできれば、ユーザーは、｢え、こんな事もできないの?｣と思う事なく、ただただスムーズに作画に集中できます。
それが理想なのですが、なかなか難しいです。
これまでの更新履歴
古くなったBootstrapというCSSフレームワークのバージョンを最新版にして、左右反転アイコンや、下のレイヤーと結合するアイコンなどのUIを改善してきました。
しかし、ここまでは操作関係、つまりGUIとキーボードショートカットの改善がメインで、描画エンジンの修正はできていませんでした。
しかし、そのそれまで手をつけていなかったエンジンの改造もはじまりました。
クリッピングを維持したまま下のレイヤーと結合
クリッピングレイヤーのクリッピング元とその上のレイヤーを結合した時に、マスクが解除される問題を修正しました。
え、クリッピングレイヤーが結合できない?
そんな筈が…となるような問題でした。
では、GIF動画で改善前と改善後を比較してみましょう。
何のことはなく、普通にクリッピングレイヤーが結合できるようになっただけです。
つまり、この改善後のバージョンのChickenPaint Beから使い始めた人は、何も問題なく、クリッピングレイヤーの結合をして、何かがすごいと思う事もなく普通に操作するでしょう。
これまでは、｢クリッピングレイヤーは結合できないの!?｣｢まぁ仕方ないか…｣となっていたと思います。
ブラシコントロールパレットのブラシプレビューを直接ペンで操作可能に
単に、マウスに最適化されていた箇所をタッチデバイスやペンタブレット等で操作できるように書き直しただけですが、他の方が書いたスクリプトですから、どこにその処理があるのか、なぜペンではスムーズに動作しないのかを調べるところから…の作業でした。
たったこれだけの機能の改善に丸1日以上かかっていたりします。
ノイズテクスチャを追加
テクスチャパレットにノイズテクスチャを追加しました。
従来のテクスチャはスクリントーンや市松模様等でしたが、ノイズテクスチャは鉛筆の線をよりアナログの鉛筆線のように表現するための紙の質感のような使い方ができるテクスチャです。
邪神ちゃんドロップキックのメデューサのファンアート。
線画にも、塗りにもノイズテクスチャを使った作例です。
画面全体にノイズを乗せるフィルタは以前からあり、レイヤーの合成方法を｢ソフトライト｣にしてノイズ効果を出す事ができていましたが、ノイズテクスチャを使えば、あと処理ではなく描いた時すぐに紙に描いたような感じを出す事ができます。
また、ノイズテクスチャであれば筆圧感知機能で、均一ではないノイズを乗せる事ができます。
エラーメッセージをわかりすいものに
これまでは、エラーのより詳細な内容を表示するモーダルが、英語のみだったため、日本語化して、さらによりわかりやすくなるようにしました。
また、ファイルサイズが超過している時には、何度ボタンを押し直してもファイルサイズが小さくなる訳ではないので、エラーは解消されません。
つまりその状態では｢時間をおいて再度投稿してみてください。｣とだけ表示してもきわめて不親切なエラーメッセージになってしまいます。
ファイルサイズが大きすぎるのであれば、レイヤーを結合すればファイルサイズが小さくなって投稿に成功するかもしれません。
そのため、サーバの上限値と、現在のファイルサイズを詳細に表示します。
輝度を透明度に変換
吾妻ひでお先生のスクラップ学園のミャアちゃんを模写した背景色が白のイラストをChickenPaint Beの｢輝度を透明度に変換｣フィルタで白背景を透明にして、その下のレイヤーに色を置いてみました。
白いキャバスに線画を描いてしまった場合でも、これまでもレイヤーの合成方法を｢乗算｣にすれば線画が透過して、下のレイヤーに色を置く事ができていましたが、例えば、クリッピングして、線画の色を変更したい時などは、線画の線以外の部分は透明でなければ処理できません。
また、レイヤーの合成方法を変更できない｢PaintBBS NEO｣で続きを描いて色を塗りたい時に、ChickenPaint Beで｢輝度を透明度に変換｣して、背景が透明な線画の透過PNG画像を作成して投稿。そして透過PNGからNEOで続きを描くといった事もできるようになります。
ソースコード
ChickenPaint Beのライセンスは、オリジナルのChickenPaint Beと同じGNUライセンスです。
誰でも改造と再配布が可能ですが、改造したソースコードを公開しなければなりません。
エンドユーザーの方はそれほど気にしなくていい部分です。
他のプロジェクトに組み込みたいという開発者の方がいらっしゃいましたら、よろしくお願いいたします。
お絵かき掲示板PHPスクリプトPetit Note
ChickenPaint Beを含む、5種類のペイントツールを切り替えて使う事ができ、どのアプリからでも続きを描く事ができるお絵かき掲示板のPHPスクリプトを開発しています。
どちらかというと、こちらの掲示板が開発の本体なのですが、ペイントツールの改良が自力でできるのであれば、なんとかしたいという思いで、手探り状態ではありますが、ここまで来ました。
このスクリプトは、無料のレンタルサーバーや、さくらのレンタルサーバの一番安いライトプランでも動作します。
設置してみてもいいという方がいらっしゃいましたらよろしくお願いいたします。
ファイルを転送するだけで設置が完了するように、設計していますが、不明な点がありましたら、サポート掲示板もありますのでご利用ください。
お絵かき掲示板交流サイト Petit Note
Petit Noteを使ったお絵かき掲示板の交流サイトを運営しています。
どうぞよろしくお願いします。
Googleさんの気分によって、サイトが表示されなくなる時がなぜかありますが、サイトは存在し、稼働しています。