VST3.6開発11 – ツールを使ったVST GUIの作成方法

ツールを使ったVST GUIの作成方法

前回までで、パラメータやMIDIメッセージの受信などの内部処理に関する部分を中心に記載いたしました。

ここでは作成したVSTプラグインの見た目をよくし、使いやすくするためにGUIの実装方法を説明いたします。

GUIの追加にはInline UI Editor for VST3を使用します。このInline UI Editor for VST3を使用することで、出来る限りコードを書かずにUIを作成できます。
なお、UIに関するコードを記述して実装する方法は別途ご説明いたします。

今回作成するプラグインは「パラメーター実装方法2」で作成したプラグインにGUIを追加していきます。

  • ボリュームコントロール、トレモロ、パンニングの機能を持つエフェクター
  • パラメーターは3つ
    • ボリュームコントロール(0.0~1.0の範囲のパラメーター)
    • トレモロスピード(0.5~30.0Hzの範囲のパラメーター)
    • トレモロタイプ(ボリュームコントロール・トレモロ・パンニングの文字列リストパラメーター)
  • 入力バス、出力バスは1つで、共にステレオ(2ch)
  • 自作のGUIウィンドウが開く

なお、ここで説明するVST GUIのバージョンはVST GUI 4.3となります。
VST SDK 3.6.7以前はVST GUIが4.2以下となるため修正等が必要となる可能性があります。各バージョンのSDKが必要な場合のリンクはこちらに記載しております。

今回作成したVST3のソースファイルはこちらになります。 → 20180327_vst3
コンパイル・ビルドの方法は簡単にこちらでご説明しております。ご参考までに。→サンプルソースファイルのビルド方法

Inline UI Editor for VST3概要

Inline UI Editor for VST3は自作VSTプラグインを読み込んだ状態でUIを編集できるツールになります。

Inline UI Editor for VST3を使用するには

Inline UI Editor for VST3を使用するには、下記の3つのステップを実施します。

  • 必要なソースファイルの追加
  • UI記述ファイルの作成
  • パラメータ操作クラスにGUI生成関数追加

必要なソースファイルの追加

まずはGUI作成に必要なソースファイルを追加いたします。
メニューから「プロジェクト」→「既存の項目の追加」を選び、下記のファイルを追加します。
(「VST3プロジェクトの作成 – 必要なソースファイルの追加」と同じ方法です。)

  • C:\VST3_SDK\vstgui4\vstgui\vstgui_uidescription.cpp
  • C:\VST3_SDK\vstgui4\vstgui\plugin-bindings\vst3editor.cpp

なお、必要なライブラリ等がプロジェクトにそろっているか「VST3プロジェクトの作成 – プロジェクト設定の変更」を参考にご確認ください。
(2018/3/10に必要なライブラリやプリプロセッサ定義を更新をしております。)

UI記述ファイルの作成

次にInline UI Editor for VST3のUI記述ファイルを作成いたします。UI記述ファイルは空のファイルでかまいません。

  1. Visual Studioプロジェクトのフォルダ配下で右クリック→「新規作成」→「テキスト ドキュメント」を選ぶ
  2. 作成した「新しいテキスト ドキュメント.txt」の名前を「myEditor.uidesc」に変更
    (拡張子まで変更してください。また、ファイル名はなんでもかまいません。)

作成したUI記述ファイルはリソースとしてプログラムに組み込む必要があります。
下記のようにリソースファイルを作成し、Visual Studioに追加します。

  1. Visual Studioプロジェクトのフォルダ配下で右クリック→「新規作成」→「テキスト ドキュメント」を選ぶ
  2. 作成した「新しいテキスト ドキュメント.txt」の名前を「resource.rc」に変更
  3. 「resource.rc」を選択して右クリック→「編集」で開き、下記を入力
  4. 「resource.rc」をVisual Studioプロジェクトに追加する

【resource.rc】

リソースファイルの詳細は割愛させていただきます。

パラメータ操作クラスのGUI生成関数

Inline UI Editor for VST3を使用できるようにパラメーター操作クラスにGUI生成関数を追加します。

まず、パラメーター操作クラスのヘッダファイルに「public.sdk/source/vst/vsteditcontroller.h」を追加でインクルードします。
そして、新たにcreateView()関数を定義します。(createView()関数の詳細は割愛いたします。)
【controller.h】

createView()関数は下記のように実装します。引数のnameに”editor”を指定された際にVST3Editorクラスを作成してそのポインタを返すだけです。

【controller.cpp】

Inline UI Editor for VST3によるUIの編集

Inline UI Editor for VST3を使用できるようになった後は、下記の手順で実際にUIを作成・編集していきます。

  • デバッグ版の実行
  • UIの編集
  • リリース版の作成

デバッグ版の実行

一旦 デバッグ版でコンパイル・ビルドし、ホストアプリ(DAWなど)で読み込んでください。ホストアプリ(DAWなど)上で直接 UIの編集を行うことができます。

ホストアプリによっては、Inline UI Editor for VST3に対応していない場合があるため、VST SDKに付属しているテスト用ホストアプリを使用することを推奨します。

コンパイル・ビルド時にC4996のエラーがでる場合はプロジェクト設定で「SDLのチェック」を「いいえ(/sdl-)」にしてください。

UIの編集

