La transformation de perspective en mode7 en toile?

Je crée un moteur de jeu basé sur une toile et je me demande si quelqu'un a une bonne information sur la façon d'obtenir une perspective de vue aérienne. Ce que je recherche est quelque part à mi-chemin entre l'observation traditionnelle des oiseaux et l'ancienne vue SNES mode7. Juste un léger angle pour donner l'illusion de 3D.

J'essaie de comprendre ce qui va être la meilleure façon de faire face à l'inclinaison de la perspective. Je ne fais pas de rotations, de sorte que les matrices 3D vont aller au bord de la mer, mais je dois être en mesure de traiter les couches de la carte à un angle constant et il serait sympa si l'angle était réglable. J'ai également besoin de traiter la chaîne en profondeur. Fondamentalement, la rangée inférieure de pixels devrait avoir une largeur et une hauteur de 1: 1 pixel, puis pour chaque rangée, par exemple, 5% plus petite ou quelque chose comme ça. Ce que j'aimerais, c'est de pouvoir fournir une grande toile comme texture, puis fournir un angle de caméra entre 0 et 90, où 0 est parfaitement horizontal et 90 est la vue des oiseaux.

Quelqu'un a-t-il des tutoriels ou un exemple de code connexe? J'ai cherché un peu en ligne, mais tout ce que j'ai trouvé semble être inapproprié pour être utilisé dans cette application particulière ou trop complexe, en faisant toutes sortes de folles fausses 3D et des éléments de rotation. Tout ce que je veux, c'est prendre la grille de carrelage normale et la replier un peu, pas de rotations ou des choses compliquées comme ça.

Voici un exemple de ce que je veux; Voici un exemple. Http://img801.imageshack.us/img801/2176/perspectivesample.jpg

La rangée de pixels inférieure est un rapport de pixel de 1: 1, et chaque rangée supérieure à celle qui se réduit progressivement horizontalement et verticalement. La texture source de la région centrale supérieure est normalement à environ la moitié de la hauteur de la région centrale inférieure, mais elle a été réduite verticalement et horizontalement pour s'adapter à la perspective.

Ce que je pense pourrait fonctionner le mieux, c'est de rendre l'état de la fenêtre actuelle sur une autre toile à plat, l'affichage des oiseaux, avec environ 50% d'espace supplémentaire sur le dessus et sur les côtés, puis couper une région triangulaire à la hauteur de celle-ci et le dessiner Toile visible réelle.

Le seul problème est que je suce les mathématiques quand il s'agit de calculer des angles et autres.

Si je vous comprends bien, vous voulez juste une simple transformation du trapèze. Si oui, peut – être que ce lien ou ce lien vous aide. Pour les images qui ne sont pas centrées, ce serait simplement une transformation supplémentaire en rhomboïde, qui est facilement possible avec une toile, autant que je le sache.

Ce dont vous parlez est quelque chose qui peut être fait simplement avec n'importe quel api 3D. Cependant, puisque vous avez décidé d'essayer de coller à la toile 2D, vous devez tout faire dans le monde 2D, ce qui signifie travailler avec des rectangles, la rotation, la mise à l'échelle, l'ébauche, etc. Aussi connu comme des transformations affines comme mentionné l'autre réponse.

Ce que vous voulez faire est possible, mais comme vous souhaitez utiliser 2D, vous devez penser en termes de fonctions 2D.

Créez votre image initiale.
Ajoutez une tranche du bas de l'image originale au bas du canevas, très légèrement positionné vers la gauche, de sorte que le centre de l'image correspond au centre de la toile actuelle.
Augmenter légèrement l'échelle de l'image entière
Répétez jusqu'à ce que vous arriviez au sommet de l'image.

Le code Pseudo ressemblerait à ça …

imgA = document.getElementById('source'); // grab image slices from bottom to top of image for (var ix=height-slice_height;ix>=0;ix-=slice_height) { // move a section of the source image to the target canvas ctx.drawImage(imgA, 0,ix,width,slice_height, 0-half_slice_width_increase,width,slice_height); // stretch the whole canvas ctx.scale(scale_ratio, 1); }

Cela prendra beaucoup de peaufiner, mais c'est la solution générale.

Scale_ratio sera un nombre légèrement plus grand, mais très proche de 1.
Ctx est le contexte 2D en toile standard
Half_slice_width_increase est le 1/2 du montant que la toile va croître lorsqu'elle est mise à l'échelle par le ratio d'échelle. Cela maintient l'image mise à l'échelle.

Pour avoir l'air correct, vous souhaitez transformer les mosaïques d'arrière-plan avant d'ajouter les superpositions d'icônes.