C++でVST作りコンテンツへスキップC++でVST作りVSTプログラミングに関する情報です。前回までで、パラメータやMIDIメッセージの受信などの内部処理に関する部分を中心に記載いたしました。ここでは作成したVSTプラグインの見た目をよくし、使いやすくするためにGUIの実装方法を説明いたします。VST3を使用します。VST3を使用することで、出来る限りコードを書かずにUIを作成できます。UIに関するコードを記述して実装する方法は別途ご説明いたします。今回作成するプラグインは「パラメーター実装方法2」で作成したプラグインにGUIを追加していきます。GUIが4.2以下となるため修正等が必要となる可能性があります。各バージョンのSDKが必要な場合のリンクはこちらに記載しております。今回作成したVST3のソースファイルはこちらになります。vst3dev08_20190509コンパイル・ビルドの方法は簡単にこちらでご説明しております。VST3は自作VSTプラグインを読み込んだ状態でUIを編集できるツールになります。https://vstcpp.wpblog.jp/wp-content/uploads/2018/03/wysiwyg_20180326.mp4(上記の動画で何をしているかの説明は、UIの編集に記載しています。若干異なる点がございますがご了承ください。VST3を使用するには、下記の3つのステップを実施します。必要なソースファイルの追加まずはGUI作成に必要なソースファイルを追加いたします。メニューから「プロジェクト」→「既存の項目の追加」を選び、下記のファイルを追加します。必要なソースファイルの追加」と同じ方法です。プロジェクト設定の変更」を参考にご確認ください。(2018/3/10に必要なライブラリやプリプロセッサ定義を更新をしております。VST3のUI記述ファイルを作成いたします。UI記述ファイルは空のファイルでかまいません。ドキュメント.txt」の名前を「myEditor.uidesc」に変更(拡張子まで変更してください。ファイル名はなんでもかまいません。)作成したUI記述ファイルはリソースとしてプログラムに組み込む必要があります。Studioに追加します。".\\myEditor.uidesc"リソースファイルの詳細は割愛させていただきます。VST3を使用できるようにパラメーター操作クラスにGUI生成関数を追加します。パラメーター操作クラスのヘッダファイルに「public.sdk/source/vst/vsteditcontroller.h」を追加でインクルードします。新たにcreateView()関数を定義します。(createView()関数の詳細は割愛いたします。SteinbergとVstの終わりcreateView()関数は下記のように実装します。引数のnameに”editor”を指定された際にVST3Editorクラスを作成してそのポインタを返すだけです。VST3を使用できるようになった後は、下記の手順で実際にUIを作成・編集していきます。デバッグ版でコンパイル・ビルドし、ホストアプリ(DAWなど)で読み込んでください。UIの編集を行うことができます。SDKに付属しているテスト用ホストアプリを使用することを推奨します。コンパイル・ビルド時にC4996のエラーがでる場合はプロジェクト設定で「SDLのチェック」を「いいえ(/sdl-)」にしてください。VST3の組み込まれたプラグインをホストアプリ(DAWなど)で読み込み、UIを表示すると真っ黒のUIが表示されます。Editor」を選ぶと編集画面に移ることができます。VST3に対応していないホストアプリ(DAWなど)はここでハングアップする可能性があります。)(クリックで拡大)UIを作成する順番は自由ですが、まずはGUIの背景を設定します。ファイル選択画面からGUIの背景画像を選びます。ここではソースファイル内のimg/background.pngを選んでいます。右上のペインから「bitmap」の項目を探して入力欄をクリックし、先ほどの背景画像「background」を選択します。左上のペインでGUIの背景のサイズを修正します(クリックで拡大)(クリックで拡大)次にトレモロスピード用のつまみ(ノブ)を追加します。右下のペインからオブジェクトタブを選び、「Knob」をドラッグ&ドロップで追加します。」ボタンを押し、必要な画像を追加します。ここではソースファイル内のimg/knob.pngとimg/knob_handleを選んでいます。右上のペインで下記を設定します。bitmap...knobhandle-bitmap...knob_handle左上のペインでつまみ(ノブ)のサイズを調整します。つまみ(ノブ)用のパラメータIDを設定します。ここではトレモロスピードのパラメータIDである101をTremoloSpeedとして設定しています。右上のペインで先ほどのタグ(パラメータID)をつまみ(ノブ)に割り当てます。「control-tag」の項目を探して入力欄をクリックし、先ほどのタグ「TremoloSpeed」を設定します。(クリックで拡大)(クリックで拡大)つまみ(ノブ)とほぼ同様の手順でボリュームコントロール用のスライダーを作成します。スライダーは標準で横型スライダーとなってしまうため、「orientation」の項目を「vertical」を選び縦型スライダーにします。それ以外の手順はつまみ(ノブ)と同じです。(クリックで拡大)最後にトレモロタイプを選ぶコンボボックスを追加します。手順は画像追加がないだけでつまみ(ノブ)とほとんど変わりません。Menu)を選ぶ際には、パラメータは「StringListParameterクラス」でなければなりません。他のパラメータクラスの場合、選択用の文字列が追加されないため操作することができません。UIの作成が完了したら、UI記述ファイルとして保存します。保存せずGUIを閉じると編集内容がすべて消えてしまいます。As」を選択し、プロジェクトの「myEditor.uidesc」を上書きするように保存してください。(クリックで拡大)※保存するパスの中に日本語のフォルダがある場合、保存に失敗するようです。保存に失敗する場合は「c:\」などの英数字のみのパスに保存したあと、エクスプローラで移動・置き換えしてください。補足として、UIの作成を間違えた場合などは、メニューの「Edit」→「Delete」で削除することができます。(Deleteキーなどでは削除できません。VST3を使用して作成したUIはリリース版にしたときにそのまま使うことができません。UI記述ファイル「myEditor.uidesc」とリソース「resource.rc」の修正が必要となります。UI記述ファイル「myEditor.uidesc」を修正するためにLinuxの改行コード(LF)に対応したテキストエディタでファイルを開きます。Studioにドラッグ&ドロップして開きます。(プロジェクトに追加しなくても大丈夫です。)「myEditor.uidesc」を開いた後、「bitmaps」の項目を探します。「path=”~~~”」の部分がフルファイルパスになっているので、ファイルだけに修正します。path="slider_handle.png"/></bitmaps>次にリソース「resource.rc」の修正をします。すべての画像ファイルをプロジェクトフォルダの配下にコピーした後、リソースファイルに下記のように画像ファイルのリソースを追記します。".\\img\\slider_handle.png"追記する画像ファイルのリソース記載方法はリソース名、カテゴリ(PNG固定)、ファイルパス(プロジェクトからの相対パス。