comment afficher un damier en c#

Version imprimable

Voir 40 message(s) de cette discussion en une page

31/01/2010, 11h44
thor76160

comment afficher un damier en c#

bonjour,
je suis entrain de crée un jeu d'othello.
j'aimerais créer un array[8,8] avec 2 couleurs et l'afficher dans mon windows form.
pourriez-vous m'aider svp ? c'est la première fois que je fais ce genre de réalisation graphique.
merci :)
31/01/2010, 12h10
olibara

Bonjour

Ta question est un peu vague.... qu'est ce qui bloque ?
31/01/2010, 13h35
demonia

tu peux le faire avec 2 for par exemple et en utilisant le graphics d'un panel.

Code:

g = panel1.CreateGraphics();

par exemple tu peux le mettre en blanc par défaut et après 1 coup sur 2 dans les for imbriqués tu mets un carré noir avec

Code:

g.FillRectangle()
31/01/2010, 14h03
olibara

Salut demonia

Ta réponse n'est pas fausse, mais je ne suis pas certain que ce soit LA bonne réponse a LA bonne question.

Sincerement je trouve que quand on veut un peu d'aide pertinente il est quand meme nécessaire de faire l'effort d'essayer de poser le problème de maniere précise
31/01/2010, 14h11
demonia

Citation:

Envoyé par olibara

Salut demonia

Ta réponse n'est pas fausse, mais je ne suis pas certain que ce soit LA bonne réponse a LA bonne question.

Sincerement je trouve que quand on veut un peu d'aide pertinente il est quand meme nécessaire de faire l'effort d'essayer de poser le problème de maniere précise

Je sais bien, mais j'ai donné un indice d'une solution éventuelle.

Le jeu de l'othello est un exercice typique d'un cours donc je pars du principe que je ne vais pas donner de réponse complète mais juste des indices.

Sinon l'exercice n'a plus d'intérêt.

Et en général c'est sous cette forme là dans les cours donc j'ai pensé à ça simplement.
31/01/2010, 15h42
theMonz31

salut

pour résoudre ce genre de problème, il faut faire un userControl qui va se charger de faire le dessin du damier :)

Le CreateGraphics() est à bannir... déja dit moult fois !!!

Surcharge de la méthode OnPaint()
et pour dessiner des cases, FillRectangle() de l'object Graphics :)

Et voir, en cherchant sur le net, la réponse aura surement déja été codée !!!
31/01/2010, 16h57
thor76160

merci pour vos réponses, je vais faire des recherches sur ca !
je précise mon problème, mais je ne suis pas encore sur que ce que j'ai fais marche...

Code:

public Array[,] Plateau = new Array[8, 8];

voila je cré un Array de 8 / 8. puis j'aimerais l'afficher dans mon windows form avec les cases colorées.
c'est la première étape de la création de mon programme, enfin disons que je n'ai même pas encore fini d'écrire les class ...
je vais chercher du coté de OnPaint() et FillRectangle(), merci ;)

Edit :

j'oubliais, comme je vais devoir cliquer pour jouer, j'aimerais cliquer dans une zone de ce tableau, est-ce possible ? a vrai dire j'aimerais récupérer les coornonnés !! (pour y placer mon pion)

De plus, oui c'est un sujet d'école, mais on la fait en algo et il n'est pas demandé de réaliser le programme, c'est donc devenu un travail personnel ;)
31/01/2010, 20h46
theMonz31

salut

pour faire simple, il faut que tu fasses un userControl.

Tu surcharges la methode OnPaint() pour y dessiner ton damier

Je ne saurais trop te conseiller de fournir dans ton userControl une méthode permettant de choisir le nombre de case en X et Y de ton damier.
Ainsi, tu seras beaucoup plus souple...

Après, tu as plusieurs options pour définir dans quelle case tu te trouves.

La première est de définir une region pour chaque case et chaque fois que la souris se déplace ou que tu cliques, tu recupères les coordonnées de la souris et tu as une méthode dans Region qui te dit (isVisible je crois) si le point passé à la méthode se trouve dans la région.

Deuxième option assez proche, quand tu as les coordonnées de la souris, tu regardes dans quel rectangle la souris se trouve en comparant ses coordonnées à la valeur min et max de chaque rectangle (en X et Y).

Perso, je prefère la solution Region mais bon, c'est une question de choix.

Pour moi, il est "impératif" de faire un userControl car:

1 - c'est plus propre
2 - si tu veux réutiliser ton damier dans un autre jeu, tu le feras facilement
3 - En surchargeant OnPaint(), tu te GARANTIS que lors d'un recouvrement de ta fenetre par une autre fenetre, ou toute manipulation sur ta fenetre, ton jeu sera bien redessiné !!!

Il y a un tutoriel sur le site sur la création de userControl. Je t'invite fortement à le lire pour comprendre certaines astuces et autres qui vont avec les userControles.

Bonne chance...
31/01/2010, 21h56
olibara

Citation:

Envoyé par theMonz31

Deuxième option assez proche, quand tu as les coordonnées de la souris, tu regardes dans quel rectangle la souris se trouve en comparant ses coordonnées à la valeur min et max de chaque rectangle (en X et Y).

Perso, je prefère la solution Region mais bon, c'est une question de choix.

Un rectangle a la methode Contains tout a fait appropriée ;)
01/02/2010, 10h59
thor76160

merci pou votre coup de main, j'essaierais dès que possible, je suis de nouveau en cours ^^
bonne journée à tous !

bonjour,

voici le seul code que j'ai trouvé sur le net et que j'ai réussi à adapter :

Code:

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
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace othello
{
    public partial class mainForm : Form
    {
        public const int dimCase = 70;
        public const int nbCase = 8;
 
        public mainForm()
        {
            InitializeComponent();
 
            CreateBitmap(dimCase, nbCase);
        }
 
        // création du damier en bitmap
        void CreateBitmap(int dimCase, int nbCase)
        {
            System.Drawing.Bitmap checks = new System.Drawing.Bitmap(dimCase * nbCase, dimCase * nbCase);
            for (int columns = 0; columns < nbCase; columns++)
            {
                for (int rows = 0; rows < nbCase; rows++)
                {
                    Color color;
                    if (columns % 2 == 0)
                    {
                        color = rows % 2 == 0 ? Color.FromArgb(34, 139, 34) : Color.FromArgb(0, 100, 0);
                    }
                    else
                    {
                        color = rows % 2 == 0 ? Color.FromArgb(0, 100, 0) : Color.FromArgb(34, 139, 34);
                    }
 
                    for (int j = columns * dimCase; j < (columns * dimCase) + dimCase; j++)
                    {
                        for (int k = rows * dimCase; k < (rows * dimCase) + dimCase; k++)
                        {
                            checks.SetPixel(j, k, color);
                        }
                    }
                    pictureBox1.BackgroundImage = checks;
                }
            }
        }
    }
}

maintenant je cherche à obtenir les coordonnées de chaque case en cliquant dessus (genre case abcisse 2, ordonnée 4) dans un messageBox.
comment puis-je procéder ?
il me semble que quelqu'un m'a parlé de déclaration de région ?

02/02/2010, 22h13
theMonz31
salut

tu crées 2 bitmaps...

Une comme tu la fais, et l'autre avec la valeur de la couleur qui croit de 1
à chaque fois

Appelons cette bitmap MaskBitmap;
Tu la crée comme tu fais pour le code que tu nous a présenté
mais pour les couleurs, tu fais

Code:

Color.FromArgb(0,columns,row);

cette bitmap, à chaque fois que tu veux savoir les infos de coordonnées,

tu fais dans la fonction OnMouseClick ou MouseMove:

Code:

