GUIエクスターナルを書く#1 導入〜API流し読み

こんにちは、首藤です。
最近はBRDG#6にむけて、新ライブパッチをコツコツ作っています。
GUIエクスターナルを色々と書いてみてわかったことをメモっていきます。

面倒なのでサンプルは作りませんのが、気になった人はいろんなことを試しながらオリジナルGUIを作ってみると良いと思います。

独自GUIを書きたい

Maxには、標準でいろんな種類のGUIオブジェクトが含まれています。
それらを組み合わせると大抵のGUIは実現できると思いますが、

  1. 一つのGUIで複数の要素を個別にコントロールしたい
  2. 標準GUIの見た目が思うようにカスタマイズできない
  3. 標準オブジェクトの組み合わせだと冗長なプロセスが増える

等、汎用的に設計されている分、それだけでは実現が無理or面倒なケースもあるかと思います。

特に1.に関しては、できるだけパッチを1画面完結させたい僕にとっては重要でした。

どんなものを書いているか

複数の機能を一つのGUIにまとめる

複数ノブ、テキスト表示、ランダマイズ機能をひとまとめに(修飾キー+ドラッグで個別コントロール)

複数のエンベロープをひとまとめに(ポイント追加削除機能を省いて、カーブを直接操作できるように)
02

トリガー、アクセント、ボリュームシーケンスをひとまとめに
03

標準オブジェクトでは実現が無理or面倒

エンベロープの各ポイントの時間と値に、ランダマイズ機能を追加したい
04

ビート単位で分解能を可変にしたい
05

どうやって書くか

まずはサンプルソースを動かしてみる

Cycling’74からダウンロードできるSDKに、
GUIオブジェクトのサンプルが入っていますので、まずはそれらをチェック。

“max7-sdk/source/ui/uisimp”に、その名の通りシンプルなGUI例が含まれています。

“hogehoge_paint”となっている関数が、描画関数なので、ここを書き換えてビルドすると、描画内容を確認できます。

描画周りのAPIを見てみる

ダウンロードしたSDKフォルダ直下に、”MaxAPI-7.0.3.html”のようなHTMLファイルがあるかと思います。

これをブラウザで開くと、いろんなAPIのドキュメントが一覧できます。

GUIオブジェクトで特に重要になってくるのが、JGraphicsモジュールで、Max5以降、cairoをベースにしたベクトル描画ライブラリが採用されています。

JGraphicsのドキュメントが追加されたのは割と最近で、あまり読みやすいわけではないので、”max7-sdk/source/c74support/max-includes/jgraphics.h”を直接見ながら試すほうが良いかもしれません。

Maxのlcdオブジェクトや、HTML5のcanvas、opengl等で何かしらの描画を経験した人には、馴染みやすい記法で描画プログラムを書けると思います。

よく使いそうな描画API

色指定
  • jgraphics_set_source_jrgba
座標移動・パス作成
  • jgraphics_move_to
  • jgraphics_line_to
  • jgraphics_curve_to
図形
  • jgraphics_rectangle
  • jgraphics_rectangle_rounded
  • jgraphics_ellipse
  • jgraphics_oval
  • jgraphics_arc
線描画
  • jgraphics_set_line_width
  • jgraphics_stroke
パス・図形の塗りつぶし
  • jgraphics_fill_preserve
高速描画
  • jgraphics_line_draw_fast
  • jgraphics_rectangle_fill_fast
  • jgraphics_rectangle_draw_fast

ひとまずこのあたりを試してみると、大抵の図形描画はできるようになると思います。

“jgraphics.h”に、各APIに渡す引数のコメントもありますので、引数の型を更に追っていくと、実際の使い方もイメージしやすくなるかと思います。

大まかな処理の流れ

  1. 描画コンテキストを作る

    サンプルソースで
    t_jgraphics g = (t_jgraphics ) patcherview_get_jgraphics(patcherview);
    こんな感じで描画コンテキストが作られているかと思いますので、これに対して描画処理を投げていきます。

  2. 描画色を指定

    jgraphics_set_source_jrgba(g, &x->u_outline);
    のような感じで描画色をコンテキストに対して設定します。

  3. 描画用パスを作る

    jgraphics_move_to、jgraphics_line_to、jgraphics_curve_to等でポチポチパスを追加していくか、
    jgraphics_rectangle、jgraphics_oval等で、コンテキストにパスを追加します。

  4. パスに線を描画する or パスを塗りつぶす

    コンテキストに登録されているパスは、そのままだとパス情報しか持っていませんので、
    jgraphics_set_line_width、jgraphics_strokeでパスに線を描画するか、
    jgraphics_fill_preserveでパスを塗りつぶします。

ひとまずここまでで、オブジェクトの初期描画状態を作れるようになったと思いますが、
これだけでは操作することも描画内容を更新することもできません。

実際のGUIオブジェクトとして機能させる際には以下のような追加実装が必要です。

  • マウスインタラクション
  • インタラクションに対する再描画
  • 値の入出力
  • 修飾キーでの操作分岐
  • プリセット、pattrstorage対応

このへんはまた次回触れたいと思います。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中