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);
}
HTML5 Canvas游戏开发(三)lufylegend开源库件(上)的更多相关文章
- html5游戏开发框架之lufylegend开源库件学习记录
下载地址http://lufylegend.com/lufylegend 引用 <script type="text/javascript" src="../luf ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...
- HTML5 Canvas游戏开发(四)lufylegend开源库件(下)
一.文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象. 1.文本属性 创建的文本框对象不会自动加入可视化对象列表中.只有手动调用addChild()方法才能使它 ...
- HTML5 Canvas游戏开发(二)高级功能
一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移 ...
- HTML5 Canvas游戏开发(一)基础知识
一.绘制基本图形 在每次用canvas画布时,都有几步是“套路” 1.在HTML中创建Canvas画布: <canvas id="mycanvas" width=" ...
- HTML5物理游戏开发 - 越野山地自行车(三)粉碎自行车
自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了. ...
- Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架
Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和W ...
- Html5 Egret游戏开发 成语大挑战(一)开篇
最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...
随机推荐
- 科学计算三维可视化---TraitsUI(Group对象组织界面)
使用Group对象组织界面 将一组相关的Item对象组织在一起 from traitsui.api import Group from traits.api import HasTraits,Int, ...
- 用Python来进行词频统计
# 把语料中的单词全部抽取出来, 转成小写, 并且去除单词中间的特殊符号 def words(text): return re.findall('[a-z]+', text.lower()) def ...
- 调用weka模拟实现 “主动学习“ 算法
主动学习: 主动学习的过程:需要分类器与标记专家进行交互.一个典型的过程: (1)基于少量已标记样本构建模型 (2)从未标记样本中选出信息量最大的样本,交给专家进行标记 (3)将这些样本与之前样本进行 ...
- 监控Elasticsearch的插件【check_es_system】
监控Elasticsearch的插件推荐 强大的shell脚本 #!/bin/bash ####################################################### ...
- Spring Enable*高级应用及原理
Enable* 之前的文章用到了一些Enable*开头的注解,比如EnableAsync.EnableScheduling.EnableAspectJAutoProxy.EnableCaching等, ...
- Javascript实现返回上一页面并刷新
今天写了一个小小的提示成功的页面,同时要求返回上一页面,并实现对上一页面的操作进行刷新(例如删除的,添加的),在网上搜寻了一遍,基本上90%的都是说的是用window.history.go(-1), ...
- url添加时间戳
http://blog.csdn.net/qq_36769100/article/details/54564784 URL后面添加随机数通常用于防止客户端(浏览器)缓存页面. 浏览器缓存是基于url进 ...
- 关于在函数中使用Array.prototype.slice.call而不是直接用slice
arguments是每个函数在运行的时候自动获得的一个近似数组的对象(除了length外没有其他属性),这个arguments对象其实并不是Array,所以没有slice方法. Array.proto ...
- win7.wifi热点
使用本地连接上网,将网卡设为wifi热点 cmd 管理员身份运行 netsh wlan set hostednetwork mode=allow ssid=4Gtest key=12345678 网络 ...
- iOS学习笔记(2)— UIView用户事件响应
UIView除了负责展示内容给用户外还负责响应用户事件.本章主要介绍UIView用户交互相关的属性和方法. 1.交互相关的属性 userInteractionEnabled 默认是YES ,如果设置为 ...