SNStalkプラグインなしでSNS風会話表示する方法（ツクールMV)※10/9に改訂版が出てます。

有楠

改訂版はこちらです。こちらが最新版なのでご参照下さい。

こちらの記事は記録として残しておきます。

SNStalkプラグインの入った「SNS風プラグインサンプル」は過去にアツマール公式で配布されてました。そして、このサンプルを改変したゲームは商用利用ができないことが判明（広告入りアプリ化も無理）。
なので、どうにかSNStalkプラグインなしで同様のSNS風会話シーンを作れないかを考えてみました。

＜用意するもの＞
・適当な画像(img/picturesフォルダに入れる)
・スマホの背景画像(img/parallaxesフォルダに入れる)
・SNSアイコン代わりの画像（img/picturesフォルダに入れる）
・SNS用吹き出し画像(img/picturesフォルダに入れる)
・プラグイン「DTextPicture.js」「PictureCallCommon.js」（トリアコンタン様作）(js/pluginsフォルダに入れる）

以下、この方法で拙作「SNStalkers」の会話シーンを再現してみてます。

①SNS会話イベント様のMAPを作ります。
遠景にはスマホ画像をセットします。
イベントを2つ作成。いずれも並列実行にします。

マップを開いた時に1回だけ実行されるイベントです。

1つ目のイベントでやってること説明。
1番ピクチャに適当な画像を入れて「画面全体よりも大きいサイズになるように」「透明度MAXの状態になるよう」設定します。続いてこの1番ピクチャをボタン化します。具体的には、PictureCallCommon.jsのプラグインコマンドを使って「このピクチャが押された時はEnterキー（コマンドでは"ok"）が押されたものとする」というキーバインド設定を行います。
これで「画面上のどこかをクリックした時」＝「Enterキーが押された時」に会話イベントを進めるための事前準備は終わりです。
（なお、その下にある90番ピクチャにアクター2番の名前をテキストピクチャとして表示する処理は、SNSの上部に任意のキャラ名を表示させるための処理なので不要なら無視してください。）

こちらが会話イベントの時に実行される処理です。Enterキーが押されるか、画面の何処かがクリックされた時に発動します。

2つ目のイベントでやってること説明。
条件分岐で1回Enterキー入力時（あるいは画面上のどこかがクリックされた時）に1回分SNS会話が表示されるようにしてます。といっても、ここでやってる処理は「会話の進行度を示す変数を1つ加算し、会話用スイッチをONにする」だけです。
実際の会話表示処理はコモンイベントを呼び出して行います。
また、このイベントは2ページ目を作っておくのを忘れないようにしてください。
2ページ目は出現条件を「会話用スイッチがON」として、中身は空白のイベントにしておきます（この2ページ目を作っておかないと、一度Enterキーを一度押したら最後、会話イベントが自動で最後まで実行されてしまいます）

事前準備が終わったら、会話表示用のコモンイベントの作成に移ります。
このイベントでは7個の変数と15個のピクチャを使います。

最初に会話文の文字列や会話枠（フレーム）、アイコン代わりの顔画像を表示する位置のX座標やY座標を変数を使って設定します。（この辺の座標は変数にしといた方が一括で変更できて便利）

マップイベントの方で会話の進行度変数が1クリックごとに1ずつ加算されていくように設定してるので、基本的に会話の進行度に合わせて「会話文の文字列」「顔画像」「フレーム」の3つの画像を表示していきます。
文字列はDTextPicture.jsのプラグインコマンドを使って3行に分けてピクチャ化してます。
（顔画像とフレームは本当は画像の方をいじっていい感じに修正したかったのですが、うまくいかなかったので途中でY座標の数値を－20して微調整。）
画像が全て表示されたら「会話用」スイッチをOFFにして、次のEnterキー入力（あるいは画面クリック）に備えます。

実際のゲーム画面はこちら

1画面で４つまで会話文を表示できる仕様なので、会話の進行度＝4まではピクチャ番号を１つずつ増やしながら、進行度＝１と同じようなイベントを量産します。

ピクチャの番号を増やしていくほか、表示位置のY座標の変数も増やして適宜調整します。
これが４つ会話文表示した時の実際のゲーム画面です。

５つ目の会話文から少し処理が増えます。

具体的な処理としては……
No.83～85までのピクチャは今まで同様に表示しますが、それ以外の今まで表示されていた会話画像はピクチャの移動で１つずつ上の位置に移動させます。
この時に「完了までウェイト」にチェックすると思うような動きにならないので注意。
一番上にあった会話文で用いた画像3つ（71~73）は消去します。

これが進行度＝5の時の会話場面。一番上にあった会話文が消えて、一番下に新しい会話文が挿入される形で会話イベントが進みます。

進行度＝6からは、一度消した71～73を再利用する形で、77～85番のピクチャを移動させて、同じように会話文の位置をずらしていきます。74～76番のピクチャは削除します。

消えてる3つのピクチャと表示されてる12個のピクチャをうまいことやりくりして会話シーンを表示します。

会話の進行度7以降も同じようにピクチャ番号をずらしながら作っていきます。

会話イベントの最後はこうなってます。

会話終了時は画面クリックを検知するための1番ピクチャを消しつつ、SNS画面から脱出するためのバックボタンを2番ピクチャに設定します。
この画面にはのせてませんが、2番ピクチャはP_CALL_CE 2 1 1というプラグインコマンドで「コモンイベント1（※別途SNSマップから別の場所に移動するためのイベントが組んであります）を発動するボタン」にしてあります。

こうやってできたSNS風会話シーンの動作はこちら。

画面クリックによって１つずつ会話イベントが表示され、イベントが進んでいきます。
SNStalkプラグインで出来てたことに比べれば、会話の表示しかできない（画像表示とかには未対応）し、動作のスライド感がないし、ログの見直しなどもできませんので、ぶっちゃけ劣化版です。
ですが、もともとよく使ってたプラグイン2つとピクチャ、イベントの組み合わせでだけで似たような機能が再現できたのがプログラム苦手な自分としては嬉しいので……ここに備忘録代わりにやり方を残しておきます。

おまけ。
本作ではデフォルトのフォントだとSNS会話シーンの文字が太くて潰れてるように見えたので、別途細めのフォントをDLしてきて、SNS会話シーンのときだけ出るようにしてます。
使ったフォントはmplus-1mn-thin.ttf
導入方法はマップイベントで最初にピクチャ1をボタン化するイベントの後にスクリプトで「Graphics.loadFont("GameFont","fonts/mplus-1mn-thin.ttf")」を挿入するだけ。