Adapter un jeu pour PC, Mac, smartphone et tablette
Même si le jeu vidéo html5 sur PC reste une plateforme de choix, vous devez vous adapter à des formats plus petits que sont les smartphones et les tablettes.
Devez vous pour autant développer autant de versions que de plateformes existantes ? Non.
C’est tout l’intérêt du html5 associé à css3, vous développez une seule version pour toutes les plateformes. A l’aide de css3, vous conditionnez vos feuilles de styles en fonction du média cible (PC, smartphone ou tablette) sur lequel le jeu vidéo est exécuté. Je vous montre comment faire dans la suite de cet article.
Prérequis
– savoir ce qu’est html et connaître la balise div
– savoir ce qu’est une feuille de style css
De nouvelles habitudes avec html5
Le langage html5 ainsi que css3 sont aujourd’hui largement supportés par les navigateurs des smartphones et tablettes et, bien qu’inégalement, par la plupart des navigateurs de PC.
Oubliez donc le codage spécifique pour une plateforme. Aujourd’hui, vous codez une seule fois et vous déployez sur toutes les plateformes html5.
En résumé :
– auparavant pour chaque plateforme, je développais une application utilisable sur une seule plateforme. Pour que l’application soit utilisable sur une autre plateforme, il fallait la réécrire;
– aujourd’hui avec html5, je développe mon application qui est d’emblée utilisable sur toutes les plateformes supportants html5.
La problématique
Un PC, un smartphone ou une tablette n’ont pas les mêmes caractéristiques d’affichage, les tailles d’écran et résolutions diffèrent de l’un à l’autre.
Mais aussi la disposition dans laquelle on utilise le média : une tablette s’utilise en grande partie en mode paysage, alors que c’est plutôt l’inverse pour un smartphone. De même que sur un PC, la surface disponible pour l’affichage est souvent plus grande.
L’enjeu va donc être ici d’adapter automatiquement un contenu au média qui l’affiche. Et ce, grâce à l’utilisation de css3.
Dans la suite de l’article, je vous montre pas à pas comment gérer cette problématique.
L’exemple
Dans un premier temps, nous allons créer un écran de jeu adapté à un écran de PC. Puis nous l’adapterons à celui d’un smartphone. Afin que les cadres soient visibles, nous affichons volontairement les bordures.
Préalable
Créer deux fichiers :
– multi.html qui contiendra le code html de notre écran;
– style.css qui contiendra le code css des styles utilisés pour notre écran.
L’écran de jeu PC
Cet écran est divisé de deux gros cadres constitués par une balise html div :
– l’un (partie gauche) pour l’écran de jeu en lui-même incluant le canvas html5;
– l’autre (partie droite) pour l’affichage du logo et autres informations relatives au jeu.
Le code de l’écran de jeu PC
Le code de la balise div représentant la partie gauche à laquelle nous associons l’identifiant canvasContent, et le style canvas par le biais de la propriété class :
<div id="canvasContent" class="canvas"></div>
Intégrez le style nommé canvas dans le fichier style.css..
.canvas{
float: left;
width: 835px;
height: 550px;
border: 3px solid #000000;
}
Description du style canvas:
– float: left; : le cadre du div est placé le plus à gauche possible;
– width: 835px; : la longueur en pixels du cadre div;
– height: 550px; : la largeur en pixels du cadre div;
– border: 3px solid #000000; : le cadre du div fait 3 pixels d’épaisseur (3px solid) et est de couleur noire (#000000).
N’oubliez pas d’intégrer comme suit, la feuille de style dans la page html multi.html :
<link rel="stylesheet" href="style.css"/>
La partie droite
Cette partie intègre un logo ainsi que des informations relatives à la partie en cours : score, niveau, nombre de vies restant, meilleur score.
Par le biais d’un style que vous nommez info, vous lui donnez :
– une largeur : 255 pixels dans cet exemple;
– une bordure de cadre visible.
Et nous la plaçons :
– à la droite de l’écran de jeu;
– aligné sur le haut de l’écran.
Le style.
.info {
float: left;
vertical-align: top;
width: 255px;
border: 1px solid #0000FF;
}
Description du style canvas:
– float: left; : le cadre du div est placé le plus à gauche possible;
– vertical-align: top; : le cadre du div est aligné sur le haut de la page;
– width: 255px; : la longueur en pixels du cadre div;
– border: 1px solid #0000FF; : le cadre du div fait 1 pixels d’épaisseur (1px solid) et est de couleur bleue (#0000FF).
Ce qui donne en html.
<div class="info">
</div>
Il nous faut maintenant intégrer le logo ainsi que nos 4 informations que sont NIVEAU, VIES, SCORE et HIGH SCORE.
Pour le logo, créez un bloc div associé au style rightLogoDiv, style permettant d’aligner le div sur le haut, de lui donner une largeur égale à celle de l’image, et de centrer son contenu.
.rightLogoDiv {
vertical-align: top;
text-align: center;
height: 200px;
}
Complètez le code html.
<div class="info">
<div class="rightLogoDiv"><img src="logo.jpeg"/></div>
</div>
Il ne reste plus qu’à intégrer les informations relatives au jeu : pour chaque information, un libellé (NIVEAU, VIES, SCORE, HIGH SCORE) et une valeur.
Nous créons donc un bloc div pour chaque libellé et un bloc div pour chaque valeur.
Créez un nouveau style associé que nous nommons write, style qui spécifie la taille des caractères, leur centrage, leur couleur ainsi que la taille du bloc div.
.write {
font-size: 30px;
color: #2BA4F0;
text-align:center;
height:44px;
}
Description du style write:
– font-size: 30px; : la taille des caractères affichés de 30 pixels;
– color: #2BA4F0; : le couleur des caractères affichés;
– text-align:center; : le centrage des caractères affichés;
– height:44px; : la largeur de 44 pixels du bloc div.
Le code au complet.
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<div id="canvasContent" class="canvas"></div>
<div class="info">
<div class="rightLogoDiv"><img src="logo.jpeg"/></div>
<div class="write">NIVEAU</div>
<div class="write"><span id="round"></span></div>
<div class="write">VIES</div>
<div class="write"><span id="lives"></span></div>
<div class="write">SCORE</div>
<div class="write"><span id="score"></span></div>
<div class="write">HIGH SCORE</div>
<div class="write"><span id="bestScore"></span></div>
</div>
</body>
</html>
Les balises span sont uniquement utilisées pour afficher les informations depuis javascript, elles ne servent pas à la mise en forme.
CSS3 définit une spécification CSS3 Media Queries qui permet de définir des styles en fonction du média utilisé. Ainsi il permet un affichage optimal de l’écran du jeu vidéo, que ce soit un PC, un smartphone ou une tablette.
CSS3 Media Queries introduit donc l’attribut @media auquel on associe une valeur correspondant au type de média ciblé. Lors de sa définition l’attribut @media encapsule la définition des styles applicables à ce média.
Voici un exemple d’utilisation de l’attribut @media :
Le passage au format smartphone / tablette
Le passage au format smartphone va nécessiter de modifier la forme de l’écran de jeu et donc de redéfinir les styles définis précédemment. Pour l’instant, ne vous souciez pas du comment gérer le passage dynamique de l’un à l’autre, ce sujet est abordé dans le paragraphe suivant.
@media
Il existe aujourd’hui une multitude de smartphones ou tablettes, et souvent les résolutions et/ou les tailles d’écran varient de l’un à l’autre.
Il est donc nécessaire de s’adapter à ces multiples possibilités et donc changer dynamiquement la disposition des différents éléments de l’écran de jeu en fonction du média afficheur.
Vous allez réaliser les modifications suivantes :
– les informations NIVEAU, VIES, SCORE et HIGH SCORE vont passer en dessous de l’écran de jeu;
– le logo va apparaître au dessus de l’écran de jeu.
Le principe va donc être de définir les styles plusieurs fois, chaque définition correspondant à un média en particulier. Votre fichier style.css comportera des mêmes styles définis à plusieurs reprises.
Définir des styles en fonction du média
CSS3 définit une spécification CSS3 Media Queries qui permet de définir des styles en fonction du média utilisé. Ainsi il permet un affichage optimal de l’écran du jeu vidéo, que ce soit un PC, un smartphone ou une tablette.
CSS3 Media Queries introduit donc l’attribut @media auquel on associe une valeur correspondant au type de média ciblé. Lors de sa définition l’attribut @media encapsule la définition des styles applicables à ce média.
Voici un exemple d’utilisation de l’attribut @media.
@media screen and (min-device-width : 320px) and (max-device-width : 720px) {
....définition des styles....
}
L’attribut @media permet donc de spécifier le cas dans lequel s’applique les styles qu’il encapsule. Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.