【解決済み】ピクチャ(spine)の画像が黒ずむ

TKI
記事: 4
登録日時: 2021年5月13日(木) 20:34

【解決済み】ピクチャ(spine)の画像が黒ずむ

投稿記事by TKI » 2021年5月13日(木) 22:08

[現状]
RPGツクールMVでspineのpng,atlas,skelをロードしたのですが、ピクチャーに黒い部分がでて困っています。
顔の赤みが黒ずみ、稼働パーツの境目に黒い線がでます。

↓これの一番上「半透明部分が黒ずむ」が近い感じです。
https://docs.live2d.com/cubism-sdk-manual/texture-trouble-shooting/
> 乗算済みアルファ画像を乗算済みでないファイルとして読み込むと発生します。

私の手元にあるpngが乗算済みアルファ画像で、
スクリプト側が乗算済みでないファイルとして読み込んでいる状態なのだと思います。

[聞きたいこと]
スクリプト側を「乗算済みアルファ画像が前提」にしたいのですが、できますでしょうか?
プロジェクト自体がspineの鑑賞アプリみたいな感じになるので、影響が広くなっても大丈夫です。

[環境]
spineのロードに使用したプラグインはPictureSpine.jsです。
https://makonet.sakura.ne.jp/rpg_tkool/MVMZ/PictureSpine/document.html
環境準備の説明にしたがって pixi-spine.js (pixi4-spine3.8)をjs/libsに入れました。

素材はpng,atlas,skel (jsonではない)をロードしています。
jsonではなくskelをロードするためにPictureSpine.jsを少々いじりました(ファイル名の部分のみ)
jsonまたはskelはパーツの動きが書いてあるファイルなので本題の黒ずみとは関係ないと思います。


[ざっくりとした補足(あまり詳しくはない)]
png,atlasがアトラス画像で、skelが動きのデータ。 たぶんspineが出力したもの。
この3つをロードすればキャラが動く。
PIXIにpng,atlas,skelをロードするにはpixi-spine.jsが必要。
PictureSpine.jsが(pixi-spine.jsを使って)png,atlas,skelをツクールMVのピクチャに表示してくれる感じです。

[やったこと]
PictureSpine.js を.jsonではなく.skelをロードするようにいじりました
~上略~
function load() {
let loader = new (PIXI.Loader || PIXI.loaders.Loader)();
for (let file of $p['json file']) {
let [name] = file.match(/([^/]+?)(?=\.skel|$)/);//←44行目くらい
$p['spine data'][name] = null;
loader = loader.add(name, 'img/spines/' + file.replace(/^\/?(.+?)(\.skel|$)/, '$1') + '.skel');//←46行目くらい
}
~以下略~

pixi.js の premultiplyAlpha をtrueにしてみたけどダメでした
this.premultiplyAlpha = true;//←491行目くらい
最後に編集したユーザー TKI on 2021年5月14日(金) 03:08 [ 編集 1 回目 ]

奏ねこま
記事: 702
登録日時: 2016年1月20日(水) 20:04

Re: ピクチャ(spine)の画像が黒ずむ

投稿記事by 奏ねこま » 2021年5月13日(木) 23:31

乗算済みアルファでなければならない理由が何かあるのでしょうか?

さておき、こちらの方のツイートが参考になるかもしれません。
https://twitter.com/white_esorat/status ... 4521311235
TKI
記事: 4
登録日時: 2021年5月13日(木) 20:34

Re: ピクチャ(spine)の画像が黒ずむ

投稿記事by TKI » 2021年5月14日(金) 00:31

返信ありがとうございます。

乗算済みアルファでなければならない理由は、素材が自分で作成したものではないからです。


ツイッターの内容を参考に、pixi-spine.jsの6594行目あたりにある
textureLoader(line, function (texture) {
の次の行に
page.baseTexture.alphaMode = PIXI.ALPHA_MODES.PREMULTIPLY_ALPHA;
を入れてみましたが
Uncaught TypeError: Cannot read property 'PREMULTIPLY_ALPHA' of undefined
とエラーになりました。

https://pixijs.download/dev/docs/PIXI.html#ALPHA_MODES
PREMULTIPLY_ALPHA じゃなくて PREMULTIPLIED_ALPHA……?と思って
page.baseTexture.alphaMode = PIXI.ALPHA_MODES.PREMULTIPLIED_ALPHA;
にしてみましたが
Uncaught TypeError: Cannot read property 'PREMULTIPLIED_ALPHA' of undefined
とエラーになりました。
奏ねこま
記事: 702
登録日時: 2016年1月20日(水) 20:04

Re: ピクチャ(spine)の画像が黒ずむ

投稿記事by 奏ねこま » 2021年5月14日(金) 02:19

すみません、提示したツイートはMZ(PixiJS v5)以降でないとできないようです。
MV(PixiJS v4)でできる方法を探したのですが、まともな方法はなさそうなので
かなり強引ですが以下のような対応を提案してみます。
添付画像を参考に「glTexture.premultiplyAplha = true;」の行を書き換えてください。
pixi-spine.jsではなくpixi.jsのほうです。

無題2.png
TKI
記事: 4
登録日時: 2021年5月13日(木) 20:34

Re: ピクチャ(spine)の画像が黒ずむ

投稿記事by TKI » 2021年5月14日(金) 03:07

pixi.jsの17029行目
glTexture.premultiplyAlpha = !(texture.imageUrl || '').includes('img/spines/');

書き換えたら黒ずみがなくなりきれいに描画されるようになりました!

本当にありがとうございました。

“MV:質問” へ戻る