[SCRIPT] Classe CSS

Petit Maker Lv 3 Nombre de messages : 57 Age : 39

Bonjour alors c'est quoi un CSS ? Pour ceux qui connaissent bien le web design c'est un "style pour fenêtre". Alors j'ai codé une classe CSS pour RPG MAKER XP.
L'intérêt le voici : Imaginez vous en train de coder votre propre menu, vous écrivez vos textes pour les hp d'une certaine façon , vous utilisez la même façon sur 10 fenêtre différentes à plusieurs endroits.
Un jour vous vous rendez compte que la police que vous avez choisi ne va pas (trop grosse, pas lisible, mauvaise couleur...) bref il faut aller corriger sur les 10 fenêtres et se taper des recherches entre 1500 self.contents.drawtext(.......) .
Avec la classe CSS vous aurez créé un style. et chaque fois que vous changerez le style, toutes les fenêtre (ou section de fenêtre) qui utilisent ce style changeront automatiquement. Voici la procédure:

1) Créer un script au dessus de Window_base et collez ce code

Code:: # Imaginé, conçu et codé par Fenryo !! Aurion XP coming soon....

class Css
attr_accessor :nom
attr_accessor :police
attr_accessor :id
attr_accessor :taille
attr_accessor :bold
attr_accessor :italic
attr_accessor :couleur

def initialize

@couleur = [255, 255, 255, 255]
@nom = "css0"
@police = "Verdana"
@id = 0
@taille = 0
@bold = false
@italic = false

end

end# fin de la classe

def css?(nom)

if ($css_database != nil) then
k = $css_database.size - 1
i= 0
trouv = 0

while (i <= k)
if ($css_database[i].nom == nom) then
return i
end
i +=1
end
return nil
else
return nil
end

end

# ========== ===================================================================>BASE DE DONNEE DES CSS

# ========== Cree un css et l'ajoute à $css_database
def create_css_0 #===< Votre css par défaut

if $css_database == nil then
$css_database= []
end

k = $css_database.size
$css_database[k] = Css.new

$css_database[k].id = k
$css_database[k].nom = "css"+ k.to_s
$css_database[k].police = "Arial" #=========> Mettez votre police pour ce style
$css_database[k].couleur = [0, 0, 153, 255] #=========> Mettez les propriétés de la couleur [Rouge, Vert, Bleu, Alpha]
$css_database[k].taille = 16 #============> Taille de la police
$css_database[k].bold = false #=============> Pour activer le gras ou pas
$css_database[k].italic = false
#===========================>>> FIN INTERFACE DE CREATION D'UN CSS

end #====Fin create_css

def create_css_1

k = $css_database.size
$css_database[k] = Css.new

$css_database[k].id = k
$css_database[k].nom = "css"+ k.to_s
$css_database[k].police = "Verdana" #=========> Mettez votre police pour ce style
$css_database[k].couleur = [25, 90, 153, 255] #=========> Mettez les propriétés de la couleur [Rouge, Vert, Bleu, Alpha]
$css_database[k].taille = 16 #============> Taille de la police
$css_database[k].bold = false #=============> Pour activer le gras ou pas
$css_database[k].italic = false
#===========================>>> FIN INTERFACE DE CREATION D'UN CSS

end #====Fin create_css

def create_css_2

k = $css_database.size
$css_database[k] = Css.new

$css_database[k].id = k
$css_database[k].nom = "css"+ k.to_s
$css_database[k].police = "Impact" #=========> Mettez votre police pour ce style
$css_database[k].couleur = [25, 90, 153, 255] #=========> Mettez les propriétés de la couleur [Rouge, Vert, Bleu, Alpha]
$css_database[k].taille = 16 #============> Taille de la police
$css_database[k].bold = false #=============> Pour activer le gras ou pas
$css_database[k].italic = false
#===========================>>> FIN INTERFACE DE CREATION D'UN CSS

end #====Fin create_css

def create_css_3

k = $css_database.size
$css_database[k] = Css.new

$css_database[k].id = k
$css_database[k].nom = "css"+ k.to_s
$css_database[k].police = "Verdana" #=========> Mettez votre police pour ce style
$css_database[k].couleur = [25, 95, 153, 255] #=========> Mettez les propriétés de la couleur [Rouge, Vert, Bleu, Alpha]
$css_database[k].taille = 25 #============> Taille de la police
$css_database[k].bold = false #=============> Pour activer le gras ou pas
$css_database[k].italic = false
#===========================>>> FIN INTERFACE DE CREATION D'UN CSS

end #====Fin create_css

def create_css_4

k = $css_database.size
$css_database[k] = Css.new

$css_database[k].id = k
$css_database[k].nom = "css"+ k.to_s
$css_database[k].police = "Verdana" #=========> Mettez votre police pour ce style
$css_database[k].couleur = [25, 95, 153, 255] #=========> Mettez les propriétés de la couleur [Rouge, Vert, Bleu, Alpha]
$css_database[k].taille = 6 #============> Taille de la police
$css_database[k].bold = false #=============> Pour activer le gras ou pas
$css_database[k].italic = false
#===========================>>> FIN INTERFACE DE CREATION D'UN CSS

end #====Fin create_css

#=================================================================> Creation de la BD

def creation_bd_css

if ( $css_database != nil) then

for i in (0 .. $css_database.size-1)
$css_database[i].dispose
end
$css_database= nil

end
create_css_0
create_css_1
create_css_2
create_css_3
create_css_4

end

2) Entrez dans le script Window_base et collez ce code juste après la fonction initialize (à la ligne 25)

Code:: #-----> MA FONCTION DE STYLE TEXTE fenryo!!

def text_style (nom = "css0")

if ($css_database != nil) then
i = css?(nom)

if ( i != nil) then
aux = $css_database[i]
self.contents.font.name = $css_database[i].police
self.contents.font.size = $css_database[i].taille
self.contents.font.color = Color.new( aux.couleur[0], aux.couleur[1], aux.couleur[2], aux.couleur[3])
self.contents.font.bold = aux.bold
self.contents.font.italic = aux.italic

else
print "erreur dans la classe Window_base"
print "le nom de css '" + nom + "' n'est pas valide"
end

else
print "erreur dans la classe Window_base"
print "pas de base de donnée pour les css"
end
end

3) Créer un script au dessus de Main et collez ce code

Code:: #FENETRE QUI AFICHE COMPLETEMENT UNE AURIONITE

class Win_css_testing<Window_Base

#========= INITIALISATION
def initialize
super(170, 0, 400, 480)

self.contents= Bitmap.new(width, height)

if ($css_database == nil) then
creation_bd_css
end
refresh($css_database[0])

end
#========== FIN INIT

def refresh (cible)
self.contents.clear

#==========================> Ecriture des champs
self.text_style(cible.nom)
self.contents.draw_text(15, 75, 350, 50, "Désormais, le logiciel")
self.contents.draw_text(15, 125, 350, 50, "Quelles caractéristiques")
self.contents.draw_text(15, 165, 350, 50, "Voici notre test des css")
self.contents.draw_text(15, 190, 350, 50, "0123456789")

end #=========== FIN REFRESH

end

# FENETRE DE SELECTION DES CSS

class Win_choix_bd_css< Window_Command

def initialize

@command=[]
for i in (0.. $css_database.size-1)
@command[i]= "Css " + $css_database[i].id.to_s
end
super (150, @command)
self.x=20
self.y=20
self.height= 400

refresh
end

end

#=========== SCENE QUI AFFICHE LES CSS

class Scene_bd_css

def main

if ($css_database == nil) then
creation_bd_css
end

@win_cmd= Win_choix_bd_css.new
@win_data= Win_css_testing.new

@index_actu=0
Graphics.transition

loop do

Graphics.update
Input.update
update

if ($scene != self) then
break
end
end
Graphics.freeze
@win_cmd.dispose
@win_data.dispose

end #=============> FIN DU MAIN

def update
@win_cmd.update

if (@index_actu != @win_cmd.index) then
@index_actu=@win_cmd.index
Graphics.transition
@win_data.refresh($css_database[@index_actu])
end

if Input.trigger?(Input::B) then
$scene = Scene_Map.new
end

end #=====> FIN DU UPDATE

end

COMMENT APPLIQUER UN STYLE A UNE FENETRE ?

Bon ce qu'on vient de faire c'est de creer une base de donnée de 5 style nommés css0, css1... css4. Pour les appliquer dans une de vos fenêtres tapez tout simplement l'instruction

Code:: self.text_style ("nom du css")

dans la fenêtre.
Si vous ne mettez aucun paramètre c'est le style css0 qui sera appliqué automatiquement (en faire votre style par défaut donc)

VISUALISER MES STYLES ?
Pour visualiser vos styles, créez un évènement et exécutez le script suivant

Code:: $scene =Scene_bd_css.new

Vous pourrez voir les effets de chacun des styles.

AVOIR PLUS DE STYLE ?
Vous me donnez 500 euros sunny

Non mais allez la procédure demande de s'y connaître en Ruby:
1) Ouvrer le premier script de ce tuto.
2) copier la fonction create_css_4
3 ) collez la en dessous d'elle même (pas dans elle !!)
4) renommer là en create_css_5
5) changez les paramètres de create_css_5
6) Allez dans la fonction creation_bd_css et ajouter create_css_5 à la fin
7) créer un événement et exécuter le script

Code:: creation_bd_css
$scene =Scene_bd_css.new

Vous verrez votre nouveau style.
Pour en avoir d'autres c'est pareil mais au lieu de 5 se sera 6 , 7, 8 , ..., jusqu'ààààààààààààààààààààà

---Fantôme--- Lv 0 Nombre de messages : 40942 Age : 33

On peut avoir un rendu image pour voir ce que c'est sensé donner ? Parce que comme ça je vois pas trop. Very Happy

____________

Alex RE a écrit:: C'est comme utiliser une hache pour trancher du pain. Je suis peut-être trop vieux pour ça.

Petit Maker Lv 3 Nombre de messages : 57 Age : 39

L'intérêt n'est pas vraiment visible en images mais bon voici ce que ça devrait donner:

1) Pour écrire dans une fenêtre avant vous tapiez ça

Code:: #==========> PARTIE 1
   self.contents.font.color = normal_color
   self.contents.font.size = 14
   self.contents.font.name = "verdana"
self.contents.draw_text(50, 10, 212, 32, "un mot de fenryo1")

#==========> PARTIE 2
   self.contents.font.color = normal_color
   self.contents.font.size = 18
   self.contents.font.name = "calibri"
self.contents.draw_text(50, 30, 212, 32, "un mot de fenryo2")

#==========> PARTIE 3
   self.contents.font.color = normal_color
   self.contents.font.size = 14
   self.contents.font.name = "Trebuchet MS"
self.contents.draw_text(50, 50, 212, 32, "un mot de fenryo3")

#==========> PARTIE 4
   self.contents.font.color = normal_color
   self.contents.font.size = 18
   self.contents.font.name = "calibri"
self.contents.draw_text(50, 30, 212, 32, "un mot de fenryo4")

Vous remarquerez que la "partie 1" et la "partie 3" ont les même propriétés (même police, même couleur, même taille du texte).
Si vous devez changer ce code il faudra changer la "partie 1" et la "partie 3"

2) Maintenant avec les CSS voici le même code

Code:: #==========> PARTIE 1
self.text_style("css1")
self.contents.draw_text(50, 10, 212, 32, "un mot de fenryo1")

#==========> PARTIE 2
self.text_style("css2")
self.contents.draw_text(50, 30, 212, 32, "un mot de fenryo2")

#==========> PARTIE 3
self.text_style("css1")
self.contents.draw_text(50, 50, 212, 32, "un mot de fenryo3")

#==========> PARTIE 4
self.text_style("css4")
self.contents.draw_text(50, 30, 212, 32, "un mot de fenryo4")

Voilà la "partie 1" et la "partie 3" ont le même style.
L'avantage c'est que si vous voulez changer de polices ou de couleur ou autre pour tout ces éléments "écrits pareils" vous n'avez qu'à changer les propriétés du css !!
C'est un script utile pour les gros codeurs, ceux qui font plusieurs fenêtres.

Dieu Maker Lv 44 Nombre de messages : 2989 Age : 30

C'est super pratique ton truc Very Happy

C'est vrais que pour ceux qui veulent donner un aspect un peu personnalisé à leurs menu boite de dialogue, c'est un gain de temps énorme (je crois que sinon on doit refaire une classe pour presque chaque fenêtre (si on veut beaucoup de différence).

En plus c'est exactement ce que je cherchais Wink

Merci beaucoup Nerdococo

Mais c'est quoi le contraire de "false" ? Alors là... Gné ?

____________
[SCRIPT] Classe CSS Lol-2c9de1b844

Kikoo Lv -1 Nombre de messages : 15257 Age : 32

True

____________
[SCRIPT] Classe CSS NewsignEM

Citation :: XxRelmxX: je vous salue telle samus aran

Dieu Maker Lv 44 Nombre de messages : 2989 Age : 30

Merci

____________
[SCRIPT] Classe CSS Lol-2c9de1b844

Petit Maker Lv 3 Nombre de messages : 57 Age : 39

De rien j'espère que cette classe va en aider plusieurs. Bon si vous êtes bon scripteur vous pourrez même influencer le windowskin de la fenêtre (j'ai pas mis cette version parce qu'elle aurait trop perdu les débutants)

Voilà je suis en train de coder des tas de classes sympas, dès que je les rends opérationnelles pour tous je les postent ici !!

» début de script a-rpg
» Probleme script
» Script de quêtes...
» Script Map pronfondeur en 3D
» Un autre script