Posted By

whoppingchill on 09/12/13


Tagged

collision Box2D cocos2d-html5


Versions (?)

4 Balls Collision I


 / Published in: JavaScript
 

Simulation of the collision of 4 balls using cocos2d-html5 and box2d.

  1. var PTM_RATIO = 32;
  2. var b2World = Box2D.Dynamics.b2World,
  3. b2Body = Box2D.Dynamics.b2Body,
  4. b2BodyDef = Box2D.Dynamics.b2BodyDef,
  5. b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
  6. b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
  7. b2Vec2 = Box2D.Common.Math.b2Vec2;
  8. var world;
  9.  
  10. var collisionC1B = cc.Scene.extend( {
  11. onEnter:function() {
  12. this._super();
  13.  
  14. var yellowBackground = cc.LayerColor.create(cc.c4b(255,255,0,1));
  15. this.addChild(yellowBackground);
  16.  
  17. var layer = new collisionTest();
  18. layer.init();
  19. this.addChild(layer);
  20. }
  21. })
  22.  
  23. var collisionTest = cc.LayerColor.extend({
  24. init:function () {
  25. this._super();
  26. var s = cc.Director.getInstance().getWinSize();
  27.  
  28. /*
  29. var red = cc.c4f(155, 0, 0, 1);
  30. var green = cc.c4f(0, 155, 0, 1);
  31. var blue = cc.c4f(0, 0, 155, 1);
  32. var yellow = cc.c4f(155, 155, 0, 1);
  33.  
  34. // this.setColor(new cc.Color3B(255, 255, 255));
  35. */
  36.  
  37. var spriteP1 = this.createSprite(50, 300, this),
  38. spriteP2 = this.createSprite(300, 550, this),
  39. spriteP3 = this.createSprite(550, 300, this),
  40. spriteP4 = this.createSprite(300, 50, this);
  41.  
  42.  
  43. // create box2dW world
  44. var gravity = new b2Vec2(0, 0);
  45. this.world = new b2World(gravity);
  46.  
  47. var bodyP1 = this.createBody(spriteP1, this.world),
  48. bodyP2 = this.createBody(spriteP2, this.world),
  49. bodyP3 = this.createBody(spriteP3, this.world),
  50. bodyP4 = this.createBody(spriteP4, this.world);
  51.  
  52. var vel_x = 10, vel_y = 10;
  53. bodyP1.SetLinearVelocity(new b2Vec2(vel_x, 0));
  54. bodyP2.SetLinearVelocity(new b2Vec2(0, -vel_y));
  55. bodyP3.SetLinearVelocity(new b2Vec2(-vel_x, 0));
  56. bodyP4.SetLinearVelocity(new b2Vec2(0, vel_y));
  57.  
  58. this.scheduleUpdate();
  59. return true;
  60. },
  61.  
  62. createBody:function (sprite, world) {
  63. var bodyDef = new b2BodyDef();
  64. bodyDef.type = b2Body.b2_dynamicBody;
  65. var x = sprite.getPositionX(),
  66. y = sprite.getPositionY();
  67. bodyDef.position.Set(x / PTM_RATIO, y / PTM_RATIO);
  68. bodyDef.angularDamping = 0;
  69. bodyDef.userData = sprite;
  70. var body = world.CreateBody(bodyDef);
  71.  
  72. var circle = new b2CircleShape();
  73. circle.m_radius = 32 / PTM_RATIO;
  74.  
  75. var circleDef = new b2FixtureDef();
  76. circleDef.shape = circle;
  77. circleDef.density = 5;
  78. circleDef.friction = 0.5;
  79. circleDef.restitution = 0.5;
  80. body.CreateFixture(circleDef);
  81.  
  82. return body;
  83. },
  84.  
  85. createSprite:function (x, y, layer) {
  86. var sprite = cc.Sprite.create("assets/ball.png");
  87. sprite.setPosition(cc.p(x, y));
  88. layer.addChild(sprite);
  89.  
  90. return sprite;
  91. },
  92.  
  93. update:function (dt) {
  94. var velocityIterations = 6;
  95. var positionIterations = 2;
  96.  
  97. this.world.Step(dt, velocityIterations, positionIterations);
  98.  
  99. //Iterate over the bodies in the physics world
  100. for (var b = this.world.GetBodyList(); b; b = b.GetNext()) {
  101. if (b.GetUserData() != null) {
  102. //Synchronize the AtlasSprites position and rotation with the corresponding body
  103. var myActor = b.GetUserData();
  104. myActor.setPosition(cc.p(b.GetPosition().x * PTM_RATIO, b.GetPosition().y * PTM_RATIO));
  105. myActor.setRotation(-1 * cc.RADIANS_TO_DEGREES(b.GetAngle()));
  106. //console.log(b.GetAngle());
  107. }
  108. }
  109.  
  110. }
  111. })

Report this snippet  

You need to login to post a comment.