h5游戏开发_H5游戏开发利器之Lufylegend

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游戏制作工具下载请点击原文链接。