【Javascript】ツクールMVのプラグインを作成したいが、SpriteとCanvasの違いが分からない

Question

前提・実現したいこと

1つのcanvasなどにまとめて画像を表示し
それをfs.writeFileでローカルに出力したいと思っています。
まず、出来ることなのか、出来ないことなのかが知りたいです。
一応javascript+HTML5では出来そうなサイトを見かけました。
知識の深い方々から参考サイトやアドバイスを頂けたらと思い質問しています。

発生している問題・エラーメッセージ

Spriteの構成が分からない。元の名前が知りたい。
|列1|列2|列3|列3|
|:--|:--:|--:|
|一番上||sprite||
|二番目||sprite|sprite|
|三番目||bitmap(png)|bitmap(png)|

参考サイトを見ると上記のように書かれているものがありました。
一番上の、おおもとのSpriteをどのように取得するのかが知りたいです。

該当のソースコード、試したこと

ただのスクリプトで、画像が重ねられるか確認しています。

var bitmap = ImageManager.loadBitmap("img/test/", "a");
var sprite = new Sprite(bitmap);
var bitmap = ImageManager.loadBitmap("img/test/", "b");
var sprite2 = new Sprite(bitmap);
SceneManager._scene.addChild(sprite);
SceneManager._scene.addChild(sprite2);

画面上、重なっていることは確認しました。
spriteとsprite2は別のcanvasに描かれていると思うので
重ねて合成した画像を出力することは出来ないと思っています。

参考になりそうなサイト様
https://tkooler-guild.org/plugin/pictureprioritycustomize-js/
http://rpgmaker-script-wiki.xyz/bitmap_sprite_kowazamv.php
http://dhisea.sakura.ne.jp/column_sprite_2.html
https://ch.nicovideo.jp/liply/blomaga/ar1124914
https://tm.lucky-duet.com/viewtopic.php?t=1013

補足情報（FW/ツールのバージョンなど）

ツクールMV　1.5.1
PC　Win10　64bit

ここにより詳細な情報を記載してください。

Answer 1

1つのcanvasなどにまとめて画像を表示
Spriteの構成が分からない

RPGMV は PixiJS のRendererに関連する Canvas にまとめた上で WebGL 描画しているはずです。技術的には可能でしょう。

ただし、RPGMVのフレームワークに隠蔽された、実行環境の実装に近い部分（レベルの低い処理層）の為、最低でも以下の２つのファイルについて、コードリーディングは必須です。

• js/lib/pixi.js
• js/rpg_core.js

軽く眺めたことしかありませんが、

1. Sprite._bitmap .. Bitmapオブジェクトのインスタンスを格納
2. Bitmap._canvas .. 画像ファイルの描画対象

なので、sprite._bitmap._canvas が期待するCanvasになるのですが、RPGMVのフレームワークでは、多くのオブジェクトが PIXI.DisplayContainer の派生としてツリー管理するので、各シーンでゲームオブジェクトがどのようにツリーに配備されているか、インスタンス生成する initialize() メソッドを中心に読み解く必要がありそうです。

オブジェクトの継承については次のような内容だったように思います。
Sprite < PIXI.Sprite < PIXI.DisplayContainer

fs.writeFileでローカルに出力したい

nw.js や Electron を用いたローカルアプリケーションとしてデプロイされることと思いますが、こちらは勉強不足で回答できません。

まず、出来ることなのか、出来ないことなのか

不可能ではないが、容易でもない。といった回答になります。
（結局、描画に関連する多くのjs/rpg_*.jsをコードリーディングすることになりそうだと感じます。）
ご参考になれば。

Comments

[退会済みユーザー]

AkitoshiManabe様
回答ありがとうございます！
どこを確認すべきか等まで詳しく記載頂き本当にありがとうございます。

rpg_core.jsのファイルを見ていましたが
Graphics._createCanvas = function() {
this._canvas = document.createElement('canvas');
this._canvas.id = 'GameCanvas';
this._updateCanvas();
document.body.appendChild(this._canvas);
};
このようなコードを見つけました。
これと同じようにcreateElementでCanvasを作成し
IDの名前を自分でつけ
document.body.appendChild(this._canvas);
とすればいけるのでは？と思いましたが
なかなか上手くいかないので、もう少し勉強します。

Bitmap.prototype._createCanvas = function(width, height){
this.__canvas = this.__canvas || document.createElement('canvas');
this.__context = this.__canvas.getContext('2d');

this.__canvas.width = Math.max(width || 0, 1);
this.__canvas.height = Math.max(height || 0, 1);

if(this._image){
var w = Math.max(this._image.width || 0, 1);
var h = Math.max(this._image.height || 0, 1);
this.__canvas.width = w;
this.__canvas.height = h;
this._createBaseTexture(this._canvas);

this.__context.drawImage(this._image, 0, 0);
}

this._setDirty();
};
この辺が近いような気もしますが、何か違うような気もしてまして
とにかく時間が必要ということだけは分かりました。
丁寧に回答頂きありがとうございます！

[AkitoshiManabe]

> とにかく時間が必要
同感です。
私もコードを追いきれていませんが、まずは抽象化された「機能面」を探ってゆくしかないと思っています。