Recommended Posts

Salut!

 

Après avoir regardé mes anciens tutoriels, et voulant en refaire d'autre, j'ai conclu que certains manquaient vraiment d'informations, donc une petite rénovation ne lui fera pas de mal à celui la non plus.

Le python est facilement compréhensible pour certain, pour d'autre non (cc @Kijaru, me demande pas pourquoi j'ai pensé à toi). Quelques explications ne seraient donc pas de refus.

 

Objectifs :

  • Comprendre comment marche un système,
  • Connaître les principales fonctions essentielles à n'importes quelles interfaces.
  • Réalisez vous même votre interface.

 

 

Partie 1 : Comprendre comment marche un système :

 

Pour bien comprendre comment marche un système, il faut déjà comprendre ce que c'est, et combien de partie le compose.

 

Il faut savoir qu'un système, si nous suivons la manière de coder de ymir, est composé de deux parties :

  • Les éléments et leurs positions : Dans ce fichier, on va répertorier dans un dictionnaire tous les éléments qui vont composer notre interface, comme des boutons, etc. Mais plus en général, c'est ici que nous allons définir la taille de la fenêtre, des boutons, et le texte.
  • Le système : C'est la partie qui va gérer le tout. Il va afficher l'interface, et dire "si il clique là, tu fais ça" etc... 

Quand je vous dis que c'est "si nous respectons le format de ymir" c'est qu'il existe une autre façon. Effectivement, il vous est possible de tout regrouper en un fichier, et de définir "sur le tas" tous les éléments nécessaire. Je pourrais si vous le voulez vous faire un autre tutoriel pour vous présenter l'autre méthode.

 

C'est notre partie système qui va être chargé en première, c'est elle même qui ira chercher la partie interface afin de s'en servir.

 

On dispose généralement les parties comme ceci dans nos packs :

  • Système : ui[nom système].py ---> root
  • Interface: [nom système].py -----> uiscript

 

Partie 2 : L'interface :

 

Bien, pour créer une interface, nous allons créer un nouveau fichier dans le uiscript je vais l'appeler takuma.py de mon côté. Je vous invite à ouvrir le fichier que vous venez de créer.

Nous pouvons commencer ! Avant, comme je compte vous apprendre à coder un minimum proprement, nous allons utiliser le uiScriptLocale, c'est un module qui permet de récupérer les phrases qui seront déclarées dans notre locale_interface, nous verrons ça plus tard.

Pour l'ajouter à notre projet, tapez :

import uiScriptLocale

Bien.

 

Maintenant, nous allons dès maintenant définir une variable qui va contenir le chemin d'accès aux différents éléments, je vous expliquerais ceci au moment venu, pour l'instant, tapez à la ligne :

ROOT_PATH = "d:/ymir work/ui/public/"

 

Bien ! Nous pouvons enfin commencer notre interface. Nous allons maintenant créer un dictionnaire que nous allons nommé "window" (fenêtre) :

window = {}

C'est ce dictionnaire qui va contenir toute notre interface, je vous invite à l'écrire comme ceci pour une meilleur lisibilité :

window = {
}

Maintenant, tous les éléments se trouvant de dans seront devancés d'au moins une tabulation. 

Nous devons donc maintenant donner des propriétés à notre window, sinon, comment pourrait-on connaitre comment il est fait etc... ?

Pour cela nous allons définir 6 propriétés :

  • name :  Tout simplement le nom de notre fenêtre,
  • style : Le modèle utilisé pour notre fenêtre,
  • x : L'apparition de la fenêtre sur l'axe des abscisses sachant qu'il démarre en haut à gauche de l'écran.
  • y : L'apparition de la fenêtre sur l'axe des ordonnées.
  • width : La largeur de la fenêtre
  • height : la haute de la fenêtre.

 

Bien, commençons par le nom :

window = {
	"name" : "TakumaDialog",
}

Retenez la syntaxe elle est sensiblement la même pour tous les éléments. Maintenant pour le style, nous allons utiliser un tuple (liste immuable) qui va contenir nos deux propriétés : movable et float :

	"style" : ("movable", "float",),

Pourquoi mettre une virgule à la fin me direz-vous ? C'est les tuples, ils doivent être défini comme ceci. Sinon python va enlever les parenthèses et considéré ça comme une variable lambda.

Ensuite, pour x et y nous allons mettre 0 : 

window = {
	"name" : "TakumaDialog",
	"style" : ("movable", "float",),

	"x" : 0,
	"y" : 0,
}

Ajoutons maintenant les deux derniers paramètres : 

 

	"width" : 305,
	"height" : 255+25,

Compléter avec la taille que vous voulez généralement, on adapte au fur à mesure !

 

Nous allons ajouter "des enfants" à notre fenêtre sinon, on doit s'arrêter là... Autant vous dire que ça ne ressemble à rien !

Pour ça, nous allons ajouter une nouvelle balise : "chlidren" :

window = {
	"name" : "TakumaDialog",
	"style" : ("movable", "float",),

	"x" : 0,
	"y" : 0,

	"width" : 305,
	"height" : 255+25,

	"children" :
}

Pour celle-ci, nous allons devoir mettre les parenthèses pour le tupples, puis ajouter des guillemets pour recréer un dictionnaire, les éléments qui seront de dans. Cela donne :

window = {
	"name" : "TakumaDialog",
	"style" : ("movable", "float",),

	"x" : 0,
	"y" : 0,

	"width" : 305,
	"height" : 255+25,

	"children" :
	(
		{
		},
	),
}

Bien ! Nous allons maintenant dans les childs définir le tableau en lui même "board", il aura les mêmes balises si ce n'est "style" qui va passer en "type", je le fais d'un coup pour abréger un peu :

060756Screenshot-2.png

 

Maintenant dans notre board, nous allons ajouter tous les éléments que va contenir notre fenêtre. Cependant, n'oubliez pas un élément important : La barre de titre et le titre !

Vous ne pouvez pas deviner le code, je vous le donne :

061016Screenshot-3.png

Oui, ça largeur doit être de 4 plus grande que le board.

Maintenant, j'attire votre attention sur deux choses :

  • J'ai définie les propriétés en ligne pour les chlidrens de titlebar, comme ça vous voyez comment cela se passe,
  • La balise text à la fin, va nous renvoyer une valeur ("texte" ici). Cependant, nous allons faire de façon qu'elle nous renvoie une valeur de notre locale_interface. Pour cela, nous allons taper : 
"text": uiScriptLocale.TAKUMA_TITLE, 

Vous devrez ensuite ajouter une ligne dans votre locale_interface (locale/xx/) et taper :

TAKUMA_TITLE	valeur

Ceci, bien séparer par une tabulation. Et votre fichier récupérera tout seul la variable comme un grand afin de la faire correspondre à la propriété texte.

Et bien voilà, vous avez votre base. Il ne vous manque plus que un élément, les types qui existent et vous pourrez finir la partie interface tout seul. les éléments suivant vont se placer sur le board, il faut donc sortir de titlebar, et repartir dans board, pour cela, j'ai déjà comme vous pouvez le voir sur le screen du haut remis des autres balises au même niveau que titlebar. Et bien c'est elles qui vont contenir un nouvel élément, par exemple, un bouton : 

062156Screenshot-5.png

 

 

Quant au trois nouvelles propriétés apparues ici :

  • defaut_image: Chemin d'accès de l'image du bouton par défaut,
  • over_image : Chemin d'accès de l'image du bouton quand la souris passe dessus,
  • down_image : Chemin d'accès de l'image du bouton quand on clique dessus.

Notez qu'on utilise la variable ROOT_PATH afin de ne pas avoir à taper à chaque fois "d:/ymir work/ui/public/"

 

Si vous voulez ajouter d'autres éléments, il vous suffit de procéder au même niveau que le bouton, et de répéter cette opération. Nous découvririons d'autres types plus tard.

Vous avez donc à la fin de cette partie :

062359Screenshot-6.png

 

 

Partie 3 : Le système :

Enfin la troisième partie ! La plus sympa ! Pour celle-ci vous allez créer un fichier ui[nomsystème].py, pour moi, cela sera uitakuma.py.

Nous repartons d'un fichier vide ! Comme l'autre, nous avons des importations à effectuer ! Elles ajoutent selon ce que vous voulez faire, mais vous aurez en général besoin de celles-ci :

import ui
import app

 

Nous allons maintenant créer une class, nommée TakumaDialog qui prendra en paramètre ui.ScriptWindow :

062732Screenshot-7.png

 

Nous allons ensuite créer la fonction init, c'est une fonction assez spéciale. C'est une fonction qui s'exécute automatiquement quand on fait appel à la class. Pour faire comme ymir, et respecter son caractère privé, elle va en réalité s'appeler __init__, tapez :

062928Screenshot-1.png

Pourquoi utiliser self dans init me direz vous ? Et bien, outre que ce soit une norme, il va nous permettre si vous allez plus loin dans le Python de créer des instances. Bref, nous allons ensuite créer deux fonctions importantes :

  • __Initialize,
  • __Load,

Je ne l'ai pas précisé jusque là, les deux tirets du huit devant marque le caractère privée de la fonction.

 

Chaque fonction va avoir un but très précis :

La fonction Initialize va créer toutes les variables, les listes, etc... nécessaires au bon fonctionnement du programme. Vous verrez plus tard que les listes seront très importantes quand vous utiliserez des radio_buttons (bouton donc un seul est actionnable). Je ne vous en ai pas parlé tout de suite car nous devons évoquer une histoire d'index avec eux. je vous en parlerai plus tard.

 

Dans la fonction Initialize vous allez mettre par exemple pour l'interface que j'ai faite :

self.takumaButton = 0

Cette fonction ne servira que à ça. Profitons en pour finir notre fonction __init__ :

063641Screenshot-2.png

 

 

Maintenant avant de commencer notre fonction __Load(), nous allons en créer deux autres (oui ça fait beaucoup, je sais, mais plus tard ça sera automatique chez vous. Si vous voulez, je vous fournirai un .py avec toutes les fonctions essentielles pour coder proprement) :

  •  __Load_LoadScript()
  • __Load_BindObject()

 

La fonction LoadScript est toujours la même, la voici :

	def __Load_LoadScript(self, fileName):
		try:
			pyScriptLoader = ui.PythonScriptLoader()
			pyScriptLoader.LoadScriptFile(self, fileName)
		except:
			import exception
			exception.Abort("System.TakumaDialog.__Load_LoadScript")

Je vous explique ne tombez pas de votre chaise !

 

try signifie "essayer", ici on essaye de faire ce qu'il y a après le try, et s'il n'y arrive pas, il envoie le except.

Ici, nous utilisons en réalité cette fonction crée dans notre ui.py :

	def LoadScriptFile(self, window, FileName):
		import exception
		import exceptions
		import os
		import errno
		self.Clear()

		print "===== Load Script File : %s" % (FileName)

		try:
			# chr, player µîÀº sandbox ³»¿¡¼­ import°¡ Çã¿ëµÇÁö ¾Ê±â ¶§¹®¿¡,(º¿ÀÌ ¾Ç¿ëÇÒ ¿©Áö°¡ ¸Å¿ì Å­.)
			#  ¹Ì¸® script dictionary¿¡ ÇÊ¿äÇÑ »ó¼ö¸¦ ³Ö¾î³õ´Â´Ù.
			import chr
			import player
			import app
			self.ScriptDictionary["PLAYER_NAME_MAX_LEN"] = chr.PLAYER_NAME_MAX_LEN
			self.ScriptDictionary["DRAGON_SOUL_EQUIPMENT_SLOT_START"] = player.DRAGON_SOUL_EQUIPMENT_SLOT_START
			self.ScriptDictionary["LOCALE_PATH"] = app.GetLocalePath()
			execfile(FileName, self.ScriptDictionary)
		except IOError, err:
			import sys
			import dbg			
			dbg.TraceError("Failed to load script file : %s" % (FileName))
			dbg.TraceError("error  : %s" % (err))
			exception.Abort("LoadScriptFile1")
		except RuntimeError,err:
			import sys
			import dbg			
			dbg.TraceError("Failed to load script file : %s" % (FileName))
			dbg.TraceError("error  : %s" % (err))
			exception.Abort("LoadScriptFile2")
		except:
			import sys
			import dbg			
			dbg.TraceError("Failed to load script file : %s" % (FileName))
			exception.Abort("LoadScriptFile!!!!!!!!!!!!!!")
		
		#####

		Body = self.ScriptDictionary["window"]
		self.CheckKeyList("window", Body, self.BODY_KEY_LIST)

		window.ClearDictionary()
		self.InsertFunction = window.InsertChild

		window.SetPosition(int(Body["x"]), int(Body["y"]))

		if localeInfo.IsARABIC(): 
			w = wndMgr.GetScreenWidth()
			h = wndMgr.GetScreenHeight()
			if Body.has_key("width"):
				w = int(Body["width"])
			if Body.has_key("height"):
				h = int(Body["height"])

			window.SetSize(w, h)
		else:
			window.SetSize(int(Body["width"]), int(Body["height"]))
			if True == Body.has_key("style"):
				for StyleList in Body["style"]:
					window.AddFlag(StyleList)
		

		self.LoadChildren(window, Body)

