Prb fluidité d'une animation dans une picturebox

Question

Bonjour, 
J'ai dans une picturebox des objets (circle, line et text) que l'utilisateur peut déplacer lorsqu'il clic dessus.
Le code est un peu bourrin : il efface la picturebox et la redessine à chaque déplacement d'un pixel de la souris.

Si on execute le prog tout seul, ça va. 
Mais je m'en sert comme control ActiveX dans une autre appli et là, ça rame à mort lors du déplacement des objets (plus la fenêtre est grande et plus ça rame)!! 

Aujourd'hui on arrive à faire des supers effets 3d et moi je ne peux même pas déplacer des cercles sur un fond blanc ..?........... ;-)

J'ai pensé utiliser DirectDraw mais je suis noob en la matière et ça me parait un peut excessif pour ce que je veut faire.

Si vous avez des idées, merci....

jmfmarques · Answer

Bonjour,

Quel code (on le le voit pas et il est peut-être perfectible) utilises-tu pour effectuer ces déplacements ?

jmfmarques · Answer

Par ailleurs : comment fais-tu pour cliquer sur des "objets" (puisque tu dis  "l'utilisateur peut déplacer lorsqu'il clic dessus") circle, et line (qui ne réponsent pas aux événements souris ? 
Tu les as mis dans un container lui-même contenu dans ta pictureBox, je suppose donc... et c'est ce container que tu déplaces ?
En résumé : il nous faut plus de précisions et le code utilisé, pour y voir clair.

cs_DARKSIDIOUS · Answer

Par "ca rame à mort", tu veux dire quoi ?

Tes objets se déplacent lentement ou ca clignote dans tout les sens ?

Pour le clignotements, c'est un problème bien connu : il faut utiliser un système de double-buffer : tu dessine dans un buffer non visible, puis tu copie l'image finale du buffer dans le buffer principal (celui qui affiche l'animation), ainsi, tu n'a plus de clignotement puisque le clignotement apparaît lorsque tu efface l'image puis tu la retrace.

daddycool76 · Answer

Merci de vos réponses,

je met mon code en téléchargement à cette adresse pour que vous y voyez plus clair.
http://isi-challenge.cybergraphik.net/rgp.zip 
(Faite un clic droit dans la fenetre exe du prog pour faire bouger les objets)

En fait je n'ai pas de problème de scintillement. Le problème est que lorsque l'on déplace un objet circle avec la souris, le mouvement est saccadé. Plus le mouvement de la souris est rapide et plus la fenêtre est grande, plus ce problème est visible.

Je n'utilise pas de container. Tous les objets dessinés dans ma pictureBox sont stockés sous formes de tableaux contenant leurs coordonnées.
Lorsque l'événement click() se fait je compare les coordonnées du click avec mes tableaux. Si ces coordonnées sont (quasi) équivalentes alors j'autorise le déplacement de l'objet.

Lorsque le déplacement est autorisé, la pictureBox se rédessine en tant réél (a chaque mouvement d'un pixel de la souris [evenement mouseMove])  avec les nouvelles coordonnées des objets.

Ce n'est clairement pas optimisé puisqu' on redessine toute la pictureBox mais c'est plus simple . 

Ps : C'est d'autant pire lorsque je m'en sert de controle ActiveX dans mon appli principale.

jmfmarques · Answer

Oui,
Je viens d'y jeter un coup d'oeil.


 


Comme tu t'y prends là, je vois en effet mal comment tu peux attendre des performances !


Tu dessines toute ta fenêtre, pixel par pixel .... et quand elle est grande, ma foi... celà fait beaucoup de pixels...


C'est toute la philosphie, qui est complètement à revoir.


Au lieu de redessiner tes "objets", tu ferait beaucoup mieux de "promener" des contrôles images... voire d'utiliser carrément une superposition avec transparence, d'objets à placer ...

Si tu gardes le mécanisme que tu as défini là : je ne vois rien qui pourrait vraiment apporter une amélioration sensible !

daddycool76 · Answer

Ok, je me doutais effectivement du problème. Je vais revoir ça....

Merci !

jmfmarques · Answer

Ouille !

Je viens seulement de m'apercevois que tu as donné (ce qui n'arrange pas du tout les choses) la valeur true à la propriété autoredraw de ta pictureBox !!

Il est clair que tu gagnerais :

à mettre cette propriété à false
à ajouter un cls ici :

Public Sub ReDraw(ByRef Sommet() As Variant, ByRef Liens() As Variant, pic As PictureBox)
    'on redessine tout le tableau
    Dim i As Integer, j As Integer
    pic.Cls
    'on creer les liens
    For i = 1 To UBound(Liens, 2)
etc...

Et, bien sur, à faire en sorte qu'il y ait un 1er affichage au début (tu peux pour l'instant le provoquer par un simple clic sur la form toute blanche au départ)

De cette façon, ti gagneras beaucoup en vitesse de suivi de ta souris, mais perdras en clignotements divers, que tu devrais pouvoir atténuer en jouant de la fonction ValidateRect de l'Api de Windows.

Voilà de quoi bûcher, mais je reviens vers toi cet après-midi pour t'exposer une philosophie totalement différente et plus orthodoxe (plus légère égalemen) que celle que tu as mise en oeuvre.

Bon appétit.

jmfmarques · Answer

Un petit ajout à ce qui précède si tu ne veux pas qu'il soit nécessaire de cliquer une 1èere fois pour y "voir" clair :

Private Sub Form_Activate()
  ReDraw Sommet(), Liens(), Me.Picture1
End Sub

Pour le reste (exposé d'une autre philosophie)... tu dis...

daddycool76 · Answer

Super !
Effectivement en passant la proprieté AutoRedraw à False, ça accélère bien l'animation (surtout avec l'activeX). Par contre il y a un petit problème de scientillement

En ce qui concerne l'autre philsophie, je suis partant bien sûr !!!

jmfmarques · Answer

C'est sur : le problème de scintillement est difficilement évitable (je te l'avais dit) dès lors que l'on efface et recommence... 
Sauf peut-être en utilisant la fonction Validaterect de l'Api de Windows...

Mais ne te casse pas trop la tête avec çà ...

Je fais une petite sieste (je suis vieux) et reviens t'exposer une autre philosophie.
A +

daddycool76 · Answer

Ok, ben moi c'est mon fiston qui va faire une sieste ;)


a toute...

cs_DARKSIDIOUS · Answer

C'est toujours sympa de voir qu'on parle dans le vide...

daddycool76 · Answer

Meuuuuuuuu non !
C'est vrai que tu as évoqué le problème de scintillement...
Par contre je ne sais pas ce que tu entends par "double buffer"...
Est-ce que ce sont deux picturebox (une visible et une invisible)?
Dans ce cas cela ne va pas-t-il faire encore plus ralentir l'animation ?

Ps : Merci à tous ceux qui prenne le temps de répondre

cs_DARKSIDIOUS · Answer

Tout à fait, le truc c'est de tracer dans un picturebox (par exemple) temporaire, avant de faire un PaintPicture sur ton usercontrol, ca ralentira bien moins qu'un autoredraw qui fait retracer l'affichage à chaque pixel modifié (tu m'étonne que ca ramait !), et ca évitera ton problème de scintillement.

jmfmarques · Answer

Bonjour Nicolas,

Son problème était ici ailleurs, hélàs, et l'utilisation d'un double buffer, utile lorsque l'on déplace des contrôles, ne pouvait aller : il ne déplace rien : il repeint !
Il n'est pas possible, lorsque l'on repeint, d'utiliser cette méthode puisque :
Si l'on utilise autoredraw = True : il faudra attendre que tout se repeigne
Si on met autoredraw  à False, il faudra faire un CLS et alors : ce CLS s'appliquerait également au double Buffer, avec le même effet de scientillement, bien sur...
Ne pas mettre le CLS conduirait, par ailleurs, à une "trainée" plus moche encore jusqu'à stabilisation.
Le double buffering est certes par contre utile lorsque l'in déplace une image (un contrôle image)


