Maya PySide2 / PySide チュートリアル 初級編 ① – Qt Designer を使ってみる

PySide,Tutorial,PySide2,Python,Qt,Maya

このチュートリアルはPySide2 / PySide チュートリアル 初級編になります 初級編では、Qt Designerを使用したGUIの作成方法、そしてそのGUIとMayaのコマンドをつなげる方法をVertex Colorを調整するToolを通じて学んでいきます 初級編は以下の人に向いています

  • Pythonの基礎を学んだ人
  • 初学編を学んだ人
  • Qt Designerの使い方を知りたい人

Pythonの基本的なお作法を知らない人には少し難しいかもしれませんが.pyの呼び出し方がわかる程度であればclassの使い方はわからなくともコピペで何とかなります

この章はQt Designerを使って.uiを作成していきます


完成イメージ

UIの完成イメージはこんな感じです 20220401_01 次はQt Designerに関する座学的な話になるため、とにかく手を動かしたい人は.uiを作ってみるからお読みください

Qt Designerとは

20220303_01Qt DesignerはWYSIWYG方式*1で、グラフィカルユーザーインターフェイス(GUI)を設計・構築するためのツールで、PySideを作成する際にとても強力なツールになります。

*1: 見たままのものを実際に作成出力するという言葉のWhat You See Is What You Getの頭文字をとったものであり、WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果(HTML、印刷結果等)として得られるようなアプリケーションのこと。 出典: WYSIWYGエディター

実はQt(キュート)には Qt Designer以外にも Qt CreatorやQt Design StudioなどGUIを設計するのに便利なツールがリリースされていますがQt DesignerはMayaに同梱されているQtのツールです(バージョンによっては存在していません)

Qt Designerでできること

Qt Designerでできることはコーディングなしで直感的にGUIを素早く構築することができ、Qtの鬼門の一つSignal&SlotもGUI上で簡単に設定することができます 直感的に触れるという点は最近コーディングを始めたArtistやTAの方にもとても有用なツールになります もちろん深い部分を触る場合はコーディングが必要になってきますがある程度の機能があればよいという状況では素早くGUIを構築することができ、見た目の変更も簡単にすることができます

.uiを作ってみる

20220401_02 この画面は.uiのテンプレートを選択する場所です 自分で作ったオリジナルの.uiテンプレートなどはCustom Widgetsの欄から選ぶことができたりするため よく使うようなテンプレートがある場合は保存しておくと便利です 今回はWidgetを選択し、Screen SizeをQVGA landscape(320x240)を選択し、Createします

Createすると画面に空っぽのWindowのようなものが作成されます 20220401_03 ここにいろいろなウィジェットをほり込んでいきます 試しに左側にあるWidget Boxから適当に選んだWidgetをドラックアンドドロップしてみると 20220401_04 上の画像のようにWidgetを配置することができます

20220401_01 今回の完成イメージのUIは上の画像になります まずはPush ButtonをWidgetに配置してみましょう

20220401_06

Widget Box>Buttons>Push ButtonからドラックアンドドロップでPush Buttonを配置できます

この状態だとレイアウトが変化したときにせっかく配置したWidgetが見えなくなったりする場合があります そういった状況を防ぐためにLayoutを設定しましょう

20220401_06

Widget内で右クリックを押し、Lay out>Lay Out in a Gridを選択してください もしくはショートカットCtrl+5で自動的にPush Buttonがレイアウトされて配置されます 20220401_07

では残りのWidgetをWidget Boxから選んでいきます 20220401_08 使用するものはLabelとDouble Spin Boxです 追加でLabelなどを入れると自動で配置されるので下の画像のように配置してみてください 20220401_09 次に配置したlabelをダブルクリックし、テキストを変更してみてください 20220401_10 最終的にPush Buttonのテキストも変更して、下の画像のように変更してください 20220401_11

次にlabelのAlignmentを変更してみましょう Alignmentは右側のProperty Editor>QLabel>alignmentで変更できます 20220401_12

Alignmentを変更する理由はWindowサイズを変更したときdouble Spin Boxと文字の空間がかなり開けてしまい 見づらくなってしまう問題を解決するためです 20220401_13 次にdouble Spin BoxとPush ButtonのsizePolicy>Vertical PolicyをMinimumに変更します これも似たような感じの理由です

次に画面右側上部にあるObject InspectorでそれぞれObjectに名前を付けましょう ここに書かれている名前がpythonでWidgetを呼び出すときの名前になるため、特に変更しないままでuiを作ってしまうとあとあとめんどくさくなるなんてことがあります ちなみにここのWindowはアルファベット順に並べられてしまうため、下手に接尾辞にWidget名を付けてしまうと探すのが困難になるため基本的にはWidget名の後に独自の名前を付けてあげる方がよいです 20220401_14 今回はアンダースコアとそれぞれ対応するチャンネルの文字を付けました

ここまで出来たらvtxMain.uiという名前で.uiをセーブしてください 保存場所は特に決まっていないのであれば C:\Users\<USERNAME>\Documents\maya\scriptssampleというフォルダを作成し、その中にuiフォルダを作成し、そこに保存してください C:\Users\<USERNAME>\Documents\maya\scripts\sample\ui\vtxMain.ui

20220401_15


Maya PySide2 / PySide チュートリアルのこのパートでは、Qt Designerを使用して.uiを作成しました

次はMaya PySide2 / PySide チュートリアル 初級編 ② – .uiをMayaで表示する