Structure de données pour les niveaux dans les jeux

Question

Je crée un jeu de plateforme en JavaScript en utilisant canvas qui est entièrement basé sur les cases. Quelle est la meilleure méthode pour stocker les blocs d'objets dans le jeu (murs, sols, objets)? La chose est que chaque tuile peut être détruite ou créée.

Actuellement, j'ai un tableau 2D de sorte que je suis en mesure de vérifier rapidement si un article est à une position spécifique X & Y. Le problème avec ceci est quand l'utilisateur se déplace et la carte doit faire défiler, j'ai besoin de réaffecter chaque bloc. Et que se passe-t-il lorsque l'article est au x = 0? Je ne peux pas utiliser d'index négatif. Je voudrais plutôt l'analogue de défilement comme aposed à une tuile à la fois. Aussi, je prévois de générer aléatoirement des cartes au fur et à mesure que l'utilisateur se déplace et s'il n'a pas déjà été généré. Donc, une fois que quelque chose est généré, il devrait rester ainsi pour toujours.

Un autre point que je devrais mentionner est qu'il sera également multijoueur. Donc, le découpage de l'écran est une bonne idée jusqu'à ce que les données mises en cache deviennent sales et doivent obtenir les dernières nouvelles de la base de données. Gah Je suis si nouveau à tout cela; semble impossible, toute aide est grandement appréciée.

Answer 1

Puisque vous avez des niveaux infinis, je suggère une structure similaire à ce que vous avez déjà, avec un léger tweak. Au lieu de tout stocker dans un grand tableau, et de déplacer des choses à l'intérieur de ce tableau chaque fois que l'utilisateur se déplace (ouch) à la place de stocker 9 morceaux de carte (chacun d'une taille environ deux fois la taille de l'écran) , lorsque l'utilisateur s'approche du bord du tronçon actuel, disposez les tronçons hors écran, déplacez tous les tronçons restants et chargez-en de nouveaux dans l'espace.

Il faut espérer que c'était clair, mais juste au cas où, voici un diagramme:

Les carrés lettrées sont les morceaux de carte, et le carré rouge est la fenêtre (je l'ai dessiné un peu trop grand , rappelez-vous que la fenêtre d'affichage est plus petite que les carrés noirs). Lorsque la fenêtre se déplace à droite, vous déchargez les blocs A B et C, déplacez tous les autres vers la gauche et chargez les nouvelles données dans les plus à droite. Puisqu'un morceau est deux fois la largeur de l'écran, vous avez le temps qu'il faut à l'utilisateur pour traverser l'écran pour générer/charger le niveau dans ces morceaux. Si l'utilisateur se déplace rapidement dans le monde entier, vous pouvez disposer d'un ensemble de morceaux 4x4 pour une mise en mémoire tampon supplémentaire.

Pour résoudre le retour aux blocs précédents de la carte.il y a deux façons de le faire:

• Dressez les morceaux sur le disque dur quand ils ne sont plus utilisés (ou quel que soit l'équivalent serait en javascript)
• votre morceau réglé Développez infiniment Mémoire. Plutôt qu'un tableau de morceaux a un tableau assosciatif qui prend la position x/y du morceau, et renvoie le morceau (ou null, qui indique que l'utilisateur n'a jamais été ici avant et que vous avez besoin de le générer).
• générer procédural vos niveaux, c'est complexe, mais signifie qu'une fois qu'un morceau sort de l'écran, vous pouvez simplement la jeter, et être sûr que vous pouvez régénérer exactement le même morceau plus tard

Answer 2

Il y a évidemment beaucoup de façons de le faire.

Si leurs niveaux ne sont pas trop grands, vous pouvez conserver votre conception originale d'un tableau 2d et utiliser une variable pour stocker la position de défilement x/y actuelle. Cela signifie que vous stockez toutes les informations de la carte dans la mémoire à tout moment, et accédez uniquement aux parties que vous devez afficher à l'écran. Lorsque vous peignez sur quelle mosaïque est visible à la position de défilement actuelle x/y, combien de carreaux correspondent à l'écran avec la largeur d'écran actuelle et ne peignent que ceux dont vous avez besoin.

Si vous faites défiler des carreaux entiers à la fois, alors c'est assez facile. Si c'est un défilement plus analogique, vous aurez besoin d'un contrôle plus fin de l'endroit où la tuile commence à dessiner, ou vous pouvez tricher et dessiner l'ensemble des tuiles dans une image bitmap en mémoire, puis le noircir avec un négatif décalage.

Answer 3

Une fois, je traçaient cette chose dans XML et JSON ... Je pense que la sérialisation JSON serait beaucoup plus rapide et plus efficace (pour ne pas dire facile) à travailler avec JavaScript, d'autant plus que JSON se prête si bien aux listes de longueurs variables que les niveaux "N" dans chaque jeu. L'utilisation d'un format standard le rendrait également plus réutilisable et (idéalement) encouragerait plus de collaboration (si c'est ce que vous recherchez). Vous pouvez consulter ma première tentative pour créer un Video Game schema for level structure. Comme le dit le fichieroffset, il y a plusieurs façons de le faire, mais je vous suggère fortement de séparer vos données de niveau (c.-à-d. Concepts) de votre rendu (c.-à-d. Objets en mouvement, chemins, vitesse, x/y/z co positionnement -ordonné, etc ...). Encore une fois, comme l'article dit que la zone change le plus rapidement, et il n'y a aucune indication si WebGL, SMIL + SVG, Canvas + Javascript, bon vieux Flash/Actionscript ou autre chose sera la meilleure route pour vous, en fonction de vos besoins et du type de jeu que vous développez.