Return to Snippet

Revision: 54370
at December 21, 2011 18:40 by lspellman


Updated Code
var window = Ti.UI.createWindow();
var view = Ti.UI.createView();
window.add(view);
window.open();

// load the module
var Box2D = require('ti.box2d');

// create the world, using view as the surface
var world = Box2D.createWorld(view);

// create a block
var redBlock = Ti.UI.createView({
    backgroundColor: "red",
    width: 50,
    height: 50,
    top: 0
});

var blueBall = Ti.UI.createView({
    backgroundColor: "blue",
    borderRadius: 15,
    width: 30,
    height: 30,
    top: 100
});

// add the block body to the world
var redBodyRef = world.addBody(redBlock, {
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});

// add the ball body to the world
var blueBodyRef = world.addBody(blueBall, {
    radius: 15,
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});

Ti.Gesture.addEventListener('orientationchange', function(e) {
    if (e.orientation == Titanium.UI.LANDSCAPE<em>LEFT) {
        world.setGravity(9.91, 0);
    } else if (e.orientation == Titanium.UI.LANDSCAPE</em>RIGHT) {
        world.setGravity(-9.91, 0);
    } else if (e.orientation == Titanium.UI.UPSIDE_PORTRAIT) {
        world.setGravity(0, 9.91);
    } else if (e.orientation == Titanium.UI.PORTRAIT) {
        world.setGravity(0, -9.91);
    }
});

world.addEventListener("collision", function(e) {
    if ((e.a == redBodyRef || e.b == redBodyRef) &amp;&amp; e.phase == "begin") {
        Ti.API.info("the red block collided with something");
        Ti.API.info(JSON.stringify(e));
        Ti.Media.vibrate();
    }
});

// start the world
world.start();

Revision: 54369
at December 21, 2011 17:44 by lspellman


Updated Code
var window = Ti.UI.createWindow();
var view = Ti.UI.createView();
window.add(view);
window.open();

// load the module
var Box2D = require('ti.box2d');

// create the world, using view as the surface
var world = Box2D.createWorld(view);

// create a ground level for things to hit
var floor = Ti.UI.createView({
    backgroundColor:'#fff',
    width:310,
    height:2,
    bottom:40
});

//floor.transform = Ti.UI.create2DMatrix().rotate(10);

var b = world.addBody(floor, {
    density:12.0,
    friction:0.3,
    restitution:0.4,
    type:'static'
});

b.setAngle(85);

// create a wall
var leftWall = Ti.UI.createView({
    backgroundColor:'#fff',
    width:2,
    height:200,
    bottom:0,
    left:0
});

world.addBody(leftWall, {
    density:12.0,
    friction:0.3,
    restitution:0.4,
    type:'static'
});

// create a block
var redBlock = Ti.UI.createView({
    backgroundColor: "red",
    width: 50,
    height: 50,
    top: 0
});

var blueBall = Ti.UI.createView({
    backgroundColor: "blue",
    borderRadius: 15,
    width: 30,
    height: 30,
    top: 100
});

// add the block body to the world
var redBodyRef = world.addBody(redBlock, {
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});

// add the ball body to the world
var blueBodyRef = world.addBody(blueBall, {
    radius: 15,
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});

Ti.Gesture.addEventListener('orientationchange', function(e) {
    if (e.orientation == Titanium.UI.LANDSCAPE<em>LEFT) {
        world.setGravity(9.91, 0);
    } else if (e.orientation == Titanium.UI.LANDSCAPE</em>RIGHT) {
        world.setGravity(-9.91, 0);
    } else if (e.orientation == Titanium.UI.UPSIDE_PORTRAIT) {
        world.setGravity(0, 9.91);
    } else if (e.orientation == Titanium.UI.PORTRAIT) {
        world.setGravity(0, -9.91);
    }
});

world.addEventListener("collision", function(e) {
    if ((e.a == redBodyRef || e.b == redBodyRef) &amp;&amp; e.phase == "begin") {
        Ti.API.info("the red block collided with something");
        Ti.API.info(JSON.stringify(e));
        Ti.Media.vibrate();
    }
});

// start the world
world.start();

Revision: 54368
at December 21, 2011 17:40 by lspellman


Initial Code
<p>var window = Ti.UI.createWindow();
var view = Ti.UI.createView();
window.add(view);
window.open();</p>

<p>// load the module
var Box2D = require('ti.box2d');</p>

<p>// create the world, using view as the surface
var world = Box2D.createWorld(view);</p>

<p>// create a ground level for things to hit
var floor = Ti.UI.createView({
    backgroundColor:'#fff',
    width:310,
    height:2,
    bottom:40
});</p>

<p>//floor.transform = Ti.UI.create2DMatrix().rotate(10);</p>

<p>var b = world.addBody(floor, {
    density:12.0,
    friction:0.3,
    restitution:0.4,
    type:'static'
});</p>

<p>b.setAngle(85);</p>

<p>// create a wall
var leftWall = Ti.UI.createView({
    backgroundColor:'#fff',
    width:2,
    height:200,
    bottom:0,
    left:0
});</p>

<p>world.addBody(leftWall, {
    density:12.0,
    friction:0.3,
    restitution:0.4,
    type:'static'
});</p>

<p>// create a block
var redBlock = Ti.UI.createView({
    backgroundColor: "red",
    width: 50,
    height: 50,
    top: 0
});</p>

<p>var blueBall = Ti.UI.createView({
    backgroundColor: "blue",
    borderRadius: 15,
    width: 30,
    height: 30,
    top: 100
});</p>

<p>// add the block body to the world
var redBodyRef = world.addBody(redBlock, {
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});</p>

<p>// add the ball body to the world
var blueBodyRef = world.addBody(blueBall, {
    radius: 15,
    density: 12.0,
    friction: 0.3,
    restitution: 0.4,
    type: "dynamic"
});</p>

<p>Ti.Gesture.addEventListener('orientationchange', function(e) {
    if (e.orientation == Titanium.UI.LANDSCAPE<em>LEFT) {
        world.setGravity(9.91, 0);
    } else if (e.orientation == Titanium.UI.LANDSCAPE</em>RIGHT) {
        world.setGravity(-9.91, 0);
    } else if (e.orientation == Titanium.UI.UPSIDE_PORTRAIT) {
        world.setGravity(0, 9.91);
    } else if (e.orientation == Titanium.UI.PORTRAIT) {
        world.setGravity(0, -9.91);
    }
});</p>

<p>world.addEventListener("collision", function(e) {
    if ((e.a == redBodyRef || e.b == redBodyRef) &amp;&amp; e.phase == "begin") {
        Ti.API.info("the red block collided with something");</p>

<pre><code>    Ti.API.info(JSON.stringify(e));
    Ti.Media.vibrate();
}
</code></pre>

<p>});</p>

<p>// start the world
world.start();</p>

Initial URL
http://lancespellman.com/2011/12/20/cool-box2d-stuff-with-appcelerator-titanium/

Initial Description
A Titanium Appcelerator example for implementing Box2D module

Initial Title
Simple Box2D example

Initial Tags


Initial Language
JavaScript