Ouille ! je n'ai pas commencé ma sieste...

cs_DARKSIDIOUS · Answer

T'as rien compris jacques : le double-buffer permet de tracer l'image AVANT de la redessiner à l'écran, y'a pas de notion de déplacement d'image ou de contrôle ! C'est une technique générale, utilisée dans n'importe quel composant graphique digne de ce nom.

Donc si dans la méthode repaint de son usercontrol, il trace l'image dans un buffer temporaire, puis qu'il l'applique dans son usercontrol, plus de scintillement (et plus de rapidité aussi car à chaque tracé (lignes, pixels ou autre), il n'est pas nécessaire de raffraichir le usercontrol (ce que fait l'autoredraw), mais uniquement enregistrer les nouveaux pixels dans le buffer.

Le repaint est automatiquement appelé à chaque fois qu'un contrôle doit être raffraichit (une fenêtre qui passe par dessus, lors du déplacement d'un contrôle, etc.), donc il est tout à fait possible de simuler un auto-redraw de façon bien plus rapide et optimisé grâce à l'événement repaint.

Tout les problèmes de scintillement qui peut y avoir, c'est à cause qu'il efface puis retrace son graphique à chaque raffraichissement, avec le double-buffer, plus besoin d'effacer : il trace par dessus l'ancienne image le contenu du buffer.

Crois-moi, j'utilise le doublebuffering depuis belle lurette, que ce soit pour des controles activeX ou pour des applications graphiques, et niveau scintillements, y'a plus rien, et niveau rapidité, j'obtiens d'excellentes performances (bien entendu, il faut savoir tracer optimisé : API voir manipulation directe de la mémoire au lieu d'accèder à chaque pixels, avec ma classe de gestion d'image par exemple, et qu'on ne vienne pas me dire encore que vb est lent !).

:-p

jmfmarques · Answer

Je sais bien tout celà, Nicolas...
Mais va voir son Zip... et tu comprendras...

cs_DARKSIDIOUS · Answer

Tiens d'ailleurs, une excellente source montrant les bénéfices du double-buffering, tu remarquera qu'il n'y a aucune notion de déplacement de contrôle au autre, et ca montre également les limites (très fines d'ailleurs !) de l'autoredraw :

http://www.vbaccelerator.com/home/VB/Code/Libraries/Graphics_and_GDI/Flicker_Free_API_Drawing/article.asp

daddycool76 · Answer

J'ai essayé le double buffer avec ce code :

Form2.Picture1.PaintPicture Form1.Picture1.Image, 0, 0

Cela ne donne rien, c'est comme si l'image de Form1.picture1.Image était vide.  Pourtant à l'écran on voit bien que ce n'est pas le cas. 
J'ai l'impression  que les éléments dessinés avec les méthodes Form1.picture1.line (circle etc..) ne sont pas pris en compte...

cs_DARKSIDIOUS · Answer

Il faut par contre que l'auto-redraw de ton Picture1 de ta Form1 soit à true, sinon c'est normal : un picturebox, s'il n'est pas visible, et que l'auto-redraw n'est pas activé, ne garde pas son graphique !

jmfmarques · Answer

Bon...
Je ne veux surtout pas gêner ce qui est en cours.
J'exposerai donc l'autre philosophie après que cette première étape sera terminée.

daddycool76 · Answer

Ok ça roule !!
Toutefois avec la méthode du double buffer je perd un poil en fluidité.... 
Mais je suis partant pour tout essayer. Quelle serait ta méthode jmf marques?

Merci à toute.

jmfmarques · Answer

Juste à haute voix :


