前段时间,用Html5的canvas做个小游戏,一是想尝试一下canvas的功能,二是 体验 一下html5的一些新特性。当网页游戏做完后,又尝试了一下html5所谓的一次开发,多平台受用的特点,直接用html5创建了android 应用。 在这个过程中有一些经验和体会在这里总结一下。
本节主要总结HTML5的一些新特性的尝试。
1. 让游戏动起来
window.requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {window.setTimeout(callback, 1000/60);};})();
2. canvas来渲染动画
(1)纹理渲染
canvas的drawImage是个很好用的功能,渲染2d纹理完全够用。它支持截取部分纹理,并指定应用的区域,实现了纹理映射和纹理的放大缩小。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
但是如果图片放得过大,会出现失真的情况。假如在实际使用中需要实现物体放大缩小的功能,则需要特别注意选择合适分辨率的图片。
(2)canvas性能优化
canvas的性能问题需要谨慎处理,差不多每帧渲染七八幅图就能感觉帧数明显的下降。最后使用canvas的预渲染才解决问题。
所谓预渲染是指先把纹理图片渲染在隐藏的canvas上,由于drawImage不仅支持把image画在canvas上,还支持把canvas画在canvas上,在每帧drawImage的时候把隐藏的canvas作为source。这样只需要在初始化的时候加载一次图片,渲染在隐藏的canvas上。然后在每帧渲染时相当于从缓存中读取数据,从而加快了渲染速度。应用这种方法后,帧数一下子就恢复正常了。
context.drawImage(m_canvas, 0, 0);
在使用预渲染的时候要注意的一点,要确保图片加载完了再drawImage,否则会在后续渲染的时候出现空白的情况。可以用图片的预加载,或者用image的onload事件,等图片加载完了,再渲染到隐藏的canvas上。
img.onload = function(){m_canvas.getContext("2d").drawImage(img,0,0);
}
另外还可以使用多重canvas来提高性能。一个canvas作为静态的背景,另一个来渲染动画。这样对于静态的背景,不用每帧重绘。重绘的区域越小,帧数就越高。
<canvas id="background" width="640" height="480" style="position:absolute; z-index:0;"></canvas>
<canvas id="sprite" width="640" height="480" style="position:absolute; z-index:1;"></canvas>
3. 实现触摸功能
要实现想用触摸功能来操作物体,需要用到touch event。根据w3c规范,touch event分touchstart, touchmove, touchend, touchcancle四种类型。
当touch发生时,拖动准备,拖动开始时,处理拖动事件,touch结束,拖动完成。例子如下:
canvas.ontouchstart = function(e){ drag = true;};
canvas.ontouchmove = touchHandler;
canvas.ontouchend = canvas.ontouchcancel = function(e){ drag = false;};
4. 用webstorge存储游戏信息
webstorage是一个很好用同时又很易用的功能。webstorage包括localStoarge和sessionStorage。localStorage是存储在本地的持久化数据,可以用来存取游戏的level等数据。sessionStorage中存取的数据只在当前session中有效,可以用来存取当前bonus等一些不需要永久存取的数据。
简单好用,例子如下:
var level = localStorage.level; //读数据
localStorage.level = 1; //写数据
if(localStorage.level) //判断是否定义过
5. 让游戏绘声绘色
游戏里面加入音乐也是非常重要的。html5的audio用起来比较简单,利用html5的<audio>标签就可以了,就不多说了。但是要注意的是各浏览器支持的音频格式的问题。现在支持的情况是:
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:
Browser | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | NO | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | NO | YES | YES |
6. 自适应分辨率
网页游戏用游览器打开时,只有全屏才能带来游戏的沉浸感。试图想实现fullscreen,但由于各浏览器支持不一样,暂时搁浅。
根据屏幕分辨率的大小,让canvas自适应大小。采用的方法是,在html文件中定义一个canvas的默认大小,在初始化时再根据屏幕的大小重新定义canvas。不过由于各个浏览器的屏幕大小的API实现也不太一样,效果也不甚理想。
canvas.width = document.body.scrollWidth;
canvas.height = document.body.scrollHeight;
这一部分只有以后再改进了。
下一节将介绍这些新的html5功能,在android中的支持情况。待续。。。