Aller au contenu

Nouveau membre ?! Pense à te présenter pour accéder au contenu du forum !

New member ?! Introduce yourself to get access to the forum !

Messages recommandés

Bonjour !  Je vous avez dis dans ce tutoriel que j'allai vous parler des radios boutons, cela sera chose faite ! 

 

 

Avant de lire ce tutoriel sachez que je vais utiliser la structure que j'avais partagé avant, car c'est à mon avis la plus propre.

 

Bien, commençons avec le côté interface :

 

La définition d'un élément radio button ressemble à ceci :

				{
					"name" : "takuma_button",
					"type" : "radio_button",

					"x" : 1,
					"y" : 1,

					"text" : "test",

					"default_image" : ROOT_PATH + "Middle_Button_01.sub",
					"over_image" : ROOT_PATH + "Middle_Button_02.sub",
					"down_image" : ROOT_PATH + "Middle_Button_03.sub",
				},

 

On utilise les mêmes propriétés que pour un bouton normal à l'exception du type, au lieu de mettre button, vous mettez : radio_button. Si vous voulez des exemples, je vous invite à aller par exemple voir dans le systemoptiodialog.py.

 

 

Bien, pour vous expliquer exactement comment marche les boutons, je vais vous proposer une démonstration, je pense qu'on apprend mieux quand on fait quelque chose de concret. je vous propose donc de créer trois boutons qui vont vous permettre de gérer les ombres dans le jeu, voici le rendu final :

073720Screenshot-3.png

 

Visible en bas de votre page "Options systèmes".

Vous aurez besoin de deux notions en C++ que je vais vous expliquer brièvement car ce n'est pas le but du tutoriel :

  • systemSetting.getShadowLevel() : Fonction qui permet de récupérer le niveau de qualité des ombres (varie entre 0 et 5 inclus);
  • systemSetting.setShadowlevel() : Fonction qui permet de définir le niveau de qualité des ombres (varie entre 0 et 5 inclus).

 

Bien, on va donc ajouter trois éléments à notre interface :

  • Du texte qui va contenir "Ombres";
  • Un bouton "Faibles";
  • Un bouton "Moyennes";
  • Un bouton "Hautes".

 

Ajoutons les ! Je vous invite à ouvrir le fichier systemoptiodialog.py qui se trouve dans votre pack uiscript.

On va se rendre à la fin du fichier, vous devriez avoir quelque chose comme :

				{
					"name" : "tiling_apply",
					"type" : "button",

					"x" : 110+100,
					"y" : 185,

					"text" : uiScriptLocale.OPTION_TILING_APPLY,

					"default_image" : ROOT_PATH + "middle_Button_01.sub",
					"over_image" : ROOT_PATH + "middle_Button_02.sub",
					"down_image" : ROOT_PATH + "middle_Button_03.sub",
				},

Si vous n'avez pas trop toucher à votre interface.

 

Commençons par ajouter le texte, il va avoir cinq propriétés :

  • name : le nom de notre texte, même s'il n'est pas important ici
  • type : qui sera "text"
  • x : position abscisse 
  • y : positon ordonnée
  • text :  Le texte qu'il va contenir.

Bien, nous allons définir son nom sur shadow et je vous explique pour les coordonnées juste après :

 

				{
					"name" : "shadow",
					"type" : "text",

					"x" : 40 + TEXT_TEMPORARY_X,
					"y" : 165+75,

					"text" : uiScriptLocale.OPTION_SHADOW,
				},

Le x, vous ne le touchez pas, c'est pour que cela soit aligné avec tous les autres textes. Il va cependant devoir changer le y qui va désigner la position verticale du bouton. Pour cela, ce n'est pas au hasard, vous allez prendre la somme de 25 et de l'ordonnée de l'élément situer le plus en bas actuellement sur votre fenêtre. Pour ma part c'est 165+50 dont j'ajoute 20 soit 165+75 (ou 240).

Retenez l'ordonnée, il ne va pas changer pour nos boutons ! 

 

Comme vu précédement, le radio button à défaut de son type se définie de la même façon que le bouton, je passe donc cette étape ajoutez :

				{
					"name" : "shadow_low",
					"type" : "radio_button",

					"x" : 110,
					"y" : 165+75,

					"text" : uiScriptLocale.OPTION_SHADOW_LOW,

					"default_image" : ROOT_PATH + "small_Button_01.sub",
					"over_image" : ROOT_PATH + "small_Button_02.sub",
					"down_image" : ROOT_PATH + "small_Button_03.sub",
				},
				
				{
					"name" : "shadow_medium",
					"type" : "radio_button",

					"x" : 110+50,
					"y" : 165+75,

					"text" : uiScriptLocale.OPTION_SHADOW_MEDIUM,

					"default_image" : ROOT_PATH + "small_Button_01.sub",
					"over_image" : ROOT_PATH + "small_Button_02.sub",
					"down_image" : ROOT_PATH + "small_Button_03.sub",
				},
				
				{
					"name" : "shadow_high",
					"type" : "radio_button",

					"x" : 110+100,
					"y" : 165+75,

					"text" : uiScriptLocale.OPTION_SHADOW_HIGH,

					"default_image" : ROOT_PATH + "small_Button_01.sub",
					"over_image" : ROOT_PATH + "small_Button_02.sub",
					"down_image" : ROOT_PATH + "small_Button_03.sub",
				},

