Présentation

QML Scene, dans l’écosystème de Qt, représente un composant fondamental pour le rendu d’interfaces utilisateur riches et dynamiques. Imaginez une toile numérique hautement performante, optimisée pour l’animation, les effets visuels et l’interaction tactile. C’est en essence ce qu’offre QML Scene.
Au cœur de QML Scene réside un moteur graphique puissant, souvent basé sur OpenGL ou Vulkan en coulisses, qui permet d’afficher des éléments graphiques complexes avec une grande fluidité. Ces éléments sont définis à l’aide du langage QML (Qt Meta Language), une syntaxe déclarative et intuitive qui facilite la description de l’apparence et du comportement des interfaces.
Maintenant, comment cela se connecte-t-il au lancement de jeux HTML5 ? L’astuce réside dans la capacité de Qt à intégrer des composants externes, notamment via le module Qt WebEngine. Qt WebEngine est basé sur Chromium, le même moteur qui propulse Google Chrome. Cela signifie qu’il offre une compatibilité étendue avec les technologies web modernes, y compris HTML5, CSS3 et JavaScript, qui sont les pierres angulaires des jeux web.
Grâce à Qt WebEngine, vous pouvez intégrer une vue web (WebView) directement dans votre scène QML. Cette vue web agit comme une fenêtre embarquée dans votre application QML, capable d’afficher et d’exécuter du contenu web, y compris des jeux HTML5.
Voici comment le processus se déroule généralement :
- Création d’une application QML : Vous développez une application en utilisant QML pour définir l’interface utilisateur globale, qui peut inclure des boutons, des menus, des animations, etc.
- Intégration d’une WebView : Vous ajoutez un élément
WebView
à votre scène QML. Cet élément servira de conteneur pour votre jeu HTML5. - Chargement du jeu HTML5 : Vous spécifiez l’URL de votre fichier HTML principal du jeu dans la propriété
url
de l’élémentWebView
. Qt WebEngine se chargera alors de récupérer et d’afficher le contenu du jeu. - Interaction et communication (optionnel) : QML offre des mécanismes pour interagir avec le contenu de la WebView via JavaScript et vice-versa. Cela vous permet de créer des ponts entre votre interface QML native et la logique de votre jeu HTML5. Par exemple, vous pourriez avoir un bouton QML qui déclenche une action dans le jeu, ou le jeu pourrait envoyer des informations à l’application QML pour mettre à jour un score.
Les avantages d’utiliser QML Scene pour lancer des jeux HTML5 sont multiples :
- Performance : L’interface utilisateur globale de votre application, construite en QML, bénéficie des performances natives offertes par le moteur graphique de Qt.
- Intégration native : Vous pouvez combiner la richesse des interfaces QML avec la flexibilité du développement web pour créer des applications hybrides. Par exemple, l’interface de navigation et les fonctionnalités périphériques pourraient être en QML, tandis que le cœur du jeu serait en HTML5.
- Portabilité : Qt est une plateforme multiplateforme, ce qui signifie que votre application QML, intégrant le jeu HTML5, peut potentiellement être déployée sur différents systèmes d’exploitation (Windows, macOS, Linux, Android, iOS, embarqué) avec un minimum de modifications.
- Accès aux fonctionnalités natives : QML permet d’accéder aux fonctionnalités natives de la plateforme sous-jacente, ce qui peut être utile pour des aspects comme les notifications, le stockage local, l’accès aux capteurs, etc., et potentiellement les intégrer avec votre jeu HTML5.
En résumé, QML Scene, combiné à Qt WebEngine, offre une approche puissante et flexible pour intégrer et lancer des jeux HTML5 au sein d’applications natives. Cela permet de tirer parti des avantages des deux mondes : la performance et l’esthétique des interfaces QML et la large gamme de jeux et de technologies disponibles dans l’écosystème HTML5. C’est une voie intéressante pour les développeurs qui souhaitent créer des expériences utilisateur riches et portables.
Licence
Ce composant est sous licence GNU General Public License (GPL) version 3
Compatibilité
PC x86_64 | Steamdeck |
---|---|
✅ | ✅ |
Fonctionnalités
BIOS
A ce jour pas de bios à installer dans les cas d’utilisation
Roms
Extensions supportées
Les roms doivent avoir les extensions suivantes :
- .url
Les fichiers URL sont nécessaires pour faire le lien vers un jeu local ou à distance
Exemple de contenu de fichier .url : (ici un jeu de retrofab: https://itizso.itch.io/retrofab
[InternetShortcut]
URL=https://html-classic.itch.zone/html/9315381/index.html

Emplacement
Placez les roms comme ceci :
┣ 📁 recalbox
┃ ┣ 📁 share
┃ ┃ ┣ 📁 roms
┃ ┃ ┃ ┣ 📁 system
┃ ┃ ┃ ┃ ┣ 🗒 jeu.url
Vous pouvez aussi opter pour un sous répertoire (utile si vous voulez avoir un set différent de jeux).
┣ 📁 recalbox
┃ ┣ 📁 share
┃ ┃ ┣ 📁 roms
┃ ┃ ┃ ┣ 📁 system
┃ ┃ ┃ ┃ ┃ ┣ 📁 autreset
┃ ┃ ┃ ┃ ┃ ┃ ┣ 🗒 jeu.url
Configuration avancée de l’émulateur
Pour pouvoir conserver vos configurations personnalisées lors d’une mise à jour, nous vous conseillons d’utiliser notre fonctionnalité Surcharges de configuration.
Liens externes
- Site officiel : https://doc.qt.io/qt-5/qtquick-qmlscene.html
- Retrofab – HTML5 LCD Games collection (from https://itch.io/profile/itizso) : https://itizso.itch.io/retrofab
- Other list of G&W/LCD games simulators: https://www.franckx-design.be/joeri/play_g_w.html