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




Partagez | 
 

 Créer son menu custom partie 3/3.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Kasbak
Membre V.I.P.
Membre V.I.P.
avatar

Masculin
Messages postés : 1356
Date d'inscription : 05/01/2013
Jauge LPC :
100 / 100100 / 100
















MessageSujet: Créer son menu custom partie 3/3.    Jeu 23 Avr 2015 - 18:50

Bonjour tout le monde,

Voilà la dernière partie du tuto pour créer son menu.

-Partie 3,ajout de scripts :

Souvenez vous on avez laisser notre menu en chantier :

Exemple du menu en cour:
 

On va donc finaliser tous ça.

1-Ajouter des textes et variables.
2-Ajouter localisation de la map.
3-Ajouter une jauge de progression.
4-Avoir des menus alternatifs.
5-Créer un second menu.
6-Gestion graphique basique.


1-Ajouter des textes et variables :

Comme on l'a vu précédemment lors du changement de selectable on n'a parfois le texte des onglets qui va ce décaler,on va donc les retirer et en mettre de nouveaux.Pour ça rien de plus simple,on va créer un nouveau script au dessus de main que l'on va appeler Text_Menu.


Code:
class Window_Text_menu < Window_Base
  def initialize
    super(0, 0, 640, 480)
    self.contents = Bitmap.new(width - 32, height - 32)
    self.contents.font.size = 14
    self.opacity = 0
    refresh
  end

  def refresh
    
    
    self.contents.clear

#La on va entrez toutes les données que l'on va vouloir à l'écran

#on peu placer nos ligne entre chaque ligne de texte et variable pour changer,la police,la taille,la couleur,ect...

 self.contents.font.color = Color.new(159, 196, 67, 255)
self.contents.font.size = 24
self.contents.font.name = "Arial"

#affiche la variable 3
 self.contents.draw_text(582, 430, 300, 32, $game_variables[3].to_s)

#affiche le texte 'exemple'
 self.contents.draw_text(55, 160, 300, 32, "Exemple")

 #ajouter ,2 après le texte pour que le texte parte de droite vers la gauche.
 #self.contents.draw_text(55, 160, 300, 32, "Exemple",2)
  
#on peut faire apparaitre des texte selon les interrupteur activer en jeu exemple avec interrupteur 80,81,82,83:
       if $game_switches[80] == true
self.contents.draw_text(198, 420, 300, 32, "Chapitre 1")
end

      if $game_switches[81] == true
self.contents.draw_text(198, 372, 300, 32, "Chapitre 2")
end

      if $game_switches[82] == true
self.contents.draw_text(198, 372, 300, 32, "Chapitre 3")
end

      if $game_switches[83] == true
self.contents.draw_text(198, 372, 300, 32, "Chapitre 4")


       if $game_switches[80] == true
self.contents.draw_text(300, 220, 300, 32, "Trouvez le garde")
end


    @sprite = Sprite.new
    @sprite.bitmap = RPG::Cache.picture("Bouton1")
    @sprite.x = 10
    @sprite.y = 10

#image apparait si interrupteur 80 activer
 if $game_switches[80] == true
  
  
    @sprite.bitmap = RPG::Cache.picture("Imageaide1")
    @sprite.x = 300
    @sprite.y = 300
  end
  

end


end
end

Maintenant on va allez dans son scène_menu custom et vers ligne 400 en dessous de :

Code:
    @gold_window = Window_Gold.new
    @gold_window.x = 20
    @gold_window.y = 416#416
 
Coller
 
Code:
    @Text_menu = Window_Text_menu.new
    @Text_menu.x = 0
    @Text_menu.y = 0

Puis plus bas

Code:
@Text_menu.dispose

encore plus bas

Code:
@Text_menu.update

On n'obtiens donc maintenant un texte 'exemple' dans le menu,une variable tout en bas à droite,et si on active l'interrupteur 80 le texte 'Chapitre 1' apparait.Tous ça à régler avec les X,Y,pour ajuster selon vos onglets ou vos idées.Vous pouvez mettre du texte à l'infini,remplacer par exemple chapitre 1 par une phrase d'aide selon le déroulement de votre jeu,afficher une image d'aide ou autre,afficher plusieurs phrases avec plusieurs variables pour par exemple créer un petit indicateur météo,un système d'informations,ect,ect...

