Optimisation Affichage Map Iso avec Images

Version imprimable

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

26/05/2010, 23h16
Jerede

Optimisation Affichage Map Iso avec Images

Bonsoir,

Je suis en train de réaliser un éditeur de Carte et j'aurais besoin de vos précieux conseils.

Tout d'abord, mon éditeur fonctionne à peu près comme ça :
La carte est une carte isométrique
Les images peuvent dépasser de la Cellule, ce qui force le redessinage de la Carte à chaque placement et on le ressent au niveau des performances

J'ai placé le Calcul de l'ID de la cellule ou est la Souris et le Chargement de la Carte dans un Thread afin que ça n'empêche pas les actions de l'utilisateur et que ça paraisse plus fluide.

J'ai une Class Cells, une Class Map qui contient une List de Cells
Donc pour rafraichir ma map, ça se passe à peu près comme ceçi:
For each cell as cells in map.celllist
cell.draw(gfx1)
next

Qui dessine sur un Graphics puis l'assigne à ma picturebox

Donc pour l'instant tout ça tourne assez bien, même si je doute de la parfaite optimisation de la chose.

J'aurais voulu afficher un aperçu de l'objet qui va être placé lors du survol de la Carte.

Quelle serait la meilleur méthode ?

Une pictureBox avec l'image de l'objet, empêcherait l'utilisateur de cliquer

Je pourrais dessiner dans le Graphics sans l'attribuer à la Bitmap de façon à ce qu'il ne soit que "temporaire". Mais vu qu'a chaque déplacement de la Souris je dois rafraichir la PictureBox ça prend pas mal de temps.

EDIT: J'aimerai séparer la couche Sols de objets, pour ne pas rafraichir les deux à chaque fois lorsque ce n'est pas utile.
Y'a t'il possibilité de superposer deux bitmaps ?
Ou deux picturebox feront l'affaire ?
Cela posera des problèmes au niveau de la transparence, non ?

Merçi d'avance pour vos réponses
27/05/2010, 10h55
methylene

Bonjour,

Citation:

Quelle serait la meilleur méthode ?

Une pictureBox avec l'image de l'objet, empêcherait l'utilisateur de cliquer

Je pourrais dessiner dans le Graphics sans l'attribuer à la Bitmap de façon à ce qu'il ne soit que "temporaire". Mais vu qu'a chaque déplacement de la Souris je dois rafraichir la PictureBox ça prend pas mal de temps.

Une petite photo ou screenshot à l'appui serait sympa, je ne comprends pas trop ton problème.

Citation:

Cela posera des problèmes au niveau de la transparence, non ?

La transparence d'une image par rapport à une autre va en effet poser un problème. En gros Vb.net ne gère pas la transparence, où du moins il ne gère que une "fausse transparence", c'est à dire que si tu as une image avec un fond transparent, il va attribuer attribuer à ton fond de couleur transparente, la couleur du backcolor, ou la coulor définit comme transparente sous vb (transparency.key il me semble).