On leur a donné respectivement les noms :

  • shadow_low
  • shadow_medium
  • shadow_high 

Bien, je vous laisse régler l'ordonnée des éléments si nécessaires.

Pour en finir une bonne fois pour toute avec l'interface, vous allez ajouter dans votre locale_interface :

OPTION_SHADOW	Ombres
OPTION_SHADOW_LOW	Faibles
OPTION_SHADOW_MEDIUM	Moyennes
OPTION_SHADOW_HIGH	Hautes

Et vous êtes parés ! Il ne nous reste plus que le système en lui même à faire, et vous allez voir que les radio_buttons ne sont pas très complexes, mais toujours plus que le bouton habituel.

 

 

Rendez-vous ensuite dans le fichier uisystemoption.py dans votre pack root.

 

Avant toute chose vous allez vérifier que dans vos importations au début du fichier, vous aillez bien ce module :

import systemSetting

Si non, je vous laisse l'ajouter.

 

 

Nous allons maintenant procéder par étape. Souvenez vous de nos fonctions principales. Nous avions l'__Initialize pour initialiser les listes, les boutons etc... Bingo ! Nous allons devoir créer une liste qui va contenir nos boutons afin de les faire fonctionner ensemble, je vous invite donc à ajouter de dans :

self.ShadowButtonList = []

Ensuite, si vous scrollez un peu le fichier vers le bas, vous verrez notre fonction __Load_BindObject. Comme nous avons besoin d'importer trois nouveaux boutons, nous en aurons besoin !
-"Mais Takuma, et le texte alors, on l'importe pas ?!"

Non ! Il va s'ajouter tout seul quand le système va charger l'interface ! 

 

Mais, attention, nous n'allons pas effectuer la même opération que pour des boutons normal. ici, nous allons ajouter l'élément à notre liste, pour cela nous allons utiliser la fonction append(), comme ceci :

self.ShadowButtonList.append(GetObject("shadow_low"))
self.ShadowButtonList.append(GetObject("shadow_medium"))
self.ShadowButtonList.append(GetObject("shadow_high"))

Ici nous disons bien à Python "Je veux que tu ajoute à ma liste ShadowButtonList ce que te renvoie la fonction GetObject avec le paramètre que je lui donne".

 

Bien, continuons ! Allez un peu plus en bas, nous trouverons la fonction __Load. Souvenez vous, je vous ai dis que c'était ici que nous définissons les événements ! Et bien nous allons le faire. Mais cette fois-ci de manière plus subtile, tout simplement car nos trois boutons sont stockés dans la même liste. Nous allons donc faire appel à leur pointeur, c'est à dire le numéro qui leur est attribué dans le liste. Ce numéro n'est pas donné au hasard, il commence à 0 et va jusqu'à l'infini (ou presque).

Nous allons donc taper ceci :

		self.ShadowButtonList[0].SAFE_SetEvent(self.__OnClickShadowLow)
		self.ShadowButtonList[1].SAFE_SetEvent(self.__OnClickShadowMedium)
		self.ShadowButtonList[2].SAFE_SetEvent(self.__OnClickShadowHigh)

Vous retrouvez donc bien la liste, avec le bouton 1(0), 2(1) et 3(2).

 

Je vous donne les trois fonctions car cela ne fait pas parti de notre objectif aujourd'hui : 

	def __OnClickShadowLow(self):
		systemSetting.SetShadowLevel(1)
		self.__SetShadow(0)

	def __OnClickShadowMedium(self):
		systemSetting.SetShadowLevel(3)
		self.__SetShadow(1)

	def __OnClickShadowHigh(self):
		systemSetting.SetShadowLevel(5)
		self.__SetShadow(2)

Cependant, vous soyez que dans chacune des fonctions, j'appelle la fonction SetShadow avec l'index du bouton en paramètre, pourquoi me direz-vous ? Je vous montre la fonction, et vous essayer de comprendre?

	def __SetShadow(self, index):
		self.__ClickRadioButton(self.ShadowButtonList, index)

La voici. Il existe une fonction __ClickRadioButton bouton qui permet avec le self, et l'index de gérer nos radio_buttons. Bien, si vous essayez maintenant vous boutons vont marcher correctement, mais un détail est encore gênant : Aucun bouton n'est activé dès le début ! 

 

C'est en réalité très simple, pour cela nous allons utiliser la fonction ClickRadioButton qui va sélectionner le bouton qu'il faut avec l'index. Pour récupérer ce même index nous allons le niveau des ombres. Cependant problème : On a que 3 boutons, et il existe 6 niveau différents d'ombres... 6/2 = 3 ! Bingo ! On va donc diviser le niveau de l'ombre et prendre ensuite sa partie entière afin d'avoir un index  ! Tout cela va se passer dans la fonction __Load, généralement après les événements, on définie si nécessaire les index. Vous allons donc ajouter :

self.__ClickRadioButton(self.ShadowButtonList, int(systemSetting.GetShadowLevel()/2))

On envoie donc à ClickRadioButton, notre liste contenant les boutons, et on lui donne en index la valeur nécessaire :

 On récupère la valeur de la qualité de l'ombre avec GetShadowLevel(), on la divise ensuite pas deux avec le /2 et on fini par prendre sa valeur entière grâce à la fonction int().

 

 

Vous savez maintenant comment faire vos radio_buttons ! Félicitation ! 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

×

Information importante

By using this site, you agree to our Conditions d’utilisation.