Propriété CLIP et coupure d'une image en diagonale

Bonjour,

Connaissez-vous une façon de cacher une partie d'une image mais sur un angle précis? Je connais la propriété CSS CLIP qui permet d'afficher une certaine partie de l'image mais cela est limité à un rectangle.

Pour vous donner un exemple concret de ce que je souhaite réaliser, voici l'image d'origine :



Je souhaite la couper en deux, à la diagonale, comme ceci :



J'ai certaines restrictions techniques :

- L'angle et la position de la coupure peut varier dynamiquement selon certains critères. Il faut donc une solution qui puisse le faire à la volée.
- Idéalement, il ne faudrait pas que la solution repose sur du Javascript, mais s'il s'agit de la seule option, je suis quand même preneur.
- Il faudrait éviter de générer des images côté serveur car il y a trop de variations possibles pour la même image. Je risque de me retrouver rapidement avec des milliers d'images. L'idéal serait une solution côté client.

Pour résumer le contexte, il s'agit d'un jeu par navigateur où le champ de vision de chaque personnage est limité. Un personnage qui se déplace devra donc voir progressivement les bâtiments et objets qui sont au loin. Comme la carte est en 3D isométrique, il faut donc faire les coupures en diagonale.

Je suis ouvert à toutes solutions et/ou discussions sur le sujet.

Merci
Modifié par Tony Monast (23 Oct 2008 - 20:47)

Passer par css ou javascript n'est pas une bonne idée:
Il suffirait que le joueur les désactive pour avoir une vision complète de la carte

Le plus simple (et c'est ce que j'avais fait avec un ami) c'est de découper au préalable ta carte en "sprites" (ou bien 1 carré, ou bien plusieurs) et leur donner un nom aléatoire (qui pourrait changer tout les X temps)

Ensuite, tu envoie les images que le joueur peut voir.

[Edit] Je confirme!
Vu que tes map sont composées de mêmes éléments, aie une image par type de surface.
Tu y gagneras en plus:
- Gain de place (taille totale des image moins volumineuses)
- Possibilité de refaire des map facilement en utilisant ces sprites
Modifié par Calak (22 Oct 2008 - 15:49)

Bonjour Calak,

En fait, actuellement, la carte est divisée en case. Sur chaque case, il y a une image. Une même image est réutilisée plusieurs fois. L'affichage progressive des images (cases) fonctionne bien, mais j'essaye de trouver une solution pour éviter de devoir toujours découper les images en cases. L'idéal étant de pouvoir placer l'image complète du bâtiment sur la carte lors de sa conception, sans devoir jouer au puzzle en replaçant les morceaux sur chacune des cases. Le but premier est de simplifier la création des cartes car les cartes sont créés par un administrateur via une interface.

Pour ce qui est de la désactivation des CSS et/ou Javascript, j'y ai déjà réfléchi et cela ne me dérange pas vraiment. Les joueurs ne pourraient pas vraiment exploiter cette faille dans le sens où ça n'apporterait pas grand chose de savoir à quoi ressemble le bâtiment en entier. Ça ne changerait rien au plan stratégique puisque cela ne dévoilerait pas pour autant les positions des ennemis. C'est principalement que visuel/graphique tout ça.

Merci de ta réponse. Je ne m'attendais pas à une réaction aussi rapidement, surtout sur ce sujet particulier.
Modifié par Tony Monast (22 Oct 2008 - 15:57)

Peut être passer par un deuxième calque, contenant une image noire "trouée".

( Une zone circulaire transparente au milieu d'une grand image noire )

La zone circulaire faisant la taille de ton champs de vision. Non?

L'idée est très intéressante. Je viens de faire quelques tests et ça semble bien fonctionner.

Merci pour cette solution. Je laisse tout de même le sujet ouvert au cas où des membres proposeraient d'autres solutions.

Je dois également l'essayer directement dans le jeu pour m'assurer que ça convient parfaitement au contexte.

Bonne journée Calak!