Tes 3 petits cercles SE1, SE2 et SE3 ne changent ni de taille, ni de couleur, ne de texte
Ils pourraient être avantageusement remplacés par 3 icônes avec transparence ou 3 petits gifs avec transparence
Il te suffirait alors :
- d'utiliser ces 3 images dans 3 contrôles images
- de faire du drag and drop sur ces 3 images
- d'accompagner ton drag and drop du déplacement de trois lines (controle line... pas dessin d'une ligne... pour éviter de dessiner). Il suffit pour celà de modifier X2 et Y2 de ton contrôle Line en fonction de la position de l'image balladée..
- de donner bien évidemment (zorder) le 1er plan à tes images, de sorte à ce que tes traits ne les traversent pas
- il te faudrait bien sur écrire et incliner tes textes, comme tu le fais déjà, mais sans tout repeindre ! 

La fluidité sera très bonne et ne cligonteront que tes textes (et très légèrement), entre les CLS, tout le reste restant stable.

Tu peux également subordonner à ces images transparentes des images avec une couleur de ton choix transparente et utiliser la fonction TransparentBlt de l'API de Window

Le seul moment où il te faudra faire un dessin supplementaire, sera celui de la sélection d'un "rond", puisqu"il te faudra l'entourer d'un "anneau" vert, mais comme rien ne se déplace à ce moment là ... tout sera parfait.

Voilà

cs_DARKSIDIOUS · Answer

Pas d'accord avec toi jacques : ca bouffera de la mémoire pour rien, et le tracé de cercle en code est sûrement largement plus optimal (niveau utilisation CPU) que de gérer le tracé de 3 contrôles Images !

Je vois vraiment pas qu'est-ce qui pourrait rendre l'affichage non fluide :(si ce n'est l'utilisation uniquement des fonctions de vb et non les fonctions de l'API windows) : je crée des contrôles activeX graphique depuis belle lurette qui ont un affichage bien plus complexes (des centaines de cercles/rectangles/polygônes + textes, avec des tailles de contrôles très différentes), et je n'ai pas de problème de performances (en même temps, j'utilise uniquement les API Windows, car les fonctions vb de tracé sont plus lentes), avec des opérations assez complexes : des dégradés qui changent selon la position de la souris par exemple) avec transparence des pixels sous la souris, le CPU monte à 100%, mais l'affichage reste très fluide.

Essaye de passer tout tes contrôles en pixels (propriété scalemode) au lieu de twips, peut-être que c'est cà qui coûte du temps (conversion twips<->pixels), mais j'en doute !

daddycool76 · Answer

Je suis déjà en mode pixel. En fait la fluidité est bonne lorsque mon prog est en mode executable. Par contre lorsque je m'en sers en controle ActiveX les déplacements sont un peu sacadés.

Pour rentrer un peu dans les détails j' utilise ce controle ActiveX dans le logiciel "solidworks" (logiciel 3d de Conception Assisté par Ordinateur [CAO]) qui possede une interface de programmation VBA.
C'est lorsque j'affiche ce controle dans cette application que les mouvements sont un peu moins fluides.

En tout cas avec vos conseils j'ai gagné en fluidité !!

jmfmarques · Answer

Bon...
Je vais dire ici amen, mais un amen très loin d'être convaincu...

cs_DARKSIDIOUS · Answer

oui moi aussi : avec un contrôle aussi basique, c'est pas normal que ce soit long, mais ca peut venir de solidworks aussi : peut-être qu'il gère mal les activeX !

daddycool76 · Answer

Rebonjour, en fait la méthode de JmfMarques va être un peu plus difficile à mettre en oeuvre.
Car les cercles peuvent être de tailles variables en fonction du texte affecté (C'est l'utilisateur qui définit le texte, j'ai mis SE1, SE2... mais cela peut être n'importe quoi).
 
Il faudrait donc "Grossir" les icones de cercles. Cela doit être évidemment possible...
 
Pour l'instant je vais garder la méthode actuelle même si elle n'est clairement pas optimisée...

En tout cas merci beaucoup pour vos conseils, @ +

Prb fluidité d'une animation dans une picturebox

28 réponses

Votre réponse

Discussions similaires