• iPhone・Androidアプリ化対応。HTML5で動くノベルゲーム製作キット
豪華賞品あり。ノベルゲームに特化したお祭り

漫画のふきだしで会話シーンをつくる

ティラノビルダーV510より、漫画のふきだしのような表現で会話シーンを簡単につくることができるようになりました。

実際の動作するデモがありますので、最初にご確認ください。

漫画ふきだし機能 動作サンプルを開く



特徴としては、キャラクター情報と紐付けて管理できるため、ふきだしの位置を自動的に計算して配置してくれるところです。 ですので、開発者はゲームのシナリオだけに集中してゲーム開発を行うことができます。

もちろん、必要な場合は細かくカスタマイズすることも可能です。

それでは、実際に作ってみましょう。

今回は、デフォルトのプロジェクトをふきだし化してみたいと思います。

ふきだし形式への切り替え

それでは早速、ふきだし形式に切り替えてみましょう

ふきだし形式のメッセージエリアも、デザインは[position]タグで行います。
メッセージレイヤの設定をしている箇所で次のようなスクリプトを配置しましょう

;メッセージレイヤをふきだし風のデザインに調整
[position layer="message0" left=160 top=500 width=1000 height=200 radius=15 page=fore visible=true color="white" opacity=255 border_size="3" border_color="black" ]

;文字が表示される領域を調整
[position layer="message0" page=fore margint="15" marginl="20" marginr="20" marginb="20"]

;メッセージレイヤの表示
@layopt layer=message0 visible=true

;メッセージレイヤの背景が白なのでフォントを黒に変更
[deffont color="black"]
[resetfont]

;ふきだし表示スタート
[fuki_start ]


保存して実行します。次のようなふきだしが表示されました。



まだ、漫画のふきだしのような形になっていませんね。

ここまでだと、ふきだし風のメッセージデザインに変更して[fuki_start]タグでふきだし形式に切り替えたまでです。
キャラクターにふきだしをつけるには、キャラクターのふきだし登録が必要です。

キャラクターのふきだし登録

続いて、キャラクターにふきだしの登録をしていきます。
これは、キャラクターの画像ごとに、ふきだしの位置やデザインを設定するための手続きです。

あらかじめ、これを行っておかないとふきだしがつきません。

それでは早速、登録してみましょう


;ふきだしの表示位置をキャラごとに設定する
[fuki_chara name="akane" left=200 top=270 sippo_left=30 sippo="top" radius=15]
[fuki_chara name="yamato" left=350 top=280 sippo_left=30 sippo="top" radius=15]

;キャラクターが画面上に存在しない場合に適用するふきだし設定 name=others
[fuki_chara name="others" left=250 top=500 max_width=700 fix_width=700 radius=0 ]


保存して実行します。

あかねが話すタイミングで、ふきだしがつきましたね。



まず、ふきだしの出る場所ですが、left、topパラメータで指定されています。

これは、キャラクター画像の左端を基準にしてどの位置にふきだしを出すか。を指定しています。



キャラクターごとに画像サイズや口の位置は異なるでしょう。
この差を[fuki_chara]タグによって、個別に登録することができるのです。

今、どのキャラクターが話しているかという判定は、従来どおり#あかねで判定されています。

ちなみに、ふきだし位置はキャラクターが拡大縮小されたとしても、比率を保ちます。
オリジナルの画像サイズを基準として、left と topは指定しましょう。


キャラクターが画面に存在しない場合の設定

先程のキャラクター登録の中で
;キャラクターが画面上に存在しない場合に適用するふきだし設定 name=others
[fuki_chara name="others" left=250 top=500 max_width=700 fix_width=700 radius=0 ]


という設定がありました。
これは、キャラクターが画面に存在していない場合や、ナレーションといったときに適用するふきだしです。

nameパラメータに「others」と指定することで、設定できます。

今回はふきだしの横幅を固定長にしたかったのでfix_width=700を指定。さらに角の丸みも不要なのでradius=0を指定しています。



ふきだしをカスタマイズする

ふきだしの位置やデザインはキャラクター毎にカスタマイズできます。
詳しくはタグリファレンスをご確認ください。

いくつか、サンプルを紹介させていただきます。

sippoパラメータでしっぽの位置を変更


縦書き表示


デザイン変更


デザイン変更




ふきだし表示を終了する

ふきだし表示を終了する場合は[fuki_stop]タグを使用します。

メッセージレイヤのデザインなどはふきだし用のままなので、[position]タグをつかって元に戻しましょう。

ふきだし形式と通常メッセージを交互に切り替える

ふきだし形式と通常のメッセージを頻繁に切り替える場合は、ふきだし用のメッセージレイヤを分けておくと便利です。

つまり、通常メッセージはmessage0 を使用。ふきだし用のメッセージはmessage1を使用といった具合です。

以下に実際のサンプルを提示します。

						
;ふきだし用のメッセージレイヤ。(message1)
[position layer="message1" left=160 top=500 width=1000 height=200 radius=15 page=fore visible=true color="white" opacity=255 border_size="3" border_color="black" ]
 
;文字が表示される領域を調整(message1)
[position layer="message1" page=fore margint="15" marginl="20" marginr="20" marginb="20"]

;ふきだしの表示位置をキャラごとに設定する
[fuki_chara name="akane" left=200 top=270 sippo_left=30 sippo="top" radius=15]
[fuki_chara name="yamato" left=350 top=280 sippo_left=30 sippo="top" radius=15]

;キャラクターが画面上に存在しない場合に適応するふきだし設定 name=others
[fuki_chara name="others" left=250 top=500 max_width=700 fix_width=700 radius=0 ]

;通常のメッセージレイヤは非表示
@layopt layer=message0 visible=false

;ふきだし用のメッセージレイヤの表示
@layopt layer=message1 visible=true

;メッセージレイヤを1に切り替え
[current layer="message1"]

;ふきだし機能を有効化(message1指定必須)
[fuki_start layer="message1"]

;メッセージレイヤの背景が白なのでフォントを黒に変更
[font color="black"]

#あかね
ここはふきだし表示です[p]

;ふきだし表示終了
[fuki_stop]

;現在のメッセージレイヤをmessage0に
[current layer="message0"]

;通常のメッセージレイヤを表示
@layopt layer=message0 visible=true

;ふきだし用のメッセージレイヤの非表示
@layopt layer=message1 visible=false

;通常のメッセージエリアはフォント白
[font color="white"]

#あかね
ここは通常のメッセージです[p]

;通常のメッセージレイヤは非表示
@layopt layer=message0 visible=false

;ふきだし用のメッセージレイヤの表示
@layopt layer=message1 visible=true

[font color="black"]
[fuki_start layer="message1"]

[current layer="message1"]

#あかね
再度ふきだし表示にもどりました。[p]

						
					


この方法ですと、通常のメッセージとフキダシを織り交ぜた、柔軟な表現ができるはずです。





もちろん、画面下のメッセージを常に表示したまま、ふきだしで進行させることもできるでしょう。

実際はマクロ化するなどして、使いやすい形にしていただければと思います。

その他

その他にも、様々な使い方が可能です。
ぜひ、タグリファレンスと動作デモのスクリプトをご確認ください。

>>タグリファレンス

>>ふきだし機能デモ