Si tu veux faire de la transparence entre 2 images, tu vas devoir soit utiliser un programme (ou bout de code de quelqu'un), soit devoir le faire par toi même.

Le principe n'est pas très compliqué, le but est de parcourir pixel par pixel l'image en arrière plan, et d'attribuer au fond de l'image de premier plan (couleur transparent) exactement la même couleur pour chaque pixel correspondant.

En gros redessiner dans le fond de l'image du premier plan l'image d'arrière plan.
27/05/2010, 11h58
Jerede

Oui, il était tard et je m'aperçois que je me suis mal exprimé.

J'ai dessine sur une Bitmap, Bitmap que j'assigne à une PictureBox.

J'aimerais faire un "Dessin temporaire" ( colorier le contour de la case par exemple ) lorsque la souris est au dessus.

Quels sont les solutions ?

*Sachant que si je dessine sur la Bitmap ce ne sera pas temporaire
*Créer une autre pictureBox et dessiner le dessin temporaire dessus ( empêche les clics sur ma Picturebox principal & pas de transparence :( )
*Dessiner sur la PictureBox directement sans Bitmap puis faire un Refresh ( mais cela entraine un clignotement :cry:)

J'espère que c'est moins confus :oops:
27/05/2010, 12h12
Geo2A

Bonjour,

La solution est de dessiner le contour en mode XOR, mais ce n'est pas géré avec GDI+ il faut passer par les API GDI32.
Voir l'API SetROP2

Ok, maintenant je comprends ce que tu veux.

Comme t'as dit GeO tu peux le dessiner en mode XOR, sinon je te donne un code un peu plus compliqué mais qui utilise directement GDI+ :

Pour le tester, crées juste un bouton sur un form :

Tu importes les librairies avant ta "Class"

Code:

1
2
3
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Drawing.Imaging

Tu déclares dans ta Class :

Code:

1
2
3
4
5
    Friend WithEvents PictureBox1, Picturebox2 As PictureBox
 
    Public backimg = New Bitmap(104, 104)
    Public g As Graphics = Graphics.FromImage(backimg)
    Public img As Bitmap

Dans le click du bouton :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        'Création et ajout à la collection "Controls" de 2 picturebox
        PictureBox1 = New PictureBox
        Picturebox2 = New PictureBox
        Me.Controls.Add(PictureBox1)
        Me.Controls.Add(Picturebox2)
 
        'Configuration des picturebox
        PictureBox1.Size = New Size(100, 100)
        Picturebox2.Size = New Size(104, 104)
        PictureBox1.Location = New Point(40, 40)
        Picturebox2.Location = New Point(38, 38)
        Picturebox2.BringToFront()
        PictureBox1.BringToFront()
 
        'Insertion de ton image dans la picturebox1
        img = New Bitmap(100, 100)
        img = Image.FromFile("C:\Documents and Settings\aufrancois\Bureau\Hiver.jpg")
        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
        PictureBox1.Image = img

Quand tu click sur le bouton, ton image apparaît .

Tu rajoutes les évènements pour la picturebox1, quand la souris passe dessus et quand elle s'en va :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
''Quand on l'enlève la souris de l'image
    Private Sub PictureBox1_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles PictureBox1.MouseLeave
 
        'Quand la souris quitte l'image, on dessine une image "vide", et on l'assigne à la picturebox2
        Dim img = New Bitmap(104, 104)
        Picturebox2.Image = img
 
    End Sub
 
'Quand on vient glisser la souris sur l'image
    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
 
        Dim brush As New SolidBrush(Color.Turquoise)
 
        Picturebox2.Size = New Size(104, 104)
        'On remplit l'image d'un fond couleur turquoise (Brush)
        g.FillRectangle(brush, 0, 0, 104, 104)
        'On dessine un rectangle noir en "contour"
        g.DrawRectangle(Pens.Black, 0, 0, 103, 103)
        'On assigne l'image à la picturebox2
        Picturebox2.Image = backimg
 
    End Sub

27/05/2010, 16h05
Jerede

Le Problème c'est qu'il ne m'est pas possible d'appliquer ta technique methylene.

Ma carte ressemble à cela, dans une seule et unique picturebox
http://img405.imageshack.us/img405/1615/testnld.jpg

Je vais essayer de me renseigner pour le mode XOR
27/05/2010, 16h08
methylene

Qu'est-ce qui t'empêche d'ajouter davantage de contrôles (picturebox par exemple ?
27/05/2010, 16h38
Jerede

Si j'ajoute par exemple dans une picturebox, une case remplie comme sur l'image ça va gêner les Clics sur ma PictureBox principal.
27/05/2010, 16h42
methylene

Mouais je comprends pas vraiment ce que tu veux :)

Citation:

Si j'ajoute par exemple dans une picturebox, une case remplie comme sur l'image ça va gêner les Clics sur ma PictureBox principal

Tu peux aussi la faire apparaître ailleurs, elle n'est pas nécessairement obligé d'apparaître exactement au même emplacement que ta picturebox principale.

C'est surtout que je ne vois pas graphiquement ce que tu veux.
27/05/2010, 16h47
Jerede

Dessiner l'image de l'objet ( qu'il va poser sur la Carte ) sans que cela gène son Clic sur la Carte sachant que l'image de l'objet qu'il va poser varie en fonction de la position de la Souris est donc permettre de redessiner tout ça rapidement
27/05/2010, 16h52
methylene

Donc la carte est celle que tu as mise plus haut si je comprend bien.

L'utilisateur va donc pouvoir faire glisser une image sur cette carte ?
Cette image est donc plus petite que la carte (genre une photo ?) ?
Tout cela avec un le bouton gauche de la souris maintenu enfoncé ?
27/05/2010, 17h09
Jerede

Voila, c'est ça :)

L'image est un "objet à placer sur la Carte" donc inferieur à la Taille de la Carte

Comme çela, Impr écran, prend pas ma Souris mais elle est bien au dessus du morceau de route

http://img138.imageshack.us/img138/3522/testiv.jpg
27/05/2010, 17h19
methylene

En effet, c'est plus compliqué que ce que je pensais, et à l'heure actuelle quand tu lâche le bouton de la souris, ton image reste à la position où tu la mise ?
27/05/2010, 17h45
Jerede

Hum, là je selectionne une Image dans la ListView, puis quand je survol la Carte, l'image s'affiche au dessus de la Cellule correspondante.

Je fais ça en dessinant sur la PictureBox et non sur le Bitmap et un refresh à chaque fois que la Cellule ciblé change, mais le Refresh entraine un léger clignotement :calim2:
27/05/2010, 18h43
Geo2A

Bonjour,

Comme pseudo tu aurais du choisir Sim City !!!

TU fais comme tu veux mais au risque de me répéter un petit peu en GDI+ t'es pas sortit de l'auberge, l'humble avis d'un gars qui fait de la prog pour de la cartographie depuis 20 ans.
27/05/2010, 18h45
Jerede

Tu me conseille DirectX ou OpenGl ?
27/05/2010, 18h52
Geo2A

Oui (mais je ne pratique pas)

Ou mais je ne connais pas tu choisi de t'orienter vers WPF en vb.Net

Pour ma part je reste sur du GDI32 mais c'est pas trivial, et il me semble que ton orientation jeux est plus DirectX ou autre
27/05/2010, 19h02
Jerede

Je ne compte pas allez jusqu'a faire un Jeu, juste un éditeur de Carte.
DirectX c'est plutôt compliqué :mrgreen:

En quoi WPF m'arrangerai sur ce coup là ?
(J'ai essayé WPF mais j'avais des problèmes avec leur Système de TreeView :/)
27/05/2010, 19h15
Geo2A

Bonjour,

Parce que d'après ce que j'ai compris WPF tire profit de l'accélération matérielle des cartes graphiques.
27/05/2010, 21h48
Graffito

Citation:

En quoi WPF m'arrangerai sur ce coup là ?

Contrairement à Winforms, WPF gère bien la transparence.

On peut superposer des images avec des transparences.
Ce qui est est particulièrement performant quand on déplace un objet : on ne retrace ainsi l'ensemble qu'une fois qu'on lâche l'objet.

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