suite menu:
 

Evidemment il vous faudras organiser tout ça proprement.

2-Ajouter localisation de la map :

Vous allez coller ce morceau de ligne dans votre scène_menu custom tous en haut a la première ligne.


Code:


#=======================================================
#Window_Location = Definition
#===================================
#  Insertion du nom de la map game title
    $map_infos = load_data("Data/MapInfos.rxdata")

  for key in $map_infos.keys

    $map_infos[key] = $map_infos[key].name

  end
# Insertion du nom de la map game title

# Insertion du nom de la map game map
def name

  $map_infos[@map_id]

end
# Insertion du nom de la map game map

#===================================
# Window_Location = Apparance
#===================================
class Window_Location < Window_Base
#--------------------------------------------------------------------------
  def initialize
    super(0, 0, 300, 180)
#  super(0, 0, 300, 180)
    self.contents = Bitmap.new(width - 32, height - 32)
    self.contents.font.name = "Arial"
    self.contents.font.size = 24#14
    
     # Definir Windowskin    
self.windowskin = RPG::Cache.windowskin("")
     # Definir Windowskin  
    
    refresh
  end
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    
    bitmap = RPG::Cache.picture("")
    self.contents.blt(5, 5, bitmap, Rect.new(0, 0, 250, 130), 255)  
    
      #self.contents.font.color = Color.new(255, 255, 255, 255)
    #self.contents.draw_text(10, 60, 120, 32,"Lieu:")
       #self.contents.font.color = system_color
    #self.contents.draw_text(20, 70, 200, 32, $game_map.name, 2)
    
    self.contents.font.size = 24#14
    self.contents.font.color = Color.new(255, 255, 255, 255)
    self.contents.draw_text(10, 70, 120, 32,"")
       self.contents.font.color = normal_color
       #self.contents.font.color = purple2_color

   # self.contents.draw_text(20, 70, 200, 32, $game_map.name, 2)
    
self.contents.draw_text(20, 70, 200, 32, $game_map.name)
  end
end


Ensuite vers ligne 400 en dessous :

Code:
    @gold_window = Window_Gold.new
    @gold_window.x = 20
    @gold_window.y = 416#416
 
Coller
 
Code:
          @Window_Location = Window_Location.new
    
@Window_Location.x =114
@Window_Location.y =303

Puis plus bas

Code:
@Window_Location.dispose

encore plus bas

Code:
@Window_Location.update

Voilà le nom de la map s'affiche.


3-Ajouter une jauge de progression :

Pour ajouter une jauge on va copier ce script au dessus de main et l'appeler jauge progress (script by AcedentProne)


Code:
#=====================================
#Gradient Bars with customizable lengths, thicknesses, types and Colors
#By AcedentProne
#=====================================
class Window_jauge3 < Window_Base
def draw_normal_barz(x, y, type, length, thick, e1, e2, c1 = Color.new(255,0,0,255), c2 = Color.new(119,119,58,255))#couelru 2 hori
if type == "horizontal"
width = length
height = thick
self.contents.fill_rect(x-1, y - 1, width+2, height + 3, Color.new(255, 255, 255, 255))

self.contents.fill_rect(x, y, width, height + 1, Color.new(192,60,0, 255))
w = width * e1 / e2
for i in 0..height
r = c1.red + (c2.red - c1.red) * (height -i)/height + 0 * i/height
g = c1.green + (c2.green - c1.green) * (height -i)/height + 0 * i/height
b = c1.blue + (c2.blue - c1.blue) * (height -i)/height + 0 * i/height
a = c1.alpha + (c2.alpha - c1.alpha)* (height -i)/height + 255 * i/height
self.contents.fill_rect(x, y+i, w, 1, Color.new(r, g, b, a))
end
elsif type == "vertical"
width = thick
height = length
self.contents.fill_rect(x-1, y - 1, width+3, height + 2, Color.new(255, 255, 255, 255))
self.contents.fill_rect(x, y, width+1, height , Color.new(0, 0, 0, 255))
h = height * e1 / e2
for i in 0..width
r = c1.red + (c2.red - c1.red) * (width -i)/width + 0 * i/width
g = c1.green + (c2.green - c1.green) * (width -i)/width + 0 * i/width
b = c1.blue + (c2.blue - c1.blue) * (width -i)/width + 0 * i/width
a = c1.alpha + (c2.alpha - c1.alpha)* (width -i)/width + 255 * i/width
self.contents.fill_rect(x+i, y, 1, h, Color.new(r, g, b, a))
end
end
end
#pour changer la couleur d'interieur
def draw_actor_barz(actor,x, y, type, length, thick, e1, e2, c1 = Color.new(0,50,20,255), c2 = Color.new(0,220,120,255))#couelru 2 verti
if type == "horizontal"
width = length
height = thick
self.contents.fill_rect(x-1, y - 1, width+2, height + 3, Color.new(0, 0, 0, 255))#(102, 153, 255, 255)) #contour  !
self.contents.fill_rect(x, y, width, height + 1, Color.new(0, 120, 155, 0))#(100, 120, 155, 255))#couleur du fond
w = width * e1 / e2
for i in 0..height
r = c1.red + (c2.red - c1.red) * (height -i)/height + 0 * i/height
g = c1.green + (c2.green - c1.green) * (height -i)/height + 0 * i/height
b = c1.blue + (c2.blue - c1.blue) * (height -i)/height + 0 * i/height
a = c1.alpha + (c2.alpha - c1.alpha)* (height -i)/height + 255 * i/height
self.contents.fill_rect(x, y+i, w, 1, Color.new(r, g, b, a))
end
elsif type == "vertical"
width = thick
height = length
self.contents.fill_rect(x-1, y - 1, width+3, height + 2, Color.new(255, 255, 255, 255))
self.contents.fill_rect(x, y, width+1, height , Color.new(0, 0, 0, 255))#
h = height * e1 / e2
for i in 0..width
r = c1.red + (c2.red - c1.red) * (width -i)/width + 0 * i/width
g = c1.green + (c2.green - c1.green) * (width -i)/width + 0 * i/width
b = c1.blue + (c2.blue - c1.blue) * (width -i)/width + 0 * i/width
a = c1.alpha + (c2.alpha - c1.alpha)* (width -i)/width + 255 * i/width
self.contents.fill_rect(x+i, y, 1, h, Color.new(r, g, b, a))

end
end
end
end
##################

class Scene_Progress3 < Scene_Map

#---------------------------------------------------------------------------------
def initialize
end
#---------------------------------------------------------------------------------

def main
@window3 = Window_Progress3.new
@window3.x =160#160
@window3.y =200#200
@window3.height =100 #100
@window3.width = 341#341
#@window1.z = 200
opacity = 0

 @window3.update ###add

Graphics.transition
loop do
Graphics.update
Input.update

  
    
    

if Input.trigger?(Input::B)
# キャンセル SE を演奏
$game_system.se_play($data_system.cancel_se)
# マップ画面に切り替え
@sprite = Sprite.new
@sprite.bitmap = RPG::Cache.panorama("", 0)
$scene = Scene_Menu.new
end
#update
if $scene != self
break
end
end

Graphics.freeze
@window3.dispose

end
#---------------------------------------------------------------------------------

#---------------------------------------------------------------------------------
def update
end
#---------------------------------------------------------------------------------

end


class Window_Progress3 < Window_jauge3

#---------------------------------------------------------------------------------
def initialize
super(253, 411, 500,100)#(0, 0, 341,100)
self.contents = Bitmap.new(width - 50, height - 32)
self.contents.font.name = "Tahoma"
self.contents.font.size = 24
self.contents.font.color = text_color(0)
self.contents.draw_text(-80, 22, 33, 33, "")#(20, 0, 33, 33, "Prog")
self.contents.draw_text(-45, 0, 33, 33, "")#(55, 0, 33, 33, "ress")
self.contents.draw_text(88, 0, 33, 33, " ")   #(88, 0, 33, 33, " ")
self.contents.draw_text(-10, 0, 33, 33, "") #(110, 0, 33, 33, "% ")
draw_actor_barz(0,20,35, "horizontal", 109, 22,$game_variables[3],100)
#draw_actor_barz(0,20,35, "horizontal", 121 longueur bar, 28largeur,$game_variables[1],100)
@sprite = Sprite.new
@sprite.bitmap = RPG::Cache.panorama("", 0)

     # Definir Windowskin    
