{"_id":"box-sprite-svg","_rev":"478301","name":"box-sprite-svg","description":"2d physics container for svg elements","dist-tags":{"latest":"1.2.0"},"maintainers":[{"name":"substack","email":"substack@gmail.com"}],"time":{"modified":"2017-03-28T06:43:09.000Z","created":"2014-08-03T07:25:24.835Z","1.2.0":"2014-08-04T10:07:46.858Z","1.1.0":"2014-08-04T09:55:25.966Z","1.0.0":"2014-08-03T07:25:24.835Z"},"users":{"rafszul":true,"tetotechy":true},"author":{"name":"James Halliday","email":"mail@substack.net","url":"http://substack.net"},"repository":{"type":"git","url":"git://github.com/substack/box-sprite-svg.git"},"versions":{"1.2.0":{"name":"box-sprite-svg","version":"1.2.0","description":"2d physics container for svg elements","main":"index.js","dependencies":{"inherits":"~2.0.1","svg-create-element":"~1.0.0"},"devDependencies":{"frame-loop":"~1.0.0","keynames":"~0.0.0","tape":"^2.13.2"},"scripts":{"test":"tape test/*.js"},"repository":{"type":"git","url":"git://github.com/substack/box-sprite-svg.git"},"homepage":"https://github.com/substack/box-sprite-svg","keywords":["svg","game","simulation","browser","dom","physics","velocity","acceleration","position","motion"],"author":{"name":"James Halliday","email":"mail@substack.net","url":"http://substack.net"},"license":"MIT","gitHead":"21cfd83eb1d21521f61746018a307291af1653d7","bugs":{"url":"https://github.com/substack/box-sprite-svg/issues"},"_id":"box-sprite-svg@1.2.0","_shasum":"3fceea576e9ec9bf6c2666ebb51f3916d1d2f794","_from":".","_npmVersion":"1.4.21","_npmUser":{"name":"substack","email":"mail@substack.net"},"maintainers":[{"name":"substack","email":"substack@gmail.com"}],"dist":{"shasum":"3fceea576e9ec9bf6c2666ebb51f3916d1d2f794","size":3000,"noattachment":false,"tarball":"https://registry.npm.taobao.org/box-sprite-svg/download/box-sprite-svg-1.2.0.tgz"},"directories":{},"publish_time":1407146866858,"_cnpm_publish_time":1407146866858,"_hasShrinkwrap":false},"1.1.0":{"name":"box-sprite-svg","version":"1.1.0","description":"2d physics container for svg elements","main":"index.js","dependencies":{"inherits":"~2.0.1","svg-create-element":"~1.0.0"},"devDependencies":{"frame-loop":"~1.0.0","keynames":"~0.0.0","tape":"^2.13.2"},"scripts":{"test":"tape test/*.js"},"repository":{"type":"git","url":"git://github.com/substack/box-sprite-svg.git"},"homepage":"https://github.com/substack/box-sprite-svg","keywords":["svg","game","simulation","browser","dom","physics","velocity","acceleration","position","motion"],"author":{"name":"James Halliday","email":"mail@substack.net","url":"http://substack.net"},"license":"MIT","gitHead":"bcf62baf9379c83f7d056a6679f8b83244a10bd5","bugs":{"url":"https://github.com/substack/box-sprite-svg/issues"},"_id":"box-sprite-svg@1.1.0","_shasum":"32dfded686fe1b5294fe369742757479a5378719","_from":".","_npmVersion":"1.4.21","_npmUser":{"name":"substack","email":"mail@substack.net"},"maintainers":[{"name":"substack","email":"substack@gmail.com"}],"dist":{"shasum":"32dfded686fe1b5294fe369742757479a5378719","size":2969,"noattachment":false,"tarball":"https://registry.npm.taobao.org/box-sprite-svg/download/box-sprite-svg-1.1.0.tgz"},"directories":{},"publish_time":1407146125966,"_cnpm_publish_time":1407146125966,"_hasShrinkwrap":false},"1.0.0":{"name":"box-sprite-svg","version":"1.0.0","description":"2d physics container for svg elements","main":"index.js","dependencies":{"inherits":"~2.0.1","svg-create-element":"~1.0.0"},"devDependencies":{"frame-loop":"~1.0.0","keynames":"~0.0.0","tape":"^2.13.2"},"scripts":{"test":"tape test/*.js"},"repository":{"type":"git","url":"git://github.com/substack/box-sprite-svg.git"},"homepage":"https://github.com/substack/box-sprite-svg","keywords":["svg","game","simulation","browser","dom","physics","velocity","acceleration","position","motion"],"author":{"name":"James Halliday","email":"mail@substack.net","url":"http://substack.net"},"license":"MIT","gitHead":"6e6a5c9a31ecc19fbec974ebc6be04aa60cf1569","bugs":{"url":"https://github.com/substack/box-sprite-svg/issues"},"_id":"box-sprite-svg@1.0.0","_shasum":"36572a8fa429426ba2c45ec20b5280c1702352aa","_from":".","_npmVersion":"1.4.21","_npmUser":{"name":"substack","email":"mail@substack.net"},"maintainers":[{"name":"substack","email":"substack@gmail.com"}],"dist":{"shasum":"36572a8fa429426ba2c45ec20b5280c1702352aa","size":2819,"noattachment":false,"tarball":"https://registry.npm.taobao.org/box-sprite-svg/download/box-sprite-svg-1.0.0.tgz"},"directories":{},"publish_time":1407050724835,"_cnpm_publish_time":1407050724835,"_hasShrinkwrap":false}},"readme":"# box-sprite-svg\n\n2d physics container for svg elements\n\n# example\n\nTo drive an svg circle around, starting from this html:\n\n``` html\n\n\n \n \n \n \n \n \n\n```\n\nwe can wrap the player element in a sprite and change its velocity when a key is\npressed:\n\n``` js\nvar Sprite = require('box-sprite-svg');\nvar Loop = require('frame-loop');\nvar keyname = require('keynames');\n\nvar elem = document.querySelector('svg #player');\nvar sp = Sprite(elem);\n\nvar engine = Loop(function (dt) {\n sp.tick(dt);\n});\nengine.run();\n\nwindow.addEventListener('keydown', function (ev) {\n var name = keyname[ev.which];\n if (name === 'left') sp.velocity.x = -300;\n if (name === 'right') sp.velocity.x = 300;\n if (name === 'up') sp.velocity.y = -300;\n if (name === 'down') sp.velocity.y = 300;\n});\nwindow.addEventListener('keyup', function (ev) {\n var name = keyname[ev.which];\n if (name === 'left' || name === 'right') sp.velocity.x = 0;\n if (name === 'up' || name === 'down') sp.velocity.y = 0;\n});\n```\n\n# methods\n\n``` js\nvar Sprite = require('box-sprite-svg');\n```\n\n## var sp = Sprite(elem, fn)\n\nCreate a new sprite instance `sp` given an element `elem`.\n\nOptionally register an `fn` handler for the `'tick'` event.\n\nYou can also create a new `Sprite` using inheritance with a module like\n[inherits](https://npmjs.org/package/inherits):\n\n``` js\nvar Sprite = require('box-sprite-svg');\nvar inherits = require('inherits');\n\ninherits(Player, Sprite);\n\nfunction Player (elem) {\n if (!(this instanceof Player)) return new Player(elem);\n Sprite.call(this, elem);\n}\n\nPlayer.prototype.jump = function () {\n if (this.position.y !== 0) return;\n this.velocity.y = -1450;\n this.acceleration.y = 120;\n};\n```\n\n## sp.bbox()\n\nReturn the bounding rectangle of the underlying svg element. This is very handy\nfor computing collisions among sprites.\n\n## sp.appendTo(target)\n\nAppend the current sprite element to a dom node or query selector string\n`target`.\n\n## sp.tick(dt)\n\nCall this method when you want the sprite to advance by `dt`, a time delta in\nmilliseconds.\n\n## sp.reset()\n\nSet the motion properties all back to `(0,0)`, remove the element from its\nparent node, and unregister all listeners.\n\nThis method is very handy for reusing sprites, which you'll probably want to do\nfor performance reasons.\n\n# properties\n\n## sp.acceleration = { x: 0, y: 0 }\n\nChange in velocity as pixels per second per second\n\n## sp.velocity = { x: 0, y: 0 }\n\nChange in position as pixels per second\n\n## sp.position = { x: 0, y: 0 }\n\nCoordinates as pixels\n\n# events\n\n## sp.on('tick', function (dt) {})\n\nEvery time `.tick(dt)` is called with the time delta `dt`, this event fires.\n\n## sp.on('reset', function () {})\n\nWhen the `.reset()` method is called, this event fires.\n\n# install\n\nWith [npm](https://npmjs.org) do:\n\n```\nnpm install box-sprite-svg\n```\n\n# license\n\nMIT\n","_attachments":{},"homepage":"https://github.com/substack/box-sprite-svg","bugs":{"url":"https://github.com/substack/box-sprite-svg/issues"},"license":"MIT"}