你的位置:首页 > 网页设计

[网页设计]HTML5 Canvas游戏开发(三)lufylegend开源库件(上)


  lufylegend可以解决HTML5开发游戏中会遇到的一些问题:

  1、各种浏览器对于JavaScript和HTML的解析是不一致的。

  2、手机浏览器和PC浏览器的区别。

  3、JavaScript并非面向对象编程,影响了代码的可读性。

  使用开源库件之前先进行初始化,在带中链接框架,并且在HTML中加上以下代码

<div id="mylegend">loading...</div>

  接下来使用库件内置的init方法进行初始化。init函数的原型如下:

  init(speed,divid,width,height,completeFunc,type);

  参数:speed:游戏速度设定。

  divid:传入一个div 的ID,库件初始化时,会将canvas加入到此div内部。

  width:游戏界面宽。

  height:游戏界面高。

  completeFunc:游戏初始化完成后,调用此函数。

  一、图片的加载与显示

  用库件显示图片时,可分为以下几个步骤:

  1、使用Lloader类加载图片数据。

  2、将读取完的图片数据保存到LbitmapData中。

  3、利用Lbitmap将图片显示到画板上。

function main(){    loader = new LLoader();    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    loader.load("1.jpg","bitmapData");  }  function loadBitmapdata(){    var bitmapdata = new LBitmapData(loader.content,50,50,150,150);    var bitmap = new LBitmap(bitmapdata);    addChild(bitmap);  }

  main函数就是加载图片,在图片读取完成之后调用loadBitmapdata函数,而此时的loader.content就是一个Image。

  LBitmapData是库中的一个类,用来保存和读取Image对象。如果要将图片显示到canvas画板上,则需要调用LBitmap类。

  addChild函数是将对象添加到canvas画板上,被添加的对象会按照添加的先后顺序依次显示。

  1、LBitmapData对象:

  构造器:LBitmapData(image,x,y,width,height)

  参数:image:Image对象。

  x:Image可视范围x坐标。

  y:Image可视范围y坐标。

  width、height:可视范围宽和高。

  2、LBitmap对象:控制图片的各种属性。

  坐标X、Y。透明度、旋转角度、缩放等属性。

  3、层的概念

  使用LSprite对象。该对象有坐标、透明度、旋转、缩放等属性,不过控制的是整个层的属性。

var layer = new LSprite();addChild(layer);

  4、使用LGraphics对象绘图

  1.绘制矩形:

  利用LGraphics对象中的drawRect函数绘制矩形。

  drawRect(thickness,lineColor,pointArray,isfill,color)

  参数:thickness:边框线宽。

  lineColor:边框颜色。

  pointArray:矩形范围数组[坐标X、坐标Y、长、宽]。

  isfill:是否填充矩形。

  color:填充颜色。

var graphics = new LGraphics();  //建立一个绘图对象addChild(graphics);   //将其加载到canvas画板上graphics.drawRect(1,'#00000',[50,50,100,100]); //绘制一个空心矩形graphics.drawRect(1,'#00000',[170,50,100,100],true,'#cccccc'); //绘制一个填充矩形

  2.绘制圆

  使用drawArc函数绘制圆。

  drawArc(thickness,lineColor,pointArray.isfill,color)。参数的意义同drawRcet()函数,就不再一一说明。

  3.绘制任意多边形

  drawVertices(thickness,lineColor,vertices,isfill,color)。

  其中的vertices参数:顶点数组[[顶点1],[顶点2],[顶点3]...]。

  4.使用canvas原始绘图函数进行绘图

function main(){   var graphics = new LGraphics();  addChild(graphics);  graphics.add(function(coodx,coody){    LGlobal.canvas.strokeStyle = "#000000";    LGlobal.canvas.moveTo(20,20);    LGlobal.canvas.lineTo(200,200);    LGlobal.canvas.stroke();  });} 

  5.使用LSprite对象进行绘图

  上面讲述的是使用LGraphics对象进行绘图。而每个LSprite对象中都包含一个LGraphics对象。所以上面的功能也可以通过调用LSprite对象中的LGraphics来实现。

function main(){   var layer = new LSprite();  addChild(layer);  layer.graphics.drawRect(1,'#000000',[50,50,100,100]);  layer.graphics.drawRect(1,'#000000',[170,50,100,100],true,'#cccccc');} 

   6.利用LGraphics对象绘制图片

  (1)绘制一个矩形区域的图片

  LGraphics对象的beginBitmapFill函数可以和drawArc函数结合使用。

function main(){   loader = new LLoader();   loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);   loader.load("face.jpg","bitmapData"); } function loadBitmapdata(event){   var bitmapdata = new LBitmapData(loader.content);   var backLayer = new LSprite();  addChild(backLayer);  backLayer.graphics.beginBitmapFill(bitmapdata);  backLayer.graphics.drawRect(1,"#000",[80,50,70,100]);}

  利用beginBitmapFill函数将LBitmapData对象储存在LGraphics对象中。再绘制一个矩形区域,LGraphics对象会直接将储存在自己内部的LBitmapData对象通过这个矩形区域显示出来。

  (二)绘制圆形、多边形区域的图片

  方法同上,只不过将矩形中的drawRcet()函数换成drawArc()函数和drawVertices()函数。

  (三)绘制一个扭曲的图片

  drawTriangles(vertices,indices,uvtData,thickness,color)

  参数:vertices:有数字构成的矢量,其中每一对数字将被视为一个坐标位置。

  indices:由整数或者索引构成的矢量,其中每三个索引定义一个三角形。

  uvtData:用于应用纹理映射的标准坐标构成的矢量。

  thickness:分割完的三角形边框线宽。

  color:分割完的三角形边框颜色。

function main(){   loader = new LLoader();   loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);   loader.load("face.jpg","bitmapData"); } function loadBitmapdata(event){   var bitmapdata = new LBitmapData(loader.content);   var backLayer = new LSprite();  backLayer.x=100;  addChild(backLayer);  vertices = new Array();  //存储了顶点的坐标  vertices.push(0, 0);  vertices.push(0-50, 120);//这里将原坐标的x坐标左移50  vertices.push(0, 240);  vertices.push(120, 0);  vertices.push(120, 120);  vertices.push(120, 240);  vertices.push(240, 0);  vertices.push(240+50, 120);//这里将原坐标的x坐标右移50  vertices.push(240, 240);  indices = new Array();    //定义三角形 在数组vertices中取三个数组成三角形  indices.push(0, 3, 1);  indices.push(3, 1, 4);  indices.push(1, 4, 2);  indices.push(4, 2, 5);  indices.push(3, 6, 4);  indices.push(6, 4, 7);  indices.push(4, 7, 5);  indices.push(7, 5, 8);  uvtData = new Array();  //定义每个点相对于整个图的比例  uvtData.push(0, 0);  uvtData.push(0, 0.5);  uvtData.push(0, 1);  uvtData.push(0.5, 0);  uvtData.push(0.5, 0.5);  uvtData.push(0.5, 1);  uvtData.push(1, 0);  uvtData.push(1, 0.5);  uvtData.push(1, 1);  backLayer.graphics.beginBitmapFill(bitmapdata);  backLayer.graphics.drawTriangles(vertices, indices, uvtData);}