Text To Speech のクイックスタート ガイド

シンプルな Text To Speech ウィジェットを作成して、有効化する方法について説明します。

このガイドでは、2 つのボタンを備えるシンプルな Text To Speech ウィジェットを作成して、有効化する方法について説明します。各ボタンは、ユーザーがクリックするとテキスト文字列を読み上げます。

必要な知識と設定

このページに概要を記載している手順を実行する前に、以下を実行する必要があります。

  1. Unreal Motion Graphics (UMG) の UI エディタの基本原理を理解していることを確認する。

  2. 新しい Unreal Engine プロジェクトを作成する。希望するどのテンプレートでも使用できます。

  3. プロジェクトで Text To Speech プラグインを有効にする。この手順を実行するためにさらにサポートが必要な場合は、「プラグインを操作する」ページを参照してください。

新しいウィジェット ブループリントを作成する

このステップでは、画面上に表示するウィジェットを作成します。

  1. コンテンツ ブラウザ または [Content Drawer (コンテンツ ドロワー)] で空白の領域を右クリックします。表示される コンテキスト メニュー で、[User Interface (ユーザー インターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] を選択します。

    Create a new Widget Blueprint

  2. User Widget] クラスを選択して [Select] をクリックしてウィジェットを作成します。

    Select widget class

  3. 新しいウィジェットに「MyWidget」という名前を付けます。

  4. ウィジェット ブループリント をダブルクリックして ウィジェット エディタ で開き、以下に示すように、2 つのボタンを備えるシンプルなレイアウトを作成します。ボタンのサイズや配置は、このチュートリアルでは、それほど重要ではなく、簡単にクリックできれば十分です。

    An example widget layout

  5. ウィジェットを [Compile (コンパイル)] して [Save (保存)] し、ウィジェット エディタを最小化します。

レベル ブループリントにウィジェットを追加する

次に、ウィジェットをレベル ブループリントに追加し、ゲーム開始時に画面上で描画されるようにします。

  1. メイン ツールバー から、レベル ブループリント を開きます。

    Open the Level Blueprint

  2. レベル ブループリント で、Event BeginPlay ノードの実行ピンからドラッグします。「Create Widget」を検索して選択し、Enter キーを押してノードを作成します。

    Create a new widget node

    Create a new widget node

  3. Create Widget ノードの実行ピンからドラッグし、Add to Viewport ノードを作成します。

    Create a new Add to Viewport node

  4. Add to Viewport ノードの実行ピンからドラッグして、Set Input Mode UI Only ノードを作成します。

    Create a Set Input Mode UI Only node

    このノードは、プレイヤーの入力に反応するゲーム要素が UI のみであることをウィジェットに伝えます。ユーザーからのその他すべての入力は、たとえそのコントロールにアクションがバインドされていても、ゲームプレイのアクションに変換されません。

  5. ブループリント エディタ の空白の領域を右クリックして、Get Player Controller ノードを作成します。

    Create a Get Player Controller node

  6. 手順 2 で作成した Construct Widget ノードの Return Value ピンを、以下のピンに接続します。

    • Add to Viewport ノードの Target。

    • Set Input Mode UI Only ノードの In Widget to Focus。

  7. 手順 5 で作成した Get Player Controller ノードの Return Value ピンを Set Input Mode UI Only ノードの Player Controller ピンに接続します。

    この段階では、レベル ブループリントは、次の画像のようになります。

    Partial Level Blueprint

  8. Get Player Controller ノードの Return Value ピンからドラッグして、Set Show Mouse Cursor ノードを作成します。このノードの [Show Mouse Cursor (マウスカーソルを表示)] チェックボックスをオンにします。

  9. Set Input Mode UI Only ノードの出力ピンを Set Show Mouse Cursor ノードの入力ピンに接続しま

    Connect the Set Show Mouse Cursor node

  10. Create Widget ノードの Class 値を、前のセクションで作成した MyWidget ウィジェットに設定します。

    Set widget class to MyWidget

  11. ブループリントを コンパイル して 保存 します。

