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 :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. LInit(30, 'mydemo', 700, 480, principal
);
2. //Direction du déplacement, nul signifie aucun mouvement
3. var direction = null
;
4. // Oiseau, calque de scène, objet d'arrière-plan
5. var oiseau, stageLayer, bg
6. //La durée de chaque mouvement
7. var étape = 5
8. fonction principale () {
9. // Liste des ressources
10. var loadList = [ 
11. {nom : 'oiseau', chemin : './bird.png'},
12. {nom : 'bg', chemin : './bg.jpg'}
13. ];
14. // Charger les ressources
15. LLoadManage.load(loadList, null, demoInit);
16. }
17. fonction demoInit (résultat) {
18. //Initialiser la couche de scène
19. stageLayer = nouveau LSprite();
addChild(stageLayer);
//Ajouter un arrière-plan
22. bg = nouveau LBitmap(nouveau LBitmapData(result['bg'])
23. bg.y = -100
stageLayer.addChild(bg);
// Rejoignez les oiseaux
26. oiseau = nouveau LBitmap(new LBitmapData(result['bird'])
27. oiseau.x = 100
28. oiseau.y = 150
stageLayer.addChild(oiseau);
//Ajouter un événement de presse souris
stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown
31. //Ajouter un événement de rebond de souris
32. stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp
33. ); //Ajouter un événement dans la chronologie
34. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame
}
35. fonction onDown(e) {
36. /**Définir la direction du mouvement en fonction de la position du clic*/ 
37. if (e.offsetX
>
38. LGlobal.width / 2) {
direction
39. = 'droite' } autre {
direction
41. = 'gauche'; }
}    
42. function onUp () {    
43. // 設定方向為無方向，代表不移動    
44. direction = null;    
45. }    
46. function onFrame () {    
47. var _step, minX, maxX;    
48. /** 移動小鳥 */    
49. if (direction == 'right') {    
50. _step = step;    
51. } else if (direction == 'left') {    
52. _step = -step;    
53. } else {    
54. return;    
55. }    
56. bird.x  = _step;    
57. /** 控制小鳥移動範圍 */    
58. minX = 0,    0
,    
59. ,    ,    ,    
,    
60. ,    ,    
61. maxX = bg.getWidth()o.getWidth()). if (bird.x 
 minX) {   
62. bird.x = minX;    
}else if (bird.x 
63. >
 maxX) {    
65. bird.x = maxX;    maxX;    
66. ;    
67. ;    ;    ;    ;    
68. ;     }     /** 移動舞台 */    
69. stageLayer.x = LGlobal/** 控制舞台移動範圍 */    
70. minX = LGlobal。
71. maxX = 0
72. ;     if (stageLayer.x  minX
73. )
74. stageLayer.x = 

minX

;

}else if (stageLayer.x 

>
 maxX) {     stageLayer.x = maxX; }     }     運行結果： 大家可以到這裡查看線上示範。點選畫面左半邊控制小鳥向左移動，點選右半邊螢幕，控制小鳥向右移動。小鳥到達螢幕中央後，開始捲軸。