VST3.6開発13 – VST GUIコードでのつまみ(ノブ)等の実装方法

つまみ(ノブ)等の実装方法

前回作成したVSTではただGUIウィンドウが開くだけでしたので、パラメーターは一切操作できませんでした。
今回は前回作成したVSTにつまみ(ノブ)やスライダー等を追加し、パラメーターを操作できるようにする方法を説明いたします。

今回作成するプラグインは下記のようなものとなります。

  • ボリュームコントロール、トレモロ、パンニングの機能を持つエフェクター
  • パラメーターは3つ
    • ボリュームコントロール(0.0~1.0の範囲のパラメーター)
    • トレモロスピード(0.5~30.0Hzの範囲のパラメーター)
    • トレモロタイプ(ボリュームコントロール・トレモロ・パンニングの文字列リストパラメーター)
  • 入力バス、出力バスは1つで、共にステレオ(2ch)
  • 自作のGUIウィンドウが開く。UIとして下記を実装。
    • トレモロタイプを切り替えるコンボボックス
    • トレモロスピードを操作するつまみ(ノブ)
    • ボリュームを操作するスライダー


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

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

GUIコントロールについて

VST GUIではつまみ(ノブ)やスライダーなど、いくつかのGUIコントロール用のクラスが標準で用意されています。

【GUIコントロールの一例】

コントロール 定義済クラス 概要
ボタン On/Offボタン COnOffButton クリックするごとにオンとオフを切り替えるボタン。
キックボタン CKickButton クリックした瞬間だけオンになるボタン。
つまみ(ノブ) つまみ(ノブ) CKnob ドラッグすることで値を操作できるつまみ(ノブ)。
アニメーションつまみ(ノブ) CAnimKnob ドラッグすることで値が操作できるつまみ(ノブ)
値ごとに表示される画像が異なる
スライダー 縦型スライダー CVerticalSlider 上下にドラッグすることで値が操作できるスライダー
横型スライダー CHorizontalSlider 横向きになっただけで縦型スライダーと同じ
スイッチ 縦型スイッチ CVerticalSwitch クリックごとに値が切り替わるスイッチ。
横型スイッチ CHorizontalSwitch 横向きになっただけで縦型スイッチと同じ
テキスト テキストラベル CTextLabel 文字列を表示するラベル
テキストエディット CTextEdit 任意の文字列を入力するための入力欄
コンボボックス COptionMenu リストから文字列を入力するための入力欄

今回のVSTでは上記の中からつまみ(ノブ)、縦型スライダー、コンボボックスを利用いたします。

つまみ(ノブ)の作成関数

まず、つまみ(ノブ)を作成するためcreateKnob()関数を作成します。
関数作成自体は必須ではありませんが、つまみを複数作る場合などに便利なためです。

この関数はVST GUIクラスのメンバー関数として定義しています。

【guieditor.cpp】

createKnob()関数の引数には、パラメータIDと座標(x、y)を指定するようにしています。
コントロールはパラメーターと関連付けるので、パラメータIDが必要になります。また、フレーム(描画領域)上の位置を指定するための座標(x、y)が必要になります。

createKnob()関数ではまず、つまみ(ノブ)の背景画像とハンドル画像を読み込んでいます。

次に背景画像からつまみ(ノブ)のサイズを取得し、CRect sizeにそのサイズを設定します。
このsizeはつまみ(ノブ)サイズだけでなくフレーム上の配置位置も兼ねています。CRectのoffset()関数を使用して位置を設定します。

各画像と配置位置・サイズが決まれば、CKnobクラスを作成します。
CKnobクラスのコンストラクタには、「サイズ」「VST GUIクラスのポインタ」「パラメータID」「背景画像」「ハンドル画像」の順に指定します。

これでつまみ(ノブ)が作成できるので、パラメータの現在の値をつまみ(ノブ)に反映し、フレームに登録すれば表示させることができます。

つまみ(ノブ)の背景画像とハンドル画像はCKnob側に設定されるので不要となるため解放しておきます。

スライダーの作成関数