完成したレベル ブループリントは、以下のようになります。

Finished Level Blueprint

画像をクリックしてフルサイズで表示

これで、レベル ブループリントを閉じることができます。

Text to Speech 文字列を追加する

次に、各ボタンが「話す」ためのチャンネルを作成し、読み上げる文字列を入力します。

  1. ウィジェットの ウィジェット エディタ に戻ります。ウィジェット エディタが閉じている場合は、コンテンツ ブラウザ で MyWidget ウィジェットをダブルクリックして、再び開きます。

  2. 作成したボタンのいずれかをクリックします。次に、右側の [Details] パネルで、[Events (イベント)] まで下にスクロールして、(+) ボタンをクリックして、新しい On Clicked イベントを追加します。

    Add OnClicked event

    この操作により、ウィジェットの グラフ が開き、このボタンのための新しい On Clicked ノードが作成されます。

  3. グラフ内で右クリックして、新しい Get TextToSpeechEngineSubsystem ノードを作成します。

    Create a Get Text To Speech Engine Subsystem node

    このノードが表示されない場合は、プロジェクトで Text To Speech プラグインが有効になっていることを確認します。

  4. Text to Speech Engine Subsystem ノードからドラッグして、新しい Add Default Channel ノードを作成します。On Clicked イベントを Add Default Channel ノードの input ピンに接続します。

    Create an Add Default Channel node

  5. Add Default Channel ノードで、New Channel ID プロパティを右クリックし、コンテキスト メニューから Promote to Variable を選択します。

    Promote the New Channel ID property to a variable

  6. 右側の [Details] パネルで、Variable Name プロパティを使用して、変数に「Channel One」という名前を付けます。

    Rename the variable

  7. Text to Speech Engine Subsystem ノードから再度ドラッグして、新しい Activate Channel ノードを作成します。Add Default Channel ノードの出力ピンを Activate Channel ノードの入力ピンに接続します。

    Create an Activate Channel node

  8. 手順 4 で作成した Channel One 変数を Activate Channel ノードの Channel ID ピンに接続します。

    この段階で、ブループリントは次のようになっています。

    Partial Widget Blueprint

    画像をクリックしてフルサイズで表示

  9. Text to Speech Engine Subsystem ノードから再度ドラッグして、新しい Speak on Channel ノードを作成します。Activate Channel ノードの出力ピンを Speak on Channel ノードの入力ピンに接続します。

    Create a Speak on Channel node

  10. 手順 4 で作成した Channel One 変数を Activate Channel ノードの Channel ID ピンに接続します。

  11. Speak on Channel ノードの String to Speak ピンからドラッグして、新しい To String (Text) ノードを作成します。

    Create a String to Speak node

  12. 前のステップで作成した to String (Text) ノードの入力ピンからドラッグして、新しい Format Text ノードを作成します。

    Create a Format Text node

  13. Format Text ノードの Format ボックスで言葉にしたいテキストを入力します。

    Enter the string to be spoken

  14. 作成した 2 つ目のボタンについて、上記の手順 1 ～ 12 を繰り返し、必要に応じて [Channel One] を [Channel Two] に変更します。

    クリック＆ドラッグで複数のブループリント ノードを選択すると、ブループリント ノードをコピー＆ペーストできます。これにより、同じ手動の手順を何度も行う必要性が軽減されます

  15. ブループリントを コンパイル して、保存 します。

完成した Widget ブループリントは、次のようになります。

Finished Widget Blueprint

画像をクリックしてフルサイズで表示

ウィジェットをテストする

これで、ウィジェットをテストすることができます。

レベル ビューポート の メイン ツールバー で、[Play (プレイ)] ボタンをクリックし、Play in Editor モードに移行します。

Play button on the Main Toolbar

これで、ウィジェットがビューポート内に描画されているのがわかります。ボタンをクリックすると、その文字列が読み上げられます。

Completed widget in the Level Viewport

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル