[DB-AL] Switcher entre 2 images

Questions à propos du GUI, y compris la partie script.
Wiwissem
Messages : 11
Inscription : 09 Mai 2018 20:54

Re: [DB-AL] Switcher entre 2 images

Message par Wiwissem » 11 Mai 2018 18:44

Mais sinon dernière question, pour faire disparaître un objet on utilise bien la ligne

Code : Tout sélectionner

this.gameObject.SetActive()
mais es-ce que cela est la même chose pour un sprite car j'ai besoin de faire disparaître une image pour faire apparaître l'autre mais je ne pense pas être sur la bonne voie :gene:

Avatar de l’utilisateur
Max
Messages : 8771
Inscription : 30 Juil 2011 13:57
Contact :

Re: [DB-AL] Switcher entre 2 images

Message par Max » 11 Mai 2018 19:08

Bonsoir,

Si tu souhaites faire disparaitre/apparaitre une image:

Code : Tout sélectionner

Image img;
...
img.enabled = false; // ou true
Image
Pas d'aide par MP, le forum est là pour ça.
En cas de doute sur les bonnes pratiques à adopter sur le forum, consulter la Charte et sa FAQ

Wiwissem
Messages : 11
Inscription : 09 Mai 2018 20:54

Re: [DB-AL] Switcher entre 2 images

Message par Wiwissem » 12 Mai 2018 18:57

Après avoir consulter les docs et tes conseils j'ai crée le script suivant mais un problème me vient, c'est que le deuxième Input.GetMouseButtonDown ne semble pas fonctionner et je pense que le problème vient de OnMouseDown mais si c'est ça je sais pas le remplacer par quoi d'autres étant donné que je l'utilise depuis que j'ai crée le script.

Code : Tout sélectionner

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Next_png : MonoBehaviour {

    public Image Foucault; 
    public string Pathf = "Resources/png/Foucault";

    public Image Harold; 
    public string Pathh = "Resources/png/Harold";

    public Image Fred_Boogie;
    public string Pathb = "Resources/png/Fred_Boogie";

    void Start () {
        Foucault.sprite = (Sprite)Resources.Load<Sprite>(Pathf) as Sprite;
    }
	

	public void OnMouseDown() {
        if (Input.GetMouseButtonDown(1))
            Foucault.enabled = false;
        Harold.sprite = (Sprite)Resources.Load<Sprite>(Pathh) as Sprite;
        Harold.enabled = true;

        if (Input.GetMouseButtonDown(2))
            Harold.enabled = false;
        Fred_Boogie.sprite = (Sprite)Resources.Load<Sprite>(Pathb) as Sprite;
        Fred_Boogie.enabled = true;
    }
}

Avatar de l’utilisateur
Max
Messages : 8771
Inscription : 30 Juil 2011 13:57
Contact :

Re: [DB-AL] Switcher entre 2 images

Message par Max » 12 Mai 2018 19:10

Bonsoir,
La fonction OnMouseDown est appelée uniquement lors d'un mouse clik qui pointe sur l'object sur lequel est placé le script (voir la doc). Pour la partie UI, cela ne marchera pas. Je t'avais conseillé de passer par les Events, pourquoi ne pas avoir essayé ?
Image
Pas d'aide par MP, le forum est là pour ça.
En cas de doute sur les bonnes pratiques à adopter sur le forum, consulter la Charte et sa FAQ

Wiwissem
Messages : 11
Inscription : 09 Mai 2018 20:54

Re: [DB-AL] Switcher entre 2 images

Message par Wiwissem » 13 Mai 2018 02:14

Bonsoir,
Bah justement je suis partis bidouillé au niveau de la section Onclick et ensuite vers le EventSystem en utilisant l'event trigger mais même avec les docs je ne comprends pas s'il y a une différence entre les deux car ils font tous les deux la même, c'est-à-dire gérer la détection du clic au niveau de mon bouton car j'ai essayé en enlevant l'Event system et je ne peux même plus interagir avec le bouton mais bon je pense qu'une image de mon problème sera beaucoup plus parlant
Image
Sans titred.png
Sans titred.png (170.33 Kio) Consulté 5241 fois
Pièces jointes
Sans titre.png
Sans titre.png (167.88 Kio) Consulté 5241 fois

Avatar de l’utilisateur
Max
Messages : 8771
Inscription : 30 Juil 2011 13:57
Contact :

Re: [DB-AL] Switcher entre 2 images

Message par Max » 13 Mai 2018 11:56

Bonjour,

ouillouillouille... Bon on va repartir de zéro.
L'objectif: tu as un UI.Button. Tu souhaites que lors de chaque clik sur ce bouton, l'image change et quelle alterne entre deux sprites en particulier.
Première étape: le script. on peut écrire quelque chose comme cela:

Code : Tout sélectionner

using UnityEngine;
using UnityEngine.UI;

public class SwitchButtonImage : MonoBehaviour
{
    [SerializeField]
    Sprite[] imgs;

