Optimisation Canvas avec beaucoup d'éléments appli mobile

Questions à propos du GUI, y compris la partie script.
Avatar de l’utilisateur
DevAmat
Messages : 435
Inscription : 23 Nov 2016 11:50

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par DevAmat » 18 Août 2018 19:34

Je pense que tu dois chercher une autre solution technique. Après tout un nombre est composé de x chiffre(s) de 0 à 9.

Avatar de l’utilisateur
Liven
Messages : 268
Inscription : 30 Nov 2017 01:48

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par Liven » 18 Août 2018 21:43

Une solution pour mettre du texte modifiable in game sans passer par l'UI est le composant Text Mesh (à ajouter sur n'importe quel objet).

Le TextMesh Pro est censé remplacer les textes UI et le Text Mesh, mais j'ai jeté un œil vite fait et n'ai pas trouver pour l'aspect hors UI. Cependant je pense qu'une solution à base de TextMech Pro est la plus solide sur le long terme. à toi de creuser.

PS : en cas de problème de flou, joue avec la position z et la taille de caractère

Avatar de l’utilisateur
Alesk
Messages : 2303
Inscription : 13 Mars 2012 09:09
Localisation : Bordeaux - France
Contact :

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par Alesk » 18 Août 2018 21:44

Il y a peut-être moyen d'optimiser ton truc.

Combien peut-on voir de nombres au maximum à un instant donné ?

qwerty31
Messages : 30
Inscription : 15 Nov 2016 17:38
Contact :

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par qwerty31 » 18 Août 2018 22:02

@Liven, merci de l'info, je vais voir si je peux passer là-dessus sans problème...

@Alesk, en gros c'est une quinzaine de nombres visibles en même temps, mais souvent on voit des "portions de nombres" lorsqu'on se déplace sur la grille... Si tu as un moyen ça m'intéresse ;-)

Voilà à quoi ça ressemble durant le jeu en gros :

Image
Mon premier jeu (gratuit) sur Android, réalisé avec Unity3D, Touch'em All ! est disponible sur le Play Store. N'hésitez pas à le tester ! :hehe:

Avatar de l’utilisateur
Alesk
Messages : 2303
Inscription : 13 Mars 2012 09:09
Localisation : Bordeaux - France
Contact :

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par Alesk » 18 Août 2018 22:52

Alors oui, j'ai un moyen.

Avec cette méthode, tu n'auras toujours que les cases des nombres visibles à l'écran, pas plus.
L'idée c'est de pas déplacer la caméra au dessus de ta grille gigantesque, mais de repositionner les cases et de mettre à jour leur contenu pour donner l'impression que c'est bien le cas.
Il faut pour cela avoir un array à deux dimensions qui contient l'état de ta grille globale, et en fonction des coordonnées d'affichage, tu déduis quels nombre sont à afficher et quel est le décalage à donner aux cases affichées pour donner l'illusion d'un déplacement.

Ainsi tu n'auras jamais plus de cases que celle qui tiennent à l'écran en entier ou partiellement.
Je te fais l'explication de mémoire, donc imprécise, mais je sais que ça fonctionne car je l'ai déjà fait ;)

Disons que tu stockes la position d'affichage dans un Vector3 nommé position_camera. Comme tu connais la taille de tes cases, tu peux convertir ça en coordonnées de cases, simplement en arrondissant la position.

Code : Tout sélectionner

int case_x = Mathf.FloortoInt(position_camera.x / taille_case);
int case_y = Mathf.FloortoInt(position_camera.y / taille_case);
maintenant, case_x et case_y sont les index dans l'array 2D de la première case à afficher en haut à gauche de l'écran, mais pas tout à fait... car il faut tenir compte du fait que l'on se réfère à la caméra, qui est centrée, donc il faudrait soustraire avant la moitié de la largeur et de la hauteur de l'écran, converties en worldcoordinates, à position_camera.x et position_camera.y avant de les mettre dans ce calcul... mais ça peut aussi se faire après, avec un décalage que tu règles dans un second temps.

Donc là tu connais les index des cases, tu à juste à faire deux boucles imbriquées pour parcourir l'array 2D afin de chopper les valeurs des cases à afficher, et mettre à jour les valeurs affichées dans tes éléments d'UI (donc juste 4x6 si on se réfère à ton screenshot)

Ensuite, pour simuler le le fait qu'on se déplace graduellement, il suffit de rajouter un décalage à la position du canvas, ce décalage correspond tout simplement à position_camera.x - case_x * taille_case et position_camera.y - case.y * taille_case

Et c'est tout.

à partir de là, tu n'as plus qu'à faire varier position_camera.X et position_camera.y, et tu auras ta grille affichée correctement, et avec uniquement le nombre minimale de cases nécessaires pour remplir l'écran.

A noter aussi que les doubles boucles imbriquées pour mettre à jour le contenu de toutes les cases n'est nécessaire que lorsque case_x ou case_y changent d'un Update à l'autre, donc si tu conserves leurs valeurs dans des variables tampon, ça te permettra d'optimiser encore plus, pour ne faire appel à a phase de mise à jours du contenu des case que lorsque c'est vraiment nécessaire.

Bien entendu, avec cette méthode, aucune donnée du jeu ne peut être associée directement aux cases affichées, il faut tout gérer dans des arrays 2D.

Voilàààà, j'espère que c'est assez clair.

qwerty31
Messages : 30
Inscription : 15 Nov 2016 17:38
Contact :

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par qwerty31 » 19 Août 2018 17:39

Super, merci beaucoup pour cette solution, je vais essayer de la croiser avec l'utilisation de TextMesh pour tenter d'obtenir un truc le plus optimisé possible. Merci beaucoup à tous, je vais mettre ça en place et je vous tiens au courant ;-)
Mon premier jeu (gratuit) sur Android, réalisé avec Unity3D, Touch'em All ! est disponible sur le Play Store. N'hésitez pas à le tester ! :hehe:

Avatar de l’utilisateur
Alesk
Messages : 2303
Inscription : 13 Mars 2012 09:09
Localisation : Bordeaux - France
Contact :

Re: Optimisation Canvas avec beaucoup d'éléments appli mobile

Message par Alesk » 19 Août 2018 20:11

Avec ma méthode, l'utilisation de TextMesh devient superflue... :langue2:

Répondre

Revenir vers « L'interface GUI »