Réalisation d'une image pour le design d'un jeu
Baluze -
Nous sommes en train, ICI, sur CCM/Codes Sources, de créer un jeu sous Excel. Mis de côté le défi technique développé là-bas, j'aurais besoin de vos lumières, de vos idées et de vos ressources, pour faire en sorte que ce jeu ressemble à quelque chose. Il existe, sous excel, la possibilité de réaliser une "interface" pour que l'utilisateur n'ait pas l'impression d'utiliser un tableur. Cette "interface", qui s'appelle UserForm, n'est pas, par défaut, très esthétique :

Cette "interface" peut être rendue beaucoup plus élégante en y intégrant une image.
Je ne suis pas graphiste pour deux sous, mais je manipule un peu The Gimp.
Par conséquent, j'aurais besoin d'aide pour la réalisation de cette image.
Il y a des contraintes, bien entendu!
La première est de respecter les couleurs du jeu d'origine cf ces images google mais sans pouvoir se faire opposer un quelconque copyright. Par exemple, je ne reprendrais pas le logo du jeu.
Mais je penses que l'on pourra faire quelque chose de très propre et ressemblant, sans tomber dans le plagia.
Une seconde contrainte est le format de l'image. Elle doit être en .jpg absolument. Je souhaites, à ce propos, qu'il n'y ai point trop de "dégoulinage" comme on peut en voir lors d'inscription de texte dans une image sous gimp, sauvegardée en jpg...
J'ai déjà commencé par réaliser le fond de l'image :

Ce que je souhaite, dans un premier temps (les autres souhaits s'exprimeront au fur et à mesure de l'avancée du projet) c'est qu'il y ait des dés (Dédé!!), avec des lettres, pas des points, qui "tombent" depuis le coin supérieur droit de l'image.
Je n'ai, lors de mes essais, pas réussit à "découper" proprement un dé... Alors plusieurs dés de plusieurs dispositions différentes, je ne vous raconte pas ma galère...
Merci par avance à toutes celles et tous ceux qui participeront, de près ou de loin, à cette réalisation.
EDIT : J'oubliais LA contrainte essentielle : le poids de l'image ne devra pas alourdir le fichier. Je ne connais pas encore la limite, mais il faut garder à l'esprit que cette image ne devra pas être lourde. Conservons l'esprit "Weight Watcher" en composant une image light... Merci
Cordialement,
Franck
- Réalisation d'une image pour le design d'un jeu
- 94 degrés jeu - Télécharger - Divers Jeux
- Légender une image - Guide
- 94 jeu - Télécharger - Puzzle & Réflexion
- Image iso - Guide
- Jeu java - Télécharger - Jeux vidéo
34 réponses
Le besoin porte sur une image d’interface JPG légère pour un jeu de lettres sous Excel, avec des dés et des lettres qui tombent du coin supérieur droit, tout en respectant le droit d’auteur et en limitant la taille du fichier. Le débat porte sur une identité visuelle lisible évoquant le jeu, en privilégiant une approche avec une spirale et la mention « EXCEL GAME » plutôt qu’un style graffiti, afin d’améliorer la lisibilité. Sur le format et l’agencement, 800x500 est envisagé comme base, avec 900x500 en orientation verticale lorsque le logo occupe l’espace, et une préférence pour une police sans serif. Des efforts pratiques sont prévus pour le découpage des dés, la réduction des artefacts JPEG, l’uniformité des marges et des couleurs (RGB), accompagnés d’un tutoriel expliquant la réalisation.
https://www.cjoint.com/c/DCskNkhWWld
et les dés avec l'entourage (j'ai coupé à peu près à la moitié des séparations entre les dés)
https://images.franceserv.fr/images/Zk2sHKl.jpg
https://images.franceserv.fr/images/k6cMIp.jpg
je viens de voir qu'il faudra que je redécoupe, ca ne peut pas aller mon affaire
si j'avais su j'aurais pris un carré arrondi simple, là je m'emme*de :o)
donc laisse tomber mes côtés il faut que je refasse
on verra ce soir là je sature de faire et défaire et refaire
question ; les cotés peux tu les redimensionner ou doivent ils être à l'échelle directement ?
Image initiale :