    Image buttonImage;
    int id=0;

    void Start()
    {
        buttonImage = GetComponent<Image>();
    }

    public void SwitchImage()
    {
        buttonImage.sprite = imgs[id++];
        id = id % 2;
    }
}
Les data sont simples, un tableau de sprites (qui ne comprendra que deux éléments dans notre cas), une référence au composant Image de ton bouton, et un index (id) pour savoir laquelle des deux images on va afficher.
Les fonctions: Start(), rien de particulier, le script étant sur ton bouton, on récupère le component 'Image', pour travailler dessus par la suite. SwitchImage(), une fonction public qui 'switch' le sprite du componant Image du bouton avec les deux images du tableau (tableau qui sera alimenté via l'inspector).

Bien, maintenant la partie inspector. Quand tu crées ton bouton, tu dois avoir quelque chose comme cela:
(dont tu adaptes les paramètres en fonction de tes besoins)
Image

Là, tu glisses ton script dessus, qui va venir s'afficher en bas. Tu vas avoir ceci.
Dans le screen, tu constates que j'ai mis la valeur 2 pour size, et qu'en suite j'ai définis dans les deux slots mes deux sprites.
Image

En suite, je vais sur la partie 'OnClick', je fait '+', et là je renseigne les éléments demandés. En premier la partie 'None', je drop mon bouton dans le champ, un fois cela fait la partie 'no function' n'est plus grisée, et je vais dessus pour sélectionner SwitchButtonImage->SwitchImage. Ce qui donne ceci:
Image

Et voilà. Tu n'as plus qu'a tester.A chaque click sur le bouton, ton image va changer.
Image
Pas d'aide par MP, le forum est là pour ça.
En cas de doute sur les bonnes pratiques à adopter sur le forum, consulter la Charte et sa FAQ

Wiwissem
Messages : 11
Inscription : 09 Mai 2018 20:54

Re: [DB-AL] Switcher entre 2 images

Message par Wiwissem » 14 Mai 2018 22:25

Bonjour,
je pense que je me suis fait mal comprendre :gene: , ce n'est pas l'image du bouton que je veux changer car j'ai trouvé moult tutos sur Youtube qui me permettent de le faire mais je souhaite changer l'image du panel blanc indiqué en dessous.
Pièces jointes
g.png
g.png (149.83 Kio) Consulté 5111 fois

Avatar de l’utilisateur
Max
Messages : 8771
Inscription : 30 Juil 2011 13:57
Contact :

Re: [DB-AL] Switcher entre 2 images

Message par Max » 15 Mai 2018 08:10

Bonjour,

ben dans ce cas c'est la même chose, dans le script il suffit de passer par la référence du composant Image de ton panel au lieu de celle du bouton.
Image
Pas d'aide par MP, le forum est là pour ça.
En cas de doute sur les bonnes pratiques à adopter sur le forum, consulter la Charte et sa FAQ

Avatar de l’utilisateur
ZJP
Messages : 5748
Inscription : 15 Déc 2009 06:00

Re: [DB-AL] Switcher entre 2 images

Message par ZJP » 15 Mai 2018 18:22

:-D

Wiwissem
Messages : 11
Inscription : 09 Mai 2018 20:54

Re: [DB-AL] Switcher entre 2 images

Message par Wiwissem » 19 Mai 2018 19:19

j'ai juste une ou deux questions à propos du code que tu m'as filé: Je n'ai pas du tout compris comment tu as fait référence à l'image du bouton en mettant simplement "Image buttonImage;"?
Et dernière question: Peut-tu m'expliquer la dernière ligne de la fonction SwitchImage: "id = id%2"car je ne vois pas du tout comment cette ligne peut faire mettre X emplacements pour un nombre donné dans size?
Max a écrit :On définis une variable, buttonImage, qui ne contient rien à ce moment là. Par contre dans la fonction Start (donc au démarrage du script), on va aller récupérer la référence au composant Image du Bouton que l'on va assigner à buttonImage, pour pouvoir l'utiliser par la suite dans notre script.

L’opérateur '%' est appelé opérateur 'modulo' ou encore opérateur 'reste'. Ça c'est commun à quasiment tous les langages de prog. En gros cela calcule le reste de la division du premier opérande par le deuxième.
Dans le cas du script, le tableau ne comprend que deux éléments (le 0 et le 1). Donc id doit toujours passer de 0 à 1 puis de nouveau à 0 puis 1 et ainsi de suite. Soit si on suit le fonctionnement du code étape par étape:

id=0, on fait id = id % 2 -> id = reste de (id/2) soit id=0
id++
id est alors = à 1, on fait id = id % 2 -> id = reste de (id/2) soit id=1
id++
id est alors = à 2, on fait id = id % 2 -> id = reste de (id/2) soit id=0
...
on en revient au premier cas, et ainsi de suite...
Voilà, j'espère que c'est un peu plus clair.

Répondre

Revenir vers « L'interface GUI »