Accueil du SiteAccueil du Site  AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  ConnexionConnexion  S'enregistrerS'enregistrer  




Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
fenryo
Paysan (niveau 5)
Paysan (niveau 5)
avatar

Masculin
Messages postés : 40
Date d'inscription : 03/12/2012
Jauge LPC :
15 / 10015 / 100


MessageSujet: [RMXP]Classe CSS dans RPG MAKER XP (Niveau avancé)   Lun 3 Déc 2012 - 19: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.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 !!

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
[RMXP]Classe CSS dans RPG MAKER XP (Niveau avancé)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Palais Créatif :: ~ PARTAGE ~ :: Scripts et plugins :: RPG Maker XP :: Autres-
Sauter vers: