HTML5 lufylegend がゲームにスクロールを実装 _html5 チュートリアル スキル

lufylegend は、ActionScript 3.0 に似た構文を使用して HTML5 開発を実装する HTML5 オープン ソース エンジンで、LSprite、LBitmapData、LBitmap、LLoader、LURLLoader、LTextField、LEvent など、AS 開発者に馴染みのある多くのクラスが含まれています。 Opera、IE9、IOS、Android およびその他の一般的な環境。 lufylegend を使用すると、オブジェクト指向プログラミングを簡単に使用でき、Box2dWeb と連携して物理ゲームを作成できます。さらに、組み込みの LTweenLite イージング クラスやその他の非常に実用的な機能も備えています。 HTML5 の世界にもっと早く入りましょう。
スクロールとは何ですか?
RPG や横スクロールの戦闘をプレイしたことのある学生は、キャラクターが画面の中央まで歩くと、マップのサイズが大きいためマップが移動することを知っているはずです。キャラクターは比較的静止したままになります。これは伝説の巻物です。たとえば、下の写真は私のゲーム「Three Kingdoms Front」のスクロールです:

上記の紹介で、誰もが巻物が何であるかを理解するはずです。端的に言えば、主人公を追いかけるカメラの効果です。次に、lufylegend.js ゲーム エンジンを使用してこの効果を実現します。
原理の紹介
実際、この効果を実現する鍵は、キャラクターをどのように静止させるか、いつマップを移動させるか、そしてマップをどのように移動させるかにあります。これら 2 つの問題を検討する前に、まず、後の操作のために適切に構造化されたステージ レイヤー (および LSprite オブジェクト) を作成します。ステージの構造は次のとおりです:
- ステージ レイヤー
|
- マップ レイヤー
|
- キャラクター レイヤー
ステージ レイヤーが、マップレイヤーとキャラクターレイヤー、そしてキャラクターレイヤーはマップレイヤーの上にあります、結局、キャラクターはマップ上に立っています。子オブジェクトの座標は親オブジェクトに対して相対的なものであることがわかっているため、親オブジェクトが移動すると、子オブジェクトもそれに応じて移動します。これをまず理解する必要があります。
キャラクターを作成するにはどうすればよいですか?マップはいつ移動しますか？マップを移動するにはどうすればよいですか?おそらく、まず if(xxx){...} を使用して、キャラクターの座標が画面の中心に到達したかどうかを判断します。到達している場合は、マップ オブジェクトを移動します。こんなことされたら面倒ですよ。実際には、もっと簡単な方法があります:
スクロールしているときもスクロールしていないときも、キャラクターは移動しますが、キャラクターが画面の中央に到達してスクロールを開始すると、ステージ レイヤーは反対方向に移動し、サイズも反対になります。キャラクタの速度が同じ場合、キャンバスに対するキャラクタの移動はオフセットされ、静止しているように見えますが、マップは親クラスに従い、反対方向に移動します。これは、2 人が馬に乗って同時に会話するコスチューム映画の撮影に似ています。人と馬が前進し、カメラが同じ速度で追いかけると、人物は動いていませんが、人物の後ろの景色が動いているような写真が得られます。
次に実装コードを見てみましょう。
実装コード
以下は詳細なコメントを含むコードです:

XML/HTML コードコンテンツをクリップボードにコピー

1. LInit(30, 'mydemo', 700, 480, main); //移動方向、null は移動がないことを意味します
2. var
3. 方向 = null; // 鳥、ステージレイヤー、背景オブジェクト
4. var 鳥、ステージレイヤー、背景
5. //各動きの長さ
6. var ステップ
7. = 5; 関数 main () { // リソースリスト
8. var
9. loadList = [
10. {名前 : 'bird'、パス : './bird.png'}、 {名前 : 'bg'、パス : './bg.jpg'}
11. ];
12. // リソースをロード
13. LLoadManage.load(loadList、null、demoInit);
14. }
15. 関数デモInit (結果) {
16. //ステージレイヤーを初期化します
18. stageLayer =
19. new LSprite(); addChild(stageLayer) ; //背景を追加
20. bg
21. = new
22. LBitmap(new LBitmapData(result['bg'])); bg.y = -100; stageLayer.addChild(bg);
23. // 鳥たちに加わりましょう
bird
24. =
new
25. LBitmap(new LBitmapData(result['bird']));
26. bird.x = 100;
27. bird.y = 150; stageLayer.addChild(鳥)
28. //マウスプレスイベントを追加 stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown); //マウスバウンスイベントを追加
29. stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);
30. //タイムラインイベントを追加
31. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame); }
32. 関数 onDown (e) {
33. /**クリック位置を基準に移動方向を設定する*/
34. if (e.offsetX
35. > LGlobal.width / 2) {
37. 方向 =
38. '右';
39. } else { 方向
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;    
}    
/** 移動舞台 */    
66. stageLayer.x = LGlobal
67. /** 控制舞台移動範圍 */     minX = LGlobal
68. 。 maxX = 0;    
69. if (stageLayer.x  minX)
70. stageLayer.x = minX
71. ; }else if (stageLayer.x > maxX) {    
72. stageLayer.x = 
73. maxX;

}    

}    

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