カテゴリー: プログラム

WordPress で自動ギャラリーページ

らくがき置き場

以前のブログにあった「ギャラリー」ページですが、WordPress 更新でプラグインが動かなくなってしまったので久方止めていました。でも「あれ? この画像、前にも上げなかったっけ」と思うことがあり、最近の WordPress はメディアライブラリも一気に一覧表示されなくなったので、確認にちょっと不便。

元々使っていたプラグインは特定のカテゴリーに投稿した画像を一気に抜いて表示するものだったんですが、他のを探してもそれっぽいのがない。WordPress のギャラリー機能を使おうにも、過去画像に遡ってタグ付けしないとならないようで、ちょー面倒。

結局、固定ページのテンプレートを自作しちゃいました(笑) 2日ぐらいかかったので、素直にメディアライブラリでタグ付けした方が良かったかも…

→らくがき置き場

でも記事をカテゴリー分けするだけで、勝手に固定ページに投稿画像が追加されるので便利ですよ。たぶん。

需要はないかもですが、主要な部分のソースコード(page-gallery.php)置いておきますね。一応、出力タグは <figure> とか使って Gutenberg に遵守。なお前後のコードは使用中のテーマファイルの page.php に合わせないと、デザインが崩れると思うのであしからず。


Adobe Animate CC(旧Flash Professional CC)の不具合メモ

現在作成中のゲームはFlash Professional CCを使ってAdobe Air で開発していますが、先日Flash ProfessionalがAdobe Animate CCに名称変更されました。
で、インストールして試してみましたが致命的なバグがあったのでメモしておきます。

  • 作成しているAriアプリケーションの内容
    XMLに記述されているファイル一覧を元に外部ファイルを読み込みユーザーの操作に応じて適宜再生表示する。
  • 不具合発生の経緯
    Adobe Animate CCからAri インストーラーを書き出してインストール実行しAir アプリケーションを起動しても、自動で読み込まれるはずのファイルが読み込まれず停止する。
  • 不具合の考察
    試しにインストール先のフォルダに読み込むファイルを全部コピーすると正常に起動するのでファイル名が異常かファイル一覧の文字化けのどちらかが疑われる。
  • と言う事で外部ファイルが入っているフォルダをエクスプローラーで開くと一部、全く同名のファイルが2つ存在する!と言うなかなかシュールな絵面になっている事を発見。

    Adobe AnimateCCの不具合

    Adobe AnimateCCの不具合

と言う事でコマンドプロンプトで「Dir」を掛けてみるとファイル名が2バイト文字かつ「濁点、半濁点」を含んでいた場合に元の文字+「゛」または「゜」と言う感じにファイル名が変わっている事が判明(ただし、エクスプローラーでは正しいファイル名の様に見える)

Flash Professionalではこのような現象は発生していないので当面はFlash Professionalに戻して開発を続けてます。

まぁファイル名に2バイト文字を使うなって話かもしれませんが、やらなくても良いアップデートでファイル操作と言う基本的な個所にバグを混入してくるのはマジ勘弁って感じです。


AEアニメについての知見

開発中のゲームは「いじりゲー」にカテゴライズされます。
そして「いじりゲー」に不可欠なのがエロいアニメーションです。
ご存じのとおりアニメには2Dと3Dがあり、当方的には今から使い慣れたツールであるPhotoshopのデーターからアニメーションを起こせるAfterEffectsを使って2Dアニメを作るのが一番リーズナブルかなと考え、ここ数年試行錯誤を繰り返してきました。
ところがWebでAEアニメ関連のノウハウを探してもあまり見つからないんですよね。
なので、覚書も兼ねて当方の気付いたことを書いておこうかなと思います。

  1. 絵を作りこむPSDとAEに読み込むPSDは別物にする。
    これは読み込んだ時点には存在していたレイヤーがなくなった場合など、PSDのレイヤー構造が途中で変わるとAE側でエラーが出る事を防ぐ事が目的です。
    例えば、img_101_org.psdをコピーしてレイヤーやレイヤーグループを整理したimg_101_integrated.psdを作成してAEにはこれを読み込ませます。
    AEの読み込んだ後にPSDを変更する必要が生じたときはimg_101_org.psdを修正して修正したレイヤーをimg_101_integrated.psdに複製して再統合、レイヤー名を合わせて保存すると、AE側で開いたときエラーもなく変更が反映された状態になります。
  2. AEに読み込むPSDはレイヤーグループをなるべく使わずシンプルにする。
  3. 絵を作りこむPSDの塗はグループマスクを使う
    AEに読み込ませる絵は一枚絵の場合とは異なり動く部分の影になる所まで書き込む必要があります。そのため、例えば手や足の絵と胴体のレイヤーを分けて描かなくてはなりません。
    またレイヤー分けした手足と胴体は主線が無い場合がほとんどなので「アルファ―チャネルで滑らかに繋げる」ことが必須です。
    通常肌の塗等は複数レイヤーを使う方が多いと思うのですが、各レイヤー毎にやわらかい消しゴムで消してしまうと作業が増えるだけでなく、レイヤー毎でボケ足が統一できない等の不具合が起きます。
    その場合は複数ある塗りのレイヤーをレイヤーグループにまとめレイヤーグループにボケ足の着いたマスクを掛ける事で回避できます。

あと、AEではなくてFlashのActionScript3のTipですがマウスイベントは複数のイベントリスナーを設定した場合、イベントが伝わるのに「時差」がある事を最近発見しました。
しかも、その時差は実行するパソコンの処理能力に左右されるのでタイミングが関係するような処理はイベントリスナーを複数使うと意図した動作に「ならない場合」があります。
(ただし、これはマウスイベントに限定した現象らしく他のイベントでは発生しないみたいです)

最近は「Live2D」や「Spine」などPSDからアニメーションを起こすツールも増えてきましたがこの覚書の内容はAE以外でも通用するのではないかと思います。(と言うか最近Adobeの品質劣化が激しいのでCLIP STUDIOSpineUNITY に移行してやろうか等と考えている当方だったりします)


Adobe JavaScript

前回投稿のエロゲ用動画作成は進んではいるのですが、AEとPhotoshopの連携で自分がやろうとしている事が世間様的あるいは業界的には異端なせいなのか今一つ使い勝手がよろしくないんですよね。
当座困っている事が2つあって、一つはAEはコンポジションのデュレーション(動画の尺)や背景色を一括して変更する仕組みが見つからなかったので一つずつチマチマ直していたんですけど1プロジェクト内のコンポジション数が150超えたり、そんなプロジェクトが恐らく50くらいあるのでとても手作業では追いつかない。