Image finale :
Le rendu n'en est que meilleur.
Ensuite, je redimensionne, en effet, en fonction de la taille de la grille car celle-ci varie selon les résolutions d'écran. (eh oui c'est notre problème depuis le début).
Par contre, autant pour l'image ici (côté droit) je peux redimensionner la hauteur, autant la largeur doit être fixe. Idem pour le côté gauche. Pour les côtés haut et bas, la hauteur est fixe, la largeur redimensionnée.
J'ai également la possibilité d'ajouter une marge intérieure (entre les dés et autour), ce qui donne, sur l'image de Nehel, avec un fond d'une couleur approchant celle des bords :

ps : j'avais loupé ton message, je vais regarder pour appliquer tes images au jeu.
Je reviens vers vous après quelques difficultés d'ordre personnel...
@Nehel : même en agrandissant l'image, il y aura toujours un peu de pixellisation, c'est Excel. Nous sommes sous un tableur et donc l'option "design" est très très restrictive.
Mais, cela ne me gène pas tant que cela...
@HFT : Excel n'accepte que les formats suivants : .gif, .jpg, .ico ou .bmp
Je fût très surpris donc, à la lecture de la réponse de m@rina. Je lui ai envoyé un MP pour confirmation... En attendant, nous allons considérer cela comme impossible.
Il y a bien deux ou trois "contournements" possibles, mais leur mise en place est soit extrêmement complexe (ajout de fichiers dll sur le pc du joueur), soit en pure perte car la transparence est remplacée par du noir...
En attendant la réponse de m@rina, nous allons, si vous le voulez bien, continuer avec des .gif (le format .ico étant encore plus dégueu...).
Pour l'instant, voici les copies d'écran de vos images, recréées sous Excel :
Nehel :

HFT :

Nous en sommes donc à la création de la liste des mots.
Tout comme pour la grille des dés, il me faudrait :
- le fond,
- les bords
Avec ces éléments, j'essaierai que le résultat ressemble au maximum à vos désirs...
le fond:
https://images.franceserv.fr/images/IMrRz.jpg
les côtés:
https://www.cjoint.com/?DCzoRDwEIFT
Merci à toi.
Je m'excuse par avance, de la part de toute l'équipe de Microsoft, pour avoir "bâclé" l'aspect design de la suite logicielle Microsoft Office...
Je blague, mais tout à fait sérieusement, je suis désolé que le rendu ne se rapproche pas davantage de ce que vous avez fait toi et HFT...
Mais bon, nous n'y pouvons pas grand chose.
Voici ce que ça donne, avec tes nouveaux éléments.

