EB GUIDE Studio 入門

EB GUIDE Studio 6 をインストールしたら、このチュートリアルに従って作業を進めてください。チュートリアルでは、簡単なモデルの作成方法を説明します。これで EB GUIDE Studio の基本機能を理解できます。チュートリアルの最後に、作成したモデルを実行します。

 

新規プロジェクトの作成

  1. EB GUIDE Studio を起動します。 ツールの言語を日本語に変更するには、[OPTIONS]のDisplay languageプルダウンメニューから”Japanese”を選択してEB GUIDE Studioを再起動します。
  2. [新規] をクリックします。
  3. 保存場所を設定するために、[参照] をクリックして C:\temp などのディレクトリを特定します。
  4. プロジェクト名として MyProjectと入力します。
  5. [作成] をクリックします。

プロジェクトエディターが開き、空プロジェクトが表示されます。Main ステートマシンがデフォルトで追加され、コンテンツエリアに表示されます。

 

モデルにステートを追加する

ステートによりステートマシンの状態と動作が決定されます。[Initial state] により、ステートマシンの開始点が定義されます。ビューstateは、デフォルトでビューを表示します。 [View state ](ビューステート)は、デフォルトでビューを表示します。[Final state] により、ステートマシンが終了します。モデルにいくつかステートを追加しましょう。

  1. ビューstate をツールボックスからコンテンツエリアにドラッグします。コンテンツエリアに [View state 1]が表示されます。
  2. ステップ1を繰り返します。コンテンツエリアに 2 つの[View state]が表示されます。これらは左側のナビゲーションコンポーネントの Mainステートマシンの下にも表示されます。
  3. ツールボックスで[Initial state] をクリックして、コンテンツエリアにドラッグします。
  4. [Final state] をコンテンツエリアにドラッグします。

[Initial state][View state 1][View state 2] [Final state] がコンテンツエリアと Main ステートマシンの下のナビゲーションコンポーネントに表示されます。

 

モデルへの遷移を追加する

遷移はステートを接続してステートの変化をトリガーします。この例では、 [Initial state] から [View state 1] [View state 2] [Final state]に変化します。

  1. ココンテンツエリアで [Initial state] を選択し、緑色のドラッグポイントをドラッグしてマウスボタンを押し続けます。
  2. 緑色のポイントをターゲットステート [View state 1] にドラッグします。
  3. [Target state] が緑色のハイライト表示されたら、マウスボタンを放します。遷移が作成され緑色の矢印で表示されます。
  4. [View state 1] を.クリックします。ステートの境界が緑色でハイライト表示されます。
  5. ハイライト表示されたステート境界の上にマウスポインタ―を合わせます。緑色のドラッグポイントが表示されます。
  6. 緑色のドラッグポイントをクリックして[View state 2] にドラッグします。
  7. ステップを繰り返して[View state 2][Final state] に接続します。

 

イベントでトリガーされる遷移を追加する

  1. コンテンツエリアで[View state 1][View state 2]との間の遷移をクリックします。
  2. [プロパティ]コンポーネントに移動します。
  3. [トリガー]コンボボックスで、[Event 1] と入力してから [イベントの追加「Event 1」] をクリックします。
    EB GUIDE Studio が、[Event 1] という名前の遷移イベントをトリガーとして追加します。[Event 1] が始動すると、遷移が実行されます。
  4. ステップを繰り返し、[Event 2][View state 2][Final state] との間の遷移のトリガーとして追加します。

 

ビューを変更するタッチボタンを作成する

  1. コンテンツエリアで[View state 1] をダブルクリックします。コンテンツエリアに対応するビューが表示され、ツールボックスが、関係するツールの表示をします。
  2. ツールボックスの[基本ウィジェット]で、四角形を選択してコンテンツエリアにドラッグします。
  3. プロパティコンポーネントの [ウィジェット機能プロパティ] の隣にある、[追加/削除] をクリックします。
  4. [共通] をクリックしてカテゴリーを展開し、[タッチ] を選択します。
  5. スクロールダウンし、[Input handling] をクリックしてそのカテゴリーを展開します。次に [タッチリリース] を選択して [承認] をクリックします。
  6. [touchShortReleased]の隣をクリックします。これにより、どのイベントが発行されるか、タッチ後どのくらいの時間で開始されるかを設定できます。
  7. 次のスクリプトを入力します。function(v:touchId::int, v:x::int, v:y::int, v:fingerId::int) { fire_delayed 500, ev:Event 1 () true }
  8. [承認] をクリックします。これで、[四角形 1] にタッチすると、500 ミリ秒後に [Event 1] が発行されます。
  9. ナビゲーションコンポーネントの [View state 2] で、[ビュー 2] をダブルクリックします。
  10. ステップ 2 から 6 を繰り返してこの[ビューstate]にもう 1 つのボタンを作成し、別の場所に配置します。
  11. [四角形 2] を選択します。
  12. プロパティコンポーネントで、[fillColor] を赤に設定します。
  13. [touchShortReleased]の隣をクリックします。
  14. 次のスクリプトを入力します。function(v:touchId::int, v:x::int, v:y::int, v:fingerId::int) { fire_delayed 500, ev:"Event 2"() true }
  15. [承認] をクリックします。

 

作成したモデルを実行します。

  1. コマンドエリアで開始ボタンをクリックします。モデルの実行が開始され、EB GUIDE Monitor が開きます。
  2. 表示された四角形をクリックします。UI が変化して [ビュー 2] が表示されます。ボタンの位置が変化することを確認してください。これは[Event 1]が発行されたためです。
  3. [ビュー 2]内のボタンをクリックします。表示上は何も変化しませんが、シミュレーションでは [Final state] が表示されています。
  4. ウィンドウを閉じてシミュレーションを終了します。

 

次のステップ

基本的なモデルを作成し、EB GUIDE Studio がどのように機能するかを理解しました。チュートリアル動画を視聴し、ユーザーマニュアルをぜひお読みください。