[RMXP]Classe CSS dans RPG MAKER XP (Niveau avancé)

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.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.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

self.contents.font.name = $css_database.police

self.contents.font.size = $css_database.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 LES CSS

class Win_css_testing

#========= 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= "Css " + $css_database.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 rabbit

Non mais 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'ààààààààààààààààààààà

A QUOI CA SEEEEEERRRREEEUUUUUU ?

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 2" et la "partie 4" 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" (surtout imaginez que tout le monde vous dise que votre police craint après 55 fenêtres pareilles !!

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("css3")
self.contents.draw_text(50, 50, 212, 32, "un mot de fenryo3")

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

Voilà la "partie 2" et la "partie 4" 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.
study

J'espère vous en poster d'autres d'ici peu !!

» [RPG Maker Vx Ace] Statut "Break" selon niveau de TP
» System classe(Rpg maker vx ace)
» [Résolu ][RMXP] problème d'image dans un script.
» [RMXP] Image de fond dans le menu de sauvegarde
» Vieux RMXP -> Récent RMXP