ça n'est pas catastrophique non plus, dans le sens ou les futurs joueurs savent qu'ils évoluent sous Excel et pas dans un environnement habituel de jeu (flash etc...).
Mais j'aurais vraiment souhaité toucher de plus près vos réalisations...
ça roule donc.
L'équipe est de repos cette semaine. J'assure donc la garde...
Pour l'instant, sur cet aspect, j'évolue sans filets. J'ai une base qui m'a été conseillée pour le design, mais j'essaie de "déborder" pour remplir davantage.
Pour l'instant, ça a l'air de rouler techniquement (je teste systématiquement sous une dizaine de résolutions d'écran...), donc j'y vais de bon coeur.
Sur ce, à demain pour de nouvelles aventures...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionComme convenu je reviens avec ma (mes) demande(s) du jour...
Il me faudrait maintenant le(s) bouton(s).
J'explique néanmoins les contraintes techniques.
Ces boutons doivent avoir un texte :
boutons identiques (couleur, thème, taille, etc) :
- VALIDER
- VALIDER & GARDER
boutons pouvant être différents :
- NOUVEAU TIRAGE
- MENU
Tout comme pour la grille ou pour la liste, si ces boutons ont une "bordure épaisse", il conviendra de la séparer dudit bouton en 4 parties : haut, bas, left and Right!...
Thanks a lot, Merci beaucoup.
Commençons déjà à réfléchir au logo. Celui-ci contiendra forcément de la transparence. Qui dit Transparence, dit, sous Excel : .gif... Donc pensez déjà à, peut être, séparer les lettres du mot BOOGLE pour pouvoir augmenter la taille de chacune. Ceci permettra d'obtenir un meilleur rendu final. Dans le cas de Nehel, il s'agissait de "dés" superposés les uns sur (et à côté) des autres. La superposition peut se faire sous Excel directement.
Exemple :

Cet exemple, bricolé vite fait, nous montre également les erreurs à ne pas commettre dans la rotation des images gif sous Gimp ou Photoshop. Attention aux contours lorsque l'on pivote une image.
j'envoie ca dans la journée
mais pas sur d'avoir tout pigé une fois de plus
concrètement un bouton peut il être arrondi et peut-on te l'envoyer en l'état en gif en un seul bloc
pour le logo; ben oui les lettres à part, pour des lettres pivotées, ca va poser plus de problèmes qu'autre chose
Pourrais tu également, stp, m'envoyer la liste des mots (cf ICI).
Tout comme pour la grille des dés, il me faudrait :
- le fond,
- les bords
mais pas sur d'avoir tout pigé une fois de plusT'inquiète, moi non plus ;)
concrètement un bouton peut il être arrondi et peut-on te l'envoyer en l'état en gif en un seul blocSi c'est un gif, oui il peut être arrondi. Je n'ai pas proposé cette option car :
- pour être honnête je n'y ai pas pensé,
- le gif "bave" toujours un peu (beaucoup).
Mais pourquoi pas, ça me va.
pour le logo; ben oui les lettres à part, pour des lettres pivotées, ca va poser plus de problèmes qu'autre choseTout à fait d'accord avec toi
oui je sais j'ai du retard sur les envois par rapport à Nehel mais je préférais avoir plus de précision
J'ai vu que le gif bavait, ca tient surtout au fait qu'on a mis des ombres portées je crois enfin j'espère
mais sans gif pas d'arrondi et il faudrait tout revoir, ce qui est encore plus long à faire
je ne voulais pas mettre de texte sur les boutons, j'avais préféré des symboles
ça pose un problème? dois-je séparer les symboles des boutons? ou dois-je abandonner l'idée des symboles et opter pour du texte?
et je te rappelle que je t'en ai envoyé une autre en 900x500 (logo vertical)
https://images.franceserv.fr/images/U2qHEwjC.jpg
qui correspond mieux à tes paramètres, les éléments séparés que je t'ai envoyé sont d'ailleurs ceux de cette version
ceci juste pour qu'on s'entende sur le projet utilisé
Et pourtant j'utilise bien l'image de fond transmise ICI...
On s'entend donc bien sur le projet utilisé.
Je suppute que les différences que tu voient viennent de ce souci de résolution d'écran avec lequel je vous use les yeux depuis le début...
EDIT : je dit des conn.... L'image dans le lien donné est celle de 800x500... Peux tu donc me repasser l'image de fond 900x500 stp... Désolé!
Comment exprimer ceci avec un symbole :
Je valide le mot (donc il est saisi dans la liste) mais je garde les dés sélectionnés pour continuer le chemin vers un autre mot... (exemple, je valide le mot "MAIN" mais garde les dés sélectionnés car je peux encore faire "MAINS")
Le plus aisé à comprendre pour le joueur reste le texte.
Donc, même si c'est moins esthétique, je vote pour le texte VALIDER et VALIDER & GARDER
mais le bon, c'est celui-ci:
https://images.franceserv.fr/images/c5Sso.jpg (900x500)
sinon, va y avoir problème pour caser les boutons validation/menu sous la grille comme tu l'as demandé, c'est pour ça que j'ai modifié les dimensions
https://images.franceserv.fr/images/OcP6SEX1J.jpg
boutons:
menu: https://images.franceserv.fr/images/xIbMs.png
valider: https://images.franceserv.fr/images/O2X3selS.png
valider-garder: https://images.franceserv.fr/images/hMv35jR.png
nouveau tirage: https://images.franceserv.fr/images/qVveS8R.png
mais là, j'ai un problème:
https://images.franceserv.fr/images/BJsHc4Zl.png
je ne sais pas comment je dois le découper: les deux cadres ensemble? séparés? avec chacun le séparateur central?
@Nehel :
> Pour les "petites attaches", c'est mort, impossible pour moi de les caler...
> Pour les boutons, il est important que les boutons de jeu soient directement accessibles. Donc sous la grille des lettres.
> Pour les angles, comme je suppose que tu ne va pas me lâcher ;), j'ai fait en sorte que cela te convienne... J'ai fait de même pour la liste et pour la grille.
Cela me pose tout de même un souci technique au niveau du code d'affichage des solutions et des mots dans la liste. Je vais essayer de faire en sorte que cela fonctionne, mais je ne promet rien...
Dis moi...

