软件工程师-使用HTML5制作物理游戏设计案例VIP免费

第1页共5页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页共5页使用HTML5制作物理游戏设计案例HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。本文由NTFusion团队所作，结合了他们在GoogleChromeWebStore上发布的《拯救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。在阅读本文之前，您可以从ChromeWebStore安装《拯救PAPA》来尝个鲜儿。搭建物理世界物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。Box2D引擎里面有一个很好的功能DebugDraw，可以模拟出我们预设的物理世界并展示给我们看，非常适合我们做快速游戏原型开发。下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界实例：图1构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。1.//创建物理世界实例2.varworld=newb2World(newb2Vec2(0,9.8),true);3.varscale=1/30;/*像素与Box2D里的长度单位的转换*/4.5.//创建地面和其物理性质的设定6.varbodyDef=newb2BodyDef();7.varbody=world.CreateBody(bodyDef);8.varfixtureDef=newb2FixtureDef();第2页共5页第1页共5页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共5页9.fixtureDef.density=10;10.fixtureDef.friction=0.3;11.fixtureDef.restitution=0.1;12.varpolygonShape=newb2PolygonShape();13.polygonShape.SetAsBox(800*scale,20*scale);14.fixtureDef.shape=polygonShape;body.SetType(b2Body.b2_staticBody);15.body.CreateFixture(fixtureDef);16.body.SetPosition(newb2Vec2(400*scale,490*scale));17.18.//创建PAPA方块和其物理性质的设定19.varbodyDef=newb2BodyDef();20.varbody=world.CreateBody(bodyDef);21.varfixtureDef=newb2FixtureDef();22.fixtureDef.density=10;/*density为密度*/23.fixtureDef.friction=0.3;/*friction为摩擦系数*/24.fixtureDef.restitution=0.8;/*restitution为弹性系数*/25.varpolygonShape=newb2PolygonShape();26.polygonShape.SetAsBox(30*scale,30*scale);27.fixtureDef.shape=polygonShape;28.body.SetType(b2Body.b2_dynamicBody);29.body.CreateFixture(fixtureDef);30.body.SetPosition(newb2Vec2(400*scale,100*scale));物理世界构建完毕后，通过DebugDraw功能我们就可以看到游戏的原型，这样我们就可以在这个基础上调整物体的参数、制作关卡等等。这些工作完成以后，下一步我们需要在物理物体上“贴”上图片，这样玩家才可以看到真实的游戏画面。同步显示对象首先，我们需要创建一个DisplayObject类，其类似于Flash显示列表机制中的显示类，该类有x、y和rotation等相应属性，并且有自身的绘图方法，再通过数组形式来实现显示列表。下一步，我们将需要显示的DisplayObject加入显示列表，再将其与Box2D中对应的物体的位置，自身旋转角度进行同步：1.varposition=body.GetPosition();2.varangle=body.GetAngle();3.displayObject.x=position.x/scale;4.displayObject.y=position.y/scale;5.displayObject.rotation=angle*180/Math.PI;根据图1中的物理世界，我们画上图片之后，就可以见到下图的画面：第3页共5页第2页共5页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第3页共5页图2动画DisplayObject与物理物体的同步处理好之后，我们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的效果。通常，动画是由很多张图片组成的，为了减少读取次数，我们将动画中的所有的图片合成为一张大图，称为SpriteSheet。图3为《拯救PAPA》中1号工具的动画SpriteSheet：第4页共5页第3页共5页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第4页共5页图3然后，...