HTML5 & Javascript RPG
- 200 x 200 carte
- Carte générée à partir de heightmap
- 6 types de tuiles
- 24x24 px tuiles
- Exemple De Carte
Ok, donc je suis en train d'écrire un jeu en JavaScript HTML5, dans lequel un 200x200 carte est générée à partir d'un créés de manière aléatoire heightmap. J'ai un algorithme assez simple qui extrait la valeur de la couleur de chaque pixel de l'image et le convertit en un nombre entier (de 0 à 5) en fonction de sa position entre (0 à 255), ce qui correspond à une tuile en tuile dictionnaire. Cette 200x200 tableau est ensuite transmis au client.
Le moteur détermine ensuite les tuiles à partir des valeurs du tableau et dessine sur la toile. Donc, je termine avec des mondes qui ont des caractéristiques réalistes recherche: des montagnes, des mers, etc.
Maintenant, la prochaine chose que je voulais faire était d'appliquer une tuile blender algorithme de sorte que si une tuile est à côté d'une tuile qui n'est pas du même type, il semble taché. L'exemple de la carte ci-dessus est ce que le joueur voit dans leur minimap, qu'ils voient à l'écran le rendu de la section marquée par le rectangle blanc; la fenêtre d'affichage. Lorsque les tuiles sont rendus avec leurs images plutôt que comme de simples pixels de la couleur.
Ceci est un exemple de ce que l'utilisateur voit dans la carte (pas le même emplacement que la fenêtre ci-dessus montre!)
Il est de ce point de vue que je veux la transition de se produire sur, aucune modification ne doit être faite à la mini-carte.
L'Algorithme
J'ai donc formulé un, ce qui semblait simple algorithme qui permettrait de parcourir l'ensemble de la carte qui était disponible dans la fenêtre d'affichage et de rendu d'une autre image sur le dessus de la tuile, si il était à côté d'une tuile de type différent. (Sans modification de la carte! Juste rendu quelques images supplémentaires.) L'idée de l'algorithme a été pour le profil de la tuile courante pays voisins:
C'est un scénario d'exemple de ce que le moteur pourrait avoir à rendre, avec la tuile courante étant celle marquée avec le X. Un 3x3 tableau est créé et les valeurs sont lues dans. Donc, pour cet exemple, le tableau devrait ressembler.
[
[1,2,2]
[1,2,2]
[1,1,2]
];
Mon idée était alors de travailler sur une série de cas possibles configurations de tuiles. Sur un très simple niveau:
if(profile[1][4] != profile[0][5]){
//draw a tile which is half sand and half transparent
//Over the current tile -> profile[1][6]
...
}
Ce qui donne ce résultat:
Qui fonctionne comme une transition de [0][1] [1][1], mais pas à partir de [1][1] [2][1], où un bord dur reste. J'ai donc pensé que, dans ce cas un coin de la tuile devra être utilisé. J'ai créé deux 3x3 feuilles sprite que j'ai pensé serait de détenir toutes les combinaisons possibles de tuiles qui pourraient être nécessaires. Puis-je répliqué ce pour toutes les tuiles qu'il y a dans le jeu (Les zones blanches sont transparentes). Ce qui nous donne 16 tuiles pour chaque type de tuile (Le centre de la dalle sur chaque spritesheet ne sont pas utilisés.)
Le Résultat Idéal
Ainsi, avec ces nouvelles tuiles et l'algorithme correct, l'exemple de l'article devrait ressembler à ceci:
Chaque tentative que j'ai faite a échoué si, il y a toujours une faille dans l'algorithme, et les patrons finissent étrange. Je n'arrive pas à obtenir tous les cas et à l'aide de cas semble être une mauvaise façon de le faire. En raison des circonstances étranges qui peuvent se produire avec des mélanges d'avoir à être utilisés ensemble pour créer une ligne régulière.
Une fois, j'ai développé un jeu avec un semblable carrelage technique à ce, à l'exception de tout ce qui a été fait dans un éditeur de carte, donc j'ai lissé manuellement les tuiles en ajoutant les images sur le dessus, de sorte que la technique d'imagerie fonctionne, il faut juste l'algorithme de le faire.
Une Solution?
Donc, si quelqu'un pouvait fournir une solution de rechange à la façon dont j'ai pu créer cet effet, ou dans quelle direction aller pour l'écriture de l'algorithme de profilage, j'en serais très reconnaissante!
