見出し画像

【改訂版】SNStalkプラグインなしでSNS風会話・ログ表示する方法（ツクールMV)

有楠


※2023年6月11日の記事を改訂しました。
バックログ画面も出せます。
SNS会話で選択肢を選べるようになりました。
セルフメモなので読みにくかったらすいません。

＜用意するもの＞
・SNS会話を開くためのアイコン画像(img/picturesフォルダに入れる)
・ログ画面を開くためのアイコン画像(img/picturesフォルダに入れる)
・黒塗りの画像(img/picturesフォルダに入れる)
・背景画像(img/parallaxesフォルダに入れる)
・SNSアイコン代わりの画像（img/picturesフォルダに入れる）
・SNS会話が終わった時のバックボタン用画像（img/picturesフォルダに入れる）
・SNS用吹き出し画像(img/picturesフォルダに入れる)
・プラグイン「DTextPicture.js」「PictureCallCommon.js」（トリアコンタン様作）(js/pluginsフォルダに入れる）

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

①SNS会話イベント様のMAPを作ります。
（サイズは１３x１７）
遠景には背景画像をセットします。
イベントを4つ作成。いずれも並列実行にします。

【1】キー入力検知用イベント

このイベントでやってることの説明は↓

1番ピクチャに黒塗り画像を入れて「画面全体よりも大きいサイズになるように」「透明度MAXの状態になるよう」設定します。
続いてこの1番ピクチャをボタン化します。具体的には、PictureCallCommon.jsのプラグインコマンドを使って 「このピクチャが押された時はEnterキー（コマンドでは"ok"）が押されたものとする」というキーバインド設定を行います。 （※「画面上のどこかをクリックした時」＝「Enterキーが押された時」に会話イベントを進めるための事前準備です）
3番ピクチャはログボタンを呼び出すためのボタンにします。
プラグインコマンドでそのためのコモンイベント（ここでは33番）に紐づけしてます。
その後の「Input._currentState['ok'] = true;」と1フレーム挟んで「Input._currentState['ok'] = false;」とスクリプトを使って「1回Enterキーが押された」という状態してます。
（※こうすることでSNS会話画面が開くと同時にいちいちクリックせずとも会話が１つ進むようになり、SNS会話がスムーズになります）

【2】Enterキー（あるいは画面クリック）でSNS会話を１つ進める事前準備

このイベントでやってることの説明は↓

条件分岐で1回Enterキー入力時（あるいは画面上のどこかがクリックされた時）に1回分SNS会話が表示されるようにしてます。
ここでやってる処理は「会話の進行度を示す変数を1つ加算し、会話用スイッチをONにする」「ストーリーの進行度に応じて、会話進行度が上がりすぎないように調整する（例：ストーリー進行度31でのSNS会話は295番目がMAXなのでそれ以上の数値になったら295を代入する）」ことです。
実際の会話表示処理は会話用のコモンイベント（例：★SNS13など）を呼び出して行います。
また、このイベントは2、3ページ目を作っておくのを忘れないようにしてください。
2ページ目は出現条件を「会話用スイッチがON」として、中身は空白のイベントにしておきます。
（この2ページ目を作っておかないと、一度Enterキーを一度押したら最後、会話イベントが自動で最後まで実行されてしまいます）
また、3ページ目は出現条件を「選択肢用スイッチがON」として中身を空白イベントにしておきます。
（こうすることで選択肢を表示して選択待ちの間、会話イベントが勝手に進まないようにします。

【3】選択肢表示用の調整イベント（※選択肢機能使わないなら不要）

このイベントでやってることの説明は↓

画面が開く度に選択肢表示用のピクチャ（21、22）の位置を調整し、選択肢用のスイッチをOFFにしてます。

【4】バックボタンをちかちか点滅させる

このイベントでやってることの説明は↓

SNS会話が終わった時に出てくる、バックボタン（ピクチャ２）を点滅させてます。
会話終了時以外は2番ピクチャを消してるので、普段は見えません。


②次に、会話表示用のコモンイベントの作成に移ります。
このイベントでは7個の変数と15個のピクチャを使います。
（ここではピクチャ71～85）

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

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

会話進行度2～4までもピクチャの表示位置やピクチャ番号を3ずつずらしながら、同様の処理を行います。

1画面で４つまで会話文を表示できる仕様なので、会話の進行度＝4までは
ピクチャ番号を１つずつ増やしながら、進行度＝１と同じようなイベントを量産します。
ピクチャの番号を増やしていくほか、表示位置のY座標の変数も増やして適宜調整します。

こちらが実際の会話進行度4のときのSNS会話画面です。

画面の一番下の余白は選択肢を表示するために広めにとってます。


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

会話進行度が5の倍数のときは常にこの配置になるので「パターン5」としてコモンイベントを作り
SNS会話イベントから呼び出せるようにしてます。

パターン1～4のイベントはこちら。

会話進行度を5で割って出た余剰の値がSNS会話イベントで適応されるパターンになります。
会話進行度6以降はひたすらパターン1～5を繰り返します。

ちなみに、拙作では登場人物が多いため、誰の顔画像を表示するかは「顔画像誰になるのか」という別イベントを呼び出して制御してます。
（※直前の顔画像番号という変数は「顔画像表示に使うピクチャ番号」を入力します。全部で72、75、78、81、84の5パターンあります）

ちなみにこれが「顔画像誰になるのか」イベント

発言者ナンバーはSNS会話イベントで指定します

会話進行度5以降のイベントはこうなります。

パターンを呼び出すようにしたことで、見た目かなりスッキリしました。

SNS会話の終了時はこの用に処理します。

ストーリー進行度は後述するバックログ画面から戻ってきた時に
現在値を上書きしないように、「その場面での進行度よりも小さい時のみ
その場面での進行度を代入する」処理をしてます。

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

こちら通常マップ→SNS会話画面に入る時の処理

変数3～5に主人公のいるマップIDや座標を覚えさせて、SNS会話後に戻れるようにしています。
また、SNS会話で使う変数71～85を可視化して、SNS会話が見られるようにしています。

こちらがSNSマップ→通常マップに戻る時の処理
（※バックボタンを押した時の挙動）

SNS会話で使う変数71～85を透明化して、SNS会話が見られないようにしています。

③選択肢画面の表示（※選択肢を使用しない場合は無視して構いません）

画面の一番下に二択の選択肢が表示されています。

これが選択肢部分の会話イベントの処理になります。

このイベントでやってることの説明は↓

変数「設問１はYESかNOか」の値で挙動が変わります。
選択肢を選ぶ前は設問１の変数は＝0となり、★選択中ボタンをONにすることで会話が勝手に進まないようにしてます。
画像の21、22番を使って、選択肢を文章で表現してます。
（この場合は上が「＠Ballade 了解」下が「@Aria わかった」になります）
ボタンを押すことでそれぞれコモンイベントの27と28が実行されます。

コモンイベント27「YES」は上を選んだ場合の挙動で、28は下「NO」を選んだ場合の挙動です。

上を選んだら「設問１はYESかNOか」に１，下を選んだら２を代入します。
選択肢を押すと自動で1つ会話が進んでしまうので
選択肢のある会話進行度の1つ前の進行度を代入することで
選択肢イベントが正常に実行されます。

④バックログ画面を実装します

実はこのバックログはSNS会話の内容を転記してるのではなく
全く同じ会話内容を手打ちで入力するという力技で実現してます。


まずは、ログ用のマップを1つ作ります（サイズは１３x１７で会話用マップと同じ）。
３つのイベント作り、それぞれ並列処理にします。

【1】マップに入った時に一回だけ使用するイベント

場面移動の際に、画面を暗転させて裏で色々処理してるので
ログマップに入ったら色調を正常になるように戻してます。

【2】上下キーを押すか、画面の上か下をクリック（タップ）することでピクチャ化したログを動かすためのイベント

このイベントでやってることの説明は↓

ログは99番ピクチャとして表示されてます。
下キーでピクチャのY座標が-48され、その分ログが上に流れたように見えます。
上キーでは逆にログが下に流れることで、ログを遡ることができます。
また、ログが流れすぎて画面外に行かないように制限をもうける処理も入れてます。
そして、最後のピクチャ移動は「完了までウェイト」をOFFにしておく。 （これがONだと思うような挙動にならない）

【3】バックログをピクチャとして表示するイベント

このイベントでやってることの説明は↓

まずは3番ピクチャに「戻る」ボタンを設定してSNS画面に戻るためのコモンイベント9番に紐づけてます。（後述）
その後でピクチャ5とピクチャ6をそれぞれ上キー、下キーに紐づける処理を行ってます（この時にピクチャを透明にするのを忘れない）。
ここはピクチャサイズを調整して画面の上半分をクリックしたら上キーを押したのと同じ、下半分をクリックしたら下キーを押したのと同じになるようにしてます（元になった黒塗り画像のサイズは50x50なので大体あの倍率でちょうどいいです）
その後がメイン部分です。
このマップイベントは会話ログを1枚絵ピクチャとして表示するための処理を行ってます。
会話ログはほとんどSNS会話画面の表示に使われたプラグインコマンドのコピー＆ペーストで作れます。
唯一の違いはキャラ名の前にアイコン(\i[248]とか）でアイコンサイズにしたキャラの顔画像を表示していることです。
これは会話を見やすくするための処置です。
会話ログのテキストをを入れ終わったら、ピクチャ99番としてログを出力します。その後に、ピクチャの表示位置を調整します。
ここは1フレームウェイトを入れてください。
どうもノーウェイトだと次の行の「ピクチャ99番の高さを検出する」
というスクリプトの読み込みが間に合わないようです。
（状況によってはウェイト秒数を増やす必要もあるかも？）
ここではログピクチャの高さを変数87番に入力する処理を利用しました。
変数の代入のスクリプトでSceneManager._scene._spriteset._pictureContainer.children[98].height
と入力してます（ID-1された値を入れる必要があるようです）
ログピクチャの高さから表示位置を調整してます（ここでは－1をかけて、会話の末尾部分＝今丁度会話ログで表示されてる部分が冒頭にくるようにした後、796を足して画面の下の方に会話の末尾部分がくるようにしてます）
ここもピクチャの移動は「完了までウェイト」をOFFにして下さい。

SNS会話画面→バックログ画面への移動イベント

会話用スイッチを押してSNS会話が勝手に進まないようにしてます。
戻るボタンのピクチャ2を消して、選択肢用のピクチャ21,22を透明化してます。
さらにSNS画面に使う71番以降のピクチャも透明化してから移動してます。

バックログ→SNS画面への移動イベントはこちら

戻るボタンや選択肢に使ってるピクチャ３，５，６番を削除。
SNS画面に使う71番以降のピクチャを可視化して
ログ用の99番ピクチャも削除した上で
会話用スイッチをOFFにしてSNS会話が進むようにしてから移動してます。

こうして、出来上がったSNS会話シーンとログ画面はこの通りです。

追記。
SNS会話画面はどんなに会話が長くなってもそこまで動作が重くならないのですが、ログ画面は表示する会話数が200越えたあたりからログピクチャの読み込みに5～10秒くらい時間がかかるようになってました（特にスマホブラウザで）
会話数が長くなりすぎた場合はログ画面を分割して複数にした方がいいかもしれません（拙作は三分割した）

この記事が気に入ったらサポートをしてみませんか？