Assez complexe, je vous l'accorde. Je vais donc vous simplifiez la chose : Elle permet de charger un fichier d'interface et ses éléments.

 

Du côté de la fonction __Load_BindObject, elle va de son côté charger tous les éléments de notre interface et les stocker dans des variables. Bien, si on résume pour nous, nous avons :

065927Screenshot-10.png

 

Retenez la manière de charger des éléments, avec le GetObject = self.GetChild c'est la manière la plus propre à mon goût.

 

Bien, maintenant complétons la fonction __Load :

065856Screenshot-9.png

 

Dans Load nous allons maintenant attribuer tous les événements(ce qu'il se passe quand on clique sur quelque chose) et la position de la fenêtre car si vous vous souvenez nous avions mis x = y = 0 pour coordonnées d'apparition de la fenêtre.  Pour cela, ajoutons :

self.SetCenterPosition()

Tapez aussi cette ligne, qui ne change quelque soit la gui, sauf si elle n'a pas de titlebar ou que vous avez changé le nom des éléments :

self.titleBar.SetCloseEvent(ui.__mem_func__(self.Close))

Ce qui nous donne en tout :

065826Screenshot-8.png

 

Définissons maintenant un événement à notre bouton. Pour cela nous allons utiliser la fonction SAFE_SetEvent(), renvoyant sur cette fonction :

	def SAFE_SetEvent(self, func, *args):
		self.eventFunc = __mem_func__(func)
		self.eventArgs = args

Enfin, bref, je vous donne la syntaxe, cela donne :

self.takumaButton.SAFE_SetEvent()

Nous entrons ensuite entre les parenthèses la fonction qui va s'exécuter quand l'événement sera lancé, par exemple :

self.takumaButton.SAFE_SetEvent(self.maFonction)

Par exemple, nous allons faire que cette fonction envoie "Bonjour !" dans le chat à la place de celui qui déclenche l'événement. Créons la fonction :

	def maFonction(self):
		import net
		net.SendChatPacket("Bonjour ! ")

 

Il ne vous manque plus qu'une seule fonction pour que votre système soit prêt, la fonction pour l'afficher ! Et la voici :

	def Show(self):
		ui.ScriptWindow.Show(self)

 

 

Félicitation, vous avez maintenant les bases pour créer votre système ! Je vous ferais d'autre tutoriel, pour par exemple évoquer les radio_buttons, les images, etc. Je vous invite à essayer de découvrir par vous même en regardant dans votre fichier ui.py qui contient tout ce qu'il faut !

Vous obtenez donc à la fin :

065756Screenshot-7.png

 

Comme promis, un fichier neutre contenant les fonctions minimums : ICI !

 

 

Bon développement !

  • Like 12

Share this post


Link to post
Share on other sites
Guest

AH

Oui effectivement ça c'est du tuto !

 

merci à toi, et chuuuut, C++ > ALL ! :D

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.