{"_id":"@codyloyd/minotaur-base","_rev":"1-83af13801f9a752b9f6261d67d71ea35","name":"@codyloyd/minotaur-base","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@codyloyd/minotaur-base","version":"1.0.4","description":"a minimal javascript game toolkit","main":"src/index.js","scripts":{"docs:dev":"vuepress dev docs","docs:build":"vuepress build docs","test":"echo \"Error: LOL TESTS... riiiiight\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/codyloyd/minotaur.git"},"keywords":["game"],"author":{"name":"Cody Loyd","email":"codyloyd@gmail.com","url":"https://codyloyd.com/"},"license":"MIT","bugs":{"url":"https://github.com/codyloyd/minotaur/issues"},"homepage":"https://github.com/codyloyd/minotaur#readme","devDependencies":{"eslint":"6.8.0","eslint-config-airbnb-base":"14.1.0","eslint-config-prettier":"6.11.0","eslint-plugin-import":"2.20.2","prettier":"2.0.5","vuepress":"1.5.0"},"gitHead":"95bef31bff2c37f5b70c1cf8d6f0256d8544d55c","_id":"@codyloyd/minotaur-base@1.0.4","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"codyloyd","email":"codyloyd@gmail.com"},"dist":{"integrity":"sha512-KDR8jxixse1lqrlYhob/xZ+KaMh8grpPFDaR+sfANpLD5HeVxyZYLmnpOS0Axj3LfeJqPsQzrQNcLoEXdy55ZA==","shasum":"c1ecc562c6b52190aba0b3e1bb5357dce810adc4","tarball":"https://registry.npmjs.org/@codyloyd/minotaur-base/-/minotaur-base-1.0.4.tgz","fileCount":44,"unpackedSize":762254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXcQCRA9TVsSAnZWagAABskP/1XniPo+oeBNr0wOjYr9\n9RJSpbcBf6wWSIhhogjl0rQA8UfMeD1+ENLpMa+Swor8N78eTzY7tpmWEZAp\nppyVRTmoys2QKzguxnkkmQKMiKMAwwwBiPN4yj5P7gP/qNj/yYo+VG3pgjBX\nDHOUJgGlD72Pltg1voAV686GwJtpCyiQJWreLczBgR7bK7waZ7WkLrA4ovbL\nh//KA+ymlT4FyuOmV+2zIh2Mm6zQlJQl/kAo/2OB0d03SrYH2GE2LTMfXVa+\neRuCXnYhn4Zg1As2U5eYc82L9kLomuDiLRAsfGDNIvfvRRTIh06hhlLdm28y\nfCdo/RbIk73IRnrpTu+qd8RUbjeonNRdyvOgfYSAqi7L1qaPyeAdsq7lE3qY\nDb8IsfgEzkpq/e6xDralnra1pNNO4ZlF7Utz0+Ua/a/6CVdEbMJjhncS5l/j\nE1mXqHWdA7+AWgFbXxDkOy/0iQPrRDNkxUGKfaqA++LngPOO3NdOh0yskMRo\nNVTFhynEx2qb/DVaRbk5E7xqev1mOLPZSbfN4SOAJJc7gZXW3+HOqYtJrIbI\nQpmU+LdSmW5i+QI5jA04jDumAdaYHQ0bgnkqcMinwKzN40HA1+yxK86lG1LK\ntqyukq2vGCtxUsOIlYkC1C/QhDtC35SN0HAR/Np7F9yOMFx3Q06FCseCMjsy\nUcW9\r\n=BmJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnQ1vc6ffZH/3KbFOHdjGXCJX6DQiy15Wxwi3votPcIgIhAOgezuMESVpP7h16R7lk3eF+TfJB9KTnvcGvNh3kFbeF"}]},"maintainers":[{"name":"codyloyd","email":"codyloyd@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/minotaur-base_1.0.4_1590523664207_0.024064601722953105"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-26T20:07:44.172Z","1.0.4":"2020-05-26T20:07:44.477Z","modified":"2022-04-05T00:10:18.047Z"},"maintainers":[{"name":"codyloyd","email":"codyloyd@gmail.com"}],"description":"a minimal javascript game toolkit","homepage":"https://github.com/codyloyd/minotaur#readme","keywords":["game"],"repository":{"type":"git","url":"git+https://github.com/codyloyd/minotaur.git"},"author":{"name":"Cody Loyd","email":"codyloyd@gmail.com","url":"https://codyloyd.com/"},"bugs":{"url":"https://github.com/codyloyd/minotaur/issues"},"license":"MIT","readme":"# Minotaur Game Toolkit\n\nA minimal JavaScript game toolkit.\n\n## WHAT? WHY?\n\nMost JavaScript game frameworks do _too much_.  For small game prototypes and game-jam projects, you don't really need all the overhead and fuss associated with some of the other popular JavaScript game frameworks.\n\nJavaScript, and the HTML Canvas API are quite capable by themselves.\n\nThis toolkit fills in the gap between manipulating the Canvas directly, and using a monolithic framework by setting up the canvas and a game-loop for you.\n\n## Usage\n\nGetting started is _simple_.\n```\n// install with npm\nnpm install @minotaur/base\n```\n\nInclude and initialize: \n```javascript\nimport {Game} from '@minotaur/base'\n\nconst game = new Game({\n  width: 480,\n  height:  360,\n  parent: 'game'\n})\n// `parent` is the id of an element to which Minotaur will append the game-canvas\n\n\ngame.update = function(dt) {\n  // update game state here\n}\n\ngame.draw = function() {\n  // draw game elements here\n}\n\n// call game.start() to start the game loop!\ngame.start()\n```\n\n### drawing to the canvas\n\nMinotaur simply exposes the native HTML Canvas API, so drawing images, shapes and text is as simple as referencing that API through the game object with `game.context`.\n\nthis example draws a \"darkblue\" rectangle to the canvas\n```javascript\nconst game = new Game({\n  width: 480,\n  height:  360,\n  parent: 'game'\n})\n\ngame.draw = function() {\n  game.context.fillStyle = \"darkblue\"\n  const x = 100\n  const y = 100\n  const width = 25\n  const height = 75\n  game.context.fillRect(x,y,width,height)\n}\n```\n\nRefer to documentation for the [HTML Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) for everything you can do here. \n\n### make it GO!\nMaking a proper game requires things to move around! JavaScript already includes everything you need to create and update variables to make things animate across your canvas.\n```javascript\nlet rectangle = {x: 10, y: 10, width: 20, height: 20}\n\ngame.update = function(dt) {\n  rectangle.x += 50 * dt\n  rectangle.y += 50 * dt\n}\n\ngame.draw = function() {\n  // clears the screen so each frame gets a clear canvas\n  game.context.clearRect(0, 0, game.width, game.height)\n\n  game.context.fillStyle = \"darkblue\"\n  game.context.fillRect(\n    rectangle.x,\n    rectangle.y,\n    rectangle.width,\n    rectangle.height\n  )\n}\n```\nthe `update` and `draw` functions attempt to run at 60fps... so in the above example the rectangle object is updated consistently so that it moves across the screen as it is drawn.\n\nthe function parameter `dt` stands for Delta Time. It is the amount of time that has passed between each frame, in milliseconds.  Use this variable when manipulating variables so that the speed of your animation does not fluctuate if the animation framerate fluctuates.  For more details see (this article)[https://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing].\n\n## Drawing images\n\nDrawing individual images with the HTML Canvas API is not difficult ([docs here](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)), however most games deal with _large_ numbers of images, and often bundle them into spritesheets.  We've created our SpriteSheet module to make slicing and sorting spritesheets a little easier.\n\n```javascript\nconst spriteSheet = new SpriteSheet({\n  path: \"/img/spritesheet.png\",\n  context: game.context,\n  // the size of each sprite in the spritesheet only used for 'getSprite'\n  // if your sheet has some sprites that don't fit into the grid, you can\n  // use `createSprite` to get them with specific pixel values\n  colSize: 32,\n  rowSize: 32,\n  // optional property, if there is a margin around your sprites\n  margin: 0\n});\n\n// get a sprite by putting in it's row/column on the spritesheet\nconst player = spriteSheet.getSprite(0, 0);\nconst enemy = spriteSheet.getSprite(5, 0);\n\n// alternatively put in actual pixel values, x,y,w,h\nconst enemy2 = spriteSheet.createSprite(128, 0, 32, 32);\n\ngame.draw = function () {\n  //Sprites reference the context passed into the 'spritesheet' constructor\n  //draw takes the standard x, y, width, height, parameters\n  player.draw(100, 100, 100, 100);\n  enemy.draw(300, 200, 100, 100);\n  enemy2.draw(250, 400, 100, 100);\n};\n```\n\n## User Input\n\nThis library does not handle user input.  JavaScript is perfectly capable of handling that all by itself.  Here is a naive example: \n\n```javascript\nconst position = {x:10, y:10}\n\nwindow.onkeydown = function({key}) {\n  if (key=='ArrowRight') {\n    position.x += 10\n  }\n  if (key=='ArrowLeft') {\n    position.x -= 10\n  }\n  if (key=='ArrowUp') {\n    position.y -= 10\n  }\n  if (key=='ArrowDown') {\n    position.y += 10\n  }\n}\n\ngame.draw = function() {\n  game.context.fillRect(position.x, position.y, 10, 10)\n}\n```\n\nSee [this example](https://github.com/codyloyd/tiny-pong/blob/master/src/index.js#L15) for a more nuanced handling of user input.\n","readmeFilename":"README.md"}