From f6e6c9eda976eb7aede864ceeb55c9da85bba22e Mon Sep 17 00:00:00 2001 From: liabru Date: Sat, 29 Nov 2014 05:15:40 -0800 Subject: [PATCH] created page --- Getting-started.md | 45 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/Getting-started.md b/Getting-started.md index 2534271..ccc394f 100644 --- a/Getting-started.md +++ b/Getting-started.md @@ -1,29 +1,54 @@ ### Install -Download [matter-0.8.0.js](https://github.com/liabru/matter-js/releases/download/0.8.0-alpha/matter-0.8.0.js) or [matter-0.8.0.min.js](https://github.com/liabru/matter-js/releases/download/0.8.0-alpha/matter-0.8.0.min.js) and include the script in your HTML file: +Download the [latest release](https://github.com/liabru/matter-js/releases) and include the script in your web page e.g. - +```html + +``` For the latest features try the [edge version (master)](https://raw.github.com/liabru/matter-js/master/build/matter.js), but it may not be fully stable. ##### Or install using [Bower](http://bower.io/) - bower install matter-js + install matter-js ##### Or install using [NPM](https://www.npmjs.org/) - npm install matter-js + npm install matter-js -### Usage +### Usage example +Here is a minimal example to get you started. +```javascript +// Matter.js module aliases +var Engine = Matter.Engine, + World = Matter.World, + Bodies = Matter.Bodies; -See [Demo.js](https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js) and [DemoMobile.js](https://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js) for many usage examples. -
When loaded, all modules and functions are under the global Matter.* namespace. +// create a Matter.js engine +var engine = Engine.create(document.body); -Some of the demos are avaliable at [codepen.io/liabru](http://codepen.io/liabru/), where you can easily experiment with them! +// create two boxes and a ground +var boxA = Bodies.rectangle(400, 200, 80, 80); +var boxB = Bodies.rectangle(450, 50, 80, 80); +var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); + +// add all of the bodies to the world +World.add(engine.world, [boxA, boxB, ground]); + +// run the engine +Engine.run(engine); +``` + +Include the above script into a page that has Matter.js installed and then open the page in your browser. + +Hopefully you will see two rectangle bodies fall and then hit each other as they land on the ground. +If you don't, check the browser console to see if there are any errors. + +Check out the [demo page](http://brm.io/matter-js-demo/) for more examples and then refer to [Demo.js](https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js) to see how they work. Some of the demos are also available on [codepen](http://codepen.io/collection/Fuagy/), where you can easily experiment with them. ### Documentation -See the [Matter.js API Docs (v0.8.0)](http://brm.io/matter-js-docs/). -
If you're using the [edge version (master)](https://raw2.github.com/liabru/matter-js/master/build/matter.js) then see the [API Docs (master)](http://brm.io/matter-js-docs-master/). \ No newline at end of file +See the latest [Matter.js API Docs](http://brm.io/matter-js-docs/) for detailed information on the API. +If you're using the [edge version (master)](https://raw2.github.com/liabru/matter-js/master/build/matter.js) then see the [API Docs (master)](http://brm.io/matter-js-docs-master/). \ No newline at end of file