[chat_talk] チャットの表示
- ティラノストーリー
吹き出しを画面に表示することができます
| パラメータ | 必須 | 解説 |
|---|---|---|
| name | × | チャットを話してる人の下に表示される名前。文字列で指定してください |
| layer | × | チャットを表示するレイヤを指定できます。デフォルトは0 または、chat_configでlayerを設定している場合はそのレイヤが採用されます。 |
| page | × | foreかbackを指定します。デフォルトはforeです |
| id | × | 半角英数字を指定できます。ここで指定した文字列が、クラス名として付与されます。あとからJavaScriptなどで編集したい場合は指定してください |
| face | × | 吹き出しの表情アイコンを指定する。画像ファイルはfgimageフォルダ以下に配置してください。ここの指定がない場合は表情なしの吹き出しを表示できます。 |
| time | × | 吹き出しのフェードインにかかる時間をミリ秒で指定できます。デフォルトは300ミリ秒です |
| text | × | 吹き出しの中のテキストを指定できます |
| pos | × | チャットの表示位置を指定します。left（左）right（右）center（中央）を指定できます。デフォルトはleft。この値は l(left) r(right) c(center)と省略することもできます |
| bgcolor | × | 吹き出しの背景色を指定できます。0x000000形式で指定します。「transparent」を指定すると吹き出し部分が透明になります |
| graphic | × | 吹き出しの中に画像を指定できます。画像ファイルはfgimageフォルダ以下に配置してください。folderパラメータを指定するとfgimage以外の画像を指定することができます |
| graphic_width | × | graphicパラメータで指定した画像の横幅を指定できます |
| graphic_height | × | graphicパラメータで指定した画像の高さを指定できます |
| folder | × | graphicパラメータで指定する画像ファイルのフォルダを変更できます。デフォルトはfgimage。image や bgimageを指定すると任意のフォルダ以下の画像を吹き出しに表示できます |
| width | × | 吹き出しの横幅を指定できます。指定しない場合は文字数によって吹き出しの大きさが自動的にきまります。 |
| bottom | × | ピクセルで指定します。吹き出しテキストの下にスペースを挿入することができます。 |
| se | × | 吹き出しが表示された時の効果音を指定できます。ファイルはsoundフォルダ以下に配置してください |
| delay | × | 吹き出しのテキストが表示されるまでに、遅延を挿入することができます。チャット入力中のような演出が簡単に表現できます。表示時間をミリ秒で指定してください。ローディング画像はプラグインのassets/write.gifファイルを変更することで自由にカスタマイズできます |
| reflect | × | true or falseで指定します。trueを指定すると、表情画像を反転することができます。 |
- サンプルコード
;画面中央のメッセージ
[chat_talk pos="center" text="ある日のこと" bgcolor="0x000000" ]
[p]
;画面の右側に吹き出しを表示
[chat_talk pos="right" name="やまと" text="おーい" face="chat/yamato/normal.png"]
[p]
;画面の左側に吹き出しを表示
[chat_talk pos="left" name="あかね" text="なんだい？" face="chat/akane/hirameki.png" delay=1500 ]
[p]
[chat_config] チャットの基本設定
- ティラノストーリー
チャットの基本的な設定を行うことができます。
| パラメータ | 必須 | 解説 |
|---|---|---|
| layer | × | チャットを表示するデフォルトレイヤを指定できます。デフォルトは0 |
| width | × | チャットを表示するエリアの横幅。指定ししない場合は画面いっぱいを使用します |
| height | × | チャットを表示するエリアの高さ。指定しない場合は画面いっぱいを使用します |
| top | × | チャットエリアの縦位置を指定できます |
| backlog | × | true or false を指定。trueを指定すると会話がバックログに追加されます。デフォルトはtrue |
| overflow | × | hidden or remove を指定。removeを指定すると見えなくなったチャットは消去されます。デフォルトはremove。removeを指定すると動作が軽くなりますが、ログを遡って表示することができなくなります。 |
| left | × | チャットエリアの左からの横位置を指定できます |
| face_width | × | 表情部分のイメージ幅を指定することができます。デフォルトは100です |
| margin_face | × | 表情部分の画面端のf空間を変更することができます。デフォルトは20です |
| left_bgcolor | × | 左に表示するチャットの背景色デフォルトを指定できます。0x000000形式で指定してください。「transparent」を指定すると透明にできます |
| right_bgcolor | × | 中央に表示するチャットの背景色デフォルトを指定できます。0x000000形式で指定してください。「transparent」を指定すると透明にできます |
| center_bgcolor | × | 右に表示するチャットの背景色デフォルトを指定できます。0x000000形式で指定してください。「transparent」を指定すると透明にできます |
| name_font_size | × | 名前部分のフォントサイズを指定できます |
| name_font_color | × | 名前部分のフォント色を指定できます。0x000000形式で指定してください |
| under_height | × | 吹き出しが表示される高さを指定できます。つまり吹き出しがこの高さまできた時に吹き出しが上にスクロールされます。画面下にタップできるスペースを残せるくらいがよいでしょう。デフォルトは画面の高さの７割が自動的に設定されます。pxで指定してください |
| margin_top | × | 吹き出しの上部に空ける空間を指定できます。デフォルトは25です。 |
| zindex | × | レイヤの中での重なりを指定できます。値が大きいほど前に表示されます |
| anim_time | × | 数値を指定できます。0以上の値を指定すると、吹き出しがアニメーションしながら移動します。ミリ秒で指定してください |
| se | × | 吹き出しを表示する時に効果音を設定することができます |
- サンプルコード
[chat_config face_width=100 under_height=700 se="sound.ogg" center_bgcolor="0xFFFFFF"]
[chat_scroll] チャットのログ位置を指定位置に戻すことができます。
- ティラノストーリー
重要：chat_configでoverflow=hidden を指定する必要があります。
これを行わないと、見えなくなった部分のログは削除されているので、遡ることができません。
| パラメータ | 必須 | 解説 |
|---|---|---|
| time | × | スクロールにかける時間をミリ秒で指定できます |
| direction | × | up or down を指定。デフォルトはup。upを指定すると上方向に巻き戻ります |
| effect | × | 変化のエフェクトを指定します。指定できる文字列は以下の種類です。jswing｜def｜easeInQuad｜easeOutQuad｜easeInOutQuad｜easeInCubic｜easeOutCubic｜easeInOutCubic｜easeInQuart｜easeOutQuart｜easeInOutQuart｜easeInQuint｜easeOutQuint｜easeInOutQuint｜easeInSine｜easeOutSine｜easeInOutSine｜easeInExpo｜easeOutExpo｜easeInOutExpo｜easeInCirc｜easeOutCirc｜easeInOutCirc｜easeInElastic｜easeOutElastic｜easeInOutElastic｜easeInBack｜easeOutBack｜easeInOutBack｜easeInBounce｜easeOutBounce｜easeInOutBounce |
| top | × | スクロールする幅を指定してください |
- サンプルコード
[chat_scroll direction="up" top=200 time=300 ]