@HFT : Je ferais mes devoirs cet après midi...
pour le cadrage des angles bravo, j'espère que ça va marcher parce que c'est très bien!
les attaches on oublie c'est pas grave
pour les boutons, moi je trouve que c'est bien comme ça mais c'est à toi de voir ce qui est le plus ergonomique pour le joueur
j'ai toujours une déformation du logo:
https://images.franceserv.fr/images/SAK0HwZ.jpg
les dés sont moins carrés mais si c'est bon chez toi n'y touche pas il se peut que ça vienne du format de mon écran

ça te va?
En ce qui concerne le chronomètre, j'ai ma petite idée, dis moi ce que tu en penses...
Le bouton "Nouveau Tirage" s'efface lorsque tu clic dessus et se ré-affiche automatiquement à la fin du temps imparti. Je peux donc m'en servir comme chronomètre...
Dedans, les chiffres qui défilent : 03:00 puis 02:59, 02:58 etc... avec, en plus, le fond jaune qui avance de gauche à droite pour finalement remplir le bouton.
T'en penses quoi?
Je fais un essai technique et te montre ça.
EDIT : le mot sélectionné dans l'image ci-dessus n'a rien à voir avec le fait que tu sois ou non ch...
EDIT 2 : Pardon...
C'est pas grave, laisse tomber, ceux ci fonctionnent plutôt pas mal.
Voici le résultat :
En cours de partie : (j'ai un petit souci au niveau de la couleur de police des chiffres du chronomètre, mais c'est léger...)

En fin de partie :

@HFT : Je trouvais ton image plus "encombrée" sur la droite par rapport au reste de l'image.
J'ai donc tenté un déplacement de ton logo sur la partie vide en haut à gauche.
Dis moi ce que tu en penses :

@Nehel : le cash sera à retirer directement à l'adresse du siège social de CCM, demande Jeff ;-)
@+ Bon dimanche
Je vais peut-être poser des questions bêtes : comment "choisit-on" le mot que l'on vois dans les dés (coloré en bleu à l'image), comment se met-il en bleu dans l'image...et est ce que tout cela est prévu pour du tactile (clic sur les dés successifs)
P.S : je n'ai pas lu un certain nombre de post depuis quelques jours donc si les réponses existent, merci de me dire juste d'aller relire le topic ;-)
Oui, le joueur forme les mots en cliquant sur les dés successivement dans l'ordre des lettres de ce mot. Le clic sur une lettre colore le dé. Il est impossible de cliquer sur un dé "non adjacent"...
Le jeu se faisant exclusivement à la souris, il est donc "tactile".
A ce propos, durant la période de test de ce jeu, il va falloir tester sur tablette tactile. Or je n'en ai pas. Es tu équipé d'une tablette tactile sur laquelle Excel est installé?
Pour info, nous en sommes aux finitions, il ne reste, selon moi, que quelques petits soucis graphiques à résoudre et deux "options avancées" à mettre en place (importation d'un dictionnaire "brut" personnel + compilation d'un dictionnaire brut). Le jeu devrait donc entrer en phase de test bientôt.
Comment adapter les dimensions d'un UserForm à la taille de l'écran ?
Vba
Private Sub UserForm_Activate()
With Me
.StartUpPosition = 3
.Width = Application.Width
.Height = Application.Height
.Left = 0
.Top = 0
End With
End Sub
Comment afficher une image PNG dans un UserForm ?
Le contrôle Image ne permet pas d'afficher le type de fichier PNG.
Une solution consiste à visualiser l'image dans un contrôle WebBrowser.
Vba
Private Sub UserForm_Initialize()
Dim S As String
Dim Hauteur As Long, Largeur As Long
Hauteur = WebBrowser1.Height
Largeur = WebBrowser1.Width
S = "C:\Dossier\LeChat.png"
WebBrowser1.Navigate _
"ABOUT:<HTML><HEAD><body><IMG WIDTH=" & Largeur & " HEIGHT=" & Hauteur & _
" SRC='" & S & "'</IMG></BODY></HTML>"
End Sub
http://excel.developpez.com/faq/?page=Form#USFimagePNG
Je connais ces deux solutions.
Mais...
La première affiche l'UserForm en plein écran. Cette solution, j'ai souhaité l'écarter d'office car elle ne résout en rien les problèmes de résolution ni de tailles graphiques.
La seconde affiche bien des images png... Mais alors avec un énorme machin tout dégueu autour, le WebBrowser. Sincèrement, rien à gagner par cette méthode. Après que j'ai un peu de temps, je te bricolerais un exemple d'image png mise sur un UserForm par cette méthode.
Voici le résultat d'un test avec cette image transparente :

L'affichage se fait sur fond blanc :

Donc pas de transparence...
ok non pas la peine je te crois c'était au cas où
pour les tablettes c'est 1366*768 je crois les résolutions les plus courantes, donc avec 900*500 c'est presque le même ratio ca devrait aller et déformer très peu
avais tu bien utilisé les dernières bordures que j'avais envoyé en plus grand sur tes dernière captures ?
les revoici au cas où si c'était mieux je referais aussi les autres
http://cjoint.com/14av/DDoqoNLF987.htm
y a que les bordures qui me chagrinent un peu le reste ça va
Baluze, tu as entièrement raison pour le coup, et je vous présente, à toi, Néhel, bg62, Sarahmoon et celles et ceux qui ont suivi ce sujet, toutes mes excuses.
Je ne vous ai pas remercié à la hauteur du travail fourni.
Ce n'est pas pardonnable et je n'irais pas ici dévoiler ma vie privée, mais effectivement, après ce travail, il s'avère que je me suis retrouvé plutôt très occupé.
De retour à la réalité virtuelle, j'aurais toutefois du passer ici pour vous remercier.
J'ai oublié...
Alors, si vous les acceptez toujours 16 mois plus tard, je vous présente mes remerciements pour le travail fourni. Mes félicitations également car le résultat (toujours en ligne dans les fiches pratiques CCM) obtenu grâce à vous est réellement superbe.
Mea Culpa.
A++
Franck
Si j'ai entièrement raison sur un point c'est d'être plus qu'étonné d'être fliqué par un modo qui n'a pas à se plaindre de moi ici comme ailleurs et je ne ferais pas insulte à ton intelligence que nous nous soyons définitivement compris.
Quand à ce topic et à ce qu'il en est advenu ce dont je me benne gravement, dans toutes tes personnes citées garde ta gratitude et tes remerciement pour celui et celle qui viendront te manger dans la main sans nulle doute car ce n'est pas le style de la maison des deux autres.
C'était juste le seul topic que nous ayons jamais eu en commun tous les deux je crois, voilà pourquoi.









