【解決済】ピクチャーをPNGファイルに出力する方法

返信する
トライウルフ
記事: 5
登録日時: 2021年7月18日(日) 15:43

【解決済】ピクチャーをPNGファイルに出力する方法

投稿記事 by トライウルフ »

 はじめまして。トライウルフを申します。

 2Dのキャラクターの立ち絵画像をカスタムできるゲームを制作しております。
無題.png
(※画像素材は有償サイトのblueforest様のものを購入し利用しています。)
http://blue-forest.sakura.ne.jp/img/gal ... e_v12.html

 カスタム機能はおおよそ完成したのですが、おおよそピクチャーの枚数が20ほど存在するため、
表示する度に設定された変数に基づき描画する処理がPCに負荷がかかること及びキャラクター毎の各パーツIDの格納が大変な労力のため、表示されているピクチャーを合成し、合成したピクチャーを一つのPNGファイルとして出力するプラグインがないか探しました。
 結果、奏音駒様のピクチャー合成プラグインで一つのピクチャーに合成することは可能になりました。
viewtopic.php?t=3772

 後は現在表示しているピクチャー番号1番をピクチャーフォルダにPNG形式で保存する、という処理を行いたいのですが、スクリプトないしはプラグインでやり方をご存じの方がいらっしゃいましたら、ご教授いただけましたら幸いです。
最後に編集したユーザー トライウルフ [ 2021年7月19日(月) 21:09 ], 累計 1 回
アバター
WTR
記事: 625
登録日時: 2015年12月22日(火) 19:14

Re: ピクチャーをPNGファイルに出力する方法

投稿記事 by WTR »

ググった知識の寄せ集めなのでよくわかっていないところも多いですが
ピクチャID1を image/pictures/test.png という名前で保存できました。イベントコマンドのスクリプトです

コード: 全て選択

const pictureId = 1;
const outputPath = "img/pictures/";
const fileName = "test.png";
//===========================設定ここまで==============================
const fs = require("fs");
const path = require("path");
const bitmap = SceneManager._scene._spriteset._pictureContainer.children[pictureId - 1].bitmap || ImageManager.loadEmptyBitmap();
const filePath = path.join(path.dirname(process.mainModule.filename) , outputPath);
const png = bitmap._canvas.toDataURL("image/png").replace(/^.*,/, "");
if (!fs.existsSync(filePath)) fs.mkdirSync(filePath);
fs.writeFileSync(filePath + fileName, png, "base64");
ただコレ、ゲームアツマール他ブラウザプレイ環境では出来ません。
どうにかする手段があるのかどうか不明です。
最後に編集したユーザー WTR [ 2021年7月19日(月) 22:47 ], 累計 1 回
Twitter、はじめました。
https://twitter.com/wtr_in_reverie/
トライウルフ
記事: 5
登録日時: 2021年7月18日(日) 15:43

Re: ピクチャーをPNGファイルに出力する方法

投稿記事 by トライウルフ »

WTR様

早々にありがとうございます。
実験させていただきました。

ピクチャー合成機能を利用せず、シンプルにピクチャー1に対して、下記のコマンドを
実行したのですが、私のPCではPNGファイルは生成されるが、画像が空のデーターになるという
現象が発生しました。
※10回に1回程度画像データーありで生成されます。
ツクールMVのバージョンは私は1.63です。
プラグインは多数入れているので書ききれません・・。

新規プロジェクトで全くプラグインを入れていない状態で試したところ、
ファイルの生成が実行ができましたので、
おそらく、何かのプラグインと競合しているものと思います。
原因が検証でき次第、共有もかねてご返信いたします。
アバター
WTR
記事: 625
登録日時: 2015年12月22日(火) 19:14

Re: ピクチャーをPNGファイルに出力する方法

投稿記事 by WTR »

競合がありそうな感じはしないですね…

ピクチャ1が画面に表示されている状態で実行する想定のスクリプトでした。
ピクチャの表示コマンドの直後にスクリプト実行すると
画像データのロードが完了する前にスクリプトが実行されて空データになる…気がします。

事前にピクチャの表示を済ませておいて…ができるといいですが。
ロードされていればいいので表示は不透明度0でも構いません。
Twitter、はじめました。
https://twitter.com/wtr_in_reverie/
トライウルフ
記事: 5
登録日時: 2021年7月18日(日) 15:43

Re: 【解決済】ピクチャーをPNGファイルに出力する方法

投稿記事 by トライウルフ »

WTR様

早々にありがとうございます。
ご指摘の通り、ピクチャーの表示⇒スクリプトコマンドで実行していました。
【できない例】
画像1.png
※PNGファイルtest.pngが出力されますが、高確率でファイルの中身がありません。

【できる例】
画像2.png
ウェイトを1秒実施し、画像の内容でtest.pngが保存できていることが確認できました。

 WTR様がおっしゃる通り、ある程度時間をあければウェイト不要かもしれません。

 また、ピクチャー合成で合成したファイルで保存し、表示することができることも確認できたので、
ほぼほぼイメージ通りに実装できそうです。
 本当にありがとうございます!。

 なお、たびたびで申し訳ないのですが、一点ご相談です。
キャラメイクでいったんキャラAを作成後に髪型をショートからロングに変更する等を行うなどを想定しています。
 上記スクリプトで一度test.pngで出力したした後に変更された内容で再度スクリプトコマンドでtest.pngで出力すると、pictureフォルダ上のPNGファイルは自動で変更された内容で保存されることが確認できましたが、そのセーブデーター中は画像更新がなされないことが確認できました。
 再度タイトル画面から戻ると更新された内容で表示できました。
おそらくツクールの仕様で画像データーの読み込みの問題だと思いますので、これはゲーム内に
ツクールの仕様で再度読み込みが必要です。と注意書きをしようかなと思いますが、
仮にスクリプト上でピクチャーフォルダのデーターを再度最新のデーターで読み込む、などの
コマンドがもしご存じでしたらご教授いただけましたら、幸いです。
最後に編集したユーザー トライウルフ [ 2021年7月21日(水) 09:20 ], 累計 1 回
アバター
WTR
記事: 625
登録日時: 2015年12月22日(火) 19:14

Re: 【解決済】ピクチャーをPNGファイルに出力する方法

投稿記事 by WTR »

トライウルフ さんが書きました:WTR様のスクリプト内の下記の1行の記載は
削除するか下記の例の通り//を入れるなどしないとエラーが出ますので、
ご留意ください。
貼り付けてから見づらいな…と思って書き加えてコメントアウト忘れました。すみません
※直しときました
トライウルフ さんが書きました:そのセーブデーター中は画像更新がなされないことが確認できました。
たしかに名前が違うファイルを読み込まないと更新されないですね…
キャッシュクリアして loadBitmap しなおせばいいのかと思ったのですがそうでもないらしく
すみませんが今のところ解なしです…
Twitter、はじめました。
https://twitter.com/wtr_in_reverie/
トライウルフ
記事: 5
登録日時: 2021年7月18日(日) 15:43

Re: 【解決済】ピクチャーをPNGファイルに出力する方法

投稿記事 by トライウルフ »

WTR様

ご返信ありがとうございます。
私の返信内容も修正しておきました。
今後ともよろしくお願いいたします。
返信する

“MV:質問”に戻る