self.windowskin = RPG::Cache.windowskin("")
     # Definir Windowskin


end
#---------------------------------------------------------------------------------

end
#######################



#def main
#@window3 = Window_Progress3.new
#@window3 .update
#@window3 .dispose


#end


Puis même procédure vers ligne 400 en dessous :

Code:
    @gold_window = Window_Gold.new
    @gold_window.x = 20
    @gold_window.y = 416#416
 
Coller
 
Code:
          @window3 = Window_Progress3.new
@window3.x =491
@window3.y =4013

Puis plus bas

Code:
@window3.dispose

encore plus bas

Code:
@window3.update

Voilà une jauge s'affiche,vous pouvez en mettre d'autres,vous pouvez dans le script changer la couleur de la jauge,du dégradé,du fond de la jauge,sa taille,sa longueur,modifier ça variable auxquelle elle correspond,par défaut c'est la variable 3.

4-Avoir des menus alternatifs :

Pour avoir des nouveaux designs de menus on va procédé de manière à avoir 1 image de fond puis une seconde,en activant un interrupteur l'image de fond du menu sera changé.Si vous avez laisser votre opacité partout à 255 cette partie est inutile elle sert que si vous utiliser des fonds d'écrans.

Vous aller dans votre menu custom chercher c'est ligne vers 450 et rajouter comme dans l'exemple :

Code:
class Scene_Menu
#--------------------------------------------------------------------------
# ? initialize
#--------------------------------------------------------------------------

 

def initialize(menu_index = 0)
  
  
@menu_index = menu_index
@actor_change = false


 @img_fond = Sprite.new
 @img_fond.bitmap = RPG::Cache.picture("background")



  if $game_switches[11] == true
 @img_fond = Sprite.new
 @img_fond.bitmap = RPG::Cache.picture("background3")

end

Voilà si vous activer l'interrupteur 11 un nouveau fond d'écran sera utiliser,penser comme toujours à avoir les fond avec les noms qui correspondent dans votre dossier 'pictures'.

5-Créer un second menu :

La on va voir quelque chose de différent,puisque l'on va créer directement un nouveau menu qui va juste activer des interrupteurs.

A quoi cela peu il servir ?

