ここにっつじゃむのHome

はてなダイアリー『ここにっつじゃむのRoom』からの続きです、Roomはこちらにリダイレクトしました

簡単!SVG2BSでFireAlpaca、LayerPaintHD、MediBangPaint、mdiapp+のブラシスクリプトを作る方法

Haiku!

ブラシ素材画像を作ってそれをベクター化させてスクリプトブラシ化するのが楽しいので詳しい説明をします

多分これが一番簡単

タイトル長いけど許して

 

↓書く元となった大雑把記事

nichijou-love.hatenadiary.jp

 

作成動機

なんか上のただのチラ裏メモ書き記事の情報に踊らされて制作した人が
『これだけじゃブラシ出来ねーじゃねーか!!』なんて
おっしゃっているのを見かけたので

本当に申し訳ございませんでした

まともにブラシ作ってないのに(今から作る予定だった)
勢いだけでネットにメモあげちゃうなんて知ったかぶるな
メモはTwitterに書けクソガキって過去の自分に言いたいです…

 

なのでお詫びとして実際にブラシ作ってみて理解してきたので手順を書きますから!

やってみたらP2VJじゃ設定できない部分があって…
こうやって…こうして…ってあれ…

P2VJ最新版アプデしたら出来るようになってる…

P2VJ側のバグだったらしい…ありがとう作者…

 

でも私が知ったかぶりした事実は変えられないので詫びメイキングいきます!!

 

 

 

はじめに

作る前に何点かいろいろ解説します

ブラシスクリプトとは?

mdiappから派生したペイントソフトで使える拡張子が『.bs』のブラシファイル

中身はプログラミング言語Lua」で書かれたテキストファイル

firealpaca.com

使いこなせれば標準機能のビットマップブラシ機能よりも自由なブラシが作れるんだとかなんだとか

検索するといろんな万能ブラシ素材が見つかって楽しいけど今回は紹介しない
ぜひしてね

ちょっと今回は簡単にそいつの力を借りさせてもらいます

 

ファイパカだとブラシ名の前に赤色のがつくやつ
デフォルトで元からしょっぱなから最初からはじめから何個かブラシが入ってるよ

 

.bsが使えるソフト一覧

 

こいつらでスクリプトブラシが使えます
大きく分けてmdiappのOEM製品
(他社が本家ソフトにカスタマイズの許可をもらい別ソフトとして販売&配布するよ~って感じ)
であるコミラボ、コミックワークスNEO
Macでも使えるように新しいフリーソフトとして再構築したFireAlpacaと
そのOEM製品のMediBang Paint(ジャンプPAINT)って感じです
みんな祖先は一緒

ちなみに言うまでもないけど上のみんなは作業データは拡張子『.mdp』で保存できます

 

ラスター形式とベクター形式の違い

今回は自分で作った画像をブラシに読み込ませるだけのブラシなのですが…

ベクター形式の画像であるにsvgに変換して読み込ませます

 

その前にラスターベクターの違いがわからない人のために
よかれと思って一般的に広まっている画像であるラスター形式
これから扱っていくベクター形式の違いを画像を使って解説します

 

おそらく情報処理の授業で高校で習う内容ですので
知ってる方も多いのでこの説明自体はすっ飛ばしても構いません

これから習う人や、記憶をかっ飛ばしてしまった人
太古の昔にはそんなものはなかった人はどうぞ見ていってください

 

ラスターとベクターとは

下の画像はそれぞれ同じくらいのサイズで
上側がラスター画像、下側がベクター画像です

f:id:nichijou-love:20181111064609p:plain
ラスター(png)

ベクター(svg)

 

パッと見ではこれだけじゃ違いなんて全くわからないと思います

なので1000%に拡大表示して見てみると…!?なら見せてやろうかぁ!もっと面白いものをよぉ!!

f:id:nichijou-love:20181111205812p:plain
ラスター(png)

f:id:nichijou-love:20181111205854p:plain
ベクター(svg)

アラマビックリー☆

見たらわかる通り、ラスター画像の方がよからぬモザイクのようになっていて
ベクター画像の方がくっきりとしたよかれな線になっています

ラスター?何それぇ?俺☆ベクター 鈍いなぁ、俺が高画質画像だよォ!

何故かというと
ラスターピクセルと呼ばれる(ドット)を埋めて画像として表示する形式
ベクターグラフのように数式で画像として表示する形式だからなのです

ジャンジャジャーン☆ 今明かされる衝撃の真実ゥ~

最初の原寸大画像はそれぞれ本当にラスター画像とベクター画像なので
拡大表示してみて違いを楽しんでみてください
スクショ自体はどちらもラスター(png)なので許してくださいってかァ?許してやるよォ!!

f:id:nichijou-love:20181111222323p:plain image/svg+xml
30%に縮小して保存したデータ こっちの方が拡大して違いがわかりやすいかもしれない

 

ラスター画像を扱う画像編集ソフトは『ペイントソフト』と呼ばれ
ベクター画像を扱うソフトは『ドローソフト』といいます俺のターン!ドロー!!

ラスター画像の形式 ベクター画像の形式
ペイントソフトの例
※は写真編集ソフト
(レタッチソフト)
ドローソフトの例

ドローソフトは編集のたびにパソコン側が再描画をしたりと
簡単な作図以外だと動きが重くなりがちなので
一般的にイラスト作成などにはペイントソフトラスター画像がよく使われます

わかったぁ~?

 

まあ、何が言いたいかというと

アルパカやメディバン自体はペイントソフトだけど
標準機能のラスター画像を使ったビットマップブラシだと
ブラシサイズを大きく変更するとモザイクっぽくなって質が悪くなるので
ブラシ素材のペン先の画像だけをベクター画像にしたい!って時に
ならブラシスクリプトにして読み込ませようぜ!

ってことです

 

用意するもの

  • FireAlpaca、MediBangPaint、mdiapp+などのブラシの動作確認ができるソフト

  • ブラシ素材の画像

  • ラスターベクター(svg)に変換するP2VJとそれを動かすのに必要なJava

  • svgをブラシファイル用の形式の文に変換するSVG2BS

  • Windows標準のメモ帳以外のテキストエディタ(今回はTeraPadを使いました)

え、ブラシ素材の画像を用意してないだって!?しょうがないなぁ…

 

というわけで作りました

 

ちょっとしたメイキング

 

使用ソフトはAzPainter2

 

白で塗りつぶしたレイヤーに黒でペンツールを使って
適当にマウスで描いた線に肉付けしていって不気味な文字にしたものを
ガウスぼかししてレイヤーを複製、上側のレイヤーモードを加算にして結合、
複製→加算→結合を繰り返していい感じの形になったらとりあえず『二値化』しました

f:id:nichijou-love:20181112172000p:plain

二値化したのを『輝度から線画抽出』

f:id:nichijou-love:20181112172129p:plain

とまあ、こんな感じに

f:id:nichijou-love:20181112172207p:plain

透過情報のあるpngで保存
『8bit/24bitカラー』に透過色指定にチェック☑入れるか
『アルファ付き32bitカラー』で保存

f:id:nichijou-love:20181112172300p:plain

 

できた

 

f:id:nichijou-love:20181112173657p:plain

P2VJでラスターをベクターに変換する

sesamecake.sakura.ne.jp

ダウンロードしてzipファイルを解凍したらそのまま使えるので
とりあえず好きな場所に保管しておきましょう

立ち上げたらウィンドウが表示されるので
posterize、remove anti-Aliase、binary alphaにとりあえずチェック☑を入れて
ウィンドウにそのまま画像をドラッグドロップするか
selectfileで変換したい画像を選んで開こう

f:id:nichijou-love:20181112175642p:plain

するとこんな感じにsvg画像が生成される

 

 

標準だとsvg画像のサムネイル表示に対応してないので
SVG Explorer Extensionをインストールするとsvgでもサムネが出るよ便利

github.comwww.gigafree.net

 

SVG2BSでsvgをbsの書式にする

* Catfood.Eater *

こちらもダウンロードしてzipファイルを解凍すると使えるよ
わかりやすいとこに置いておいてね

開くとこんなウィンドウが表示されるよコマンドプロンプトも一緒だよ

f:id:nichijou-love:20181112181642p:plain

設定項目はデフォルトのまんまでいいのでloadから使用するsvg画像を開きます

するとこのような文がテキストボックスに表示されます

f:id:nichijou-love:20181112181852p:plain

今回はSVG2BSのzipについてくる.bsのテンプレートファイルを使用するので
Tableを押します

f:id:nichijou-love:20181112183057p:plain

なんかテキストボックスの文が変わりました

SVG2BSのあるフォルダに『template_brush』というフォルダがあるのですがその中に『_汎用ブラシ.bs』というデータがあるのでそれをWindows標準のメモ帳以外テキストエディタで開いてください今回はTeraPadを使いました

tera-net.com

ブラシ形状データと書かれている場所があるのでそこにTableを押して表示された文をコピペして名前をつけて保存で拡張子.bsで保存したら完成!

f:id:nichijou-love:20181112184023p:plain

もしも間違えて『_汎用ブラシ.bs』のテンプレートを上書き保存した時は
SVG2BSの作者の漫画家の宇河弘樹さんが公開してるブラシスクリプト公開ページの下の方に公開されているので
そこから再びダウンロードすることができます

 

実際に使ってみた

自分で作ったスクリプトブラシを導入してみよう

アルパカだったらブラシのとこにSってマークのがあるから
そこから追加すればスクリプトブラシが使えます

f:id:nichijou-love:20181112192140p:plain

どでも゙ゔる゙ざい゙

f:id:nichijou-love:20181112192647p:plain

 

png画像をピットマップブラシでブラシにした時とスクリプトブラシを比べました

まずは大きいサイズで

f:id:nichijou-love:20181112193217p:plain

サイズは同じにはしませんでしたが
よく見たら鮮明さがなんか若干違うのがわかると思います

小さいサイズでも比較

f:id:nichijou-love:20181112193426p:plain

こっちもsvgの方が若干鮮明かな?と

元のpng画像を1000×1000pxで作ってしまったので
もっと小さくすればはっきり差があったかな??

 

とまあこんな感じです興味があったら試してみそ

 

以下はおまけ

おまけ ファイルサイズを小さくしたい

見てわかる通り、P2VJを利用してそのまま変換したデータだとbsの文が長い

なのでもっと長文をスマートにしたい時はsvgInkscapeで少々いじります

inkscape.org

www.microsoft.com

 

インストールして開けたら変換したsvgファイルを開いてノードツールで黒いとこをクリックすると形成しているパスがぶわわわっ!と表示されると思います

f:id:nichijou-love:20181112201534p:plain

オブジェクトのタブから『フィル/ストローク

f:id:nichijou-love:20181112202149p:plain

そしたらフィルを『塗りなし』にしてストロークの塗りを『単一色』にします

別に今の形にこだわりがそこまでなかったらパスのタブから『パスの簡略化』

f:id:nichijou-love:20181112202830p:plain

点が少なくなった!

これを保存してSVG2BSに読み込ませると7123字だったのが2340字になりました

これだけでも囲ってある部分はブラシで読み込んだ時に黒で塗りつぶされます

 

最初からこれするくらいだったらP2VJ利用せずに最初からInkscapeの機能でベクター化してもいいかもしれない