StoryGraphEditor 2「Botにセリフをしゃべらせて動かす」

この記事では、「Bot3D StoryGraphEditor」のテンプレート【お話テンプレ】Botにセリフを喋らせて動かすを使います。
「Bot3D Player」の3Dチャットボットに、自由にセリフをしゃべらせてみましょう。
また、セリフにあわせて、キャラクターをアニメーションさせることができるんです！

この記事のサンプル

「Bot3D StoryGraphEditor」ではいろいろな便利な機能をシンプルに使えるように、様々なテンプレートが用意してあります。
画面左上の「テンプレートから作成」を押します。 テンプレートが表示されるので、【お話テンプレ】Botにセリフを喋らせて動かすをクリックして開きます。 ことばの説明：このテンプレートの説明では以下のことばを使います。
  1. 会話ボックス：
    このグレー地の箱は、アクションをひとまとめにするものです。アクションとは、「Botにさせること」です。いろいろなことをさせることができます。
  2. "Botのセリフ"アクション：
    "Botのセリフ"と書いてある、このオレンジ色の箱（アクション）は、この中にセリフや絵文字を書くことでBotをしゃべらせることができます
  3. "Botの動作"アクション：
    "Botの動作"と書いてある、このオレンジ色の箱（アクション）は、この中にキャラクターのアニメーションを指定することでBotを動かすことができます

基本操作のおさらい

簡単に基本操作のおさらいをしましょう。
テンプレートをカスタマイズするときに一番重要なのは、9番の、ストーリーのいちばん最後の会話ボックスを「終了ボックス」につなげることです！

セリフをしゃべらせる

それではテンプレート【お話テンプレ】Botにセリフを喋らせて動かすの中身を見ていきましょう。
「Bot3D Player」で再生してみたい場合は、一度保存し、StoryGraphEditor クイックヘルプ：Bot3DPlayerで見る方法をご覧いただき、再生してください。

セリフと書いてある会話ボックスの中の"Botのセリフ"アクションをクリックすると、画面下にエディタが表示されます。
図のように「テキスト」欄に入っている文字を、キャラクターがしゃべってくれます。
変更したい場合は好きなセリフを入力し、3.の部分の保存ボタンを押して確定します。
「Bot3D Player」で再生してみるとこのようにフキダシとして表示されます。
好きなセリフに変えていろいろ遊んでみましょう！
「Bot3D StoryGraphEditor」でストーリーを変更したら、「Bot3D Player」でプレビューする前に、かならず画面一番上のメニューから保存してくださいね。

絵文字でキャラクターを動かす

次に、「絵文字でBotを動かす」と書いてある会話ボックスの中の"Botのセリフ"アクションをクリックしてください。
さきほどとは違って絵文字が入っていますね。
なんと絵文字を入れると、しゃべりながら、絵文字に応じた感情表現のアニメーションをさせることができるんです！
絵文字を入れるには、セリフのテキスト入力欄で、絵文字を入れたい場所をクリックしたあと、「絵文字を入力」ボタンを押します。 絵文字パレットが表示されるので、絵文字をクリックすると入力されます。
絵文字アニメーションで、キャラクターに豊かな感情をもたせましょう。

セリフといっしょに画像などを表示する

セリフといっしょに、これ見て見て！という感じで、いっしょに画像や動画を表示したい場合がありますよね。
次の「画像付きセリフ」と書いてある会話ボックスの中の"Botのセリフ"アクションをクリックしてください。

画面下にエディタが表示されるので「メディア」タブをクリックします。
見せたい画像・音声・動画・リンクのURLを入力することができます。（投稿ガイドラインをお読みの上、著作権侵害などにはご注意ください。）
画像や動画はこんなふうに表示されます。
それぞれタップすると大きい画面で、画像や動画が表示されます。

読み方がおかしい場合

もしBotのセリフの読み方がおかしい場合、"Botのセリフ"アクションで「読み方」を設定できます。
「よみがな」と書いてある会話ボックスの中の"Botのセリフ"アクションをクリックしてください。
この「読み方」は、すべてひらがなである必要はなく、「テキスト」のほうをコピーして、気になる読み方の部分だけひらがなにしてもいいです。

英語をしゃべらせてみよう！

「Bot3D Player」のチャットボットは、セリフを英語で言うこともできます。
「英語発音」と書いてある会話ボックスの中の"Botのセリフ"アクションをクリックしてください。
「読み方」に特別な書き方をすると、指定部分が英語発音になります。 こんなふうに書きます。
  1. Botのセリフの「テキスト」の文章をコピーして「読み方」にペーストします。
  2. 「読み方」の全体を <speak>（内容） </speak>で囲います
  3. 英語でしゃべらせたいところを <lang xml:lang="en-US">（内容） </lang>
    4. で囲います
そうすると、hello!のところだけ英語でしゃべります！
<speak>
「読み方」にタグを書くことで英語発音をすることができます。
<lang xml:lang="en-US">hello! </lang>
</speak>

キャラクターを動かす

Botとおしゃべりできるだけでなく、自由にアニメーションさせられるところがBot3Dのいいところです。
絵文字でお手軽に感情表現をさせることもできますが、"Botの動作"アクションを使うことで、しぐさやダンスやジェスチャーなど幅広い動きの表現をさせることができるんです！

「Botを動かす」と書いてある会話ボックスの中の"Botの動作"アクションをクリックしてください。 画面下部にエディタが開きますので、Botのアニメーションを呼び出して再生するためのいろいろな設定ができます。
  1. モーション：登録されている様々なBotのアニメーションをリストから選べます。後述しますが、このリストは自分で追加することもできます。
  2. 動作モード：
    nomalになっているとき、例えばダンスの動きが終わるまで、次のセリフをしゃべりません
    nowaitになっているとき、例えばダンスの動きをしながら、次のセリフをしゃべります
  3. 音源URL：BGMや効果音のmp3のURLを入れることができます（音源をご利用の際は、著作権などの権利侵害にはご注意ください）

「Bot3D Editor」でもっと自由にキャラクターを動かす

"Botの動作"アクションのモーションは自分でも追加することができます。
革新的アニメーション作成iPhone/iPadアプリ「Bot3D Editor」を使ってオリジナルの動きを作りましょう。
詳しい使い方は こちら。

Bot3D Editor
無料iPhone/iPadアプリ

iPhone/iPadに「Bot3D Editor」をインストールしたら、早速アニメーションをつくります。ここでは変身ポーズをつくってみました。（30秒までの自由な動きが作れます）
次に、「Bot3D StoryGraphEditor」で使えるようにアップロードしたいので、メニューボタンを押します。
まずログインボタンを押します。
「Bot3D StoryGraphEditor」のログインにつかっているものと同じFacebookアカウントでログインしてください。
「Botモーションを書出し」を押します。
情報を入力し、「書出し」を押します。
ここでは、このアニメーションに「変身！」と名前をつけました。
書出し処理しますのでしばらくお待ち下さい。処理が終わったら「モーションを確認する」ボタンを押します。
プレビューが表示されますので問題なければ「保存」を押してください。
それではパソコンの「Bot3D StoryGraphEditor」に戻って、現在作成中のストーリーを一度保存し、開き直してください。
そうすると、"Botの動作"アクションのモーション一覧に、先ほどアップロードした「変身！」が出ていますね！
保存を押して、「Bot3D Player」のほうで再生してみると、「変身！」の動きをしました！ このようにしてアニメーションさせたい場所で、キャラクターにオリジナルの動きをつけることができるんです。
「Bot3D Editor」と"Botの動作"アクションを使ってより個性的なストーリーを演出してくださいね！