次にスライダーを作成するためcreateSlider()関数を作成します。
この関数もcreateKnob()関数と同様でVST GUIクラスのメンバー関数として定義しており、作成自体は必須ではありません。

【guieditor.cpp】

createSlider()関数の引数は、createKnob()関数と同様です。

作成手順もほぼ同じとなっております。

CVerticalSliderクラスのコンストラクタには、「サイズ」「VST GUIクラスのポインタ」「パラメータID」「最大値のときのハンドル位置」「最小値のときのハンドル位置」「背景画像」「ハンドル画像」の順に指定します。
最大値・最小値のハンドル位置の座標は基準がフレーム(配置領域)の左上となっていますのでご注意ください。

コンボボックスの作成関数

コンボボックスも作成するための関数、createCombobox()関数を作成します。
この関数もcreateKnob()関数と同様でVST GUIクラスのメンバー関数として定義しており、作成自体は必須ではありません。

【guieditor.cpp】

createCombobox()関数の引数はcreateKnob()関数と同様です。

createCombobox()関数ではまず、コンボボックスのサイズと位置を設定しています。
設定方法はCKnobやCVerticalSliderなどの他のコントロールと同様です。

サイズと位置の設定がおわれば、COptionMenuクラスを作成します。
COptionMenuクラスのコンストラクタには、「サイズ」「VST GUIクラスのポインタ」「パラメータタグ」の順に指定します。

コンボボックスは作成するだけだと選択肢が一つもありませんので、選択肢を追加するためaddEntry()関数を使用します。
選択肢はパラメータ操作クラスや音声処理関数と順番を合わせる必要があるので注意ください。
今回は「Volume」「Tremolo」「Panning」の順に合わせています。

【参考:controller.cpp】

選択肢追加後は、見た目を整えるためフォントと文字色・背景色を設定しています。
標準で下記のフォントが定義されており、setFont()関数に指定可能です。
その他のフォントを指定する方法は割愛いたします。

定義 フォント フォントサイズ
kNormalFontVeryBig Arial 18
kNormalFontBig Arial 14
kNormalFont Arial 12
kNormalFontSmall Arial 11
kNormalFontSmaller Arial 10
kNormalFontVerySmall Arial 9
kSymbolFont Symbol 13

また、文字色・背景色についても下記の色が標準で定義されており、setFontColor()関数など指定可能です。
その他の色の指定方法は割愛いたします。

定義 R G B A
kTransparentCColor 透明 255 255 255 0
kBlackCColor 0 0 0 255
kWhiteCColor 255 255 255 255
kGreyCColor グレー 127 127 127 255
kRedCColor 255 0 0 255
kGreenCColor 0 255 0 255
kBlueCColor 0 0 255 255
kYellowCColor 黄色 255 255 0 255
kMagentaCColor マゼンタ 255 0 255 255
kCyanCColor シアン 0 255 255 255

最後にコンボボックスをフレーム(配置領域)に登録しています。

コントロールの追加

作成した関数を使って実際にフレーム(配置領域)に各コントロールを追加します。

opne()関数でフレーム(配置領域)作成後に先ほどの各関数を呼び出します。

【guieditor.cpp】

コントロール操作時の処理の追加

フレーム(配置領域)に追加しただけでは、操作の結果を取得することができません。
valueChanged()関数を修正し、つまみ(ノブ)やスライダー等が操作されたときにパラメーターに反映させます。

【guieditor.cpp】

valueChanged()関数の引数には操作されたコントローラ(つまみなど)のポインターが渡されます。
最初にパラメータIDと値を取得し、それをパラメータ操作クラスに渡して反映しています。
その後、音声処理クラスも同様に値を反映するよう通知しています。

リソースファイル

つまみ(ノブ)とスライダーで画像を使用しています。
これらの画像はリソースから読み込む必要がありますのでリソースファイルにも追加いたします。
追加方法は前回をご参照ください。

【resource.rc】

最後に

以上でVST GUIにコントロールを追加することができます。
ここでは一部のコントロールの追加方法のみですのが、他のコントロールについてはそのうち記載したいと思います。

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

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

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

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

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


コメントを残す