Android平台接技术课件 游戏引擎使用.pptxVIP

游戏引擎使用第五章5.1 HTML5 游戏开发5.2 2D 引擎-cocos2d-x 使用 5.3 3D 引擎-unity3d 使用HTML5 游戏开发5.1概述CanvasSVGCanvas VS SVG拖放脚本函数JavaScriptJavaScript基础JavaScript框架jQuery概述在第四章我们提到过，HTML可以用元素来构建网页，CSS可以为其提供样式支持，另外还可以对HTML的内容使用JavaScript来进行访问。JavaScript写成的脚本可以在使用过程中，由浏览器进行解释。HTML5中提供了很多新特性，这使HTML5更适合用于制作游戏。。包括Canvas、SVG、音频视频标准、缓存等。Canvascanvas id=myCanvas width=200 height=100/canvasHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，按像素进行控制。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向 HTML5 页面添加 canvas 元素，规定元素的 id、宽度和高度：Canvasscript type=text/javascript //使用 id 来寻找 canvas 元素 var c=document.getElementById(myCanvas);//创建 context 对象。getContext(2d) 对象是内建的 HTML5 对象，//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var cxt=c.getContext(2d);//下面两行代码绘制一个红色的矩形 cxt.fillStyle=#FF0000; cxt.fillRect(0,0,150,75); /scriptcanvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：CanvasfillRect 方法拥有参数 (0,0,150,75)，意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。Canvas线条：通过指定从何处开始，在何处结束，来绘制一条线。圆形：通过规定尺寸、颜色和位置，来绘制一个圆。渐变：使用指定的颜色来绘制渐变背景。图像：把一幅图像放到画布上。SVGSVG 指可伸缩矢量图形 (Scalable Vector Graphics)。SVG 用于定义用于网络的基于矢量的图形。SVG 使用 XML 格式定义图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。SVG 是万维网联盟的标准。SVG与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被有哪些信誉好的足球投注网站、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 可在图像质量不下降的情况下被放大。SVG!DOCTYPE htmlhtmlbodysvg height=190polygon points=100,10 40,180 190,60 10,60 160,180 style=fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd; //svg/body/html在 HTML5 中，可以将 SVG 元素直接嵌入 HTML 页面中：SVGCanvas依赖分辨率。不支持事件处理器。弱的文本渲染能力。能够以 .png 或 .jpg 格式保存结果图像。最适合图像密集型的游戏，其中的许多对象会被频繁重绘。不依赖分辨率。支持事件处理器。最适合带有大型渲染区域的应用程序（比如谷歌地图）。复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用。拖放!DOCTYPE HTMLhtml head script type=text/javascript function allowDrop(ev) { ev.preventDefault(); } 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 //规定当元素被拖动时，会发生什么 function drag(ev) { ev.dataTransfer.setData(Text,ev.target.id); } //当放置被拖数据时，会发生 drop 事件 function drop(ev) { //规定在何处放置被拖动的数据 ev.preventDefault(); var data=ev.dataTransfer.getData(Text); e