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

python,qt,PySide,PySide2,Tutorial

このチュートリアルは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_01
Qt 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\scripts
sampleというフォルダを作成し、その中にuiフォルダを作成し、そこに保存してください
C:\Users\<USERNAME>\Documents\maya\scripts\sample\ui\vtxMain.ui

20220401_15


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

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