VSTe VSTGUI inline UI Editor 基本的な使用方法のソースを表示

[[プラグイン VST#VSTeプログラミング初歩|VSTeプログラミング初歩]]に戻る。
== '''プラグイン開発 概要''' ==
　[[VSTe VSTGUI inline UI Editorの項目一覧|VSTGUI inline UI Editorの項目一覧]]にVSTGUI inline UI Editorの全貌をまとめましたので、これについてひとつづづ確認してみようとする記事です。


　音声処理の部分は難しいので、最後に説明したいと思います。何もしないパラメータたちの扱い方を覚えてしまえば、操作できるわけだから、音声処理を作るときに余計なことを覚えなおさなくていいので、よい感じになります。操作によって管理される各種の値は通常の場合、任意で定義したAudioEffectクラスから派生したクラスを定義した部分でアクセス指定子がprotected:とした領域で数値(int32型(実体はint型)、ParamValue型(実体はfloat型))を保持する変数名で管理されます。

　

== '''アニメーションノブ AnimationKnob について''' ==
　VSTGUI inline UI EditorでKnobを作るときに、Animation Knob、OnOffButton、Kick Buttonという方式を使う場合、同一pngファイル内にアニメーションするように画像を並べて読み込ませるような連続フレーム画像が必要になります。Animation Knobでもノブ以外にスライダーやVUメータのようなデザインを割り当てることで、動作を表現できます。ノブとは回転させるようなつまみの操作部分です。OnOffButtonは、0と1を切り替えるような2値で、0のときの図柄と1のときの図柄を連続フレームのように同じ画像内で並べるような形で表現します。Kick Buttonは、押した瞬間。つまりクリックした瞬間だけ1になって一瞬図柄が変わるようなパターンです。連続フレームとは例えば、以下のような画像です。


[https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=2006 https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=2006]
[[ファイル:Knob Blue.png|16px|thumb|none|アニメーションノブ *.pngの例]]


　一から作るとなるとかなりのデザインセンスが問われるところですが、数千にもおよぶフリーのノブが提供されているWebSiteがあります。


■KnobAnimation g200kg ギャラリー
*[https://www.g200kg.com/en/webknobman/gallery.php https://www.g200kg.com/en/webknobman/gallery.php]


　です。しかも独自に開発されたJKnnobMAN 1.3というツールを使うと少しカスタマイズまでできてしまう形式で提供されています。JKnnobMAN 1.3はWebアプリとしても提供されていて、Web版はWebKnobMANという名前です。
*[https://www.g200kg.com/en/webknobman/index.html https://www.g200kg.com/en/webknobman/index.html]


　にアクセスすることで、使えます。でも最初は、Mac OR Winのアプリケーション版で使い方をマスターしてから、使うとよいでしょう。ギャラリーから納得のいくノブをみつけたらクリックすると3つのアクションが選べます。


*&#x2a;.knobファイルとしてダウンロード
*簡単png形式変換
*WebKnobMANで開く


　の３つです。真ん中を選んで、遷移する画面で画像の大きさと回転のステップ数(Rendering Frame)を数値で指定して Export Exec(エクスポートを実行)ボタンを押すと*.pngとして出力されたものがダウンロードできます。


　JKnobMANでさらなるカスタマイズを覚えるには、一番目の*.knobファイルをダウンロードして、ツールで読み込んでいろいろ操作してみるのが楽しいです。このツールのチカラも借りながら、自分で唯一のKnobファイルを作るのも楽しいです。Knobマニアは3Dモデリングツールでノブをデザインしてみたりしてリアルなものを作ったりもします。ギャラリーにはそういった過程を経たすごいものもあります。


　上達してきたらWeb版を使ってみるのもよいでしょう。


　自分はこのギャラリーから一つを選らんで使い続けてみることにします。まず、選んだこのノブは64[px]x64[px]の32個分です。縦は64[px]*32で2048[px]です。では選んだ画像を以下に一覧してみましょう。


[https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=1558 https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=1558]
[[ファイル:VU 1_ani.apng|||none|]]
:143[px]×64[px]


[https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=2006 https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=2006]
[[ファイル:Knob Blue ani.apng|||none|]]
:64[px]x64[px]


[https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=1596 https://www.g200kg.com/en/webknobman/gallery.php?m=p&p=1596]
[[ファイル:Blue arrow slider 03 ani.apng|||none|]]
:64[px]x64[px]


[[ファイル:Blue Button 0.png|||none|]]

[[ファイル:Blue Button 1.png|||none|]]
:64[px]x64[px]

　

== '''inline UI Editorのパラメータ''' ==
=== '''AnimationKnob/Animation Splash Screenのパラメータ''' ===
<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">AnimationKnobはRangeParameter関数</span>で初期化します。

<span style = "background:linear-gradient(transparent 75%, #aaaaaa 75%); font-weight:bold; ">Animation Splash Screenはどの関数で初期化するか調査中</span>です。
*inverse-bitmap
:フレーム連結ビットマップの反転(下側に配置したものが0、上側が1になる。)
::(Animation Splash Screen/Horizontal Switch/Vertical Switch)


*height-of-one-image
:1フレームあたりの高さピクセル数
::(Animation Splash Screen/Horizontal Switch/Kick Button/Movie Bitmap/Movie Button/Rocker Switch/Vertical Switch)


*sub-pixmaps
:フレーム連結ビットマップにおけるフレーム数(ビットマップ全体の高さ÷1フレームの高さ)基本的には自動で計算されます。指定する必要があるときに設定します。
::(Animation Splash Screen/Horizontal Switch/Kick Button/Movie Bitmap/Movie Button/Rocker Switch/Vertical Switch)


*angle-start
:ノブの角度値の開始位置(半時計周りが正方向)。通常は135(90+45)[°]が開始位置になる。
::(Animation Splash Screen/Knob)


*angle-range
:ノブの角度値の終了位置(開始位置基準で時計周りが正方向)。通常は270(90*3)[°]が開始位置になる。
::(Animation Splash Screen/Knob)


*value-inset
:調査中
::(Animation Splash Screen/Knob)


*zoom-factor
:マウスでドラッグしたときの移動量によるパラメータの増減値の大きさ。指定した値が大きいほど微動で小さいほど粗動になる。
::(Animation Splash Screen/Knob)

　

=== '''Auto Animationのパラメータ''' ===
<span style = "background:linear-gradient(transparent 75%, #aaaaaa 75%); font-weight:bold; ">Auto Animationはどの関数で初期化するか調査中</span>です。
*animation-time
:調査中


*bitmap-offset
:調査中

　

=== '''Checkboxのパラメータ''' ===
<span style = "background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; ">CheckboxはRangeParameter関数</span>で初期化します。
*title
:チェックボックスの横に表示する文字列


*font 規定値 ~SystemFont
:フォントを指定します。※フォントサイズがチェックボックスの大きさにもなります。[~NormalFontBig/~NormalFontSmall/~NormalFontSmaller/~NormalFontVeryBig/~NormalFont/~NormalFontVerySmall/~SymbolFont/~SystemFont/None]


*font-color 規定値 ~WhiteCColor
:[~{Black/White/Red/Green/Blue/Cyan/Magenta/Yellow}CColor/None/Colorsで定義した色名]
:フォントの色。


*boxframe-color 規定値 ~BlackCColor
:[~{Black/White/Red/Green/Blue/Cyan/Magenta/Yellow}CColor/None/Colorsで定義した色名]
:チェックマークの枠線の色。


*boxfill-color 規定値 ~WhiteCColor
:[~{Black/White/Red/Green/Blue/Cyan/Magenta/Yellow}CColor/None/Colorsで定義した色名]
:チェックマークの内側の塗りの色。


*checkmark-color 規定値 ~RedCColor
:[~{Black/White/Red/Green/Blue/Cyan/Magenta/Yellow}CColor/None/Colorsで定義した色名]
:チェックマークの色。


*frame-width
:チェックボックスの枠線の太さ[数値]


*round-rect-radius
:チェックボックスの角の丸み係数[数値]


*[　]autosize-to-fit
:チェックボックスのエリアサイズを文字とチェックマークの範囲に合わせる。エリアサイズが小さいと見切れてしまいます。


*[　]draw-crossbox
:チェックマークの形式が変わります。OFFの場合はレ点。ONの場合は×マークになります。

　

=== '''Controlタグを使うViewsの共通のパラメータ''' ===
(Animation Knob/Animation Splash Screen/Auto Animation/Checkbox/Control/Horizontal Switch/Kick Button/Knob/Label/Movie Bitmap/Movie Button/Multiline Label/OnOff Button/Option Menu/Parameter Display/Rocker Switch/Search Text Edit/Segment Button/Slider/String List Control/Text Button/Text Edit/VU Meter/Vertical Switch/XY Pad)
*control-tag
:Tagsパラメータで登録している値から選択して制御対象を決める部分。Tagsはメニュー[Edit]-[Sync Parameter Tags]でプログラム中でパラメータとして登録している値と同期をとることができる。


Tags値はプログラムでは以下の部分と同期している。
<syntaxhighlight lang="cpp">
tresult PLUGIN_API (任意のクラス名)::initialize(FUnknown* context)
{
…
	tresult result = EditController::initialize(context);
…
	if (result == kResultTrue)
	{
…
		RangeParameter* param1 = new RangeParameter(STR16("変数名"), 列挙番号, STR16(""), 0.0, 1.0, 0.8);
		parameters.addParameter(param1);
…
    }
}
</syntaxhighlight>


　上記により、変数名と列挙番号の対になる値を取得する。列挙番号はパラメータ毎に唯一となるユニークな整数が付与すること。


*default-value
:規定値を設定する。以下に示す。min-valueとmax-valueの中の値を設定する。


*min-value
:最小値を設定する。規定値は0


*max-value
:最大値を設定する。規定値は1


*wheel-inc-value
:UI上でマウスホイールを動かした時の増減値。小さいほど微動、大きいほど粗動

　

=== '''全てのViewsの共通のパラメータ''' ===
*origin
:UIを配置するx座標,y座標の値。


*size
:UIの大きさを表すx座標量,y座標量。


*opacity
:下地と重ね合わせる場合の不透明度。


*[　]transparent 規定値 Off
:調査中


*[　]mouse-enable 規定値 on
:調査中


*[　]wants-focus 規定値 Off
:調査中


*bitmap
:各UIの主要な外観となる画像をBitmapsで定義したものから選択。Animation系ViewとOnOffButtonとKickButtonは垂直フレーム連結画像を指定。


*disabled-bitmap
:調査中


*auto-size([　]left/[　]top/[　]bottom/[　]right)
:調査中


*tooltip
:調査中


*custom-view-name
:調査中


*sub-controller
:調査中


*uidesc-label
:調査中

　


[[プラグイン VST#VSTeプログラミング初歩|VSTeプログラミング初歩]]に戻る。