と言う事でAdobe JavaScriptと言うものを使って自動処理させることにしました。
内容はシンプルなものでプロジェクト内のアイテムをForループで一つ一つ調べてコンポジションなら背景色とデュレーションを決められた値に書き換えると言うもの。
面倒なのでインターフェイスとかも作らず背景色の指定とかもハードコーディングと言う超手抜きですが、今まで30分掛かって居た事が5秒で終わる、すばらしい(笑

もう一つはAEにPSDファイルを読みこませるとグループなどのレイヤー構造をコンポジションとしてプロジェクトに登録してくれるのですがコンポジション名=グループ名なところ。
例えば以下のようなレイヤー構造のPSDがあったとします。

頭横向き(グループ)
├目(グループ)
│ ├目 怒り(レイヤー)
│ ├目 普通(レイヤー)
│ ├目 泣き(レイヤー)
│ └目 笑い(レイヤー)
├口(グループ)
│ ├口 怒り(レイヤー)
│ ├口 普通(レイヤー)
│ ├口 泣き(レイヤー)
│ └口 笑い(レイヤー)
└頭ベース(グループ)
├頭線画
└頭塗
頭正面(グループ)
├目(グループ)
│ ├目 怒り(レイヤー)
│ ├目 普通(レイヤー)
│ ├目 泣き(レイヤー)
│ └目 笑い(レイヤー)
├口(グループ)
│ ├口 怒り(レイヤー)
│ ├口 普通(レイヤー)
│ ├口 泣き(レイヤー)
│ └口 笑い(レイヤー)
└頭ベース(グループ)
├頭線画(レイヤー)
└頭塗(レイヤー)
体(グループ)
├腕(レイヤー)

表情や顔の向きなどの差分があるので同じレイヤー名やグループ名のものがたくさんあります。
で、これをAEに取り込むのですが、右側の「理想」のようになってくれれば良いのですがプロジェクトのコンポジションは左側の「現実」のようになります。(チッ)

現実 理想





頭ベース
頭ベース
頭横向き
頭正面

頭横向き
頭横向き 目
頭横向き 口
頭横向き 頭ベース
頭正面
頭正面 目
頭正面 口
頭正面 頭ベース


要するにAEのプロジェクト内のコンポジション名にはPhotoshopの「上位のレイヤー名が飛ぶ」のでコンポジション名だけを見たのでは親レイヤーが何だったのかが分からないのです。
これを防ぐにはPhotoshop側のレイヤー名やグループ名を「上位レイヤー名も含めた形にしておく」事しかないのですが、これがレイヤーが大量にあってまた大変なんですね。(1ファイル毎でレイヤーを統合してもレイヤー、グループ合わせて500位にはなってしまいます)
でも、このままだと一々上位のコンポジションが何なのかを調べながら動画を作らなければならないのですが、まぁ非常に効率が悪いですわな。

と言う事で、これまた調べてゆくとPhotoshopでもAdobe JavaScriptが使えてレイヤー名を変更出来るみたいなんですね。さすがPro用のツールって所でしょうか。
Photoshop用のスクリプトはこれから作るのですが、一段落したらこう言ったツールもここで公開出来たらよいかなとか思ったりしてます。
まぁ、現在進行中のエロゲの方が先なのですが・・・

5月25日追記:実際に作ってみたらレイヤーの選択が遅い遅い。
レイヤー、グループ合わせて500程度のPSDで20分以上かかると言う体たらく・・・
割高になったサブスクリプションを正当化するためにどうでも良いタブレット用のデッサンツールとかより、こう言う所やファーストリリースのバグを減らしてマトモにするとかもっと力を入れるところあるでしょ。って感じですわ


誰がその絵を撮影しているのか

ゲームのジャンルにFPS、TPSと言う物が有ります。
ご存知の方も多いとは思いますがFPSはFirst Person Shooter、TPSはThird Person Shooterの略で主にゲーム内でのカメラの位置に違いが有ります。
即ち、FPSはカメラ位置=プレーヤー自信の視点のゲームでありTPSはプレーヤー以外の第三者の視点(多くは自分が操作するキャラクタ、マイキャラの後方斜め上)のゲームという事になります。

では、カメラの位置の差はゲームにおいてどのような部分に影響を与えるのでしょうか。
一般にFPSはTPSに比べ没入感(ゲームの中に入っているかのような感覚)あるいはマイキャラとの一体感が高いと言われています。
ゆえに、FPSではゲーム画面を見つめる事により船酔いのような症状、いわゆる「3D酔い」が発生する場合が有ります。逆に言えばそれだけ没入感が高いという事かもしれません。

さて、ここまではシューティングゲームの話でしたが、これをエロコンテンツに置き換えるとどうなるでしょう。
さしずめFPSとはエロビデオで云う所の「ハメ撮り」であり、TPSは「カメラマンによるAV撮影」と言った感じでしょうか。

エロゲの場合は元々絵という事も有り「視点」よりは「構図」がより重視される傾向に有りますが、別の理由で一人称視点が採用される場合が有ります。
それは、プレーヤーの「野郎の汚いケツなんて見たくもない」あるいは絵師の「描きたくない」と言う要求です。

こう書いてしまうと、実も蓋も無いですが「汚い野郎は絵にならない」と言うのももっともな理由なのかもしれません。
しかしもう少し積極的な理由、例えば臨場感、没入感が出ると言った理由で一人称視点を採用するエロゲももっと増えても良いのではないかと思います。