html5移动开发制作基于模拟现实物理效果的游戏
2014-03-06 14:07
393 查看
html5移动开发制作基于模拟现实物理效果的游戏
简介
HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间,其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎,我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器,不用安装插件便可以享受到游戏带来的乐趣。下面和大家分享一下使用HTML5开发物理游戏的心得。
搭建物理世界
物理游戏当中的一切物体,都是在一个设定好的物理世界中运作的。创建物理世界,我们现在使用的是Box2D物理引擎的JavaScript版本。构建物理世界的时候,首先我们需要定义相关的物理物体,然后根据游戏的特性所需,设定相关的物理参数。
// 创建物理世界实例
var world = new b2World(new b2Vec2(0, 9.8), true);
var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/
// 创建地面和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10;
fixtureDef.friction = 0.3;
fixtureDef.restitution = 0.1;
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(800 * scale, 20 * scale);
fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 490 * scale));
// 创建PAPA方块和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10; /* density 为密度*/
fixtureDef.friction = 0.3; /* friction 为摩擦系数*/
fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(30 * scale, 30 * scale);
fixtureDef.shape = polygonShape;
body.SetType(b2Body.b2_dynamicBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 100 * scale));
Box2D引擎里面有一个很好的功能DebugDraw,可以模拟出我们预设的物理世界并展示给我们看,非常适合我们做快速游戏原型开发。物理世界构建完毕后,通过DebugDraw功能我们就可以看到游戏的原型,这样我们就可以在这个基础上调整物体的参数、制作关卡等等。
// DebugDraw需要一个canvas实例,所以我们先创建b2DebugDraw实例,并设置相关参数
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
// 捆绑到物理世界实例
world.SetDebugDraw(debugDraw);
这些工作完成以后,下一步我们需要在物理物体上“贴”上图片,这样玩家才可以看到真实的游戏画面。
同步显示对象
首先,我们需要创建一个DisplayObject类,其类似于Flash显示列表机制中的显示类,该类有x、y和rotation等相应属性,并且有自身的绘图方法,再通过数组形式来实现显示列表。
下一步,我们将需要显示的DisplayObject加入显示列表,再将其与Box2D中对应的物体的位置,自身旋转角度进行同步:
var position =body.GetPosition();
var angle =body.GetAngle();
displayObject.x = position.x / scale;
displayObject.y = position.y / scale;
displayObject.rotation = angle * 180 / Math.PI;
动画
DisplayObject与物理物体的同步处理好之后,我们便可以往它里面填充需要显示的图片,然后通过一定的时间间隔更换图片,即可达到动画的效果。通常,动画是由很多张图片组成的,为了减少读取次数,我们将动画中的所有的图片合成为一张大图,称为SpriteSheet。
然后,我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片:
var canvas = document.createElement(“canvas”);
canvas.width = width;/*width为所画图案的宽度*/
canvas.height = height;/* height为所画图案的高度*/
canvas.getContext(’2d’).drawImage(sheet, x, y, width, height, 0, 0, width, height);
简介
HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间,其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎,我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器,不用安装插件便可以享受到游戏带来的乐趣。下面和大家分享一下使用HTML5开发物理游戏的心得。
搭建物理世界
物理游戏当中的一切物体,都是在一个设定好的物理世界中运作的。创建物理世界,我们现在使用的是Box2D物理引擎的JavaScript版本。构建物理世界的时候,首先我们需要定义相关的物理物体,然后根据游戏的特性所需,设定相关的物理参数。
// 创建物理世界实例
var world = new b2World(new b2Vec2(0, 9.8), true);
var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/
// 创建地面和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10;
fixtureDef.friction = 0.3;
fixtureDef.restitution = 0.1;
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(800 * scale, 20 * scale);
fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 490 * scale));
// 创建PAPA方块和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10; /* density 为密度*/
fixtureDef.friction = 0.3; /* friction 为摩擦系数*/
fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(30 * scale, 30 * scale);
fixtureDef.shape = polygonShape;
body.SetType(b2Body.b2_dynamicBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 100 * scale));
Box2D引擎里面有一个很好的功能DebugDraw,可以模拟出我们预设的物理世界并展示给我们看,非常适合我们做快速游戏原型开发。物理世界构建完毕后,通过DebugDraw功能我们就可以看到游戏的原型,这样我们就可以在这个基础上调整物体的参数、制作关卡等等。
// DebugDraw需要一个canvas实例,所以我们先创建b2DebugDraw实例,并设置相关参数
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
// 捆绑到物理世界实例
world.SetDebugDraw(debugDraw);
这些工作完成以后,下一步我们需要在物理物体上“贴”上图片,这样玩家才可以看到真实的游戏画面。
同步显示对象
首先,我们需要创建一个DisplayObject类,其类似于Flash显示列表机制中的显示类,该类有x、y和rotation等相应属性,并且有自身的绘图方法,再通过数组形式来实现显示列表。
下一步,我们将需要显示的DisplayObject加入显示列表,再将其与Box2D中对应的物体的位置,自身旋转角度进行同步:
var position =body.GetPosition();
var angle =body.GetAngle();
displayObject.x = position.x / scale;
displayObject.y = position.y / scale;
displayObject.rotation = angle * 180 / Math.PI;
动画
DisplayObject与物理物体的同步处理好之后,我们便可以往它里面填充需要显示的图片,然后通过一定的时间间隔更换图片,即可达到动画的效果。通常,动画是由很多张图片组成的,为了减少读取次数,我们将动画中的所有的图片合成为一张大图,称为SpriteSheet。
然后,我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片:
var canvas = document.createElement(“canvas”);
canvas.width = width;/*width为所画图案的宽度*/
canvas.height = height;/* height为所画图案的高度*/
canvas.getContext(’2d’).drawImage(sheet, x, y, width, height, 0, 0, width, height);
相关文章推荐
- Unity游戏图形渲染效果系列之基于物理的渲染
- 【图解】通过Expression Blend快速制作具有物理效果的动画游戏
- 如何制作一款像超级玛丽兄弟一样基于平台的游戏-第二部分 (xcode,物理引擎,TMXTiledMap相关应用)
- 【图解】通过Expression Blend快速制作具有物理效果的动画游戏
- Cocos2d-x 2.0.4 如何制作一个基于Tile的游戏(2)
- 使用Cocos2d-x 3.0和物理引擎制作简单的platformer游戏
- (译)加入敌人和战斗:如果使用cocos2d制作基于tiled地图的游戏:第三部分
- 如何使用cocos2dx3.0制作基于tilemap的游戏:第一部分
- (译)如何使用cocos2d制作基于tile地图的游戏教程:第一部分
- Unity的【CaronteFX】插件制作掉落碰撞后破碎的物理效果(2)
- Atitit 游戏引擎---物理系统(1)------爆炸效果
- <cocos2d-x for wp7>使用cocos2d-x制作基于Tile地图的游戏(一)
- 如何使用cocos2dx3.0制作基于tilemap的游戏:第二部分
- 基于安卓5.0水波纹效果制作及自定义水波纹颜色
- 游戏引擎剖析--第5部分: 物理,运动,效果
- Atitit 游戏引擎---物理系统(1)------爆炸效果
- Android基于GridView实现的翻牌游戏效果
- 基于WiEngine游戏引擎--角色基本效果
- 如何使用cocos2dx3.0制作基于tilemap的游戏:第三部分·完