Day.png);">
Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site

Découvrir
RPG Maker

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Jeux: puie z / Jeux: Citymaime - Chapitre 1 / Jeux: Mer, îles et fous / News: Du neuf dans le making / News: Muma|Rope est disponible en (...) / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres

Contact

Mentions légales

340 connectés actuellement

30732334 visiteurs
depuis l'ouverture

2312 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Blog Alioune Fall

Fairy Tail Constellations

Hellsoft

Offgame

Lumen

Leo-Games

RPG Fusion

Tous nos partenaires

Devenir
partenaire

◂

Classe CSS

Une classe qui fait gagner énorméméent de temps en codage de fenêtre personnelles.

Script pour RPG Maker XP
Ecrit par fenryo
Publié par fenryo (lui envoyer un message privé)
Signaler un script cassé

 ▸

❤ 0

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

Portion de code : Tout sélectionner 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

# 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)

Portion de code : Tout sélectionner 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

Portion de code : Tout sélectionner 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

 
#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 suivante dans la fenêtre :

Portion de code : Tout sélectionner 

1

self.text_style ("nom du css")



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 :

Portion de code : Tout sélectionner 

1

$scene =Scene_bd_css.new


Vous pourrez voir les effets de chacun des styles.


AVOIR PLUS DE STYLE ?
Vous me donnez 500 euros image
Non mais la procédure demande de s'y connaître en Ruby:
1) Ouvrez le premier script de ce tuto.
2) copiez la fonction create_css_4
3 ) collez la en dessous d'elle même (pas dans elle !!)
4) renommez-la 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éez un événement et exécutez le script :

Portion de code : Tout sélectionner 

1
2

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




skull - posté le 02/09/2008 à 10:56:43 (136 messages postés)

❤ 0

C'est super ce script ! Sinon pour plus de styles je te paye par chèque ou cash? Nan j'dec :p


fenryo - posté le 02/09/2008 à 15:53:10 (153 messages postés)

❤ 0

Mi-Loup, Mi-homme je parcours le monde à la recherche de ma meute: Ceux qui savent...

:joint Merci. Bon il y en a qui peuvent se demander l'intérêt voici une explication:


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

Portion de code : Tout sélectionner 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

 
 
 
#==========> 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"




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

Portion de code : Tout sélectionner 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
#==========> 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.
:joint J'espère vous en poster d'autres d'ici peu !!

-------- Le réalisme c'est trouver un moyen rationnel d'atteindre un but magnifique ----------------- Kiro'o Tale: Aurion, jeu d'un nouveau genre !! ==> Pour faire des formulaire sur RMXP:


Onimanta - posté le 02/09/2008 à 18:24:24 (31 messages postés)

❤ 0

Ness User

Trop bonne Idée!!Super Script, merci:lei

OK!


Madkiller - posté le 03/09/2008 à 19:44:51 (2971 messages postés)

❤ 0

Il manque une case je crois

super ce script! C'est 'achement pratique ^^ Et vu que je manipule CSS... Ca pourrait faire des trucs sympas quand même :D

Tuto^^//TAUT(trad FR)


Tricky - posté le 04/09/2008 à 03:13:48 (205 messages postés)

❤ 0

Magnifique, très bonne idée! C'est vraiment utile et ça donne des résultats surprenants.


AkikazeTenoko - posté le 17/02/2009 à 14:44:26 (23 messages postés)

❤ 0

Vent d'Automne

Mettre du CSS dans RPG Maker... Je ne dirais pas que c'est du génie, mais c'est très ingénieux ! Bravo ! :D

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts/Plugins | Ressources graphiques / sonores | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers