使用HTML 5制作物理游戏

开发 前端
本文由NTFusion团队所作,结合了他们在Google Chrome Web Store上发布的《拯救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。

HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间,其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎,我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器,不用安装插件便可以享受到游戏带来的乐趣。

本文由NTFusion团队所作,结合了他们在Google Chrome Web Store上发布的《拯救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。

在阅读本文之前,您可以从Chrome Web Store安装《拯救PAPA》来尝个鲜儿。

搭建物理世界

物理游戏当中的一切物体,都是在一个设定好的物理世界中运作的。创建物理世界,我们现在使用的是Box2D物理引擎的JavaScript版本。Box2D引擎里面有一个很好的功能DebugDraw,可以模拟出我们预设的物理世界并展示给我们看,非常适合我们做快速游戏原型开发。

下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界实例:

 

图1.《拯救PAPA》中的物理世界

 

图1

构建物理世界的时候,首先我们需要定义相关的物理物体,然后根据游戏的特性所需,设定相关的物理参数。

  1. // 创建物理世界实例  
  2. var world = new b2World(new b2Vec2(0, 9.8), true);  
  3. var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/  
  4.  
  5. // 创建地面和其物理性质的设定  
  6. var bodyDef = new b2BodyDef();  
  7. var body = world.CreateBody(bodyDef);  
  8. var fixtureDef = new b2FixtureDef();  
  9. fixtureDef.density = 10;  
  10. fixtureDef.friction = 0.3;  
  11. fixtureDef.restitution = 0.1;  
  12. var polygonShape = new b2PolygonShape();  
  13. polygonShape.SetAsBox(800 * scale, 20 * scale);  
  14. fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);  
  15. body.CreateFixture(fixtureDef);  
  16. body.SetPosition(new b2Vec2(400 * scale, 490 * scale));  
  17.  
  18. // 创建PAPA方块和其物理性质的设定  
  19. var bodyDef = new b2BodyDef();  
  20. var body = world.CreateBody(bodyDef);  
  21. var fixtureDef = new b2FixtureDef();  
  22. fixtureDef.density = 10; /* density 为密度*/  
  23. fixtureDef.friction = 0.3; /* friction 为摩擦系数*/  
  24. fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/  
  25. var polygonShape = new b2PolygonShape();  
  26. polygonShape.SetAsBox(30 * scale, 30 * scale);  
  27. fixtureDef.shape = polygonShape;  
  28. body.SetType(b2Body.b2_dynamicBody);  
  29. body.CreateFixture(fixtureDef);  
  30. body.SetPosition(new b2Vec2(400 * scale, 100 * scale)); 

物理世界构建完毕后,通过DebugDraw功能我们就可以看到游戏的原型,这样我们就可以在这个基础上调整物体的参数、制作关卡等等。这些工作完成以后,下一步我们需要在物理物体上“贴”上图片,这样玩家才可以看到真实的游戏画面。

同步显示对象

首先,我们需要创建一个DisplayObject类,其类似于Flash显示列表机制中的显示类,该类有x、y和rotation等相应属性,并且有自身的绘图方法,再通过数组形式来实现显示列表。

下一步,我们将需要显示的DisplayObject加入显示列表,再将其与Box2D中对应的物体的位置,自身旋转角度进行同步:

  1. var position =body.GetPosition();  
  2. var angle =body.GetAngle();  
  3. displayObject.x = position.x / scale;  
  4. displayObject.y = position.y / scale;  
  5. displayObject.rotation = angle * 180 / Math.PI; 

根据图1中的物理世界,我们画上图片之后,就可以见到下图的画面:

 

图2. 真实的游戏画面

 

图2

动画

DisplayObject与物理物体的同步处理好之后,我们便可以往它里面填充需要显示的图片,然后通过一定的时间间隔更换图片,即可达到动画的效果。通常,动画是由很多张图片组成的,为了减少读取次数,我们将动画中的所有的图片合成为一张大图,称为SpriteSheet。图3为《拯救PAPA》中1号工具的动画SpriteSheet:

 

图3.《拯救PAPA》中1号工具的动画SpriteSheet

 

图3

然后,我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片:

  1. var canvas = document.createElement("canvas");  
  2. canvas.width = width;/*width为所画图案的宽度*/  
  3. canvas.height = height;/* height为所画图案的高度*/  
  4. canvas.getContext('2d').drawImage(sheet, x, y, width, height, 0, 0, width, height); 

总结

HTML5技术还在逐步自身完善当中,我们的程序员也正在不断的努力,创作更多的好作品。而本文所谈及的物理世界的构建,显示对象以及对动画播放等技术,对于我们制作HTML5的游戏中是非常有用的。我们期待看到HTML5技术的不断发展和更多创新的HTML5网页游戏。

欢迎大家来试玩NTFusion团队制作的HTML5物理游戏《拯救PAPA》!

原文:http://www.enjoyhtml5.com/2011/11/html5-game-with-box2djs/

【编辑推荐】

  1. 51CTO技术沙龙第十七期:HTML 5应用开发经验分享
  2. HTML 5 Canvas(画布)教程之图像处理
  3. 用HTML 5打造斯诺克桌球俱乐部
  4. 如何使用HTML 5创建在线精美简历
  5. HTML 5新特性Canvas入门秘籍
责任编辑:陈贻新 来源: enjoyhtml5.com
相关推荐

2012-06-07 15:29:31

HTML5

2012-05-17 14:45:34

HTML5

2012-05-17 13:45:35

HTML5

2012-05-18 13:11:09

HTML5

2012-05-18 14:05:53

HTML5

2012-05-18 13:07:04

HTML5

2012-05-18 13:59:45

HTML5

2014-12-30 17:13:51

HTML5

2013-07-10 14:18:24

HTML5手游移动游戏开发手游开发

2012-01-06 14:10:13

HTML 5

2012-05-15 10:35:35

HTML5

2015-07-08 16:38:10

Cocos游戏引擎

2011-12-16 10:08:36

Node.js

2013-10-21 15:24:49

html5游戏

2011-12-21 09:38:31

HTML 5

2012-05-09 09:41:58

HTML5

2013-06-24 14:55:30

HTML5

2012-03-06 10:56:32

HTML 5

2012-05-15 13:57:41

HTML5

2011-12-09 20:25:16

HTML5
点赞
收藏

51CTO技术栈公众号