Tout simplement imaginons,vous avec un restaurant dans votre jeu,vous aimerai faire un genre de menu d'accueil pour acheter votre repas sans avoir une simple boutique qui s'ouvre,ou alors pour faire des mini_jeux,les possibilités sont multiples,(ensuite lorsque l'interrupteur est activer a vous de le gérer en event,exemeple pour un achat de repas -en event processus parallèle - si interrupteur 1 activer - condition si argent possédé 'somme du repas' - argent retirer - plat obtenu...)
Je vais pas m'attarder sur cette partie les events y'a d'autres tutos qui vous expliquerons ça si vous êtes perdu.

Donc revenons à ce menu.Pour ça on va créer un nouveau sript que l'on va coller au dessus de main :
On va rester sur une idée de restaurant donc on va l'appeler 'Menu_food'

Code:

#"Menu Food by Kasbak,tuto 3."

# Scene_Food

#$scene =  Scene_Food.new dans la commande script d'un évènement

#------------------------------------------------------------------------------#

class Scene_Food

#---------------#
def initialize(menu_index = 0)
    @menu_index = menu_index
  end
  
def main

$game_system = Game_System.new

#image : aide
 @spriteset = Spriteset_Map.new
#@sprite = Sprite.new
  @img_fond = Sprite.new
 @img_fond.bitmap = RPG::Cache.picture("Fond food")
#@sprite.bitmap = RPG::Cache.title("")

#Window_Command

s1 = "Pizza"

s2 = "Ravioli"

s3 = "Kebab"

s4 = "Frites"




@command_window = Window_Command.new(640, [s1, s2, s3,s4])
@command_window.index = @menu_index
@command_window.back_opacity = 255

@command_window.x = 0 #- @command_window.width / 2

@command_window.y = 100





#Main loop

Graphics.transition

loop do

Graphics.update

Input.update

update

if $scene != self

break

end

end

Graphics.freeze

@command_window.dispose

#@sprite.bitmap.dispose

#@sprite.dispose

end



#------------------------------------------------------------------------------#

def update

if Input.trigger?(Input::B)

$game_system.se_play($data_system.cancel_se)
#quand 'echp' retour sur la map
$scene = Scene_Map.new

return

end

@command_window.update

if Input.trigger?(Input::C)

      case @command_window.index

when 0
  $game_system.se_play($data_system.decision_se)
  $game_switches[1] = true

when 1
  $game_system.se_play($data_system.decision_se)
 $game_switches[2] = true
  
  when 2
  $game_system.se_play($data_system.decision_se)
  $game_switches[3] = true

when 3
  $game_system.se_play($data_system.decision_se)
  $game_switches[4] = true
  
  


  

end

end

end

#------------------------------------------------------------------------------#
end


Exemple d'un menu restaurant:
 
Là pour l'exemple on n'a donc mis la map en fond et une image en haut,le selectable n'a pas été modifié pas d'ajout de texte,l'opacité à 255,c'est très basique mais c'est volontaire,à vous de faire vos propres menus.

Pour appeler le menu faite :

Code:
$scene =  Scene_Food.new

Soit dans un event 'insérer script' soit dans un autre menu par exemple qui appelerai celui là.

Je vais pas vous expliquer comment modifier son selectable,tous simplement parce que je l'ai expliquer avant donc vous devriez y arriver tout seul désormais (pareil pour l'ajout de textes).  Smile

Par contre je vais vous donner des ligne utiles pour vos menus :

Jouer une musique :

Code:
Audio.se_play("Audio/SE/Nondufichier")

Activer un interrupteur (210 activer,pour desactiver remplacer true par false):

Code:
$game_switches[210] = true

Afficher un texte dans une fenêtre window :

 
Code:
print ("votre texte")

Conditions liés aux variables (pour faire des mini-jeux ça peu être très utile):

Exemple si la variable 226 est supérieur à 1.

Code:
if $game_variables[226] >= 1
#ce qui ce passe
end

Voilà je pense avoir fait le tour du sujet,tous ça en restant dans la simplicité d'accés.

On va terminer sur quelques idées graphiques pour vos menu.

Vous pouver par exemple faire un système de menu avec des icones.

Utiliser des contours,des dégradés,ect...:
 

Ensuite vous adapter le curseur à votre graphisme de fond,puis vous ajuter les textes,les fenêtres,ect...

Voilà on arrive au terme du tuto,je vais mettre quelques exemples de menus que j'avais fait pour vous données des idées,c'est plutot futuriste mais avec un peu d'imaginations vous devriez pouvoir adapter ça très facilement en style moyen-age ou autres.

Exemple de menus terminés :

Menu avec son fond alternatif:
 

Menu style zombie:
 

Voilà c'est terminé,hésitez pas à poster vos menus si vous en avait faits,vous pouvez aussi regarder les scripts des menus déjà existants un peu partout sur le net ou le forum et trouver plein de choses à ajouter dans vos menus,si vous avez aussi des améliorations à apporter à ce tuto hésitez pas.

J'espère ce tuto sera utile à quelqu'un. Smile

_____________________





_____________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kasbakprod.wifeo.com/ http://kasbak.deviantart.com/
City Hunter
Administrateur
Administrateur
avatar

Masculin
Messages postés : 6519
Date d'inscription : 25/05/2011
Jauge LPC :
40 / 10040 / 100

















MessageSujet: Re: Créer son menu custom partie 3/3.    Jeu 23 Avr 2015 - 20:31

