Member Avatar for McLaren

index.html

<html>
    <body>


<head>
<!--[if IE]><script src="lib/excanvas.js"></script><![endif]-->  
 <!--<script src="libs/prototype-1.6.0.2.js"></script>  -->

 <!-- <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> -->
 <style type="text/css">
    canvas {
        border: 1px solid green;
    }
 </style>
 <script type="text/javascript" src="libs/jquery-1.7.1.min.js"></script>
<!-- box2djs -->  
  <script src="libs/Box2dWeb-2.1.a.3.min.js"></script>  

 <!--    <script src="libs/box2d.js"></script> -->

  <script src='js/box2dutils.js'></script>  
  <script src='js/game.js'></script>  
</head>

  <canvas id="game" width="600" height="400"></canvas>  
  </body>
 </html>

game.js

http://pastebin.com/VAJE2tiB

box2dutils.js

http://pastebin.com/dBJGz1Lx

By this tutorial:

http://net.tutsplus.com/tutorials/html-css-techniques/build-your-first-game-with-html5/

now I cannot understand why there is no offset fo objects - all of them are drawed on the bottom left corner.

I think lines like this

var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));

had to do the offsetting but they do not work, as you can see I commended out in drawShape() function those lines for at least for code to work.

When I uncomment

var vert = poly.GetVertices();
var tV = b2Math.AddVV(poly.m_position, b2Math.MulMV(poly.m_R, vert[0]));

I get error:
Uncaught TypeError: Cannot read property 'col1' of undefined

What is col1 ? I cannot under stacnd. I look at the framewokr core file and see the function

 b2Math.MulMV = function (A, v) {
      var u = new b2Vec2(A.col1.x * v.x + A.col2.x * v.y, A.col1.y * v.x + A.col2.y * v.y);
      return u;
   }

So it expects col1. But I did not see anywhere in the examples the col1.

vert[0] does not have col1

Here is from the console what this object look like - after the word 'poly':

http://pasteboard.co/KKHiMQd.png

I create the object using CreateBody and CreateFixture so they should care. I don't get it :( spent whole sunday and did not even finish simple thing :(

Edited by McLaren
  • 2 Contributors
  • 2 Replies
  • 164 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by McLaren
Member Avatar for Taywin

The problem is that the library is a hard-coded library which expects a certain type of object to be passed to the function without handling any invalid case. In JavaScript, there is no type checking, so you could pass any thing (including null or undefined) to the function. The function does not have a check because it expects that the passing in argument is an object that has col1 property.

What you may have to do is to trace back to where you create your poly variable. It could be your poly variable or it could be the poly property -- m_R. One of these two is not properly initilised.

Edited by Taywin
Member Avatar for McLaren

thanks for the answer. I now think I take another tutorial, where I will not have to fix version differences, because it takes too much time. See if I can get quicker of something usefull.

Currently vieving this:
http://www.jeremyhubble.com/box2d.html

and will try to combine some other maybe where I see example of how to add static shapes (as obstacles) for the falling objects.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.