Inline UI Editor for VST3の組み込まれたプラグインをホストアプリ(DAWなど)で読み込み、UIを表示すると真っ黒のUIが表示されます。

右クリックから「Open UIDescription Editor」を選ぶと編集画面に移ることができます。
(Inline UI Editor for VST3に対応していないホストアプリ(DAWなど)はここでハングアップする可能性があります。)

(クリックで拡大)

UIを作成する順番は自由ですが、まずはGUIの背景を設定します。

  1. 右下のペインから画像タブを選び「 + 」ボタンを押します。ファイル選択画面からGUIの背景画像を選びます。
    ここではソースファイル内のimg/background.pngを選んでいます。
  2. 右上のペインから「bitmap」の項目を探して入力欄をクリックし、先ほどの背景画像「background」を選択します。
  3. 左上のペインでGUIの背景のサイズを修正します

(クリックで拡大)

(クリックで拡大)

次にトレモロスピード用のつまみ(ノブ)を追加します。

  1. 右下のペインからオブジェクトタブを選び、「Knob」をドラッグ&ドロップで追加します。
  2. 右下のペインから画像タブを選び「 + 」ボタンを押し、必要な画像を追加します。
    ここではソースファイル内のimg/knob.pngとimg/knob_handleを選んでいます。
  3. 右上のペインで下記を設定します。
    bitmap…knob
    handle-bitmap…knob_handle
  4. 左上のペインでつまみ(ノブ)のサイズを調整します。
  5. 右下のペインからタグタブを選び「 + 」ボタンを押ます。つまみ(ノブ)用のパラメータIDを設定します。
    ここではトレモロスピードのパラメータIDである101をTremoloSpeedとして設定しています。
  6. 右上のペインで先ほどのタグ(パラメータID)をつまみ(ノブ)に割り当てます。
    「control-tag」の項目を探して入力欄をクリックし、先ほどのタグ「TremoloSpeed」を設定します。

(クリックで拡大)

(クリックで拡大)

つまみ(ノブ)とほぼ同様の手順でボリュームコントロール用のスライダーを作成します。
スライダーは標準で横型スライダーとなってしまうため、「orientation」の項目を「vertical」を選び縦型スライダーにします。
それ以外の手順はつまみ(ノブ)と同じです。

(クリックで拡大)

最後にトレモロタイプを選ぶコンボボックスを追加します。
手順は画像追加がないだけでつまみ(ノブ)とほとんど変わりません。

(クリックで拡大)

※コンボボックス(Option Menu)を選ぶ際には、パラメータは「StringListParameterクラス」でなければなりません。
 他のパラメータクラスの場合、選択用の文字列が追加されないため操作することができません。

UIの作成が完了したら、UI記述ファイルとして保存します。保存せずGUIを閉じると編集内容がすべて消えてしまいます。
メニューの「File」→「Save As」を選択し、プロジェクトの「myEditor.uidesc」を上書きするように保存してください。

(クリックで拡大)

保存するパスの中に日本語のフォルダがある場合、保存に失敗するようです。
 保存に失敗する場合は「c:\」などの英数字のみのパスに保存したあと、エクスプローラで移動・置き換えしてください。

補足として、UIの作成を間違えた場合などは、メニューの「Edit」→「Delete」で削除することができます。(Deleteキーなどでは削除できません。)

(クリックで拡大)

リリース版の作成

Inline UI Editor for VST3を使用して作成したUIはリリース版にしたときにそのまま使うことができません。
UI記述ファイル「myEditor.uidesc」とリソース「resource.rc」の修正が必要となります。

UI記述ファイル「myEditor.uidesc」を修正するためにLinuxの改行コード(LF)に対応したテキストエディタでファイルを開きます。
持っていない場合はVisual Studioにドラッグ&ドロップして開きます。(プロジェクトに追加しなくても大丈夫です。)

「myEditor.uidesc」を開いた後、「bitmaps」の項目を探します。
「path=”~~~”」の部分がフルファイルパスになっているので、ファイルだけに修正します。

【myEditor.uidesc】

次にリソース「resource.rc」の修正をします。
すべての画像ファイルをプロジェクトフォルダの配下にコピーした後、リソースファイルに下記のように画像ファイルのリソースを追記します。

【resource.rc】

追記する画像ファイルのリソース記載方法は
 リソース名、カテゴリ(PNG固定)、ファイルパス(プロジェクトからの相対パス。””で囲む。)
となります。
リソース名はファイル名と同じにします。VST GUIで対応している画像ファイルはPNG形式のみですのでカテゴリはPNG固定です。
ファイルパスはリソース「resource.rc」からの相対パスになります。

最後に

以上で自作のVSTプラグインにGUIを追加することができます。

詳細な点は省略しておりますので、不明点がございましたら、掲示板Twitterにてご連絡いただければと思います。

今回作成したVST3のソースファイルはこちらになります。 → 20180327_vst3
コンパイル・ビルドの方法は簡単にこちらでご説明しております。ご参考までに。→サンプルソースファイルのビルド方法

VST3.6.8プラグインの作りの情報はこちらにもございます → はじめてのVST3.6.8プラグインの作り

ご指摘やご質問などがございましたら、コメント欄か掲示板Twitterでご連絡いただければと思います。

掲示板
■Twitterアカウント:@vstcpp   URL:https://twitter.com/vstcpp


コメントを残す