0

i am trying to draw a simple circle using box2d with crafty.js but i can't seem to able to draw it this is the jsfiddle : http://jsfiddle.net/B5UsC/2/

look at this part of the code : 

var ball = Crafty.e("2D, Canvas,Color, Box2D,ball")
                .attr({ x: 10, y: 15, z:5 })
                .color("#fff")
            .box2d({
                bodyType: 'dynamic',
                density: 1.0,
                friction: 2,
                restitution: 0.2,
                shape: 'circle'
            }).onContact("Floor",
                        function (data) { 
                        alert("Hi");
                        });

the weird thing about it is that alert is executed but the ball is not showing . am i missing something please help

Sora
  • 2,465
  • 18
  • 73
  • 146

1 Answers1

3

The external resources

Box2dWeb-2.1.a.3.js

box2d.js

crafty.js

this directs to an Unavailable Page that's why it doesn't work in the fiddle

Try downloading the source CraftyJS,Box2dweb and Box2d

Try and see if that works for you.

Ok I got your code working, it seems that the reference library crafty+box2d is a mod made by the user who made the pong game.

You forgot to put the width w and height h attribute in the .attr of the ball object.

        var ball = Crafty.e("2D, Canvas,Color, Box2D,Ball")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })
            .color("#dddddd")
        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

On the other hand if you want the box outline eating the circle remove the text ,color in the string argument of Crafty.e and erase the .color property

        var ball = Crafty.e("2D, Canvas,ball, Box2D,")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })

        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

Hope this helps :)

Mike Ante
  • 746
  • 1
  • 6
  • 18
  • HTTP ERROR: 403 Problem accessing /file/seekpunk1-OrionContent/crafty/box2d.js. Reason: You are not authorized to access /file/seekpunk1-OrionContent/crafty/box2d.js not a good site for uploading public external resources. – Mike Ante Jul 25 '14 at 07:41
  • I checked your code and method of `Crafty` `Crafty.box2D.init` doesn't seem to exist. – Mike Ante Jul 25 '14 at 08:03
  • what do you mean it doesn't seem to exist i get the code from here : `https://github.com/shogoki-vnz/CraftyBox2D/blob/master/pong.js` `ball = Crafty.e("2D, Canvas, ball, Box2D") .attr({ x: hw-15, y: 575, z: 1, isBall:true}) .box2d({ bodyType: 'dynamic', density : 1, friction : 0.2, restitution : 1, shape : 'circle' })` – Sora Jul 25 '14 at 08:07
  • I edited my answer please recheck :) Ok I got your code working, it seems that the reference library crafty+box2d is a mod made by the user who made the pong game. You forgot to put the width w and height h attribute in the .attr of the ball obje – Mike Ante Jul 25 '14 at 08:31
  • adding a width and height will make the object a rectangle and not a ball :/ i wanted my object to be a ball – Sora Jul 25 '14 at 08:35
  • Please double check my answer this is not a rectangle. width and height only defines the size of the ball. Using the string color in the attribute only displays a rectangle. Please double check mine's only a ball falling, no rectangles – Mike Ante Jul 25 '14 at 08:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57981/discussion-between-sora-and-mike-ante). – Sora Jul 25 '14 at 08:42
  • can you please tell me how can i add a color to my circle when i am not using : `Crafty.box2D.showDebugInfo();` – Sora Jul 25 '14 at 11:31