Bon.. j'ai pas encore tout lu.. Faut que je termine le chap un en faisant des tests.
Mais j'ai parcouru le tome 2 et le 3.. bah les rendus finaux sont vraiment géniaux! Smile

Et c'est exactement ce qui pourrait me convenir et ce que je cherche. Donc c'est top! Et la satisfaction est que je pourrais le faire par moi même.. ET en plus, avec des bases pour les scripts donc c'est génial! Smile

Merci Kasbak, je te donne des points (ainsi que pour le tome 2 où personne ne semble t'en avoir donner ^^).

_____________________
   
Code pour les bannières:
 


Qui aime City Hunter, est aimé de moi =D :
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasbak
Membre V.I.P.
Membre V.I.P.
avatar

Masculin
Messages postés : 1356
Date d'inscription : 05/01/2013
Jauge LPC :
100 / 100100 / 100
















MessageSujet: Re: Créer son menu custom partie 3/3.    Jeu 23 Avr 2015 - 21:31

Merci,j'espère que ça pourra t'apporter suffisamment d'aide pour parvenir à faire le menu de tes rêves. Smile

_____________________





_____________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kasbakprod.wifeo.com/ http://kasbak.deviantart.com/
City Hunter
Administrateur
Administrateur
avatar

Masculin
Messages postés : 6519
Date d'inscription : 25/05/2011
Jauge LPC :
40 / 10040 / 100

















MessageSujet: Re: Créer son menu custom partie 3/3.    Jeu 23 Avr 2015 - 22:19

Ah.. Je pense! Smile Y a moyen en tout cas de s'en approcher^^ J'espère juste que ce sera même.. Y parvenir Wink

_____________________
   
Code pour les bannières:
 


Qui aime City Hunter, est aimé de moi =D :
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Accroma
Paysan (niveau 4)
Paysan (niveau 4)
avatar

Masculin
Messages postés : 33
Date d'inscription : 19/04/2015
Jauge LPC :
9 / 1009 / 100


MessageSujet: Re: Créer son menu custom partie 3/3.    Jeu 23 Avr 2015 - 23:35

C'est ce que je recherche aussi.

On peut mettre n'importe quelle graphisme à condition que le curseur soit bien mis ? Par exemple, je voudrais faire un système "emploi du temps" où le joueur pourra visualiser les cours qui va devoir y aller dans la semaine (dans le journée). A moins que je peux le faire en event mais vu ce tuto, je pense que c'est facile à l'intégrer.

_____________________
Nom du projet : L'Académie des Mages
Slogan : La Magie du Destin est entre vos mains !
Logiciels utilisés : RPG Maker VXAce/Photoshop/After Effect/Gimp
Genre : Fantaisie

//Avancement du projet//
-Scénario : 60 %
-Système du jeu (scripts/event) : 2 % (Ecran titre custom en cours)
-Composition musicale : 5 % (Battle OK) (Intro OK)
-Ressources/maps : 2 %
-Total : 3 %
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kasbak
Membre V.I.P.
Membre V.I.P.
avatar

Masculin
Messages postés : 1356
Date d'inscription : 05/01/2013
Jauge LPC :
100 / 100100 / 100
















MessageSujet: Re: Créer son menu custom partie 3/3.    Ven 24 Avr 2015 - 1:57

Ouai tu peux parfaitement le faire,soit tu adapte les graphismes au curseur soit le curseur aux graphismes.Puis si tu as besoin d'aide tu me demande,y'a pas de soucis je t'aiderais du mieux que je peu.

_____________________





_____________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kasbakprod.wifeo.com/ http://kasbak.deviantart.com/
Contenu sponsorisé




MessageSujet: Re: Créer son menu custom partie 3/3.    

Revenir en haut Aller en bas
 
Créer son menu custom partie 3/3.
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Créer son menu custom partie 1/3.
» L'achat du "Billet" (1ère partie)
» GeneaTM (T comme Thierry et M comme Menu !)
» menu 1er de l'an
» Debut du régime je ne sais pas quoi faire comme menu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Palais Créatif :: ~ APPRENTISSAGE ~ :: Initiation :: Systèmes-
Sauter vers: