ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

エンジニア絵描き会#1に参加しました

エンジニア絵描き会とは?

エンジニア絵描き会とは、やぎっち(@yagitch)さんが主催されている、「エンジニアだけど絵を描いている」という比較的ニッチな人を対象に集めた会です
engineer-ekaki.connpass.com

実況タイムライン

ツイッターの実況は以下のタイムラインからご覧ください
twitter.com

当日の会話

当日はLT発表を3名行った後に、自由会話が長らく続いていました。

LT資料

LTは私の発表も含まれていますので、私のところは特に伝えたいところを記述しようと思います。

未経験から5年間描き続けた結果(@yagitch)

speakerdeck.com

  • 本を表紙込みで書いて反響があったのがうれしかった。さらにイラスト制作依頼も来たのがさらに嬉しかった。
自己紹介と、環境と、Scrapboxのすすめ / engineer_ekaki self-introduction(@castanea)

speakerdeck.com

  • Scrapbox は いいぞ。
  • クリスタ は いいぞ。JetBrains製品より安い!
2019年お絵かきふりかえり+α(@traitam)

speakerdeck.com

  • 適切な制約はより高度な自由を与える(プライベートのスケジュール管理も正しく行えば、息苦しくなく良い結果をもたらす)
  • 継続は大事だけど、とっかかりがあってこそ始められる気がする

自由会話

エンジニアらしく、ツールを自分のユースケースに当てはめつつ活用していく話が出てきたのが楽しかったです。(Trelloをふりかえりツールにするとか)

明度だけ先に塗って、ソフトライトかオーバーレイで着彩を進めていく(グリザイユ技法)が結構いい感じ

色を作るのが苦手なら、グリザイユ技法がいい感じなのだなぁと再確認しました

資料のコレクションどうしてる?

比較的にみんな気になっていたところ。ほかのみなさんはどうしているのでしょうね。確かに。

イラストのGit管理

いい感じにGUIツールとかで管理できたらいいなぁ…。

Scrapboxでコミットログ的に記述していき、継続して思考書きながら進めるの良い感じっぽい。

  • 気になる単語はScrapboxのリンクを付けて詳細を掘れるようにする。

(イラストをパブリックGitにして、神絵師からプルリク飛んでくるの恐怖でしかない)

コミケや技術書典のサークル参加者ばっかりだった

アクティブだからこそ、ここに集まった感。

Trelloにイラストを貼って振り返りツールにする

意外な使い方。なるほどそういうのもあるのか


最後に

エンジニア+絵描きというニッチ界隈ならではの話題が多く、大変楽しかったです。
雑多な話や、具体的なツール活用などなど話題も尽きることなく終了時間になったのも印象的でした。
主催されたやぎっちさん、本当にありがとうございました。

それではみなさん、楽しい創作ライフを!

PhotoshopExtensionでmain.jsを経由して、複数のjsxを呼び出す

これは何?

blacketsで作成したテンプレートから、自作のjsxシートを呼び出す処理の説明です。

テンプレート作成まで

テンプレート作成までは以下の記事を参考にしています。
www.tam-tam.co.jp

ここではテンプレート作成までの説明は割愛します。

実装手順

main.jsに記述を追加する

テンプレートが作成できたら、jsxフォルダの下に自作jsxや呼び出したいjsxを入れます。
呼び出す方法は「.jsxまでのフルパス」を指定すれば呼び出せます。

記述例

var basePath = csInterface.getSystemPath(SystemPath.EXTENSION);

$("#btn_sample").click(function () {
  var path = basePath + "/jsx/original_extension.jsx";
  csInterface.evalScript('$.evalFile("'+path+'")');
});

index.htmlに記述を追加する

#btn_sampleはindex.htmlのボタンの方で設定します。class idをこれで登録します。
記述例

<button id="btn_sample" class="topcoat-button--large hostFontSize">Preprocess</button>

注意点

jsxでメソッドが切られていない場合は、前述で実行できます。

  • もしjsx内部がメソッド単位で処理が切られている場合、メソッド名まで呼ぶ必要があります
  • 記述例:csInterface.evalScript('$.evalFile("'+path+'")/method()');

上体研究(後編 - モデル作成)

この記事で話すこと

後編では実際にモデルを作っていき、振り返りを行います。

ラフの作成

f:id:traitam:20191124140602p:plain

まずはラフを作成します。
今回はシンプルに膝までの正面モデルにしました。

分割

分割は線画を起こしながら同時に分割するスタイルを採用しました。
パーツ数は49です。
比較的少ないと思われるパーツ数なので、動きに無理が出るようなら更なる分割が必要になります。

着彩

今回はシルエットの変更練習ということでベタ塗りだけにしました。
基本的な着彩に加えて、線とクリッピング用素材があります。
上体では鼻先と胸のシルエットが大きく変わりそうだったので、専用の線と着彩を用意しました。
f:id:traitam:20191124142615p:plain
f:id:traitam:20191124142618p:plain

最終的に表示物をすべて出した状態でpsdでインポート用処理を行って、CubismEditorにインポートします。
f:id:traitam:20191124142803p:plain

モデリング

アートメッシュ編集

アートメッシュは基本自動割り付けです。
f:id:traitam:20191201133804p:plain

点の間隔(ピクセル)を75にする以外はデフォルトで設定します。

変形を綺麗に行いたい部分は、別途手打ちで行います。今回、まぶた・眉のなどの他に上腕(手袋)などをを手打ちします。
打ち方は基本的に「線を囲むようにして、綺麗に変形する」ように設定します。
肩部の面積で角度の表現を行いたいので、肩部の線も手打ちしていきます。
f:id:traitam:20191201134049p:plain
f:id:traitam:20191201134956p:plain

デフォーマ

上体変形用デフォーマは「基本パラメータ用デフォーマ」の親階層に設定します
位置が大きく変動するので、子階層に上体用デフォーマを用意すると親階層のデフォーマが置いてけぼりになるためです
(失敗例:肩のすくみデフォーマが上体変形から置いてかれている)
f:id:traitam:20191201135538p:plain
f:id:traitam:20191201135534p:plain

パラメータ

デフォーマで上体用のものを作成し、そこにパラメータを付けていきます。
中編で見た、変形の具合を頭で思い出しながらパラメータを作っていきます。
基本は両端のみですが、パラメータの最中に破綻があるようならば別途追加してきます(例:上腕)
f:id:traitam:20191201140825p:plain

クリッピングは動きに合わせて拡縮します。
下の例はクリッピング用の黒を上体の動きに合わせて拡縮しています。
f:id:traitam:20191207123023g:plain

今回は基本的な拡縮・移動で実現できましたが品質を上げるには「どこから線を見えるようにするか?」を考えながら変形を行う必要があります。
それはパラメータ内に多くの緑点が打たれることを意味しており、ここはどれだけ品質を担保すれば良いか、を考えながら設定していく必要があると思います。

あと今回は新しい試みとして頭頂部・後ろ髪の2つに分割してパラメータを設定しました。
分けた理由としては「輪郭の隠しが苦手」なためです。輪郭に強い変形を行うと角度XYブレンドして四隅を作るときに荒れるのが嫌で今回のアプローチをしてみました。
f:id:traitam:20191207124503g:plain

…イマイチかも?今回はベタのみだったので違和感なく変形できましたが…。
もうちょっと顔の輪郭を隠す時のノウハウを溜めて、分割を再検討した方がよい印象でした。

アニメーション

今回のモデルでは上体・目の開閉の2つだけパラメータを作り、パラメータでモデルに極端な破綻が無いかの確認程度のアニメーションを作成しました。
f:id:traitam:20191201145848g:plain

パッと見は特に大きな問題は無さそうなので今回はこれでOKとします。

課題・懸念

以下は課題懸念です

課題

  • 口・鼻周りの処理が少し甘かった印象
  • 頭頂部の処理が思うように楽ではなかった。もっといいやり方があるかも
  • シルエット変形用の線で、クリッピングの黒を「どこから」乗せれば良いか曖昧だった
  • ひよってワープデフォーマで設定したが、移動しかしてないので所々回転デフォーマで代用できた

懸念

  • 今回はベタ塗りなので、もし厚塗りや独特な着彩で実現する場合は、また違う手法が必要になる
  • 上体パラメータ追加による基本パラメータ付けの難易度が上がる
  • ほかの動きと、どう干渉するか未知数。どの程度まで干渉するかでモデル作成の難易度が変化する
  • 品質とパラメータ点数が比例しそうなので、品質の着地点がいくつかあると構築で迷子にならないで済むかも

おわりに

今回は「綺麗なシルエット変更」に加えて「角度の説明」を意識しながら作成しました。
やはり先行事例があると、まねるだけで構築できるのは大変楽ですね。先人に感謝を。
角度による変化や「どうしたら意図した角度に見えるのか」は、絵についての知識が必要なのかもしれません。

どうしても記事だと伝わらない部分が多いのでモデルの配布をします。
研究・学習用にのみお使いください。(ダウンロードなど出来なかったらツイッターにご連絡ください)
drive.google.com

それではみなさん、楽しい創作ライフを!


翌日のLive2D Advent Calendar 2019 - Adventarは、もふもふさん🐈Vゲーマーエンジニャー猫準備中 (@Moffu360) | Twitterさんです。お楽しみに!

上体研究(中編 - 各部位の制作方向性検討)

現在位置

上体研究(前編 - コンセプト作成・課題洗い出し)
上体研究(中編 - 各部位の制作方向性検討) (今ここ)
上体研究(後編 - モデル作成)

この記事で話すこと

前編ではLive2Dでの表現難易度の高い課題と、それに対する対策方法を見てきました。
中編では参考資料をみつつ、動きのイメージを付けていきます。

作るための参考文献

MMDのお辞儀モーションを見て、必要な表現を洗い出します。
フレーム単位で頭に動きを叩き込めれば理想です。
以下は参考にしたモデルとモーションです。

seiga.nicovideo.jp

www.nicovideo.jp

2つをMMDに読み込んでフレーム単位でシルエットを見ていきます。(MMDについてのインストールや操作は割愛します)
参考にするモーションは「カーツィ_カジュアル.vmd」です。(一番深い上体を行っているため)
f:id:traitam:20191116171912p:plain

特に参考にする箇所は0~40フレームの部分です

参考要素の抽出

頭部

髪に関しては、前髪・横髪・後ろ髪を分割するのはもちろんですが懸念としては「後ろ髪と頂点髪を分割するか」というところです。
f:id:traitam:20191117110959p:plainf:id:traitam:20191117110956p:plain

0f地点と30f地点では大きく髪の面積が変化します。特に頂点部分の面積変化が大きいです。
分割しても良いですが、分割したパーツを大きく縮めるとピクセルが詰まってボカシが無くなりジャギが発生してしまいます。
モデリングスキルでカバー」も出来ますが、面倒なのでなるべく避けたい…。

というわけで頭頂部・後ろ髪でパーツ分割をして対応しようと思います。
f:id:traitam:20191117115110p:plain

理由としては「輪郭パーツを隠すのに四苦八苦して嫌な制約が発生する」のを避けるためです。
画像右下のように描画順を前から、前髪・(横髪)・頭頂部・輪郭・後ろ髪、にします。
頭頂部の線に関しては、一緒にすると潰れすぎて違和感になると予想されるので別パーツにして不透明度で管理します。

頭頂部と後ろ髪の繋ぎ目で不整合が起きそうですが、ここではグルー機能を使うなどして対応したいところです。
docs.live2d.com

顔の輪郭

山風さん式シルエット変化手法が良さそうなので、参考・実践してみたいと思います。

クリッピング先と元を用意して、動作に応じて変更させます。
ここばっかりはパラメータ点が増えるのが予想されますが仕方ないとして、それでも少しでも減らす努力をしながら構築していきます。

顔パーツ

角度XYの発展形として形を変形させていきます。
角度ごとの顔シルエットを意識して見え隠れを設定します。
参考にしているモデルでまつげは前髪が被さって初めて見えなくなるので、おでこに隠す用パーツは作成しない方向で行きます。
もし、彫りが深いキャラクターを作る場合は彫りで隠す用のパーツがあってもいいかもしれません。

胴体

まずはフレーム単位で動かして要素を抽出します。
下記画像は線の特徴が変わる遷移を意識してピックアップしました。
上から、9f -> 22f -> 26f -> 29fです。
f:id:traitam:20191116173158p:plain
f:id:traitam:20191116173229p:plain
f:id:traitam:20191116173244p:plain
f:id:traitam:20191116173310p:plain

26f時点で胸の線が出ています。そこから29fで完全に線が繋がりました。
このことから、上半身は胸・くびれでパーツを分けた方がよいと考えられます。

また、くびれ・腰で分けます。人体骨格の関係上良いですし、骨盤以下は上半身ほど大きく動かないためです。

お辞儀をしたときのくびれ部分に関しては大きくシルエットが変わらないため、クリッピングでシャドウを乗せるだけにして「胸部より後方にいる」説明を付けます。

鬼門です。
胴体の角度が大きく変わり、それに付随して腕が大きく角度を変えます。
特に上腕が大変です。モーションではおよそ50%変化しています。
f:id:traitam:20191116185058p:plainf:id:traitam:20191116185101p:plain

前腕に関しては、モーションではおおそ20%サイズが上体の方が短くなっています。
f:id:traitam:20191116185231p:plainf:id:traitam:20191116185235p:plain

手袋のフチと手首の線は動きが激しい、さらにこれが角度の説明になるので別パーツにして強い変形に耐えられるようにします。

先行作例

腕に関してLive2D作品では、まかかびさんの作例があります。
まかかびさんの作例では、上腕を隠す形で前腕を動かしています。
gifmagazine.net

下半身

通常のモデル作成と同じにします。
上体のときに、スカートを少し上にあげて下半身の微妙な動作を説明します。

これで各場所の変形のイメージがそろいました。
最後、後編は実際に作成していきます。

後編
traitam.hatenablog.com

上体研究(前編 - コンセプト作成・課題洗い出し)

現在位置

上体研究(前編 - コンセプト作成・課題洗い出し) (今ここ)
上体研究(中編 - 各部位の制作方向性検討)
上体研究(後編 - モデル作成)

この記事は何?

Live2D Advent Calender 2019。8日目の記事です。
adventar.org

上体挙動が好きなので、自分なりに研究しました記事です。

モデル作成コンセプト

「90度近く曲がる上体」を綺麗に作りたい

  • 特にシルエット変更を綺麗に行いたい

かつての制作物

f:id:traitam:20191117112225g:plain

モーションで活用した例が以下GIFです
f:id:traitam:20191116152852g:plain
(GIF品質の影響で目がチカチカしているのはご容赦ください)

2016年に制作したモデルです(Cubism2.1Editor使用)。
Alive用作品だったのと、急いで作ったのもあって再利用性が低いモデルでした。
深めの上体を作ったのですが、手探り・行き当たりばったりで作ったので品質に見合わずコストが高かったの印象でした。
腕はカメラに対して平行を維持、胸パーツの変形で無理に前後関係を表現、などある程度見れる形に作り上げて、この段階では終わりにしました。

今回作ったもの

f:id:traitam:20191201145848g:plain
前回作ったものを見て、以下の対応を意識して構築しました

  • 腕をそれなりに奥行き対応できるように
  • 顔の角度をしっかり付けれるように
  • 鼻と胸の部分のシルエット変更をシームレスに

これを構築するまでのプロセス(課題洗い出し~モデル構築)を記事にしました。

使用したツール

SAI2
Photoshop CS6 Extended
Live2D CubismEditor 4.0.00

Live2D制作おける苦手な事

強い角度のパラメータ設定

横顔や、手の回転など「画面に垂直方向」の角度付けが難しいところです。
f:id:traitam:20191116154329p:plain

著しくシルエットが変化する動きは、付けにくい。とも言えます。
ただこの動きこそがモーフィングの真髄であり、より高いモデル品質を実現できると思っています。
もちろん「角度の強さ≠品質の高さ」ですが、角度を付けられるなら行けるところまで行きたいのが一部の人の性というものです。

顔の強いシルエット変化にどう対応する?

顔に関してはバランスが少しでも崩れると違和感になります。
加えてパーツが多く・細かく、調整が大変です。
この問題に解は2つあります。

A. パーツ差分を作って、動作中に切り替える

比較的難易度の低い方法です。
実装コストが低く、手軽に変化できるためよく活用されているのを目にします。
ただ、綺麗に切り替えるならば相応のスキルが必要になってきます。
指足・足先は動作が大きくなるため、動きの最中に切り替えれば違和感なく動作できます。
例:Live2Dの教科書(横顔を作る)・公式サンプルモデル(受付ハル・桃瀬ひより)など

サンプル

