TypeScript＆pixi.jsから扱う手段など

[ふぁみべぇ]

　有限会社エムツー 御中
　お世話になっております。ふぁみべぇと申します。

　現在 SKYNovel という新たなノベルゲームシステムを開発中なのですが、
https://github.com/famibee/SKYNovel
　御社のE-moteシステムをプラグインとして取り込む研究をしております。
　いくつか技術的な質問があるのですが、御教授願えますでしょうか？

●TypeScript ブラウザアプリからライブラリを呼ぶ方法
　emoteplayer.jsの384行目【class EmotePlayer】を【export class EmotePlayer】にし、
import { EmotePlayer } from ‘./emoteplayer’;
とすると【EmotePlayer.createRenderCanvas(750, 500);】は成功するのですが、
TypeScript型宣言ファイルが見つからない警告が出ます。
　型宣言ファイルをお持ちでしょうか？　戴くことは可能でしょうか？

　また、exportをつけた状態で配布・エディタからのSDK出力をするように変更
して戴くことは可能でしょうか？

●pixi.jsを初期化した後に【new EmotePlayer(canvas);】しようとするとエラーになります。
Unable to initialize WebGL. Your browser may not support it.

　そもそも、pixi.jsと共存させることはできますか？

●レンダリング対象がHTML canvasのようですが、できれば「pixi.jsのSprite」として扱えるとオーバーヘッドを回避できますが、そういうラッパークラスをお持ちでしょうか？　戴くことは可能でしょうか？

　ご回答いただければ幸いです。
　ではでは失礼いたします。

[emote_ofc]

E-moteオフィシャルです！

ご質問をいただきましてありがとうございます。

ご返答に今しばらくお時間を頂戴出来ますでしょうか。
お待たせしてしまい恐縮ですが、何卒よろしくお願い申し上げます。

[ふぁみべぇ]

　いつも丁寧なご回答ありがとうございます。
　急ぎませんので、どうぞよろしくお願いいたします。

[emote_ofc]

E-moteオフィシャルです！
お待たせいたしました。

＞TypeScript型宣言ファイルが見つからない警告が出ます。
＞　型宣言ファイルをお持ちでしょうか？　戴くことは可能でしょうか？
＞　また、exportをつけた状態で配布・エディタからのSDK出力をするように変更
＞して戴くことは可能でしょうか？

現在、TypeScriptへの対応を考慮していないため、型宣言ファイルは添付しておりません。
ですが、こちらについては正式対応を前向きに検討したいと思います。

＞pixi.jsを初期化した後に【new EmotePlayer(canvas);】しようとするとエラーになります。
＞Unable to initialize WebGL. Your browser may not support it.
＞　そもそも、pixi.jsと共存させることはできますか？

E-mote WebGL Sampleにシンプルなpixi初期化コードを挿入してテストしてみました。

FILE: emote_webglsample_with_pixi..zip
SIZE: 4.8MB
URL: https://secure.mtwo.co.jp/download/b1024338-4be6-4c46-9af3-645fd41a10e6
PASS: YJCr7mXFny
登録日時: 2019年02月04日18時07分
削除日時: 2019年02月11日19時00分

E-mote WebGL SampleのSimple Demoの
indexh.html に
を挿入し、
main.js に const app = new PIXI.Application(); の一文を追加してあります。

ですが、このコードではEmotePlayerがnewできないという現象を再現することが出来ず、
普通にEmoteの表示が出来てしまいました。

ご報告いただいた状況を再現するミニマムな環境についてご教示いただけますと幸いです。

＞レンダリング対象がHTML canvasのようですが、できれば「pixi.jsのSprite」として扱えるとオーバーヘッドを回避できますが、
＞そういうラッパークラスをお持ちでしょうか？　戴くことは可能でしょうか？

pixi.jsのSpriteクラスの内部実装を把握していないため、的確な返答が出来ません。

==========================================
以上となります。

またご質問等ございましたらお気軽にお問い合わせください。
よろしくお願いいたします。

[ふぁみべぇ]

ご回答ありがとうございました。
こちらでも再度調査・検討させて頂きます。

[emote_ofc]

E-moteオフィシャルです！

pixi.jsとE-mote for WebGLの共存が出来るか、テストコードを書いて試してみました。
以下のコードで共存に成功しましたので、ご確認ください。

FILE: emote_with_pixijs_test.zip
SIZE: 1.4MB
URL: https://secure.mtwo.co.jp/download/2078faa9-e3e1-4d7b-a634-6902744f43bc
PASS: dIOekimH60
登録日時: 2019年02月22日20時17分
削除日時: 2019年03月01日21時00分

emoteでcanvasに描画した内容を、pixiのtextureに毎フレーム吸い出して、pixiのspriteとして描画しています。
一旦canvasを経由する関係で効率はあまり良くないのですが、pixiとemoteのWebGL環境が干渉しないため、この構成が一番「無難」に動く構成だと思います。
サンプルコードではE-moteのキャンバスを表示しっぱなしにしていますが、こちらをhidden canvasにしてしまえば、pixiのオブジェクトとしてのみ表示されるようになります。

（Chromr/Firefox/Safari/Edgeで動作確認済み

ご確認していたけますと幸いです。
よろしくお願いいたします。

[投稿者]

投稿