HTML5 lufylegend implementiert Scrolls im Spiel _html5 Tutorial-Fähigkeiten

lufylegend ist eine HTML5-Open-Source-Engine, die die HTML5-Entwicklung mit ActionScript 3.0-ähnlicher Syntax implementiert. Sie umfasst LSprite, LBitmapData, LBitmap, LURLLoader, LTextField, LEvent und viele andere Klassen, die AS-Entwicklern bekannt sind. Opera, IE9, IOS, Android und andere beliebte Umgebungen. Mit lufylegend können Sie auf einfache Weise objektorientierte Programmierung verwenden und mit Box2dWeb zusammenarbeiten, um Physikspiele zu erstellen. Darüber hinaus verfügt es über eine integrierte LTweenLite-Beschleunigungsklasse und andere sehr praktische Funktionen Steigen Sie schneller in die Welt von HTML5 ein!
Was ist eine Schriftrolle?
Schüler, die RPG oder Side-Scrolling-Kämpfe gespielt haben, sollten wissen, dass sich die Karte aufgrund der Größe der Karte bewegt, nachdem sie in die Mitte des Bildschirms gegangen ist Der Charakter wird relativ stationär bleiben. Das ist die legendäre Schriftrolle. Das Bild unten ist zum Beispiel die Schriftrolle in meinem Spiel „Three Kingdoms Front“:

Mit der obigen Einführung sollte jeder verstehen, was eine Schriftrolle ist. Um es ganz klar auszudrücken: Es ist der Effekt, dass die Kamera dem Protagonisten folgt. Als nächstes werden wir die Spiel-Engine von lufylegend.j verwenden, um diesen Effekt zu erzielen.
Einführung in das Prinzip
Tatsächlich liegt der Schlüssel zum Erreichen dieses Effekts darin, wie man den Charakter ruhig macht, wann man die Karte bewegt und wie man die Karte bewegt. Bevor wir diese beiden Probleme untersuchen, erstellen wir zunächst eine gut strukturierte Bühnenebene (und ein LSprite-Objekt) für spätere Vorgänge. Die Bühnenstruktur ist wie folgt:
- Bühnenebene
|
- Kartenebene
|
- Zeichenebene
Es ist ersichtlich, dass die Bühnenebene das übergeordnete Element ist Die Kartenebene und die Zeichenebene, und die Zeichenebene befindet sich über der Kartenebene, schließlich steht der Charakter auf der Karte. Wir wissen, dass die Koordinaten des untergeordneten Objekts relativ zum übergeordneten Objekt sind. Wenn also das übergeordnete Objekt verschoben wird, bewegt sich das untergeordnete Objekt entsprechend. Dies muss zunächst verstanden werden.
Wie erstellt man ein Charakterbild? Wann verschiebt man die Karte? Wie verschiebt man die Karte? Vielleicht möchten Sie zuerst if(xxx){...} verwenden, um festzustellen, ob die Koordinaten des Charakters die Mitte des Bildschirms erreicht haben. Wenn nicht, verschieben Sie das Charakterobjekt. Es wäre problematisch, wenn Sie dies tun würden. Tatsächlich gibt es eine einfachere Methode:
Beim Scrollen/Nicht-Scrollen bewegen sich unsere Charaktere, aber wenn der Charakter die Mitte des Bildschirms erreicht und mit dem Scrollen beginnt, bewegt sich unsere Bühnenebene in die entgegengesetzte Richtung und Größe Bei gleicher Bewegung wird die Verschiebung des Charakters relativ zur Leinwand verschoben und er erscheint stationär, während die Karte der übergeordneten Klasse folgt und sich in die entgegengesetzte Richtung bewegt. Dies ähnelt dem Filmen eines Kostümfilms, bei dem zwei Personen gleichzeitig auf Pferden reiten und sich unterhalten. Wenn sich ein Mann und ein Pferd vorwärts bewegen und die Kamera ihnen mit der gleichen Geschwindigkeit folgt, entsteht das Bild, dass sich nicht die Charaktere bewegen, sondern dass sich die Szenerie hinter den Charakteren bewegt.
Als nächstes schauen wir uns den Implementierungscode an.
Implementierungscode
Das Folgende ist der Code mit detaillierten Kommentaren:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. LInit(30, 'mydemo', 700, 480, main);
2. //Bewegungsrichtung, null bedeutet keine Bewegung
3. var Richtung = null;
// Vogel, Bühnenebene, Hintergrundobjekt
var Bird, stageLayer, bg;
5. //Die Länge jeder Bewegung
6. var
Schritt
7. = 5; Funktion main () {
// Ressourcenliste
var
9. loadList
= [ 
10. {name: 'bird', path: './bird.png'},
{Name: 'bg', Pfad: './bg.jpg'}
];
// Ressourcen laden
LLoadManage.load(loadList, null, demoInit);
14. }
15. Funktion demoInit (Ergebnis) {
16. //Stufenebene initialisieren
stageLayer
18. =
neu
19. LSprite(); addChild(stageLayer); //Hintergrund hinzufügen
bg
21. =
new
22. LBitmap(new LBitmapData(result['bg'])); bg.y = -100; stageLayer.addChild(bg);
23. // Schließe dich den Vögeln an
24. bird =
25. new LBitmap(new LBitmapData(result['bird']));
26. bird.x = 100;
27. bird.y = 150; stageLayer.addChild(bird);
28. //Mausdruckereignis hinzufügen stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown); //Maussprungereignis hinzufügen
stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);
29. //Timeline-Ereignis hinzufügen
30. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);
}
Funktion onDown (e) {
/**Legen Sie die Bewegungsrichtung basierend auf der Klickposition fest*/ 
if (e.offsetX
34. >
LGlobal.width / 2) {
36. Richtung
=
37. 'rechts'
;
38. } sonst {
39. Richtung =
'links'
40. ; } }    
41. function onUp () {    
42. // 設定方向為無方向，代表不移動    
43. direction = null;    
44. }    
45. function onFrame () {    
46. var _step, minX, maxX;    
47. /** 移動小鳥 */    
48. if (direction == 'right') {    
49. _step = step;    
50. } else if (direction == 'left') {    
51. _step = -step;    
52. } else {    
53. return;    
54. }    
55. bird.x  = _step;    
56. /** 控制小鳥移動範圍 */    
57. minX = 0,    0
,    
58. ,    ,    ,    
,    
59. ,    ,    
60. maxX = bg.getWidth()o.getWidth()). if (bird.x 
 minX) {   
61. bird.x = minX;    
}else if (bird.x 
62. >
 maxX) {    
64. bird.x = maxX;    maxX;    
65. ;    
66. ;    ;    ;    ;    
67. ;     }     /** 移動舞台 */    
68. stageLayer.x = LGlobal/** 控制舞台移動範圍 */    
69. minX = LGlobal。
70. maxX = 0
71. ;     if (stageLayer.x  minX
72. )
73. stageLayer.x = 

minX

;

}else if (stageLayer.x 

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