HTML5 Lufylegend implémente les parchemins dans les compétences du didacticiel _html5 du jeu

lufylegend est un moteur open source HTML5 qui implémente le développement HTML5 en utilisant une syntaxe de type ActionScript 3.0. Il comprend LSprite, LBitmapData, LBitmap, LLoader, LURLLoader, LTextField, LEvent et de nombreuses autres classes familières aux développeurs AS. Opera, IE9, IOS, Android et autres environnements populaires. Vous pouvez utiliser lufylegend pour utiliser facilement la programmation orientée objet et coopérer avec Box2dWeb pour créer des jeux de physique. De plus, il dispose également d'une classe d'accélération LTweenLite intégrée et d'autres fonctions très pratiques. Commencez à l'utiliser maintenant, cela vous permettra de. entrez plus rapidement dans le monde du HTML5 !
Qu'est-ce qu'un parchemin ?
Les étudiants qui ont joué au RPG ou aux combats à défilement latéral doivent savoir qu'une fois que le personnage se dirige vers le centre de l'écran, la carte se déplacera en raison de sa grande taille, tandis que le caractère restera relativement stationnaire. C'est le parchemin légendaire. Par exemple, l'image ci-dessous est le parchemin de mon jeu "Three Kingdoms Front" :

Avec l'introduction ci-dessus, tout le monde devrait comprendre ce qu'est un parchemin. Pour parler franchement, c'est l'effet de la caméra qui suit le protagoniste. Ensuite, nous utiliserons le moteur de jeu lufylegend.js pour obtenir cet effet.
Introduction au principe
En fait, la clé pour obtenir cet effet réside dans la façon d'immobiliser le personnage, quand déplacer la carte et comment déplacer la carte. Avant d'explorer ces deux problèmes, nous créons d'abord une couche d'étape bien structurée (et un objet LSprite) pour les opérations ultérieures. La structure de la scène est la suivante :
- Couche de scène
|
- Couche de carte
| - Couche de caractères
On voit que la couche de scène est l'élément parent du la couche de carte et la couche de personnages, et la couche de personnages est au-dessus de la couche de carte, après tout, le personnage se trouve sur la carte. Nous savons que les coordonnées de l'objet enfant sont relatives à l'objet parent, donc si l'objet parent est déplacé, l'objet enfant se déplacera en conséquence. Cela doit d’abord être compris.
Comment créer un personnage encore ? Quand déplace-t-on la carte ? Comment déplacer la carte ? Peut-être voudriez-vous d'abord utiliser if(xxx){...} pour déterminer si les coordonnées du personnage ont atteint le centre de l'écran. Si c'est le cas, déplacez l'objet cartographique. Sinon, déplacez l'objet personnage. Ce serait gênant si vous faisiez cela. En fait, il existe une méthode plus simple :
Lors du défilement/non défilement, nos personnages bougent, mais si le personnage atteint le centre de l'écran et commence à défiler, notre calque de scène se déplacera dans la direction et la taille opposées à celles du la vitesse du personnage. Avec le même mouvement, le déplacement du personnage par rapport à la toile sera décalé et il apparaîtra stationnaire, tandis que la carte suivra la classe parent et se déplacera dans la direction opposée. Cela ressemble au tournage d'un film en costumes, dans lequel deux personnes montent à cheval et parlent en même temps. Si un homme et un cheval avancent et que la caméra les suit à la même vitesse, l’image résultante sera que les personnages ne bougent pas, mais que le paysage derrière les personnages bouge.
Regardons ensuite le code d'implémentation.
Code d'implémentation
Voici le code avec des commentaires détaillés :