data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAAAAXNSR0IArs4c6QAACXFJREFUeF7tnW1MVNkdxp95YXiN6LiE4KIVlGyLtpUtpUS2rLW+gUmbsmub2m61cdMX00Zrm1ATmyZ+sx+6av0gMUSTfthsYlLbNFVb21grdhNdcKMECQrtAgsKg8wwM8wwb825wwwQYM8IHHpP5rnJjQNz7v8+/+f53XPuDDhY3JffjQWDQYjNX/QyfIVrjMdis1gsiMViya/5gA4sxgG3NwO3P1yVLGGz2WDxrESSsLav1OH+tj2zzrEYCBdzrLgAxM5t4Q4sxv/FHDtXdh5fJn51cfeMZj4RwPz8fGzatAlOp3PhDkw7Mjs7G/+63IxIYOwT61msNlQ3vI1oDGhvb8eTJ09gtVqXREO6FFnq7LKyMnHrvSbEwvHVcr7NasvA1jd/gFA4jPv376O3t3fGJHLk3NdSAzAUCqG+vj55sLgaUpmNElfNXGMf3m3Ba62/Rp5DDlPktR9hoKzBEPvgwQMMDAykCzuL7lNFdq3/+BN2P/kdMu3yFclXeRDPP7vf6OPevXsYGRlJ9pQygAUFBcbsJ7bz58/D4XDg8OHDOH36NA4ePIhLly6hrq4OnZ2d6Onpwf79+zE2Nobr169jcHAQe/fuNa6A8vJyRKNRVFVVoe323/H1nt/Cbp1qIvuH72G86Vuzl/3aw+hZW298v7+/H11dXYsOJl0KLCQ74c3Ro0exc+dObNy40bAqHA7DbrejsrISrTf+gIbBZkyLDvNl56/8PgZfecOoIfiYPnmkDGBRURHWr19vFGltbTUge/z4MY4fP44rV67gwIEDOHnyJE6cOIFjx44ZcAoAxX716lVs374dfX19yM3NxYoVK7Bt2zbc/edf8cZHZ2YA6NjxM0zceGcWG9Ev/xidhTuM7w8NDRnn5paaAwvJTkB74cIFVFRUGLc8ZWVlcLvdBoAiu7YbV7Bv+NIMAOfLzvvqAfSWxpdakZvIL7GlDKDP50NtbW3ywObmZjQ2NhoiDx06hKamJuzatQui2Zs3bxqzocvlwqNHj1BYWGicVFxB69atw9OnT7Fhwwa0372Nb/afmwGgrbQake73ZzkrluCHzteN73d0dMDv96fmPkdhodm1tbUZmYsJR9xzezweFBcXQ8D58NZf8O3nv58B4HzZeba8hZ518dVLzIBer/fFARRHiPu4zZs3L1mkfs8ovprzH8jvAIGPHOvRG11pQC2uopycnCXTkQ6Fljq7gM+D7ZndkN8BAl055Xg24TAmIbFyihefLzwDJg4YHR1FSUkJxHs2y70NDw8bV7NYxrm9uAP/z+zEqhcIBGZll/IS/OLt8gg6IHeAAMo94giFDhBAheaytNwBAij3iCMUOkAAFZrL0nIHCKDcI45Q6AABVGguS8sdIIByjzhCoQMEUKG5LC13gADKPeIIhQ4QQIXmsrTcAQIo94gjFDpAABWay9JyBwig3COOUOgAAVRoLkvLHSCAco84QqEDBFChuSwtd4AAyj3iCIUOEECF5rK03AECKPeIIxQ6QAAVmsvScgcIoNwjjlDoAAFUaC5Lyx0ggHKPOEKhAwRQobksLXeAAMo94giFDhBAheaytNwBAij3iCMUOkAAFZrL0nIHFgzgfB8Qmfg0TfmpOYIOAAsG8MiRI3P6d+bMGfpKB1J2gACmbBUHyhxoaWnBnTt3Zg3bunUrampq5jycAMpc5fMpOyA+C/zatWuzxu/Zs8f4yOa5NgKYsr0cKHOAAMoc4vNKHSCASu1lcZkDBFDmEJ9X6gABVGovi8scIIAyh/i8UgcIoFJ7WVzmAAGUOcTnlTpAAJXay+IyBwigzCE+r9QBAqjUXhaXOUAAZQ7xeaUOEECl9saLb1nVgfK8R3gpYxiIRIBICMGQDW3ez+ND/xcQjGUtgwpznoIAKszFmeVB3dr3sTrLDcSiQDQKRMIGgAgFjT0yEcaf3d/Af0MbFCoxb2kCqCibPEcA3ym/hcyMsPiz3ZMAitkvDIQnkgBiYhxi/+PovrSEkAAqArBh0wcoXukBrOJvuwsAY0BUwBeKAzgRAEIBIBgHMBYcR/PIT+GP5SlSZM6yBFBBLmvy3Xizoh2wZcQBtFjiy68AMDQ5+wkAxewX9Cf3Dzxb0DK+Q4Ei85YkgAqyqS7tQ1XZMGB3AFbbFICJez8DPgHeOBDwAUGf8W80GMA51y8VKDJvSQKoIJvv1nTC6QSQkQXY7JMARqaW3uSsFwdvavfi7FCjAkXmLUkAFWTzk/oOWLNzAEf25Cxojd/7Gfd8fiAgZj9vHLxxAeDk44AXZ5/+QoEi85YkgAqyaajpQ/HLViArF8jMASzW+KveyaUW4wK4xC4gnPr67ODPFSgyb0kCqCCb6s88R9XnAkBWXhxC8WIkAZ8AbzqA0x6PeW24OPS2AkXmLUkAFWSzMm8C36t7BmTmAo6s+Awo3nox7v0S93yJJXhq9vu3qwJ3x76kQJF5SxJARdns/uIQXikNAfbM+Bmikfh7f4m3XowlWNwPxkEc81lwsf8tRWrMW5YAKsxmX+3HKCoIxd+IFgAaPwGZfPN52ivh6Pg4LvfWYXCiUKEac5YmgApzsVhi2LllAJ9eMzr5c+DEz4DFTBh/RfzMnY2/fVwN18QqhUrMW5oALkM22RlhvPqpAazNH0FB5nP4/EC3axX63E489qxdBgXmPQUBNG82aaGMAKZFzOZtkgCaN5u0UEYA0yJm8zZJAM2bTVooI4BpEbN5mySA5s0mLZQRwLSI2bxNEkDzZpMWyghgWsRs3iaXFcBTp07N6URjY3r9Grp5cVh+ZcsK4PK3xzOa3QElALa9vtu0fVvEf5HkZhoHXC4XRkZGZulxOp1YvXr1nDoX/HdCTNM1hWjtAAHUOj79xRNA/TPUugMCqHV8+osngPpnqHUHBFDr+PQXTwD1z1DrDgig1vHpL54A6p+h1h0QQK3j0188AdQ/Q607IIBax6e/eAKof4Zad0AAtY5Pf/EEUP8Mte6AAGodn/7iCaD+GWrdAQHUOj79xRNA/TPUugMCqHV8+osngPpnqHUHBFDr+PQXTwD1z1DrDgig1vHpL54A6p+h1h0QQK3j0188AdQ/Q607IIBax6e/eAKof4Zad0AAtY5Pf/EEUP8Mte6AAGodn/7iCaD+GWrdAQHUOj79xRNA/TPUugMCqHV8+osngPpnqHUHswDseOc3se7ubqOp0ZcK4S4oNG2DdrvdtNooLDUHuvoLkgNLS0rwP3kYKmH2caysAAAAAElFTkSuQmCCdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFoCAYAAACPNyggAAAAAXNSR0IArs4c6QAADoVJREFUeF7t1cEJAAAIxDDdf2m3sJ+4wEEQuuMIECBAgACBd4F9XzRIgAABAgQIjAB7AgIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECByxcQFpoRMBzwAAAABJRU5ErkJggg==3.25112 <?xml version="1.0" encoding="UTF-8"?> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Qt Quick Demo - Maroon in Trouble | Qt 5.15</title> <link rel="stylesheet" type="text/css" href="/style/online2.css" /> <link rel="stylesheet" href="https://www.qt.io/hubfs/qt-design-system/qt-design-system-1.1.0.css" /> <link rel="stylesheet" type="text/css" href="/style/font-awesome.min.css" /> <link rel="shortcut icon" href="//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/images/favicon.ico.gzip" /> <link rel="icon" type="image/png" href="//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" href="//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/images/favicon-16x16.png" /> <script type="text/javascript" src="//d33sqmjvzgs8hq.cloudfront.net/wp-includes/js/jquery/jquery.js.gzip"></script> <script type="text/javascript" src="//d33sqmjvzgs8hq.cloudfront.net/wp-includes/js/jquery/jquery-migrate.min.js.gzip"></script> <script type="text/javascript" src="//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/js/combo.js.gzip"></script> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> <script type="text/javascript" src="/scripts/qtds-extras.js"></script> <script type="text/javascript"> wpThemeFolder = 'https://qt.io/wp-content/themes/oneqt'; </script> <script type="text/javascript"> $(function () { if (document.documentElement.getAttribute('data-theme') === 'dark') $('input#th-toggle').prop('checked', true); $('input#th-toggle').change(function() { var theme = this.checked ? 'dark' : 'light'; localStorage.setItem('theme', theme); document.documentElement.setAttribute('data-theme', theme); }); }); </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5QQXBTC');</script>  <script type="text/javascript" src="/scripts/qt-design-system-1.1.0-doc.js"></script> <script src="/scripts/prettify.js" type="text/javascript"></script> </head> <body class="qt-design-system" style="background:var(--content-bg-color)" onload="prettyPrint()"> <div class="header" id="header"> <header class="b-header" data-float="true"> <div class="b-header__container"> <div class="b-header__secondary-level"> <div class="b-header__secondary-level__back"> <a class="c-link c-link--left" href="https://www.qt.io/">Back to Qt.io</a> </div> <div class="b-header__secondary-level__right"> <a href="https://www.qt.io/contact-us/" target="_blank">Contact Us</a> <a href="https://blog.qt.io/" target="_blank">Blog</a> <a href="https://www.qt.io/download/" target="_blank" class="c-button c-button--small">Download Qt</a> </div> </div> <div class="b-header__primary-level"> <div class="b-header__primary-level__left"> <a class="b-header__logo" href="/"> <img src="/style/qt-logo-documentation.svg" alt="Qt documentation"> </a> </div> <div class="b-header__primary-level__navigation"> <ul class="c-navigation-header"> <li role="menu" style="margin: 0 5px 5px 0;top:7px"> <div title="Toggle light/dark theme" class="theme-switch-wrapper"> <label class="theme-switch" for="th-toggle"> <input type="checkbox" id="th-toggle" /> <div class="theme-icon"></div> </label> </div> </li> <li role="menu"> <a href="/archives" aria-haspopup="true" aria-expanded="false">Archives</a> </li> <li role="menu"> <a href="https://doc-snapshots.qt.io/" aria-haspopup="true" aria-expanded="false">Snapshots</a> </li> </ul> </div> <div class="b-header__primary-level__hamburger"> <div class="c-hamburger"></div> </div> </div> </div> </header> </div> <div data-global-resource-path="qt-design-system/components/b-sidebar.html"> <div class="b-sidebar b-sidebar--full-width"> <aside class="b-sidebar__sidebar"> <div class="b-sidebar__sidebar__mobile-close"><div class="c-mobile-close"></div></div> <div class="b-sidebar__sidebar__mobile-toggle" data-mobile-title="Topics"></div> <div class="b-sidebar__sidebar__content"> <div data-margin-bottom="md"> <select id="qds-vdropdown" class="c-form-select c-form-select--dark js-versioncontrol" style="visibility:hidden"> </select> </div> <div id="qds-ec-toggle" title="Expand/collapse all"></div> <nav> <ul class="c-sidebar-navigation"> <li class="sidebar-nav-topic" id="sb-topic-0" style="visibility:hidden"> <a> Reference </a> <ul> <li> <a href="classes.html"> All Qt C++ Classes </a> </li> <li> <a href="qmltypes.html"> All QML Types </a> </li> <li> <a href="qtmodules.html"> All Qt Modules </a> </li> <li> <a href="../qtcreator/index.html"> Qt Creator Manual </a> </li> <li> <a href="reference-overview.html"> All Qt Reference Documentation </a> </li> </ul> </li> <li class="sidebar-nav-topic" id="sb-topic-1" style="visibility:hidden"> <a> Getting Started </a> <ul> <li> <a href="gettingstarted.html"> Getting Started with Qt </a> </li> <li> <a href="qt5-intro.html"> What's New in Qt 5 </a> </li> <li> <a href="qtexamplesandtutorials.html"> Examples and Tutorials </a> </li> <li> <a href="supported-platforms.html"> Supported Platforms </a> </li> <li> <a href="licensing.html"> Qt Licensing </a> </li> </ul> </li> <li class="sidebar-nav-topic" id="sb-topic-2" style="visibility:hidden"> <a> Overviews </a> <ul> <li> <a href="topics-app-development.html"> Development Tools </a> </li> <li> <a href="topics-ui.html"> User Interfaces </a> </li> <li> <a href="topics-core.html"> Core Internals </a> </li> <li> <a href="topics-data-storage.html"> Data Storage </a> </li> <li> <a href="multimediaoverview.html"> Multimedia </a> </li> <li> <a href="topics-network-connectivity.html"> Networking and Connectivity </a> </li> <li> <a href="topics-graphics.html"> Graphics </a> </li> <li> <a href="mobiledevelopment.html"> Mobile APIs </a> </li> <li> <a href="qmlapplications.html"> QML Applications </a> </li> <li> <a href="overviews-main.html"> All Qt Overviews </a> </li> </ul> </li> </ul> </nav> </div> </aside> <div class="b-sidebar__content"> <div class="b-sidebar__topbar" data-margin-bottom="sm"> <div class="b-topbar"> <div class="b-topbar__search"> <form id="site-search" role="search" style="width: 535px; max-width: 100%" autocomplete="off"> <input class="c-form-input-field c-form-input-field--search" placeholder="Search" id="search" name="search" onclick="(function(w,d,i){i.removeAttribute('on'+w.event.type);var j=d.createElement('script'),c=d.createElement('link');j.async=true;j.onload=function(){qtSearchInit(i,w.qtSearchNavigation)};j.src='//www.qt.io/hubfs/qt-design-system/qt-search-component/qt-search-component.js';c.rel='stylesheet';c.onload=function(){try{w.qtscs=1;qtSearchStyle(i)}catch(e){}};c.href='//www.qt.io/hubfs/qt-design-system/qt-search-component/qt-search-component.css';d.head.appendChild(c);d.head.appendChild(j)})(window,document,this)" required type="text"> <button type="submit" style="display:none;">Search</button> <style>.js-qt-search-component{z-index:1000;}</style> </form> </div> <div class="b-topbar__breadcrump" translate="no"> <ul class="c-breadcrump"> <li><a href="index.html" translate="no">Qt 5.15</a></li> <li><a>Qt Quick Demo - Maroon in Trouble</a></li> </ul> </div> </div> </div> <div class="b-sidebar__content__wrapper"> <article class="b-sidebar__content__left"> <div class="context mainContent" style="margin: 0;padding: 0; background: 0;"> <div class="context"> <h1 class="title">Qt Quick Demo - Maroon in Trouble</h1>  A Qt Quick game for touch devices that uses <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a>, <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a>, Emitter, and Wander types to animate objects and the <a href="qml-multimedia.html#soundeffect" translate="no">SoundEffect</a> type to play sound effects.   <div class="descr"> <a name="details"></a> <img alt="" src="images/qtquick-demo-maroon-med-2.png"/>Maroon in Trouble demonstrates QML features that are useful when developing games: <ul> <li>Using custom QML types to create different screens for different stages of the game.</li> <li>Using the <a href="qml-qtquick-item.html" translate="no">Item</a> and <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> types to construct a game background.</li> <li>Using the <a href="qml-qtquick-sequentialanimation.html" translate="no">SequentialAnimation</a>, <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a>, <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a>, <a href="qml-qtquick-particles-emitter.html" translate="no">Emitter</a>, and <a href="qml-qtquick-particles-wander.html" translate="no">Wander</a> types to animate background objects.</li> <li>Using the <a href="qml-qtqml-timer.html" translate="no">Timer</a> and <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> types to display a countdown sequence before starting the game.</li> <li>Using a custom QML type with custom properties to construct a game board.</li> <li>Using the <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> and <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> types to add animated objects to the game board.</li> <li>Using a custom QML type that uses the <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type with some custom properties to add a menu where the players can buy objects.</li> <li>Using custom properties with private functions to keep track of game statistics and a custom QML type to display them to the players.</li> <li>Using the <a href="qml-qtqml-statemachine-state.html" translate="no">State</a> type with JavaScript functions to manage game states.</li> <li>Using the <a href="qml-multimedia.html#soundeffect" translate="no">SoundEffect</a> type to play individual sound effects depending on the object type and the action applied to the object.</li> <li>Using signal handlers to specify keyboard shortcuts for some game actions.</li> <li>Using resource files to package game resources for deployment and delivery.</li> </ul> <a name="running-the-example"></a> <h4 id="running-the-example">Running the Example<a class="plink" href="#running-the-example" title="Direct link to this headline"></a></h4> To run the example from <a href="https://doc.qt.io/qtcreator/index.html" translate="no">Qt Creator</a>, open the Welcome mode and select the example from Examples. For more information, visit <a href="https://doc.qt.io/qtcreator/creator-build-example-application.html" translate="no">Building and Running an Example</a>. <a name="adding-screens"></a> <h4 id="adding-screens">Adding Screens<a class="plink" href="#adding-screens" title="Direct link to this headline"></a></h4> In the Maroon in Trouble app, we use the following custom types that are each defined in a separate .qml file to create the game screens: <ul> <li>NewGameScreen.qml</li> <li>GameCanvas.qml</li> <li>GameOverScreen.qml</li> </ul> To use the custom types, we add an import statement to the main QML file, maroon.qml that imports the folder called <code translate="no">content</code> where the types are located: <div class="pre"><pre class="cpp prettyprint" translate="no">import "content"</pre></div> We use the screen types at different stages of the game. The NewGameScreen type is used to create the screen that appears when the players start the app. In NewGameScreen.qml, we use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type to create a New Game button that the players can press to start a new game. <img alt="" src="images/qtquick-demo-maroon-med-1.png"/>Tapping the button initiates a countdown timer that triggers the creation of the game canvas by using the GameCanvas type. Another <a href="qml-qtqml-timer.html" translate="no">Timer</a> type spawns mobs of fish inside bubbles that the players must free before they reach the surface. The players can tap on the screen to open a menu where they can buy different types of weapons (melee, ranged, and bombs) to burst the bubbles. <img alt="" src="images/qtquick-demo-maroon-med-2.png"/>When the game finishes, a screen created by using the GameOverScreen type appears. On this screen, the players can see their score and start a new game. <img alt="" src="images/qtquick-demo-maroon-med-3.jpg"/>The screens are all created on the same background and use some of the same images and animations. <a name="constructing-the-background"></a> <h4 id="constructing-the-background">Constructing the Background<a class="plink" href="#constructing-the-background" title="Direct link to this headline"></a></h4> In the maroon.qml file, we use an <a href="qml-qtquick-item.html" translate="no">Item</a> type with the id <code translate="no">root</code> and a fixed width and height to create a main window for the game: <div class="pre"><pre class="cpp prettyprint" translate="no"><a href="qml-qtquick-item.html" translate="no">Item</a> { id: root width: 320 height: 480 property var gameState property bool passedSplash: false</pre></div> We declare two custom properties for the root item, <code translate="no">gameState</code> and <code translate="no">passedSplash</code> that we will use later to manage game states. We use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> item to display the game background image: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source:"content/gfx/background.png" anchors.bottom: view.bottom</pre></div> We want to be able to load the background image only once at app startup and still use different scenes for the game screens. Therefore, background.png is three times the length of the root item and displays a scene that stretches from the bottom of sea to the sky above the horizon. We use the <code translate="no">anchors.bottom</code> property to anchor the background image to the bottom of the <a href="qml-qtquick-column.html" translate="no">Column</a> layout that we use to position the screens: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-column.html" translate="no">Column</a> { id: view y: -(height - 480) width: 320 GameOverScreen { gameCanvas: canvas }</pre></div> We set a negative value for the <code translate="no">y</code> property to set the first scene at the bottom of the sea. We calculate the position by subtracting the height of a screen from the <code translate="no">height</code> property. Within the column layout, we use an <a href="qml-qtquick-item.html" translate="no">Item</a> type to add objects to the background. Within the item, we use <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> layout objects to position <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> objects that display waves on the game canvas and the game over screen: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-item.html" translate="no">Item</a> { id: canvasArea width: 320 height: 480 <a href="qml-qtquick-row.html" translate="no">Row</a> { height: childrenRect.height <a href="qml-qtquick-image.html" translate="no">Image</a> { id: wave y: 30 source:"content/gfx/wave.png" } <a href="qml-qtquick-image.html" translate="no">Image</a> { y: 30 source:"content/gfx/wave.png" } ... <a href="qml-qtquick-row.html" translate="no">Row</a> { opacity: 0.5 <a href="qml-qtquick-image.html" translate="no">Image</a> { id: wave2 y: 25 source: "content/gfx/wave.png" } <a href="qml-qtquick-image.html" translate="no">Image</a> { y: 25 source: "content/gfx/wave.png" }</pre></div> The second row of waves is positioned on the y axis with a slight offset to the first row. We also use the <code translate="no">opacity</code> property to make the waves appear lighter in color than the first two waves, which gives the background some depth. We use <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> objects to also display sunlight on the new game screen and on the game canvas: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "content/gfx/sunlight.png" opacity: 0.02 y: 0 anchors.horizontalCenter: parent.horizontalCenter ... <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "content/gfx/sunlight.png" opacity: 0.04 y: 20 anchors.horizontalCenter: parent.horizontalCenter</pre></div> We set the <code translate="no">opacity</code> property of the images to <code translate="no">0.02</code> and <code translate="no">0.04</code> to give some depth to the rays of sunshine. We use the <code translate="no">y</code> property to position the images at fixed locations on the y axis and the <code translate="no">anchors.horizontalCenter</code> property to center them horizontally in relation to their parent. We use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type to display an image that adds a deepening shadow to the background: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "content/gfx/grid.png" opacity: 0.5 }</pre></div> We set the <code translate="no">opacity</code> property of the image to <code translate="no">0.5</code> to make the background visible behind the shadow. To make the background more interesting, we animate some of the objects we added to it. <a name="animating-background-objects"></a> <h4 id="animating-background-objects">Animating Background Objects<a class="plink" href="#animating-background-objects" title="Direct link to this headline"></a></h4> We use <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> to move the waves horizontally across the screen in opposite directions and <a href="qml-qtquick-sequentialanimation.html" translate="no">SequentialAnimation</a> with <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> to move them up and down. We apply the number animation to the <code translate="no">x</code> property of <code translate="no">wave</code> as a property value source to animate the x value from its current value to the <code translate="no">-(wave.width)</code>, over 16 seconds. We set the <code translate="no">loops</code> property to <code translate="no">Animation.Infinite</code> to repeat the animation indefinitely: <div class="pre"><pre class="cpp prettyprint" translate="no"> NumberAnimation on x { from: 0; to: -(wave.width); duration: 16000; loops: Animation.Infinite }</pre></div> We apply the sequential animation to the <code translate="no">y</code> property of the image as a property value source to animate the y value. We use one number animation to animate the image from the y position of two below the value of y to two above it, over 1600 milliseconds. We use another number animation to subsequently animate the image in the opposite direction, again over 1600 milliseconds. The animation is repeated indefinitely: <div class="pre"><pre class="cpp prettyprint" translate="no"> SequentialAnimation on y { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad } }</pre></div> We use the easing curve of the type <code translate="no">Easing.InOutQuad</code> for a quintic (t^5) function to accelerate the motion until halfway and then decelerate it. We use sequential animation and number animation to animate <code translate="no">wave2</code> similarly to <code translate="no">wave</code>, but in the opposite direction: <div class="pre"><pre class="cpp prettyprint" translate="no"> SequentialAnimation on y { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad } }</pre></div> We use sequential animation to rotate the rays of sunlight in degrees clockwise around an origin point that we set to <code translate="no">Item.Top</code> in the <code translate="no">transformOrigin</code> property. The animation is repeated indefinitely: <div class="pre"><pre class="cpp prettyprint" translate="no"> transformOrigin: Item.Top SequentialAnimation on rotation { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: -10; to: 10; duration: 8000; easing.type: Easing.InOutSine } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: 10; to: -10; duration: 8000; easing.type: Easing.InOutSine } }</pre></div> We use one number animation to rotate the image from <code translate="no">-10</code> degrees to <code translate="no">10</code> degrees over 8 seconds and another to subsequently rotate it from <code translate="no">10</code> degrees to <code translate="no">-10</code> degrees over the same duration. We use the easing curve of the type <code translate="no">Easing.InOutSine</code> for a sinusoidal (sin(t)) function to accelerate the motion until halfway and then decelerate it. We use sequential animation and number animation to animate another sunlight.png image similarly, but in the opposite direction: <div class="pre"><pre class="cpp prettyprint" translate="no"> transformOrigin: Item.Top SequentialAnimation on rotation { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: 10; to: -10; duration: 8000; easing.type: Easing.InOutSine } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: -10; to: 10; duration: 8000; easing.type: Easing.InOutSine } }</pre></div> For examples of using <a href="qml-qtquick-sequentialanimation.html" translate="no">SequentialAnimation</a> and <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> on the <code translate="no">x</code> and <code translate="no">y</code> properties and the <code translate="no">width</code> and <code translate="no">height</code> properties, see NewGameScreen.qml. <a name="emitting-particles"></a> <h4 id="emitting-particles">Emitting Particles<a class="plink" href="#emitting-particles" title="Direct link to this headline"></a></h4> In addition to animation, we use particles to generate motion on the game screens. We use the <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a> QML type in maroon.qml to make bubbles appear at the bottom of the new game screen and game canvas and slowly float towards the top on varying trajectories. To use the <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a> type, we must import <a href="qtquick-particles-qmlmodule.html" translate="no">Qt Quick Particles QML Types</a>: <div class="pre"><pre class="cpp" translate="no">import QtQuick.Particles 2.0</pre></div> To have the particles appear on the game background, we place the <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a> type within the <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type that displays the game background: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source:"content/gfx/background.png" anchors.bottom: view.bottom <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a> { id: particles anchors.fill: parent</pre></div> In the <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a>, we use an <a href="qml-qtquick-particles-emitter.html" translate="no">Emitter</a> type to emit particles from the location of the emitter at the rate of two per second with the life span of 15 seconds: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-particles-emitter.html" translate="no">Emitter</a> { width: parent.width height: 150 anchors.bottom: parent.bottom anchors.bottomMargin: 3 startTime: 15000 emitRate: 2 lifeSpan: 15000 acceleration: PointDirection{ y: -6; xVariation: 2; yVariation: 2 } size: 24 sizeVariation: 16 }</pre></div> The <code translate="no">acceleration</code> property uses the <a href="qml-qtquick-particles-pointdirection.html" translate="no">PointDirection</a> type to specify random variation of the x and y coordinates, so that the bubbles appear inside a rectangular area around the emitter that is anchored to the bottom of the image. The <code translate="no">size</code> property sets the base size of the particles at the beginning of their life to 24 pixels and the <code translate="no">sizeVariation</code> property randomly increases or decreases the particle size by up to 16 pixels, so that we get bubbles in different sizes. As emitters have no visualization, we use the <a href="qml-qtquick-particles-imageparticle.html" translate="no">ImageParticle</a> type to render the catch.png image at the particle location: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-particles-imageparticle.html" translate="no">ImageParticle</a> { id: bubble anchors.fill: parent source: "content/gfx/catch.png" opacity: 0.25 }</pre></div> A <a href="qml-qtquick-particles-wander.html" translate="no">Wander</a> type applies a random trajectory to the particles, so that the bubbles follow random routes from the bottom to the top. <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-particles-wander.html" translate="no">Wander</a> { xVariance: 25; pace: 25; }</pre></div> For another example of using the <a href="qml-qtquick-particles-particlesystem.html" translate="no">ParticleSystem</a> type, see the GameOverScreen.qml file, where an <a href="qml-qtquick-particles-imageparticle.html" translate="no">ImageParticle</a> type is used to make clouds move across the sky. <a name="using-timers"></a> <h4 id="using-timers">Using Timers<a class="plink" href="#using-timers" title="Direct link to this headline"></a></h4> <img alt="" src="images/qtquick-demo-maroon-med-4.jpg"/>In maroon.qml, we use the <a href="qml-qtqml-timer.html" translate="no">Timer</a> type with a <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> type to display a countdown sequence before using another timer to start a new game. Both timers are started simultaneously in the <code translate="no">"gameOn"</code> state, that is when the players tap the New Game button and <code translate="no">passedSplash</code> is <code translate="no">true</code>. This is explained in more detail in <a href="qtdoc-demos-maroon-example.html#managing-game-states" translate="no">Managing Game States</a>. We use the <code translate="no">countdownTimer</code> to display the countdown sequence: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtqml-timer.html" translate="no">Timer</a> { id: countdownTimer interval: 1000 running: root.countdown < 5 repeat: true onTriggered: root.countdown++ }</pre></div> The <code translate="no">onTriggered</code> signal handler is called when the timer is triggered to increment the value of the <code translate="no">countdown</code> custom property. We set the <code translate="no">repeat</code> property to <code translate="no">true</code> to specify that the timer is triggered at the interval of 1 second as long as the value of <code translate="no">countdown</code> is less than 5. The <code translate="no">countdown</code> property is defined in the root item with an initial value of <code translate="no">10</code>, so that <code translate="no">countdownTimer</code> is not running by default: <div class="pre"><pre class="cpp" translate="no"> property int countdown: 10</pre></div> Each time the timer is triggered, an image from the countdown sequence is displayed. We use a <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> type to instantiate the <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> delegate in the context of the repeater's parent, <code translate="no">canvasArea</code> item, seeded with data from the <code translate="no">model</code>: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> { model: ["content/gfx/text-blank.png", "content/gfx/text-3.png", "content/gfx/text-2.png", "content/gfx/text-1.png", "content/gfx/text-go.png"] delegate: Image { visible: root.countdown <= index opacity: root.countdown == index ? 0.5 : 0.1 scale: root.countdown >= index ? 1.0 : 0.0 source: modelData Behavior on opacity { <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> {} } Behavior on scale { <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> {} } } }</pre></div> We scale the images from <code translate="no">0.0</code> to <code translate="no">1.0</code> and use the <code translate="no">visible</code> property to hide the images for the previous steps as the countdown progresses. We also raise the opacity of the image that matches the current countdown step, keeping the others nearly transparent. By animating the changes in the <code translate="no">opacity</code> and <code translate="no">scale</code> properties using a <a href="qml-qtquick-behavior.html" translate="no">Behavior</a> type, we achieve a countdown sequence where numbers zoom in towards the players. <a name="constructing-the-game-board"></a> <h4 id="constructing-the-game-board">Constructing the Game Board<a class="plink" href="#constructing-the-game-board" title="Direct link to this headline"></a></h4> To construct the game board, we use the GameCanvas custom type that is defined in GameCanvas.qml. In maroon.qml, we use the GameCanvas type to display the game canvas at the position of 32 on the x axis and 20 pixels from the bottom of its parent item, <code translate="no">canvasArea</code>: <div class="pre"><pre class="cpp" translate="no"> GameCanvas { id: canvas anchors.bottom: parent.bottom anchors.bottomMargin: 20 x: 32 focus: true }</pre></div> We set the <code translate="no">focus</code> property to <code translate="no">true</code> to give <code translate="no">canvas</code> active focus on startup. In GameCanvas.qml, we use an <a href="qml-qtquick-item.html" translate="no">Item</a> type and define custom properties for it to create a grid of equally sized squares divided to 4 columns on 6 rows: <div class="pre"><pre class="cpp prettyprint" translate="no"><a href="qml-qtquick-item.html" translate="no">Item</a> { id: grid property int squareSize: 64 property int rows: 6 property int cols: 4 property <a href="qml-qtquick-item.html" translate="no">Item</a> canvas: grid</pre></div> We use the custom properties to set the <code translate="no">width</code> and <code translate="no">height</code> of the <code translate="no">grid</code> item as the amount of columns and rows multiplied by square size: <div class="pre"><pre class="cpp prettyprint" translate="no"> width: cols * squareSize height: rows * squareSize</pre></div> We use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type with a <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> type to display a help button that the players can tap to view an image that contains instructions for playing the game: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { id: helpButton z: 1010 source: "gfx/button-help.png" function goAway() { helpMA.enabled = false; helpButton.opacity = 0; } function comeBack() { helpMA.enabled = true; helpButton.opacity = 1; } Behavior on opacity { <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> {} } <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> { id: helpMA anchors.fill: parent onClicked: {helpImage.visible = true; helpButton.visible = false;} } anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 0 }</pre></div> We declare the <code translate="no">goAway()</code> private function to disable the mouse area and make the image fully transparent and a <code translate="no">comeBack()</code> function to enable the mouse area and make the button fully opaque. We use a <a href="qml-qtquick-behavior.html" translate="no">Behavior</a> type on the <code translate="no">opacity</code> property to apply the default number animation when the value of <code translate="no">opacity</code> changes. When the players tap the help button, the <code translate="no">onClicked</code> signal handler is called to hide the help button by setting the <code translate="no">helpButton.visible</code> property to <code translate="no">false</code> and to show the help image by setting the <code translate="no">helpImage.visible</code> property to <code translate="no">false</code>. <img alt="" src="images/qtquick-demo-maroon-med-6.jpg"/>We use anchoring to position the help button at the bottom center of the game canvas. We use another <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type to display the help image: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { id: helpImage z: 1010 source: "gfx/help.png" anchors.fill: parent visible: false <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> { anchors.fill: parent onClicked: helpImage.visible = false; } }</pre></div> To hide the help image when the players tap it, the <code translate="no">onClicked</code> signal handler within the <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> type is called to set the <code translate="no">helpImage.visible</code> property to <code translate="no">true</code>. To ensure that the images are placed on top when they are visible, we set a high value for their <code translate="no">z</code> property. The following sections describe how to use timers to add animated objects to the game board and how to create a menu dialog from which the players can add more objects to it. <a name="animating-objects-on-the-game-board"></a> <h4 id="animating-objects-on-the-game-board">Animating Objects on the Game Board<a class="plink" href="#animating-objects-on-the-game-board" title="Direct link to this headline"></a></h4> We use sprite animation to animate objects on the game board. The Qt Quick <a href="qtquick-effects-sprites.html" translate="no">sprite engine</a> is a stochastic state machine combined with the ability to chop up images containing multiple frames of an animation. <a name="spawning-fish"></a> <h5 id="spawning-fish">Spawning Fish<a class="plink" href="#spawning-fish" title="Direct link to this headline"></a></h5> We use a <a href="qml-qtqml-timer.html" translate="no">Timer</a> element with the <code translate="no">tick()</code> function in GameCanvas.qml to spawn mobs of fish in waves at an increasing rate, starting at 16 milliseconds: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtqml-timer.html" translate="no">Timer</a> { interval: 16 running: true repeat: true onTriggered: Logic.tick() }</pre></div> We use the MobBase custom type that is defined in MobBase.qml to animate mobs of fish that swim inside bubbles. We use an <a href="qml-qtquick-item.html" translate="no">Item</a> type with custom properties and private functions to create the fish and the bubbles and to define the actions that can be applied to them: <div class="pre"><pre class="cpp prettyprint" translate="no"><a href="qml-qtquick-item.html" translate="no">Item</a> { id: container property string name: "Fish" property int col: 0 property real hp: 3 property real damage: 1 property real speed: 0.25 property int rof: 30 //In ticks property int fireCounter: 0 property bool dying: false width: parent ? parent.squareSize : 0 height: parent ? parent.squareSize : 0 x: col * width z: 1001 function fire() { } ...</pre></div> We use a <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> type to animate the fish: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> { id: fishSprite width: 64 height: 64 interpolate: false goalSprite: ""</pre></div> The <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> type renders and controls a list of animations defined by <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> types: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> { name: "left" source: "../gfx/mob-idle.png" frameWidth: 64 frameHeight: 64 frameCount: 1 frameDuration: 800 frameDurationVariation: 400 to: { "front" : 1 } } <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> { name: "front" source: "../gfx/mob-idle.png" frameCount: 1 frameX: 64 frameWidth: 64 frameHeight: 64 frameDuration: 800 frameDurationVariation: 400 to: { "left" : 1, "right" : 1 } } <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> { name: "right" source: "../gfx/mob-idle.png" frameCount: 1 frameX: 128 frameWidth: 64 frameHeight: 64 frameDuration: 800 frameDurationVariation: 400 to: { "front" : 1 } }</pre></div> In the <code translate="no">fishSprite</code> sprite sequence, each sprite defines one frame within the mob-idle.png file, which shows a fish facing right, front, and left: <img alt="" src="images/mob-idle.png"/>We use the <code translate="no">frameWidth</code>, <code translate="no">frameHeight</code>, and <code translate="no">frameX</code> properties to determine that the first 64x64-pixel square of the image is framed in the <code translate="no">"left"</code> sprite, the second in the <code translate="no">"front"</code> sprite, and the third in the <code translate="no">"right"</code> sprite. For each sprite, the <code translate="no">frameCount</code> property is set to <code translate="no">1</code> to specify that the sprite contains one frame. We use the <code translate="no">frameDuration</code> and <code translate="no">frameDurationVariation</code> properties to specify that the duration of an animation can vary from <code translate="no">400</code> to <code translate="no">1200</code> milliseconds. The <code translate="no">to</code> property specifies that the sprites have weighted transitions to other sprites. The <code translate="no">"left"</code> and <code translate="no">"right"</code> sprites always transfer to the <code translate="no">"front"</code> sprite. When the <code translate="no">"front"</code> animation finishes, the sprite engine chooses <code translate="no">"left"</code> or <code translate="no">"right"</code> randomly, but at roughly equal proportions, because they both have the weight <code translate="no">1</code>. When the fish are set free, we want them to swim away in the direction they are facing until they get off the screen. If they were facing front, we use the <code translate="no">jumpTo</code> method with the JavaScript <code translate="no">Math.random()</code> method in the <code translate="no">die()</code> private function to randomly jump to the <code translate="no">"left"</code> or <code translate="no">"right"</code> sprite: <div class="pre"><pre class="cpp prettyprint" translate="no"> function die() { if (dying) return; dying = true; bubble.jumpTo("burst"); if (fishSprite.currentSprite == "front") fishSprite.jumpTo(Math.random() > 0.5 ? "left" : "right" ); fishSwim.start(); Logic.gameState.score += 1; killedSound.play(); bubble.scale = 0.9 destroy(350); }</pre></div> We then use the <code translate="no">start()</code> function to run a <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> that applies a number animation to the x value from its current value to <code translate="no">-360</code> or <code translate="no">360</code>, depending on whether the <code translate="no">goingLeft</code> custom property is <code translate="no">true</code>, in 300 milliseconds: <div class="pre"><pre class="cpp prettyprint" translate="no"> NumberAnimation on x { id: fishSwim running: false property bool goingLeft: fishSprite.currentSprite == "right" to: goingLeft ? -360 : 360 duration: 300 }</pre></div> <a name="bursting-bubbles"></a> <h5 id="bursting-bubbles">Bursting Bubbles<a class="plink" href="#bursting-bubbles" title="Direct link to this headline"></a></h5> We use another <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> to animate the bubbles so that they become smaller and finally burst when they are attacked by a shooter or a melee. For this effect, we set the value of the <code translate="no">scale</code> property to decrease by <code translate="no">0.2</code> each time the custom <code translate="no">hp</code> property changes: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> { id: bubble width: 64 height: 64 scale: 0.4 + (0.2 * hp) interpolate: false goalSprite: ""</pre></div> We use a <a href="qml-qtquick-behavior.html" translate="no">Behavior</a> type to apply a <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> when the value of <code translate="no">scale</code> changes. We use the <code translate="no">Easing.OutBack</code> easing type for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing out curve that decelerates the motion to zero velocity in 150 milliseconds: <div class="pre"><pre class="cpp prettyprint" translate="no"> Behavior on scale { <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { duration: 150; easing.type: Easing.OutBack } }</pre></div> The <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> consist of two sprites that display different images. The first sprite, <code translate="no">"big"</code>, uses the catch.png image to display an empty bubble: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> { name: "big" source: "../gfx/catch.png" frameCount: 1 to: { "burst" : 0 } }</pre></div> We set the <code translate="no">to</code> property to <code translate="no">"burst"</code> with the weight <code translate="no">0</code> to make the second sprite, <code translate="no">"burst"</code>, a valid goal for the <code translate="no">jumpTo</code> method that we use in the <code translate="no">die()</code> private function to jump directly to the <code translate="no">"burst"</code> sprite without playing the first sprite. In the <code translate="no">"burst"</code> sprite, we set the <code translate="no">frameCount</code> property to <code translate="no">3</code> and the <code translate="no">frameX</code> property to <code translate="no">64</code> to specify that the animation starts at pixel location 64 and loads each frame for the duration of 200 milliseconds. <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-sprite.html" translate="no">Sprite</a> { name: "burst" source: "../gfx/catch-action.png" frameCount: 3 frameX: 64 frameDuration: 200 }</pre></div> Within the <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a>, we use <a href="qml-qtquick-sequentialanimation.html" translate="no">SequentialAnimation</a> with <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> to animate the transitions between the frames. To create a pulsating effect on the bubbles, we apply a sequential animation on the <code translate="no">width</code> property with two number animations to first increase the bubble width from <code translate="no">* 1</code> to <code translate="no">* 1.1</code> over 800 milliseconds and then bring it back over 1 second: <div class="pre"><pre class="cpp prettyprint" translate="no"> SequentialAnimation on width { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: width * 1; to: width * 1.1; duration: 800; easing.type: Easing.InOutQuad } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: width * 1.1; to: width * 1; duration: 1000; easing.type: Easing.InOutQuad } }</pre></div> Similarly, we increase the bubble height from <code translate="no">* 1</code> to <code translate="no">* 1.15</code> over 1200 milliseconds and then bring it back over 1 second: <div class="pre"><pre class="cpp prettyprint" translate="no"> SequentialAnimation on height { loops: Animation.Infinite <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: height * 1; to: height * 1.15; duration: 1200; easing.type: Easing.InOutQuad } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { from: height * 1.15; to: height * 1; duration: 1000; easing.type: Easing.InOutQuad } }</pre></div> We use yet another <a href="qml-qtquick-spritesequence.html" translate="no">SpriteSequence</a> to display the effect of squid ink on the bubbles. For more examples of using sprite sequences, see the QML files in the <code translate="no">towers</code> directory. <a name="adding-dialogs"></a> <h4 id="adding-dialogs">Adding Dialogs<a class="plink" href="#adding-dialogs" title="Direct link to this headline"></a></h4> <img alt="" src="images/qtquick-demo-maroon-med-5.jpg"/>In GameCanvas.qml, we use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type with some custom properties to create a menu where the players can buy tower objects: <div class="pre"><pre class="cpp" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { id: towerMenu visible: false z: 1500 scale: 0.9 opacity: 0.7 property int dragDistance: 16 property int targetRow: 0 property int targetCol: 0 property bool shown: false property bool towerExists: false</pre></div> We set the <code translate="no">visible</code> property to <code translate="no">false</code> to hide the menu by default. The <code translate="no">z</code> property is set to 1500 to ensure that the menu is displayed in front of all other items when it is visible. We use a <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> type to open or close the menu when players tap on the canvas: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> { id: ma anchors.fill: parent onClicked: { if (towerMenu.visible) towerMenu.finish() else towerMenu.open(mouse.x, mouse.y) } }</pre></div> We set the <code translate="no">anchors.fill</code> property to <code translate="no">parent</code> to allow the players to tap anywhere on the game canvas. We use a condition in the <code translate="no">onClicked</code> signal handler to call the <code translate="no">finish()</code> function if the menu is visible and the <code translate="no">open()</code> function otherwise. The <code translate="no">finish()</code> function hides the menu by setting the <code translate="no">shown</code> custom property to <code translate="no">false</code>: <div class="pre"><pre class="cpp prettyprint" translate="no"> function finish() { shown = false }</pre></div> The <code translate="no">open()</code> function displays the menu at the x and y position of the mouse pointer: <div class="pre"><pre class="cpp prettyprint" translate="no"> function open(xp,yp) { if (!grid.gameRunning) return targetRow = Logic.row(yp) targetCol = Logic.col(xp) if (targetRow == 0) towerMenu.y = (targetRow + 1) * grid.squareSize else towerMenu.y = (targetRow - 1) * grid.squareSize towerExists = (grid.towers[Logic.towerIdx(targetCol, targetRow)] != null) shown = true helpButton.goAway(); }</pre></div> If <code translate="no">gameRunning</code> is <code translate="no">true</code>, we call the JavaScript <code translate="no">row()</code> function to calculate the value of the <code translate="no">targetRow</code> custom property and the <code translate="no">col()</code> function to calculate the value of the <code translate="no">targetCol</code> custom property. If the value of <code translate="no">targetRow</code> equals <code translate="no">0</code>, the y position is set to one square above the mouse pointer. Otherwise, it is set to one square below the mouse pointer. We use the <code translate="no">towerIdx()</code> function to set the value of the <code translate="no">towerExists</code> custom property. We set the <code translate="no">shown</code> custom property to <code translate="no">true</code> to show the menu and call the <code translate="no">helpButton.goAway()</code> function to hide the help button when the menu opens. We use states and transitions to display the menu when the <code translate="no">shown</code> property is <code translate="no">true</code> and the <code translate="no">gameOver</code> property is <code translate="no">false</code>: <div class="pre"><pre class="cpp prettyprint" translate="no"> states: State { name: "shown"; when: towerMenu.shown && !grid.gameOver <a href="qml-qtquick-propertychanges.html" translate="no">PropertyChanges</a> { target: towerMenu; visible: true; scale: 1; opacity: 1 } } transitions: Transition { <a href="qml-qtquick-propertyaction.html" translate="no">PropertyAction</a> { property: "visible" } <a href="qml-qtquick-numberanimation.html" translate="no">NumberAnimation</a> { properties: "opacity,scale"; duration: 500; easing.type: Easing.OutElastic } }</pre></div> To set the visibility of the menu to <code translate="no">"visible"</code> without animating the property change, we use a <a href="qml-qtquick-propertyaction.html" translate="no">PropertyAction</a> type. We do want to animate the changes in opacity and scale, though, so we use number animation to animate the value of the <code translate="no">scale</code> property from <code translate="no">0.9</code> to <code translate="no">1</code> and the value of <code translate="no">opacity</code> property from <code translate="no">0.7</code> to <code translate="no">1</code>, over 500 milliseconds. We use the <code translate="no">Easing.outElastic</code> easing type for an elastic (exponentially decaying sine wave) function easing curve that decelerates from zero velocity. To construct the menu, we use a BuildButton custom type that is defined in BuildButton.qml. In GameCanvas.qml, we create one build button for each tower object that the players can buy and position them in a <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> layout in front of the menu background image, dialog.png: <div class="pre"><pre class="cpp prettyprint" translate="no"> x: -32 source: "gfx/dialog.png" <a href="qml-qtquick-row.html" translate="no">Row</a> { id: buttonRow height: 100 anchors.centerIn: parent spacing: 8 BuildButton { row: towerMenu.targetRow; col: towerMenu.targetCol anchors.verticalCenter: parent.verticalCenter towerType: 1; index: 0 canBuild: !towerMenu.towerExists source: "gfx/dialog-melee.png" onClicked: towerMenu.finish() } BuildButton { row: towerMenu.targetRow; col: towerMenu.targetCol anchors.verticalCenter: parent.verticalCenter towerType: 2; index: 1 canBuild: !towerMenu.towerExists source: "gfx/dialog-shooter.png" onClicked: towerMenu.finish() } BuildButton { row: towerMenu.targetRow; col: towerMenu.targetCol anchors.verticalCenter: parent.verticalCenter towerType: 3; index: 2 canBuild: !towerMenu.towerExists source: "gfx/dialog-bomb.png" onClicked: towerMenu.finish() } BuildButton { row: towerMenu.targetRow; col: towerMenu.targetCol anchors.verticalCenter: parent.verticalCenter towerType: 4; index: 3 canBuild: !towerMenu.towerExists source: "gfx/dialog-factory.png" onClicked: towerMenu.finish() } } }</pre></div> For each build button, we set the values of <code translate="no">towerType</code> and <code translate="no">index</code> custom properties that we define in BuildButton.qml. We use the <code translate="no">canBuild</code> custom property to prevent players from adding tower objects in locations where tower objects already exist. We use the <code translate="no">source</code> property to display the image for the tower type. The <code translate="no">onClicked</code> signal handler is called to execute the <code translate="no">finish()</code> function that closes the menu when the players tap an enabled build button. Build buttons are enabled when the players have enough coins to buy the tower objects. We use an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type in BuildButton.qml to display images on the buttons: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { id: img opacity: (canBuild && gameCanvas.coins >= Logic.towerData[towerType-1].cost) ? 1.0 : 0.4 }</pre></div> We use the <code translate="no">opacity</code> property to make the buttons appear enabled. If <code translate="no">canBuild</code> is <code translate="no">true</code> and the value of the <code translate="no">gameCanvas.coins</code> property is larger than or equal to the cost of a tower object, the images are fully opaque, otherwise their opacity is set to <code translate="no">0.4</code>. We use a <a href="qml-qtquick-text.html" translate="no">Text</a> type to display the cost of each tower item, as specified by the <code translate="no">towerData</code> variable, depending on <code translate="no">towerType</code>: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-text.html" translate="no">Text</a> { anchors.right: parent.right font.pointSize: 14 font.bold: true color: "#ffffff" text: Logic.towerData[towerType - 1].cost }</pre></div> To display a pointer on the screen at the position where the tower object will be added, we use the <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type. We use the <code translate="no">visible</code> property to determine whether the dialog-pointer.png image should be positioned below or above the menu. When the value of the <code translate="no">col</code> property equals the <code translate="no">index</code> and the value or the <code translate="no">row</code> property is not <code translate="no">0</code>, we anchor the image to the bottom of its parent, BuildButton. When the value or the <code translate="no">row</code> property is <code translate="no">0</code>, we anchor the image to the top of BuildButton to position the pointer above the menu and use the <code translate="no">rotation</code> property to rotate it by 180 degrees, so that it points upwards: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { visible: col == index && row != 0 source: "gfx/dialog-pointer.png" anchors.top: parent.bottom anchors.topMargin: 4 anchors.horizontalCenter: parent.horizontalCenter } <a href="qml-qtquick-image.html" translate="no">Image</a> { visible: col == index && row == 0 source: "gfx/dialog-pointer.png" rotation: 180 anchors.bottom: parent.top anchors.bottomMargin: 6 anchors.horizontalCenter: parent.horizontalCenter }</pre></div> <a name="keeping-track-of-game-statistics"></a> <h4 id="keeping-track-of-game-statistics">Keeping Track of Game Statistics<a class="plink" href="#keeping-track-of-game-statistics" title="Direct link to this headline"></a></h4> To keep track of the game statistics, we use the InfoBar custom type (that is defined in InfoBar.qml) in maroon.qml: <div class="pre"><pre class="cpp prettyprint" translate="no"> InfoBar { anchors.bottom: canvas.top; anchors.bottomMargin: 6; width: parent.width }</pre></div> We use the <code translate="no">anchors.bottom</code> and <code translate="no">anchors.bottomMargin</code> properties to position the info bar at 6 points from the top of the game canvas. We bind the <code translate="no">width</code> property of the info bar to that of its parent. In InfoBar.qml, we use an <a href="qml-qtquick-item.html" translate="no">Item</a> type to create the info bar. Within it, we use a <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> layout type to display the number of lives the players have left, the number of fish that have been saved, and the amount of coins that are available for use. We use the <code translate="no">anchors</code> property to position the rows in relationship to their parent and to each other. In the first <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> object, we use the <code translate="no">anchors.left</code> and <code translate="no">anchors.leftMargin</code> properties to position the heart icons at 10 points from the left border of the parent item: <div class="pre"><pre class="cpp prettyprint" translate="no"><a href="qml-qtquick-item.html" translate="no">Item</a> { height: childrenRect.height // Display the number of lives <a href="qml-qtquick-row.html" translate="no">Row</a> { anchors.left: parent.left anchors.leftMargin: 10 spacing: 5 <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> { id: rep model: Math.min(10, canvas.lives) delegate: Image { source: "gfx/lifes.png" } } }</pre></div> We use a <a href="qml-qtquick-repeater.html" translate="no">Repeater</a> type with a <code translate="no">model</code> and a <code translate="no">delegate</code> to display as many hearts as the players have lives left. We use the <code translate="no">spacing</code> property to leave 5 pixels between the displayed icons. In the second <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> object, we use the <code translate="no">anchors.right</code> and <code translate="no">anchors.rightMargin</code> properties to position the number of fish saved at 20 points left of the third <a href="10-qdoc-commands-tablesandlists.html#row" translate="no">Row</a> object that displays the number of coins available (and has the id <code translate="no">points</code>): <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-row.html" translate="no">Row</a> { anchors.right: points.left anchors.rightMargin: 20 spacing: 5 <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "gfx/scores.png" } <a href="qml-qtquick-text.html" translate="no">Text</a> { text: canvas.score font.bold: true } } // Display the number of coins <a href="qml-qtquick-row.html" translate="no">Row</a> { id: points anchors.right: parent.right anchors.rightMargin: 10 spacing: 5 <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "gfx/points.png" } <a href="qml-qtquick-text.html" translate="no">Text</a> { id: pointsLabel text: canvas.coins font.bold: true } } }</pre></div> In these objects, we set spacing to 5 pixels to separate the icons from the numbers that we display by using a <a href="qml-qtquick-text.html" translate="no">Text</a> type. In GameCanvas.qml, we define custom properties to hold the game statistics: <div class="pre"><pre class="cpp" translate="no"> property int score: 0 property int coins: 100 property int lives: 3</pre></div> We declare the <code translate="no">freshState()</code> function to set the initial game statistics when a new game starts: <div class="pre"><pre class="cpp prettyprint" translate="no"> function freshState() { lives = 3 coins = 100 score = 0 waveNumber = 0 waveProgress = 0 gameOver = false gameRunning = false towerMenu.shown = false helpButton.comeBack(); }</pre></div> We use the <code translate="no">Logic.gameState.score</code> variable in the <code translate="no">die()</code> function that we declare in MobBase.qml to increase the score by one when the players set a fish free: <div class="pre"><pre class="cpp prettyprint" translate="no"> Logic.gameState.score += 1;</pre></div> <a name="managing-game-states"></a> <h4 id="managing-game-states">Managing Game States<a class="plink" href="#managing-game-states" title="Direct link to this headline"></a></h4> In maroon.qml, we use a <a href="qml-qtqml-statemachine-state.html" translate="no">State</a> type and JavaScript to switch between screens according to the game state. The logic.js file contains definitions for the functions. To use the functions in a QML file, we import logic.js as the <code translate="no">Logic</code> namespace in that file: <div class="pre"><pre class="cpp prettyprint" translate="no">import "content/logic.js" as Logic</pre></div> The base state displays the new game screen when the application starts. In addition, we call the Component.onCompleted signal handler to initialize a new game: <div class="pre"><pre class="cpp prettyprint" translate="no"> Component.onCompleted: gameState = Logic.newGameState(canvas);</pre></div> In NewGameScreen.qml we use the <code translate="no">onClicked</code> signal handler to emit the <code translate="no">startButtonClicked()</code> signal when the players tap the New Game button: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "gfx/button-play.png" anchors.bottom: parent.bottom anchors.bottomMargin: 60 <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> { anchors.fill: parent onClicked: newGameScreen.startButtonClicked() }</pre></div> In maroon.qml, we use the <code translate="no">onStartButtonClicked</code> signal handler to set the <code translate="no">passedSplash</code> property of the <code translate="no">root</code> item to <code translate="no">true</code>: <div class="pre"><pre class="cpp prettyprint" translate="no"> NewGameScreen { onStartButtonClicked: root.passedSplash = true }</pre></div> We then use the <code translate="no">passedSplash</code> property in the <code translate="no">when</code> property of the <code translate="no">gameOn</code> state to trigger the <code translate="no">gameStarter</code> timer: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtqml-statemachine-state.html" translate="no">State</a> { name: "gameOn"; when: gameState.gameOver == false && passedSplash <a href="qml-qtquick-propertychanges.html" translate="no">PropertyChanges</a> { target: view; y: -(height - 960) } <a href="qml-qtquick-statechangescript.html" translate="no">StateChangeScript</a> { script: root.countdown = 0; } <a href="qml-qtquick-propertychanges.html" translate="no">PropertyChanges</a> { target: gameStarter; running: true } },</pre></div> We also switch to the <code translate="no">"gameOn"</code> state and move to the y position <code translate="no">-(height - 960)</code> to display the game canvas. In the <code translate="no">gameStarter</code> <a href="qml-qtqml-timer.html" translate="no">Timer</a> object we use the <code translate="no">onTriggered</code> signal handler to call the <code translate="no">startGame()</code> function that starts a new game: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtqml-timer.html" translate="no">Timer</a> { id: gameStarter interval: 4000 running: false repeat: false onTriggered: Logic.startGame(canvas); }</pre></div> The game continues until <code translate="no">gameState.gameOver</code> is set to <code translate="no">true</code> and <code translate="no">gameState.gameRunning</code> is set to <code translate="no">false</code> by calling the <code translate="no">endGame()</code> function when the value of the <code translate="no">gameState.lives</code> property becomes less than or equal to <code translate="no">0</code>. In GameOverScreen.qml, we use a <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> type and an <code translate="no">onClicked</code> signal handler within an <a href="09-qdoc-commands-includingimages.html#image" translate="no">Image</a> type to return to the game canvas when the players tap the New Game button: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtquick-image.html" translate="no">Image</a> { source: "gfx/button-play.png" anchors.bottom: parent.bottom anchors.bottomMargin: 0 <a href="qml-qtquick-mousearea.html" translate="no">MouseArea</a> { anchors.fill: parent onClicked: gameCanvas.gameOver = false//This will actually trigger the state change in main.qml } }</pre></div> The <code translate="no">onClicked</code> signal handler triggers a state change in maroon.qml to display the game canvas: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtqml-statemachine-state.html" translate="no">State</a> { name: "gameOver"; when: gameState.gameOver == true <a href="qml-qtquick-propertychanges.html" translate="no">PropertyChanges</a> { target: view; y: 0 } }</pre></div> <a name="playing-sound-effects"></a> <h4 id="playing-sound-effects">Playing Sound Effects<a class="plink" href="#playing-sound-effects" title="Direct link to this headline"></a></h4> The app can play sound effects if the <a href="qtmultimedia-index.html" translate="no">Qt Multimedia</a> module is installed. In the <a href="qml-multimedia.html#soundeffect" translate="no">SoundEffect</a>.qml file, we proxy a <a href="qml-multimedia.html#soundeffect" translate="no">SoundEffect</a> type: <div class="pre"><pre class="cpp prettyprint" translate="no"><a href="qml-qtquick-item.html" translate="no">Item</a> { id: container property <a href="qml-qtqml-qtobject.html" translate="no">QtObject</a> effect: Qt.createQmlObject("import QtMultimedia 5.0; SoundEffect{ source: '" + container.source + "'; muted: Qt.application.state != Qt.ApplicationActive }", container); property url source: "" onSourceChanged: if (effect != null) effect.source = source; function play() { if (effect != null) effect.play(); }</pre></div> We add the <code translate="no">qtHaveModule()</code> qmake command to the app .pro file, maroon.pro, to check whether the <a href="qtmultimedia-index.html" translate="no">Qt Multimedia</a> module is present: <div class="pre"><pre class="cpp prettyprint" translate="no">QT += qml quick qtHaveModule(multimedia): QT += multimedia</pre></div> In each QML file that defines a custom type used on the game canvas, we use a <a href="qml-multimedia.html#soundeffect" translate="no">SoundEffect</a> type to specify the audio file to play for that type of objects. For example, in Bomb.qml, we specify the sound that a bomb makes when it explodes: <div class="pre"><pre class="cpp prettyprint" translate="no"> <a href="qml-qtmultimedia-soundeffect.html" translate="no">SoundEffect</a> { id: sound source: "../audio/bomb-action.wav" }</pre></div> To play the sound effect when a bomb explodes, we call the <code translate="no">sound.play()</code> function that we declare as a member of the private <code translate="no">fire()</code> function within the TowerBase custom type: <div class="pre"><pre class="cpp prettyprint" translate="no"> function fire() { sound.play() sprite.jumpTo("shoot") animDelay.start() }</pre></div> For more examples of playing sound effects, see the QML files in the <code translate="no">towers</code> directory and MobBase.qml. <a name="adding-keyboard-shortcuts"></a> <h4 id="adding-keyboard-shortcuts">Adding Keyboard Shortcuts<a class="plink" href="#adding-keyboard-shortcuts" title="Direct link to this headline"></a></h4> This is a touch example, so you should not really need to handle key presses. However, we do not want you to have to spend more time playing the game than you want to while testing it, so we use the <code translate="no">Keys.onPressed</code> signal handler to specify keyboard shortcuts. You can press Shift+Up to increment the values of the <code translate="no">coins</code> property to add coins, Shift+Left to increment the value of <code translate="no">lives</code>, Shift+Down to increment the value of the <code translate="no">waveProgress</code> property to spawn mobs of fish faster, and Shift+Right to call the <code translate="no">endGame()</code> function to quit the game: <div class="pre"><pre class="cpp prettyprint" translate="no"> Keys.onPressed: { // Cheat Codes while Testing if (event.key == Qt.Key_Up && (event.modifiers & Qt.ShiftModifier)) grid.coins += 10; if (event.key == Qt.Key_Left && (event.modifiers & Qt.ShiftModifier)) grid.lives += 1; if (event.key == Qt.Key_Down && (event.modifiers & Qt.ShiftModifier)) Logic.gameState.waveProgress += 1000; if (event.key == Qt.Key_Right && (event.modifiers & Qt.ShiftModifier)) Logic.endGame(); }</pre></div> <a name="packaging-resources-for-deployment"></a> <h4 id="packaging-resources-for-deployment">Packaging Resources for Deployment<a class="plink" href="#packaging-resources-for-deployment" title="Direct link to this headline"></a></h4> To be able to run the app on mobile devices, we package all QML, JavaScript, image, and sound files into a Qt resource file (.qrc). For more information, see <a href="resources.html" translate="no">The Qt Resource System</a>. Files: <ul> <li><a href="qtdoc-demos-maroon-content-buildbutton-qml.html" translate="no">demos/maroon/content/BuildButton.qml</a></li> <li><a href="qtdoc-demos-maroon-content-gamecanvas-qml.html" translate="no">demos/maroon/content/GameCanvas.qml</a></li> <li><a href="qtdoc-demos-maroon-content-gameoverscreen-qml.html" translate="no">demos/maroon/content/GameOverScreen.qml</a></li> <li><a href="qtdoc-demos-maroon-content-infobar-qml.html" translate="no">demos/maroon/content/InfoBar.qml</a></li> <li><a href="qtdoc-demos-maroon-content-newgamescreen-qml.html" translate="no">demos/maroon/content/NewGameScreen.qml</a></li> <li><a href="qtdoc-demos-maroon-content-soundeffect-qml.html" translate="no">demos/maroon/content/SoundEffect.qml</a></li> <li><a href="qtdoc-demos-maroon-content-logic-js.html" translate="no">demos/maroon/content/logic.js</a></li> <li><a href="qtdoc-demos-maroon-content-mobs-mobbase-qml.html" translate="no">demos/maroon/content/mobs/MobBase.qml</a></li> <li><a href="qtdoc-demos-maroon-content-towers-bomb-qml.html" translate="no">demos/maroon/content/towers/Bomb.qml</a></li> <li><a href="qtdoc-demos-maroon-content-towers-factory-qml.html" translate="no">demos/maroon/content/towers/Factory.qml</a></li> <li><a href="qtdoc-demos-maroon-content-towers-melee-qml.html" translate="no">demos/maroon/content/towers/Melee.qml</a></li> <li><a href="qtdoc-demos-maroon-content-towers-ranged-qml.html" translate="no">demos/maroon/content/towers/Ranged.qml</a></li> <li><a href="qtdoc-demos-maroon-content-towers-towerbase-qml.html" translate="no">demos/maroon/content/towers/TowerBase.qml</a></li> <li><a href="qtdoc-demos-maroon-main-cpp.html" translate="no">demos/maroon/main.cpp</a></li> <li><a href="qtdoc-demos-maroon-maroon-pro.html" translate="no">demos/maroon/maroon.pro</a></li> <li><a href="qtdoc-demos-maroon-maroon-qml.html" translate="no">demos/maroon/maroon.qml</a></li> <li><a href="qtdoc-demos-maroon-maroon-qmlproject.html" translate="no">demos/maroon/maroon.qmlproject</a></li> <li><a href="qtdoc-demos-maroon-maroon-qrc.html" translate="no">demos/maroon/maroon.qrc</a></li> </ul> Images: <ul> <li><a href="images/used-in-examples/demos/maroon/content/gfx/background.png" translate="no">demos/maroon/content/gfx/background.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/bomb-action.png" translate="no">demos/maroon/content/gfx/bomb-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/bomb-idle.png" translate="no">demos/maroon/content/gfx/bomb-idle.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/bomb.png" translate="no">demos/maroon/content/gfx/bomb.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/button-help.png" translate="no">demos/maroon/content/gfx/button-help.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/button-play.png" translate="no">demos/maroon/content/gfx/button-play.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/catch-action.png" translate="no">demos/maroon/content/gfx/catch-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/catch.png" translate="no">demos/maroon/content/gfx/catch.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/cloud.png" translate="no">demos/maroon/content/gfx/cloud.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/currency.png" translate="no">demos/maroon/content/gfx/currency.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog-bomb.png" translate="no">demos/maroon/content/gfx/dialog-bomb.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog-factory.png" translate="no">demos/maroon/content/gfx/dialog-factory.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog-melee.png" translate="no">demos/maroon/content/gfx/dialog-melee.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog-pointer.png" translate="no">demos/maroon/content/gfx/dialog-pointer.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog-shooter.png" translate="no">demos/maroon/content/gfx/dialog-shooter.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/dialog.png" translate="no">demos/maroon/content/gfx/dialog.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/factory-action.png" translate="no">demos/maroon/content/gfx/factory-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/factory-idle.png" translate="no">demos/maroon/content/gfx/factory-idle.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/factory.png" translate="no">demos/maroon/content/gfx/factory.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/grid.png" translate="no">demos/maroon/content/gfx/grid.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/help.png" translate="no">demos/maroon/content/gfx/help.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/lifes.png" translate="no">demos/maroon/content/gfx/lifes.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/logo-bubble.png" translate="no">demos/maroon/content/gfx/logo-bubble.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/logo-fish.png" translate="no">demos/maroon/content/gfx/logo-fish.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/logo.png" translate="no">demos/maroon/content/gfx/logo.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/melee-action.png" translate="no">demos/maroon/content/gfx/melee-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/melee-idle.png" translate="no">demos/maroon/content/gfx/melee-idle.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/melee.png" translate="no">demos/maroon/content/gfx/melee.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/mob-idle.png" translate="no">demos/maroon/content/gfx/mob-idle.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/mob.png" translate="no">demos/maroon/content/gfx/mob.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/points.png" translate="no">demos/maroon/content/gfx/points.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/projectile-action.png" translate="no">demos/maroon/content/gfx/projectile-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/projectile.png" translate="no">demos/maroon/content/gfx/projectile.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/scores.png" translate="no">demos/maroon/content/gfx/scores.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/shooter-action.png" translate="no">demos/maroon/content/gfx/shooter-action.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/shooter-idle.png" translate="no">demos/maroon/content/gfx/shooter-idle.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/shooter.png" translate="no">demos/maroon/content/gfx/shooter.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/sunlight.png" translate="no">demos/maroon/content/gfx/sunlight.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-1.png" translate="no">demos/maroon/content/gfx/text-1.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-2.png" translate="no">demos/maroon/content/gfx/text-2.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-3.png" translate="no">demos/maroon/content/gfx/text-3.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-blank.png" translate="no">demos/maroon/content/gfx/text-blank.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-gameover.png" translate="no">demos/maroon/content/gfx/text-gameover.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/text-go.png" translate="no">demos/maroon/content/gfx/text-go.png</a></li> <li><a href="images/used-in-examples/demos/maroon/content/gfx/wave.png" translate="no">demos/maroon/content/gfx/wave.png</a></li> </ul> </div> See also <a href="qmlapplications.html" translate="no">QML Applications</a>.  </div> <acronym title="Copyright">©</acronym> 2023 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation. Qt and respective logos are <a href="https://doc.qt.io/qt/trademarks.html"> trademarks</a> of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners. </div> </article> <aside class="b-sidebar__content__right"> <div class="h-wysiwyg-html" data-scheme> <h6>Contents</h6> <nav> <ul class="c-tableofcontents js-c-tableofcontents" data-tableofcontents-id="wrapperid" data-margin-top="sm"> <li class="level1"><a href="#running-the-example">Running the Example</a></li> <li class="level1"><a href="#adding-screens">Adding Screens</a></li> <li class="level1"><a href="#constructing-the-background">Constructing the Background</a></li> <li class="level1"><a href="#animating-background-objects">Animating Background Objects</a></li> <li class="level1"><a href="#emitting-particles">Emitting Particles</a></li> <li class="level1"><a href="#using-timers">Using Timers</a></li> <li class="level1"><a href="#constructing-the-game-board">Constructing the Game Board</a></li> <li class="level1"><a href="#animating-objects-on-the-game-board">Animating Objects on the Game Board</a></li> <li class="level2"><a href="#spawning-fish">Spawning Fish</a></li> <li class="level2"><a href="#bursting-bubbles">Bursting Bubbles</a></li> <li class="level1"><a href="#adding-dialogs">Adding Dialogs</a></li> <li class="level1"><a href="#keeping-track-of-game-statistics">Keeping Track of Game Statistics</a></li> <li class="level1"><a href="#managing-game-states">Managing Game States</a></li> <li class="level1"><a href="#playing-sound-effects">Playing Sound Effects</a></li> <li class="level1"><a href="#adding-keyboard-shortcuts">Adding Keyboard Shortcuts</a></li> <li class="level1"><a href="#packaging-resources-for-deployment">Packaging Resources for Deployment</a></li> </ul> </nav> </div> </aside> </div> </div> </div> </div> <div id="footer"> <footer class="b-footer"> <div class="b-footer__container"> <div class="b-footer__wrapper"> <a class="b-footer__logo" href="/?hsLang=en"></a> <div class="b-footer__social-icons"> <a class="b-footer__social-icons__icon" href="https://www.facebook.com/qt/"> <svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Mainpage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Mainpage_Layout_V4_Active" transform="translate(-149.000000, -7668.000000)" fill="#41CD52"> <g id="Footer" transform="translate(0.000000, 7558.000000)"> <g id="social-16px_logo-fb-simple" transform="translate(149.000000, 110.000000)"> <path d="M3.02293,16 L3,9 L0,9 L0,6 L3,6 L3,4 C3,1.3008 4.67151,0 7.07938,0 C8.23277,0 9.22406,0.08587 9.51294,0.12425 L9.51294,2.94507 L7.84296,2.94583 C6.53343,2.94583 6.27987,3.5681 6.27987,4.48124 L6.27987,6 L10,6 L9,9 L6.27986,9 L6.27986,16 L3.02293,16 Z" id="Shape"></path> </g> </g> </g> </g> </svg></a> <a class="b-footer__social-icons__icon" href="https://twitter.com/qtproject"> <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Mainpage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Mainpage_Layout_V4_Active" transform="translate(-193.000000, -7670.000000)" fill="#41CD52"> <g id="Footer" transform="translate(0.000000, 7558.000000)"> <g id="social-16px_logo-twitter" transform="translate(193.000000, 112.000000)"> <path d="M16,2 C15.4,2.3 14.8,2.4 14.1,2.5 C14.8,2.1 15.3,1.5 15.5,0.7 C14.9,1.1 14.2,1.3 13.4,1.5 C12.8,0.9 11.9,0.5 11,0.5 C9.3,0.5 7.8,2 7.8,3.8 C7.8,4.1 7.8,4.3 7.9,4.5 C5.2,4.4 2.7,3.1 1.1,1.1 C0.8,1.6 0.7,2.1 0.7,2.8 C0.7,3.9 1.3,4.9 2.2,5.5 C1.7,5.5 1.2,5.3 0.7,5.1 L0.7,5.1 C0.7,6.7 1.8,8 3.3,8.3 C3,8.4 2.7,8.4 2.4,8.4 C2.2,8.4 2,8.4 1.8,8.3 C2.2,9.6 3.4,10.6 4.9,10.6 C3.8,11.5 2.4,12 0.8,12 L0,12 C1.5,12.9 3.2,13.5 5,13.5 C11,13.5 14.3,8.5 14.3,4.2 L14.3,3.8 C15,3.3 15.6,2.7 16,2 Z" id="Shape"></path> </g> </g> </g> </g> </svg></a> <a class="b-footer__social-icons__icon" href="https://www.youtube.com/user/QtStudios"> <svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Mainpage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Mainpage_Layout_V4_Active" transform="translate(-243.000000, -7671.000000)" fill="#41CD52"> <g id="Footer" transform="translate(0.000000, 7558.000000)"> <g id="social-16px_logo-youtube" transform="translate(243.000000, 113.000000)"> <path d="M15.8,2.8 C15.6,1.5 15,0.6 13.6,0.4 C11.4,0 8,0 8,0 C8,0 4.6,0 2.4,0.4 C1,0.6 0.3,1.5 0.2,2.8 C0,4.1 0,6 0,6 C0,6 0,7.9 0.2,9.2 C0.4,10.5 1,11.4 2.4,11.6 C4.6,12 8,12 8,12 C8,12 11.4,12 13.6,11.6 C15,11.3 15.6,10.5 15.8,9.2 C16,7.9 16,6 16,6 C16,6 16,4.1 15.8,2.8 Z M6,9 L6,3 L11,6 L6,9 Z" id="Shape"></path> </g> </g> </g> </g> </svg></a> <a class="b-footer__social-icons__icon" href="https://www.linkedin.com/company/theqtcompany/"></a> <a class="c-button" href="https://www.qt.io/contact-us?hsLang=en" style="margin-top: 1em;">Contact Us</a> </div> <div class="b-footer__nav"> <div aria-label="Navigation Menu" class="hs-menu-wrapper" role="navigation"> <ul role="menu"> <li role="none"> <a aria-expanded="false" aria-haspopup="true" href="javascript:;" role="menuitem">Company</a> <ul class="hs-menu-children-wrapper" role="menu"> <li role="none"><a href="https://www.qt.io/company" role="menuitem">About Us</a></li> <li role="none"><a href="https://investors.qt.io" role="menuitem">Investors</a></li> <li role="none"><a href="https://www.qt.io/newsroom" role="menuitem">Newsroom</a></li> <li role="none"><a href="https://www.qt.io/careers" role="menuitem">Careers</a></li> <li role="none"><a href="https://www.qt.io/contact-us/qt-offices" role="menuitem">Office Locations</a></li> </ul> </li> <li role="none"> <a aria-expanded="false" aria-haspopup="true" href="javascript:;" role="menuitem">Licensing</a> <ul class="hs-menu-children-wrapper" role="menu"> <li role="none"><a href="https://www.qt.io/terms-conditions/" role="menuitem">Terms & Conditions</a></li> <li role="none"><a href="https://www.qt.io/licensing/open-source-lgpl-obligations" role="menuitem">Open Source</a></li> <li role="none"><a href="https://www.qt.io/faq/overview" role="menuitem">FAQ</a></li> </ul> </li> <li role="none"> <a aria-expanded="false" aria-haspopup="true" href="javascript:;" role="menuitem">Support</a> <ul class="hs-menu-children-wrapper" role="menu"> <li role="none"><a href="https://www.qt.io/qt-support/" role="menuitem">Support Services</a></li> <li role="none"><a href="https://www.qt.io/qt-consulting/" role="menuitem">Professional Services</a></li> <li role="none"><a href="https://www.qt.io/contact-us/partners" role="menuitem">Partners</a></li> <li role="none"><a href="https://www.qt.io/qt-training/" role="menuitem">Training</a></li> </ul> </li> <li role="none"> <a aria-expanded="false" aria-haspopup="true" href="javascript:;" role="menuitem">For Customers</a> <ul class="hs-menu-children-wrapper" role="menu"> <li role="none"><a href="https://account.qt.io/support" role="menuitem">Support Center</a></li> <li role="none"><a href="https://account.qt.io/downloads" role="menuitem">Downloads</a></li> <li role="none"><a href="https://login.qt.io/login" role="menuitem">Qt Login</a></li> <li role="none"><a href="https://www.qt.io/contact-us" role="menuitem">Contact Us</a></li> <li role="none"><a href="https://www.qt.io/customer-success" role="menuitem">Customer Success</a></li> </ul> </li> <li role="none"> <a aria-expanded="false" aria-haspopup="true" href="javascript:;" role="menuitem">Community</a> <ul class="hs-menu-children-wrapper" role="menu"> <li role="none"><a href="https://www.qt.io/community/contribute-to-qt" role="menuitem">Contribute to Qt</a></li> <li role="none"><a href="https://forum.qt.io/" role="menuitem">Forum</a></li> <li role="none"><a href="https://wiki.qt.io/Main" role="menuitem">Wiki</a></li> <li role="none"><a href="https://www.qt.io/download" role="menuitem">Downloads</a></li> <li role="none"><a href="https://marketplace.qt.io/" role="menuitem">Marketplace</a></li> </ul> </li> </ul> </div> </div> <ul class="b-footer__copyright"> <li><a href="https://account.qt.io/login">Sign In</a></li> <li><a href="mailto:feedback@qt.io?Subject=Feedback%20about%20doc.qt.io%20site">Feedback</a></li> <li><a href="https://www.qt.io/about-us?hsLang=en">© 2023 The Qt Company</a></li> </ul> </div> </div> </footer> </div></body></html>