Lufylegend是一種基于html5的開源遊戲引擎，它還内置了Box2dWeb,采用javascript語言編寫，使用者通過在網頁中引用相關的Lufylegend.js檔案就可以很友善的利用這個遊戲引擎編寫自己的網頁遊戲。
推薦大家可以參考作者出版的《HTML5 Canvas遊戲開發實戰》一書，非常适合零基礎小白閱讀學習。
本篇文章将帶給大家對Lufylegend.js基礎内容的大緻了解，配合卯月引擎制作開發遊戲則可很便利快速的使用，無需特意記憶書寫繁雜的類。
第一章圖層
層，是一種很很抽象的概念，如在遊戲中有地圖、人物、對話框等。實際上它們都是顯示在層的上面。也正是因為有了層的概念，則可以幫助遊戲開發者建立很清晰的邏輯思路。
通俗的講，就是把不同的圖檔放入不同的層内，它們就會按照先後的順序顯示對象的内容。
層的示意圖
LGraphics對象繪圖類
如果，隻是單獨添加一個層或者多個層，很簡單。
var background= new LSprite();
addChild(background)
雖然，成功添加了一個層，但是，這樣是什麼也看不到的，是以應運而生出了LGraphics繪圖類，它可以清晰明了的看出每個背景層的顔色，以及給層添加圖檔、形狀。
LGraphics是lufylegend庫件中的繪圖類，可以配合層的這種概念使用。
1、如何使用繪圖類形狀顯示圖層背景顔色
drawRect()是矩形形狀，它的内置參數是邊框線、邊框顔色、矩形的數組，包括坐标、長寬。填充、填充顔色。
addChild(thickenss,lineColor,pointArray,isfill,color)
init(50,'mn',500,500,main);function main(){//建立圖層var background_a = new LSprite();var background_b = new LSprite();//添加圖層addChild(background_a);//繪制矩形background_a.graphics.drawRect(1,'#000',[50,50,500,500],true,'#000');background_b.graphics.drawRect(1,'#0BF206',[150,150,200,200],true,'#0BF206');//将B層顯示在A層内background_a.addChild(background_b)}
圖1-0代碼示意圖
2、如何使用繪圖類形狀顯示圖層背景圖檔
若想實作在層背景上顯示圖檔，需要兩個步驟。如下：
- 1.載入背景圖事件
- 2.儲存和讀取圖檔
init(50,'mn',500,500,main);var background;function main(){background = new LLoader;//顯示背景圖檔的事件background.addEventListener(LEvent.COMPLETE,game);//載入背景圖檔background.load('img/background_1.jpg','bitmapData');}function game(event){//此時bitmap就是圖檔的變量var bitmap = new LBitmapData(background.content);loader = new LSprite();addChild(loader);//将背景圖檔加載到矩形形狀内loader.graphics.beginBitmapFill(bitmap);loader.graphics.drawRect(1,'#000',[0,0,500,500]);}
圖1-1代碼示意圖
LGraphics對象繪圖類結語：除了矩形，它還有圓形、多邊形以及将圖檔扭曲形狀，使用方法和矩形沒有太多的差別，在此不一一枚舉。
第二章圖像
第一章節介紹了層的概念，以及如何使用繪圖類。你會發現一個問題，遊戲不僅僅隻有一幅圖檔，它還有人物、UI等等圖檔。
1.如何存儲多張圖檔
LLoadManage靜态類，可以一次性存儲多張圖檔。
LLoadManage.load(需要讀取圖檔數組,讀取數組圖檔後需要調用的函數，可以為空,讀取完後調用的函數);
2.如何顯示多張圖檔
LBitmap對象不但可以将圖檔顯示到畫闆上，它還具備控制圖檔的屬性。
LBitmap(坐标，透明度，旋轉，縮放);
init(50,"mn",960,540,main);var backLayer;var imglist = {};//建立圖檔存儲數組var imgData = new Array({name:"background_1",path:"img/background_1.jpg"},{name:"npc",path:"img/npc.png"});function main(){backLayer = new LSprite();addChild(backLayer);//存儲圖檔LLoadManage.load(imgData,null,game);}function game(result){imglist = result;cLayer_1 = new LSprite();backLayer.addChild(cLayer_1);//讀取名叫background_1的圖檔bitmap = new LBitmap(new LBitmapData(imglist["background_1"],0,0,960,540));cLayer_1.addChild(bitmap);cLayer_2 = new LSprite();cLayer_1.addChild(cLayer_2);//讀取名叫npc的圖檔bitmap = new LBitmap(new LBitmapData(imglist["npc"],0,0,284,540));//使圖檔名叫npc圖旋轉60度bitmap.rotate = 60;cLayer_2.addChild(bitmap);}
圖2-1代碼示意圖
3、Box2d
如果你搞明白了上面的代碼，再來玩一個有意思的東西，它是Box2d拟2D剛體物體的引擎。
- 3.1矩形物體
-
box2d初始化
LBox2d()
-
打開debug模式
LGlobal.setDebug(true)
-
建立Box2d矩形物體
addBodyPolygon(寬，高，靜态/動态，密度，摩擦力，彈力);
init(50,"mn",960,540,main);var backLayer,cLayer;function main(){LGlobal.setDebug(true);backLayer = new LSprite();addChild(backLayer);//添加一個靜态矩形物體LGlobal.box2d = new LBox2d();cLayer = new LSprite();cLayer.x = 300;cLayer.y = 390;backLayer.addChild(cLayer);cLayer.addBodyPolygon(600,10,0,5,0.4,0.2);//添加一個動态矩形物體cLayer = new LSprite();cLayer.x = 300;cLayer.y = 100;backLayer.addChild(cLayer);cLayer.addBodyPolygon(100,60,1,5,0.4,0.2);}
圖2-2代碼示意圖
看上去是不是很簡單，關于如何建立層、添加層上一章節已經提過，沒講的是層它也有自己的屬性。比如坐标、透明度、縮放。
- 3.2矩形物體内添加圖檔
-
還記得LGraphics繪圖對象類是如何給層添加一張背景圖檔的嗎？beginBitmapFill方法同樣适用為box2d物體添加圖檔
beginBitmapFill()
init(50,"mn",960,540,main);var backLayer,cLayer,bitmap;var imglist = {};var imgData = new Array({name:"background_1",path:"img/npc.png"},{name:"background_2",path:"img/npc.png"});function main(){//LGlobal.setDebug(true);LGlobal.box2d = new LBox2d();backLayer = new LSprite();backLayer.graphics.drawRect(10,"#000",[0, 0, 960, 540],false);addChild(backLayer);LLoadManage.load(imgData,null,gameInit);}function gameInit(result){imglist = result;建立靜态矩形物體cLayer = new LSprite();cLayer.x = 300;cLayer.y = 390;backLayer.addChild(cLayer);cLayer.addBodyPolygon(284,10,0,5,0.4,0.2);建立第一動态矩形物體box01 = new LSprite();box01.x = 200;box01.y = 200;backLayer.addChild(box01);bitmap = new LBitmap(new LBitmapData(imglist["background_1"],50,50,284,120));box01.addChild(bitmap);box01.addBodyPolygon(100,60,1,5,0.4,0.2);建立第二動态矩形物體box02 = new LSprite();box02.x = 400;box02.y = 200;backLayer.addChild(box02);bitmap = new LBitmap(new LBitmapData(imglist["background_2"],50,50,284,120));box02.addChild(bitmap);box02.addBodyPolygon(100,60,1,5,0.4,0.2);}
圖2-3代碼示意圖
仔細閱讀2-3代碼，實際上就是給層添加了背景圖檔而已。
本章結語：box2d建立物體同樣也有圓形、多邊形，使用方法與矩形相同，不一一舉例。關于box2d拖拽、關節更加簡單，請參考教程的制作工具。
第三章文本
文本内容和圖像一樣是必不可少的，Lufylegend讓文字顯示變的更加容易。
-
1、如何調用文本框
text = new LTextField();
-
2、如何建立文本内容
text.text = '你好，媚娘網';
-
3、如何改變字型大小
text.size = 100;
-
4、如何改變字型顔色
text.color = #0080FF;
-
5、如何改變字型坐标
text.x = 50;
text.y = 50;
init(50,"mn",960,540,main);function main(){background = new LSprite();addChild(background);text = new LTextField();text.text = '你好，媚娘網';text.color = "#0080FF";text.x = 50;text.y = 50;text.size = 100;background.addChild(text);}
圖3-1代碼示意圖
尾聲
末尾還是要提一句，對于遊戲隻有圖像、文本還是遠遠不夠的，它還需要事件、以及遊戲核心算法。算法已經超出了本篇文章普及範圍了，在這裡不談。但是可以簡單說一下Lufylegend的各類事件，當然，事件也很重要。
-
1、鍵盤事件監聽
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,up);
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,down);
-
2、滑鼠事件監聽
addEventListener(LMouseEvent.MOUSE_DOWN,downshow);
addEventListener(LMouseEvent.MOUSE_UP,upshow);
-
3、循環事件監聽
addEventListener(LEvent.ENTER_FRAME,onframe);
為第三章文本3-1代碼添加鍵盤事件監聽的效果。當按下鍵盤W鍵和松開W按鍵改變文本内容，顯示不同的文字内容。
init(50,"mn",960,540,main);var text,background;function main(){background = new LSprite();addChild(background);text = new LTextField();text.text = '你好，媚娘網';text.color = "#0080FF";text.x = 50;text.y = 50;text.size = 100;background.addChild(text);LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,up);LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,down);}function up(event){if (event.keyCode == 87){text.text = '我是鍵盤按下事件';text.size = 50;}}function down(event){if (event.keyCode == 87){text.text = '我是鍵盤彈起事件';text.size = 50;}}
總結：卯月引擎的開發就是為了使Lufylegend.js更加簡單，對于本篇文章了解後，你隻需使用卯月引擎輕輕松松點幾下就可以快速的建立H5遊戲。
卯月引擎-網頁2d遊戲制作工具下載下傳請點選原文連結。