DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5+lufylegend實現游戲中的卷軸
HTML5+lufylegend實現游戲中的卷軸
編輯:HTML5詳解     
lufylegend是一個HTML5開源引擎,它實現了利用仿ActionScript3.0的語法進行Html5的開發, 包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多個AS開發人員熟悉的類, 支持Google Chrome,Firefox,Opera,IE9,iOS,android等多種熱門環境。 利用lufylegend可以輕松的使用面向對象編程,並且可以配合Box2dWeb制作物理游戲, 另外它還內置了LTweenLite緩動類等非常實用的功能, 現在開始使用它吧,它可以讓你更快的進入Html5的世界! 
什麼是卷軸 
玩過RPG或者橫版格斗的同學應該知道,人物走到屏幕中央後,由於地圖過大,地圖會進行移動,人物則相對靜止不動。這個就是傳說中的卷軸。例如下圖是我的游戲“三國戰線”裡的卷軸: 


有了以上的簡介,大家應該明白了什麼是卷軸。說白了就是鏡頭跟隨主角的效果。接下來,我們就利用lufylegend.JS游戲引擎來實現這個效果。 
原理介紹 
其實實現這個效果的關鍵在於如何使人物靜止,何時移動地圖,以及如何移動地圖。在探究這個兩個問題之前,我們先創建一個結構良好的舞台層(及一個LSprite對象),以便以後的操作。舞台結構如下: 
+- 舞台層 

+- 地圖層 

+- 人物層 
可見舞台層就是地圖層和人物層的父元素,並且人物層在地圖層上方,畢竟人物是站在地圖上的。我們知道,子對象的坐標是相對於父對象的,所以移動父對象,子對象會跟著移動。這點要先弄明白。 
如何使人物靜止呢?何時移動地圖呢?如何移動地圖呢?也許你會想,首先用if(xxx){...}來判斷人物的坐標是否達到屏幕中央,如果是,則移動地圖對象,如果不是則移動人物對象。這麼做的話就麻煩了。其實有更簡單的方法: 
卷軸/不卷軸時,我們的人物都是在移動,但是如果人物達到屏幕中央時,要開始卷軸了,我們的舞台層就進行與人物速度方向相反、大小相同的移動,那麼人物的相對於canvas畫布的位移就抵消了,看上去就是靜止的,而地圖就跟著父類向反方向移動。這個類似於拍古裝電影,拍兩個人一邊騎馬一邊談話。如果人和馬在前進,攝像機以相同的速度跟拍,那麼得到的畫面就是人物並沒有移動,而人物背後風景是在移動的。 
接下來看實現代碼。 
實現代碼 
以下是含有詳細注釋的代碼: 
XML/Html Code復制內容到剪貼板
  1. LInit(30, 'mydemo', 700, 480, main);    
  2. // 移動方向,null代表沒移動    
  3. var direction = null;    
  4. // 小鳥,舞台層,背景對象    
  5. var bird, stageLayer, bg;    
  6. // 每次移動的長度    
  7. var step = 5;    
  8. function main () {    
  9. // 資源列表    
  10. var loadList = [    
  11. {name : 'bird', path : './bird.png'},    
  12. {name : 'bg', path : './bg.jpg'}    
  13. ];    
  14. // 加載資源    
  15. LLoadManage.load(loadList, null, demoInit);    
  16. }    
  17. function demoInit (result) {    
  18. // 初始化舞台層    
  19. stageLayer = new LSprite();    
  20. addChild(stageLayer);    
  21. // 加入背景    
  22. bg = new LBitmap(new LBitmapData(result['bg']));    
  23. bg.y = -100;    
  24. stageLayer.addChild(bg);    
  25. // 加入小鳥    
  26. bird = new LBitmap(new LBitmapData(result['bird']));    
  27. bird.x = 100;    
  28. bird.y = 150;    
  29. stageLayer.addChild(bird);    
  30. // 添加鼠標按下事件    
  31. stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);    
  32. // 添加鼠標彈起事件    
  33. stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);    
  34. // 添加時間軸事件    
  35. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);    
  36. }    
  37. function onDown (e) {    
  38. /** 根據點擊位置設置移動方向 */    
  39. if (e.offsetX > LGlobal.width / 2) {    
  40. direction = 'right';    
  41. } else {    
  42. direction = 'left';    
  43. }    
  44. }    
  45. function onUp () {    
  46. // 設置方向為無方向,代表不移動    
  47. direction = null;    
  48. }    
  49. function onFrame () {    
  50. var _step, minX, maxX;    
  51. /** 移動小鳥 */    
  52. if (direction == 'right') {    
  53. _step = step;    
  54. } else if (direction == 'left') {    
  55. _step = -step;    
  56. } else {    
  57. return;    
  58. }    
  59. bird.x += _step;    
  60. /** 控制小鳥移動范圍 */    
  61. minX = 0,    
  62. maxX = bg.getWidth() - bird.getWidth();    
  63. if (bird.x < minX) {    
  64. bird.x = minX;    
  65. }else if (bird.x > maxX) {    
  66. bird.x = maxX;    
  67. }    
  68. /** 移動舞台 */    
  69. stageLayer.x = LGlobal.width / 2 - bird.x;    
  70. /** 控制舞台移動范圍 */    
  71. minX = LGlobal.width - stageLayer.getWidth(),    
  72. maxX = 0;    
  73. if (stageLayer.x < minX) {    
  74. stageLayer.x = minX;    
  75. }else if (stageLayer.x > maxX) {    
  76. stageLayer.x = maxX;    
  77. }    
  78. }    
運行結果: 


大家可以到這裡查看在線演示。點擊屏幕左半邊控制小鳥向左移動,點擊右半邊屏幕,控制小鳥向右移動。小鳥到達屏幕中央後,開始卷軸。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved