BOX2D.JS如何显示物体图片

最新推荐文章于 2024-03-26 09:44:08 发布
VIP文章 最新推荐文章于 2024-03-26 09:44:08 发布
阅读量936 收藏
点赞数
文章标签： box2d.js 自定义图片 canvas html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAILLIBIN/article/details/48529835
版权

BOX2D.JS原本只会通过debugDraw()绘制简单的示意图，要使用我们自己定义的物体图片并显示出来则需要通过获取BOX2D.JS调制绘制DrawDebugData数据中相关物体的坐标、角度、大小，然后依此自己绘制图片到页面上的canvas。


以下是参考案例

<html>

   <head>
      <title>Box2dWeb example</title>
   </head>
   
   <body οnlοad="init();">
   
      <canvas id="canvas" width="640" height="480"></canvas>
	  
	  <!--把图片预先加载隐藏-->
	  <div id="assets" style="display:none">
        <img id="villa" src="villa.png" />
		<img id="house" src="house.png" />
      </div>
	  
   </body>
   
<script type="text/javascript" src="Box2D.js"></script>
<script type="text/javascript">

function init() {
	var b2Vec2 = Box2D.Common.Math.b2Vec2;
	var b2AABB = Box2D.Colli
最低0.47元/天 解锁文章
一粒马豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
box2d-lite：Box2D Lite到TypeScript的端口
02-03
Box2D Lite TypeScript 这是Erin Catto的移植到TypeScript的端口。 v0.0.1 所有类都已移植。 测试台已创建。 一切运行正常，但是每帧生成数量惊人的vec2和mat22实例。 目前，该测试正在20次世界迭代中每帧创建274,000个vec2和37,000个mat22。 这需要排序。 内联数学以进行救援。 20个世界迭代： Frame: 200 = 201,806 vec2s - 36,926 mat22s Frame: 600 = 274,009 vec2s - 37,007 mat22s 10个世界迭代： Frame: 200 = 190,846 vec2s - 36,929 mat22s Frame: 600 = 226,913 vec2s - 37,007 mat22s 从现在开始的所有测试将使用10次迭代。 请注意，总计是在一个框架中创建了多少个全新的vec2和mat22实例。 即纯粹用于碰撞数学。 为什么选择200和600框架？ 因为在Frame 200中，大多数物体都在空中，所以唯一的接触是彼此或钟摆。 到了第600帧
html5游戏开发box2djs,Box2DJS - Physics Engine for JavaScript
weixin_35417884的博客
05-31 145
Click this image to start demos.Note that it takes long time to load the page.Left-click to create an object.Right-click to show next example.What's thisBox2DJS is a JavaScript port of Box2D Physics E...
探索Box2D.js：一款强大的物理模拟引擎
最新发布
gitblog_00083的博客
03-26 238
探索Box2D.js：一款强大的物理模拟引擎 项目地址:https://gitcode.com/kripken/box2d.js Box2D.js 是一个基于Web的开源物理模拟库，由Kripken开发并维护。它是一个轻量级但功能强大的JavaScript实现，原版Box2D是用C++编写的，广泛应用于游戏开发、交互式设计和虚拟实验等场景。 项目简介 Box2D.js提供了现实世界的物理规则，如重...
JavaScript物理引擎之Matter.js与Box2d性能对比
weixin_34279061的博客
01-18 604
前言 在挑选JavaScript 2D物理引擎的时候，不外乎两种主流的选择：第一种是老牌的Box2D，最开始的版本是C++实现的，后来有了很多种实现，比如flash版本和js版本，具体可看：https://stackoverflow.com/que...；第二种是新潮的matter-js，matter-js比较轻量，API和文档都比较有友...
[javascript] Box2D JS初探(一个控制小球的游戏例子)。学习用！
wty19的专栏
04-18 4736
Box2D 开源物理引擎，第一次接触，主要用途应该是做游戏，不过也可以作些简单的特性
html5游戏开发box2djs,Box2D.js简易示例
weixin_39942451的博客
05-31 410
Box2dWeb example//在页面加载完毕后启动整个Box2D程序function init() {//简化缩写各个对象名称var b2Vec2 = Box2D.Common.Math.b2Vec2;var b2AABB = Box2D.Collision.b2AABB;var b2BodyDef = Box2D.Dynamics.b2BodyDef;var b2Body = Box2D....
js2D物理引擎PoorPhy.zip
07-16
它和Box2D Chipmunk2D 一类成熟的物理引擎毫无可比性。 PoorPhy的定位是： 应用于那些需要2D物理效果，但并不要求物理效果需要十分精确（对代码体积 性能 易用性上的要求 远大于 对物理精确度的要求）的场景。 它*...
box2d.js
weixin_34348805的博客
11-28 351
https://github.com/kripken/box2d.js/ Demo: http://kripken.github.io/box2d.js/webgl_demo/box2d.html 演示: http://kripken.github.io/box2d.js/webgl_demo/box2d.html Example code to give you an idea of the A...
使用Box2d实现物体在液体中的漂浮效果（一）
Han的小站
01-03 2007
使用Box2d物理引擎制作物体在液体中的漂浮效果
html5游戏开发box2djs,基于HT for Web 3D呈现Box2DJS物理引擎
weixin_39789690的博客
05-31 190
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库...
box2d入门例子
09-25
box2ddemo，博客参考：http://blog.csdn.net/dingxiaowei2013/article/details/11948285
box2d-wasm:Box2D物理引擎已编译为WebAssembly。 支持TypeScript和ES模块
04-30
box2d-wasm Box2D编译为WebAssembly。 展示柜 展示自定义重力 使用释放 高性能主回路 WebGL渲染 用法 安装 npm i box2d-wasm 然后查看。 替代发行 有关其他功能： 流体模拟 粒子模拟 软体碰撞 您可以从分支进行安装，如下： npm i " box2d-wasm@npm:liquidfun-wasm@^4.0.2 " 执照 Zlib许可。 链接来自Erin Catto的Box2D的MIT许可代码。 从Alon Zakai的box2d.js编译Zlib许可的代码。 项目 与现有的box2d.js软件包相比： box2d.js box2d-wasm旨在支持Box2D v2.4.0 +和TypeScript。 与box2d.js比较 项目目标 在这个monorepo中开发 参见README.dev.md 。
cocos2dx + Box2D 弹弓类游戏源码及图片资源
04-20
本资源用于对cocos2dx + Box2D下的手游开发学习，用于对旋转关节，子弹添加 ，子弹发射的学习。
2D物理引擎 Box2d.js
04-02
Box2DJS是Box2D物理引擎的JavaScript端口。如何引入laya 参考 https://blog.csdn.net/weixin_41316824/article/details/88965058
html5游戏开发box2djs,基于HTML5的WebGL结合Box2DJS物理应用
weixin_39623050的博客
06-10 103
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果：Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了...
Box2D C++ 教程-画自己的图像
hust_superman的专栏
04-11 1247
转载文章：原贴地址：http://ohcoder.com/blog/2012/11/30/drawing-your-own-objects/
关于Box2D加载 贴图 或者说加载 素材
大连 云鹏
08-18 140
最近在研究Box2D 研究这贴图之前，请一定要先搞明白一个HelloWorld，如果Box2D的HelloWorld都没看过的话，可能会不好理解 光是贴图就研究了很长时间 直接入题 目的 是想让游戏角色或者说动作与逻辑代码相分离 目前的看到网上的例子都是直接使用fla文件里面的MovieClip来实现 而这种情况下，使用这个角色对象的话，逻辑代码就要写到fla文件中...
Box2dWeb介绍：HTML5自定义图片创建Box2d项目
weixin_34295316的博客
06-10 194
当我第一次介绍Box2dWeb：使用HTML5开发Box2d项目，一些读者想知道怎样自定义图片，可以替换范例中的盒子。所以下面我就会详细介绍怎样自定义图片，与AS3相比没有特别大的区别。首先我把一个木箱的图片加到网页中，把它放在隐藏层里。请注意第9行~第11行代码。<html> <head> <titl...
对Box2D的物理世界进行图像美化和关卡选择设计
tyler_download的专栏
08-21 379
我们用Box2D绘制了很多几何图形，例如圆形，矩形，复杂一点就是两个矩形交叉的合在一起，中间再加个圆形。显然这种界面“太素”了，一个丰富多彩，五彩斑斓的游戏世界显然不可能那么简陋，本节我们就看看如何让我们当前看似极简的游戏变得“声色犬马”起来。 我们将使用上面的图案替换掉原来单调的集合图形，例如十字交叉的旋转障碍物将会被上图右下角的十字架给替换掉。我们看看代码是如何实现的: // ch...
vue使用box2d-js
05-26
Box2D-js是Box2D物理引擎的JavaScript端口，可以在Vue中使用。你需要先安装Box2D-js库。你可以通过npm安装，使用以下命令： ``` npm install box2d-js ``` 然后在Vue组件中使用Box2D-js，你需要引入Box2D-js库并创建Box2D世界。以下是一个简单的示例： ```html <template> <div> <canvas ref="canvas" width="800" height="600"></canvas> </div> </template> <script> import { b2Vec2, b2World, b2BodyDef, b2BodyType, b2PolygonShape, b2FixtureDef } from 'box2d-js' export default { mounted() { const canvas = this.$refs.canvas const ctx = canvas.getContext('2d') // 创建Box2D世界 const gravity = new b2Vec2(0, 10) const world = new b2World(gravity) // 创建地面刚体 const groundBodyDef = new b2BodyDef() groundBodyDef.position.Set(400 / 30, 550 / 30) const groundBody = world.CreateBody(groundBodyDef) const groundShape = new b2PolygonShape() groundShape.SetAsBox(400 / 30, 10 / 30) const groundFixtureDef = new b2FixtureDef() groundFixtureDef.shape = groundShape groundFixtureDef.density = 0 groundFixtureDef.friction = 0.5 groundFixtureDef.restitution = 0.2 groundBody.CreateFixture(groundFixtureDef) // 创建方块刚体 const boxBodyDef = new b2BodyDef() boxBodyDef.type = b2BodyType.b2_dynamicBody boxBodyDef.position.Set(200 / 30, 50 / 30) const boxBody = world.CreateBody(boxBodyDef) const boxShape = new b2PolygonShape() boxShape.SetAsBox(50 / 30, 50 / 30) const boxFixtureDef = new b2FixtureDef() boxFixtureDef.shape = boxShape boxFixtureDef.density = 1 boxFixtureDef.friction = 0.5 boxFixtureDef.restitution = 0.2 boxBody.CreateFixture(boxFixtureDef) // 模拟世界 setInterval(() => { world.Step(1 / 60, 10, 10) ctx.clearRect(0, 0, canvas.width, canvas.height) // 绘制地面 ctx.beginPath() ctx.moveTo(0, 550) ctx.lineTo(800, 550) ctx.stroke() // 绘制方块 ctx.save() ctx.translate(boxBody.GetPosition().x * 30, boxBody.GetPosition().y * 30) ctx.rotate(boxBody.GetAngle()) ctx.fillRect(-50, -50, 100, 100) ctx.restore() }, 1000 / 60) } } </script> ``` 这个示例创建了一个Box2D世界并在Canvas上绘制了一个方块和地面。你可以根据自己的需求修改这个示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值