Color c = MaskBitmap.GetPixel(e.Location);

et tu auras les coordonées colonne, row en faisant:
Code:

1 2 colonne = c.g; ligne = c.b;
ou l'inverse

Ya pas plus compliqué que celà à faire :)
02/02/2010, 23h43
thor76160

j'ai vraiment compris quedal O_o
02/02/2010, 23h54
olibara

Citation:

Envoyé par thor76160

j'ai vraiment compris quedal O_o

C'est en forgeant qu'on devient forgeron

Pour le reste nous somme confrontés a deux ecoles !
TheMonz the suggere d'utiliser la couleur de fond de ton Image pour determiner la case survolée

Personnelement je prefere le Rectangle.Contains()

Tu as un damier de 8x8 soit 64 cases = 64 rectangles

Avec la position de la souris tu parcours ces 64 case et tu fais un Contains
Quand contains te rends true tu as la bonne case
(on peut optimiser ce parcours mais c'est pas vraiment nécessaire dans ce contexte)
03/02/2010, 00h01
thor76160

serait-il possible d'avoir un petit exemple svp ?
ce serait sympa ^^
merci pour les conseils ;)
03/02/2010, 08h09
olibara

Lectures tres instructives

http://dotnet.developpez.com/cours/?page=csharp
http://tahe.developpez.com/dotnet/csharp/

j'ai réussi ! bon je sais, c'est mal de ne pas utiliser les outils qui sont à notre disposition, j'ai utilisé le solution bricolo ! lol

Code:

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
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace othello
{
    public partial class mainForm : Form
    {
        public const int dimCase = 70;
        public const int nbCase = 8;
 
        public mainForm()
        {
            InitializeComponent();
 
            CreateBitmap(dimCase, nbCase);
        }
 
        // création du damier en bitmap
        void CreateBitmap(int dimCase, int nbCase)
        {
            System.Drawing.Bitmap checks = new System.Drawing.Bitmap(dimCase * nbCase, dimCase * nbCase);
            for (int columns = 0; columns < nbCase; columns++)
            {
                for (int rows = 0; rows < nbCase; rows++)
                {
                    Color color;
                    if (columns % 2 == 0)
                    {
                        color = rows % 2 == 0 ? Color.FromArgb(34, 139, 34) : Color.FromArgb(0, 100, 0);
                    }
                    else
                    {
                        color = rows % 2 == 0 ? Color.FromArgb(0, 100, 0) : Color.FromArgb(34, 139, 34);
                    }
 
                    for (int j = columns * dimCase; j < (columns * dimCase) + dimCase; j++)
                    {
                        for (int k = rows * dimCase; k < (rows * dimCase) + dimCase; k++)
                        {
                            checks.SetPixel(j, k, color);
                        }
                    }
                    damier.BackgroundImage = checks;
                }
            }
        }
 
        private void damier_MouseClick(object sender, MouseEventArgs e)
        {
            int abs = ((e.X / dimCase) + 1);
            int ord = ((e.Y / dimCase) + 1);
 
            MessageBox.Show(abs.ToString() + ", " + ord.ToString());
        }
    }
}

voici une nouvelle version de ma fonction CreateBitmap()

Code:

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
private void CreateBitmap()
{
            System.Drawing.Bitmap checks = new System.Drawing.Bitmap(dimCase * nbCase, dimCase * nbCase);
            for (int columns = 0; columns < nbCase; columns++)
            {
                for (int rows = 0; rows < nbCase; rows++)
                {
                    Color color;
                    if (columns % 2 == 0)
                    {
                        color = rows % 2 == 0 ? vertClair : vertFonce;
                    }
                    else
                    {
                        color = rows % 2 == 0 ? vertFonce : vertClair;
                    }
 
                    // est-ce une case vide ou y-a-t'il un jeton ?
                    if (!lePlateau.existePion(columns + 1, rows + 1))
                    {
                        // case vide
                        for (int j = columns * dimCase; j < (columns * dimCase) + dimCase; j++)
                        {
                            for (int k = rows * dimCase; k < (rows * dimCase) + dimCase; k++)
                            {
                                checks.SetPixel(j, k, color);
                            }
                        }
                    }
                    else
                    {
                        // case occupée
                        string couleur = lePlateau.cherchePion(columns + 1, rows + 1).getJoueur().getCouleur() + ".png";
                    }
                    damier.BackgroundImage = checks;
                }
            }
        }

j'aimerais appliquer l'image dont le chemin est contenu dans la variable "couleur" à plusieurs des cases de mon damier. comment puise-je faire ?
la fonction checks.Image() n'est pas dispo :s

merci :)

04/02/2010, 14h22
olibara

Fais deja une recherche sur DrawRectangle !!

je viens de penser à un petit probleme.
bon, mon damier est composé de 2 couleurs, vert clair et vert foncé.
j'ai 2 images png, un jeton blanc et un jeton noir (avec du transparents autour du jeton, pour ne pas avoir une couleur d'ensemble).
serait-il possible d'afficher une image par dessus mon damier mais dans le même bitmap ? comme plusieurs calque sous photoshop par exemple, vous voyez ?

le soucis c'est qu'avec la méthode que j'ai commencé avant, je n'aurais pas de fond verts autour de mon jeton >_<

EDIT :

voici la nouvelle version de ma fonction.
j'aimerais reconstituer l'image des case occupée par un jeton pixel par pixel, lorsque le fond est transparent, on met la couleur verte, sinon on met le jeton pixel après pixel.

Code:

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
// création du damier en bitmap
        private void Plateau()
        {
            Color ColorPixelImgJeton;
 
            Bitmap checks = new Bitmap(dimCase * nbCase, dimCase * nbCase);
            for (int columns = 0; columns < nbCase; columns++)
            {
                for (int rows = 0; rows < nbCase; rows++)
                {
                    Color color;
                    if (columns % 2 == 0)
                    {
                        color = rows % 2 == 0 ? vertClair : vertFonce;
                    }
                    else
                    {
                        color = rows % 2 == 0 ? vertFonce : vertClair;
                    }
 
                    // est-ce une case vide ou y-a-t'il un jeton ?
                    if (!lePlateau.existePion(columns + 1, rows + 1))
                    {
                        // case vide
                        for (int j = columns * dimCase; j < (columns * dimCase) + dimCase; j++)
                        {
                            for (int k = rows * dimCase; k < (rows * dimCase) + dimCase; k++)
                            {
                                checks.SetPixel(j, k, color);
                            }
                        }
                    }
                    else
                    {
                        // case occupée
                        ImgJeton = new Bitmap(imagesPath + lePlateau.cherchePion(columns + 1, rows + 1).getJoueur().getCouleur() + ".png");
                        for (int j = columns * dimCase; j < (columns * dimCase) + dimCase; j++)
                        {
                            for (int k = rows * dimCase; k < (rows * dimCase) + dimCase; k++)
                            {
                                ColorPixelImgJeton = ImgJeton.GetPixel((j - (columns * dimCase)), (k - (rows * dimCase)));
                                if ((ColorPixelImgJeton.A == 0) && (ColorPixelImgJeton.R == 255) && (ColorPixelImgJeton.G == 0) && (ColorPixelImgJeton.B == 0))
                                {
                                    checks.SetPixel(j, k, color);
                                }
                                else
                                {
                                    checks.SetPixel(j, k, ColorPixelImgJeton);
                                }
                            }
                        }
                    }
                    damier.BackgroundImage = checks;
                }
            }
        }

j'ai réussi à afficher les jetons où je le voulais, mais le résultat est un peu moche, les jetons sont entourés par une fine couche de pixels. la conversion en transparence est donc imparfaite.

Voir 40 message(s) de cette discussion en une page