Upload
eliaezekiel
View
226
Download
0
Embed Size (px)
Citation preview
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
1/40
Adding QtQuick based windowsto an existing QWidgetapplication
Michael EadsSenior Tools EngineerTelltale Games
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
2/40
Outline● Introduction
● Application Structure Overview
● Desktop User Interface Elements
– Actions, Menus, Menubars, Toolbars
– Quirks
●
Application Q!id"et Inte"ration● #onclusion
● Questions
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
3/40
Introduction
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
4/40
Who We Are● $ounded in %&&' b( former )ucasarts Emplo(ees
● *ideo +ame Developer and self ublis-er, releasin" on multiple platforms.
/bo0 12&One, S1', #, Android, and iOS
●
rimaril( Develop )icensed, Episodic, Stor( driven Adventure +ames● $or E0ample333
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
5/40
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
6/40
What I do● Make Tools for Makin" Telltale +ames
– roprietar( 4no pictures, sorr(56
–
!indows onl( 4for now6 – Desktop onl(
– Multiple !indow Interface
● Multiple QM) and Q!id"et !indows open simultaneousl(
● Several "enerali7ed tools 4i3e3 "ame data Inspector6
● QM) Quick
– +rap-ical displa( and interaction
● Standard Desktop interface
– Menus, Toolbars, S-ortcuts, etc3
● Toolin" runnin" alon"side +ame En"ine
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
7/40
Application Structure Overview
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
8/40
Game Development Tools nvironment● +ame En"ine Operation 8 Tool Over-ead
● +eneral strict performance re9uirements
– 1& $S8 wit- tools runnin"
– #an result in stran"e trades
● Model updates at :&$S for user interaction
● #ertain QM) Inte"ration met-ods unfeasible
Game Update / Render Qt Tool / Model Updates
30+ Times Per Second (Not to Scale
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
9/40
General Application Setup
Game !ataModel("++
Game Engine("++# non$Qt
Slot %an&("++
QM' nter)ace
Modi)ies
Modi)ies
Polls
User nteraction
Updates
Mo*se nteraction
orce Updates or UndoQ*er, State(Selection# Undo
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
10/40
!"" Structure● +ame Data
– Mostl( non Qt QOb;ect based 4internal "ame en"ine data6
– #ontinuousl( updatin", often wit-out callbacks or
notification
– Data esponds
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
11/40
Qt Structure● ollin" Model
– olls "ame data multiple times a second
– Sets model roles for "ame data c-an"es
– Mana"es settin"s as properties
● Slot ?ank
–
@andles most "ame en"ine interaction – #-an"es "ame data directl(
– Model responds on ne0t update loop
– #an also force immediate update for responsiveness safet(
● Undo>edo, Delete
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
12/40
Q#$ Setup● ature of QM) Data
– *iew based
● QM) does visuali7ation of #88 data t-rou"- model
● Most interaction t-rou"- Menu Toolbar
● ?asicall( no data entr(
– Mouse interaction primaril(
– Si"nal out or invoke to #88
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
13/40
Q#$ Setup % cont&
● Data provided t-rou"- custom Model roles
– #reates QQM)#onte0t for eac- QM) #omponent
– Sets model roles as #onte0t roperties
– #reates QM) #omponent into t-is conte0t
–
Updates #onte0t roperties as part of pollin"● Mouse interaction
– Sets top level properties for #88 4mouse point, etc36
–
#omponents Application!indow si"nal out for interaction
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
14/40
Desktop 'ser Inter(acelements
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
15/40
'ser Inter(ace lements● QtQuick #ontrols
– QM) Items for desktop interface elements
–
Most Q!id"et interaction elements -ave correspondin"#ontrols
● QAction Action, QMenu Menu, QTool?ar Tool?ar, etc3
● Q#ombo?o0, Q)ineEdit, more limited
●
All be-ave sli"-tl( different, or -ave missin" elements● QtQuick Dialo"s
– $ile, #olor, Messa"e
– o QInputDialo" e9uivalentB
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
16/40
QAction and QtQuick Action● Action -as most QAction properties
– Te0t, #-ecked#-eckable, Enabled, S-ortcut, Icon, Tooltip
– #an be added to QM) Items for s-ortcuts
● otable missin" items
– *isible. #anCt -ide ever(t-in" t-at references an action b(
controllin" visible
– S-ortcut conte0tB
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
17/40
xtending Action● Add in *isible propert(
// MyAction.qml
Action{ property bool visible: true}
// MyMenuItem.qmlMenuItem
{ visible: action.visible}
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
18/40
Q#enu and QtQuick #enu● )ike QActionAction, mostl( similar
– Add MenuItems, Actions, etc3
– Supports enabled, icon, visible, etc3
● Some missin" elements
– aboutTo@ide, aboutToS-ow si"nals
– @inders d(namic menu updates w-en visibilit( c-an"es
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
19/40
xtending #enu● Addin" menuAboutToS-ow Si"nal// MyMenu.qmlMenu{
signal menuAboutToShow
property bool showingopup: !alse"
onopup#isible$hange%: { showingopup & 'showingopup" i!(showingopup) { menuAboutToShow() } }}
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
20/40
xtending #enu % cont&● !orks for si"nalin" open
● Allows for d(namic updatin"
● 333@owever, onopup*isible#-an"ed is privateB
– onpopup*isible#-an"ed in some versions
– popup*isible propert( private
– Ma(be s-ouldnCt be usedB
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
21/40
xtending #enu % cont&
● !it- menuAboutToS-ow si"nal, we can
d(namicall( update Menus – #an be done t-rou"- QMetaOb;ect..invokeMet-od4menu,
+4QStrin", te0t66
– Or, create avascript function in menu
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
22/40
D)namicall) Adding Items to #enu// In MyMenu.qml!unction a%%ToMenu(string*ames+ action) {
menu.clear() var item" i!(string*ames.length , -) { menu.visible & true"
!or(var i & -" i string*ames.length" i){item & menu.a%%Item(string*ames0i1)"
item.action & action"}
} else menu.visible & !alse}
// In $
2Meta3b4ect::invo5eMetho%(menuointer+ 6a%%ToMenu6+ 2t::7irect$onnection+28A9(2#ariant+ 2#ariant::!rom#alue(itemsToA%%))+ 28A9(2#ariant+2#ariant(actionointer)))"
// I! you nee% to re!er or iterate over elements22ml;ist9e!erence menuItems(menuointer+ 6items6)"!or(int i & -" i menuItems.count()" i){
23b4ect< item & menuItems.at(i)"}
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
23/40
Tool*ars vs QTool*ar + Quirks● #ontrols Tool?ar s-ares almost not-in" wit- QTool?ar
–
Uses
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
24/40
!ontrols #enu , Quirks● Slow to open
– $ew tent-s of a second
on some computers
● $las- or blink on
S-ow
● #lickin" a Submenu
closes all open menus
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
25/40
Quick #enus , Quirks● @ei"-t not correct on
first s-ow w-en F%&
Menu Items are used
– #an be too lar"e,
e0tendin" drop s-adow
– #an be too small,truncatin" menu options
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
26/40
!ontrols #enus , Quirks● !idt- not correct for MenuItems wit- lon" te0t
– Truncates te0t
– Overlaps s-ortcut listin"
● #an be compensated for b( addin" paddin" w-itespace
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
27/40
!ontrols #enu , Quirks● Menus truncate on
multiple monitors
–
Makes some menu optionsimpossible to c-oose based on
position
– Affects all menus, but especiall(
bad for conte0t menus
– Onl( seems to -appen wit-monitors of different resolution,
includin" rotated monitors
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
28/40
Application + QWidget Integration● Inte"ratin" wit- Q!id"et !indows
– Q!indow QQuick!indow QQuick*iew
– QQuick!id"et
– Q!id"et..create!indow#ontainer
● Minimi7in" #ontrols Usa"e
● Mana"in" $ocus Issues
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
29/40
QWindow + QQuickWindow +QQuick-iew● Simplest
●
Direct QM) wit- no wid"et mi0in"● ?est erformin"
● ?asicall( no knowled"e of Q!id"ets
– o parent c-ild setup
– )aunc-in" an( !id"et window will cause
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
30/40
QQuickWidget● Actual Q!id"et wit- QM) inside of it
● Allows for Q!id"et parent c-ild and modal windows
● Allows for Q!id"et mi0in" wit- QM)
● ?e-aves properl( wit- Q!id"et -ierarc-(
– !id"et stacks, transparenc(, etc3
–
Sacrifices some performance for correctness● erformance #onsiderations
–
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
31/40
QWidget..createWindow!ontainer ● )ike QQuick!id"et, allows embeddin" QM) and !id"et mi0in"
● Sacrifices !id"et stackin" accurac( for performance
– !orks "reat for entirel( QM) application w-ere stackin" doesnCt matter
– Muc- better performance relative to Q9uick!id"et for multiple windows
● $or our case. $rame renderin" 8 Model ollin" 8 !id"et Over-ead
● >esults in near Q!indow performance
●
Several $S over Q9uick!id"et,● Oddit( of our setupB
● Set Q!indow container wid"et as $ocus ro0( for top level Q!id"et
● Our preferred met-od for usin" QM)
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
32/40
!reateWidget!ontainer xample// =ithin 2=i%get %erive% class
22ml$omponent win%ow;oa%er(qml>ngine+ this)"=in%ow;oa%er?,loa%@rl(2@rlqrc://My2ml=in%ow.qmlB)"
22uic5=in%ow< quic5=in%ow & qob4ect8cast22uic5=in%ow
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
33/40
#inimi/ing !ontrols 'sage● On !indows, controls are roblematic
●
Man( Small problems – ?e-avior is 9uite different from platform standard and
Q!id"ets
– Man( minor anno(ances
● Some )ar"e roblems
– Menu Truncation on multiple monitors
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
34/40
#inimi/ing !ontrols 'sage %cont&● !it- QQuick!id"et or create!indow#ontainer
standard Q!id"ets can be mi0ed in● !orks especiall( well for QMenu, QAction, QTool?ar, etc3
● Avoids current problems wit- #ontrols
●
?etter focus -andlin"
● #auses some ot-er uni9ue c-allen"es
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
35/40
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
36/40
0andling 1ocus Issues cont&● Avoidin" activation infinite loop
– Set container Q!id"etCs focus polic( to o$ocus
– Set focus onto it later manuall( or w-en needed
– QM) $ocus will still operate its own wa(
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
37/40
0andling 1ocus Issues, cont&● QMenu $ocus roblems
●
i3e3, QMenu..popup for conte0t menus over QM) area● #an be fi0ed b( settin" focus back on QMenu..aboutTo@ide.
// In .cpp+ along with 2Menu creation23b4ect::connect(
m8myMenu+ F2Menu::aboutToGi%e+0&1() { m8container?,setDocus()" })"
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
38/40
!onclusion● #-oose between eit-er QQuick!id"et or
create!indow#ontainer
● Embed QM) and use it for w-at its needed for
● Use Q!id"ets for desktop interface components
●
$or !indows Desktop at least● One last t-in"333
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
39/40
We2re 0iring3● Tools En"ineer G Qt 4#ore Tec-nolo"(6
– 18 Hears of #88 E0perience
–
:8 Hear of Qt E0perience – rimaril( Q!id"et development focused
● #ome pick up a ;ob fl(er
● ob website. -ttp.www3telltale"ames3comcompan(;obs
● Meet our >ecruiters at t-e bar after t-e conference on t-e
t-
8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark
40/40
Questions4