Outils pour utilisateurs

Outils du site


phaser:affichage_de_la_scene_de_jeu

Affichage de la scène de jeu


Modifier la couleur de l'arrière-plan (background)

Pour modifier la couleur de l'arrière-plan, il faut écrire dans la fonction create() un des codes suivants :

function create() 
{
     game.stage.backgroundColor = "#3366cc";  // code couleur en hexadécimal
}  

ou

function create() 
{
     game.stage.backgroundColor = 'rgb(204, 0, 102)';  // code RVB de la couleur
}  

Si on traduit approximativement ce code par une phrase, cela pourrait donner : “la couleur de l'arrière-plan de la scène du jeu prend la valeur #3366cc”.

Quelques liens pour vous aider à déterminer le code d'une couleur :

A faire vous-même 1 …Mes documents/icn/jeuvideo/js/script.js

Rappel : Le code du script de votre jeu vidéo s'écrira uniquement dans le fichier script.js.



- Ouvrir le fichier script.js avec un éditeur de texte comme Notepad++.
- Modifier la couleur de l'arrière-plan de la scène de jeu comme indiqué précédemment.
- Enregistrer le fichier script.js. Tester en cliquant sur le fichier index.html.


Insérer une image dans l'arrière-plan (background)


Il faut, au préalable, charger l'image dans la fonction preload() :

function preload()
{ 
   game.load.image('fond', 'medias/background.jpg');   // 'fond' est le nom donné à l'image ;
                                                       // 'medias/background.jpg' est l'adresse relatif du fichier image.
}

Pour afficher l'image, on utilisera le code suivant dans la fonction create() :

function create() 
{
   game.add.sprite(0, 0, 'fond');   // 0,0 sont les coordonnées x et y du coin supérieur gauche de l'image ;
                                    // --> l'image 'fond' sera affichée aux coordonnées 0,0 .
}  

Nous avons ajouté un sprite au jeu.

A faire vous-même 2 …Mes documents/icn/jeuvideo/js/script.js

- Ajouter votre image background.jpg dans l'arrière-plan de la scène de jeu.
- Enregistrer le fichier script.js.
- Tester en cliquant sur le fichier index.html.

phaser/affichage_de_la_scene_de_jeu.txt · Dernière modification: 10/07/2019 22:12 par Stéphane LAURENT