顔ではないですが指での切り替えサンプルです(QQUACKさん)

B. 線、着彩を分割。追加線も用意しつつシームレスに動作させる

難易度の高い実装です。
モデル調整がシビアになり、破綻しやすかったりモデル汎用性に欠けます。
しかしシームレスに動作する極めて品質の高いモデルが完成します。

サンプル

外輪郭を活用しつつ、影面積の変化で横顔を表現(モーセルさん)

線をクリッピングを用い、横顔変化を表現(山風さん)

このあたりになると完全にアイデア勝負になってくる印象です。
モーセルさんのが基本形として、山風さんのは発展形というように感じます。

その他、それなりの方々が手・指・胴体などなど強い角度を作っていたりします。怖い。

課題と具体的な対策は以上です。
中編では参考資料を見つつ、アートメッシュ変化を洗い出していきます。

中編
traitam.hatenablog.com

複数のgithubアカウントを使ってssh使用しつつブランチ管理する

この記事について

1つのPCに複数Githubアカウントを管理しています。
が、リポジトリごとにSSHでclone/pushした時に少し詰まったので、その備忘録です。

概要

sshKeyを複数作成した状態でconfigを作ります。(ssh -Tによる疎通確認も任意で行う)
sshKeyの公開鍵をgithubに各々登録します。
そしてremote setで@マーク以降をconfigに設定したHost名にして設定すればOKです。
pullしてrepository not found言われなければ完了です。

最後にcommitする前にconfig user.name / config user.emailでコミット者を設定してください。

詳細

config

.ssh以下に存在しているconfigファイルで以下のように設定されているとします

configホスト名例
Host github-work
・・・

Host github-private
・・・

remoteをset(もしくはadd)する

対象リポジトリをinit / cloneします。 このタイミングでconfigに設定されたHost名を書けばOKです。

github-workというHostで使用したい場合
git remote add origin git@github-work:aaa/bbb.git
もしくは
git remote set-url origin git@github-work:aaa/bbb.git
github-privateというHostで使用したい場合
git remote add origin git@github-private:aaa/bbb.git
もしくは
git remote set-url origin git@github-private:aaa/bbb.git

これでconfigに設定された鍵でpull/pushが行えるようになります。

commit者を指定する

git globalで設定してあるアカウントでコミットする場合はこの処理は不要です。

globalで指定していないアカウントでコミットしたい場合は以下のコマンドを対象のリポジトリに記入します。

$ git config user.name "使用したいアカウント名"
$ git config user.email "使用したいアカウントユーザーネーム"

これで指定したアカウントでコミットができるはずです。

それではみなさん、楽しい創作ライフを!

参考文献(最終閲覧日:2019/10/06)

GitHubで仕事用とプライベート用のアカウントを切り替えて使う | Black Everyday Company
SSH Keyを作成してGitHubなどに接続してみる - Qiita
gitの基本(init~push) - Qiita
githubから httpsでcloneしてしまったリポジトリの originを sshに変更する - ブログ - ワルブリックス株式会社

tmux 2.9aにして.tmux.confの設定が変わったので対応したおはなし

これはなんの記事?

tmux v2.9a で.tmux.confの記述が変わって対応したという内容の記事です。

.tmux.confを2.9に対応させる

開発環境

Mac Book Pro 2019
Mojave
tmux 2.9a

詳細

新規インストールしたMacに、他のMacで同じtmux.confを使ったらinvalid option: エラーを吐くようになりました。

2.9から一部記述方式が分かったそうなので、それに合わせて変更しました。私の場合は以下の感じです。

# ステータスバーの色を設定する
set -g status-fg white #old style
set -g status-bg black #old style
↓
set-option -g status-style fg=white,bg=black #new style

# ウィンドウリストの色を設定する
setw -g window-status-fg cyan #old style
setw -g window-status-bg default #old style
setw -g window-status-attr dim #old style
↓
set-window-option -g window-status-style fg=cyan #new style
set-window-option -g window-status-style bg=default #new style
set-window-option -g window-status-style dim #new style

fg, bgのカラー設定とattrの設定記述がちょっと違うのが留意点です。

それではみなさん、楽しい創作ライフを!

参考文献(最終閲覧日:2019/09/23)

qiita.com
github.com
qiita.com
matea2.github.io