{"_id":"expo-phaser","_rev":"46-119912a9640b7a9b7bdcbde1ee4ce174","name":"expo-phaser","dist-tags":{"latest":"0.0.1-alpha.0"},"versions":{"0.0.0":{"name":"expo-phaser","version":"0.0.0","keywords":["react","native","react-native","phaser-ce","phaser","expo","exponent","game","gl","graphics","opengl","2d","pixi","pixi.js","sprite","flash"],"author":{"url":"https://expo.io/","name":"Evan Bacon","email":"bacon@expo.io"},"license":"MIT","_id":"expo-phaser@0.0.0","maintainers":[{"name":"evanbacon","email":"baconbrix@gmail.com"}],"homepage":"https://github.com/expo/expo-phaser#readme","bugs":{"url":"https://github.com/expo/expo-phaser/issues"},"dist":{"shasum":"f52b9c908a10acc3f494978cd8d1fe9b3bb9da03","tarball":"https://registry.npmjs.org/expo-phaser/-/expo-phaser-0.0.0.tgz","fileCount":8,"integrity":"sha512-Lu8j2pqyzLjynnetcjwba59t5vu/UZLdDIJdr3fzXEjBsSZTE9d7hA+F0mgVatC+BUvWytk1rhboiZCT98wc2A==","signatures":[{"sig":"MEYCIQC52ySt4vQo7+TBBUj/HbpNrl8Qk0/VJmQRBaFLj+8wfQIhANpD7ST3B0AezvACBurMF5Zrn6AgBMNZoFzfJzL3wnV1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18375},"main":"lib/index.js","files":["lib"],"gitHead":"e5c33477e88f9c86ffc00926ca7b1c64ebbd4f1c","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"evanbacon","email":"baconbrix@gmail.com"},"repository":{"url":"git+https://github.com/expo/expo-phaser.git","type":"git"},"_npmVersion":"5.6.0","description":"Tools for using phaser in Expo","directories":{"lib":"lib","example":"examples"},"_nodeVersion":"8.5.0","dependencies":{"phaser-ce":"^2.9.4","@expo/browser-polyfill":"^0.0.0-alpha.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/expo-phaser_0.0.0_1518663581388_0.04079989745382284","host":"s3://npm-registry-packages"}},"0.0.1-alpha.0":{"name":"expo-phaser","version":"0.0.1-alpha.0","keywords":["react","native","react-native","phaser-ce","phaser","expo","exponent","game","gl","graphics","opengl","2d","pixi","pixi.js","sprite","flash"],"author":{"url":"https://expo.io/","name":"Evan Bacon","email":"bacon@expo.io"},"license":"MIT","_id":"expo-phaser@0.0.1-alpha.0","maintainers":[{"name":"evanbacon","email":"baconbrix@gmail.com"}],"homepage":"https://github.com/expo/expo-phaser#readme","bugs":{"url":"https://github.com/expo/expo-phaser/issues"},"dist":{"shasum":"68f7615a25bb6562fe7b2e709e2dc214b7f03318","tarball":"https://registry.npmjs.org/expo-phaser/-/expo-phaser-0.0.1-alpha.0.tgz","fileCount":8,"integrity":"sha512-XB7w3SOTKxGurRJqy0xfR5dLUAwkjgKad1orXSUZ0bXsbHvAtVKqNGKr/Ap1RsaeYuwvWfIOejn0teGlfn4oCA==","signatures":[{"sig":"MEYCIQCgj0nsjR2lz8OQvKqf1uhuFqMqp/nB22/PxSbnX8A+cAIhAI++Jw5B1L9KqCs8ynQXhHTxD/Hd7w8Rar+xHi8HdsTC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18373},"main":"lib/index.js","files":["lib"],"gitHead":"c4b8b12368027ca2cae1f1e0a45dbfa9f8b43064","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"evanbacon","email":"baconbrix@gmail.com"},"repository":{"url":"git+https://github.com/expo/expo-phaser.git","type":"git"},"_npmVersion":"5.6.0","description":"Build awesome 2D games with Phaser.js and Expo","directories":{"lib":"lib","example":"examples"},"_nodeVersion":"8.5.0","dependencies":{"phaser-ce":"^2.9.4","@expo/browser-polyfill":"^0.0.0-alpha.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/expo-phaser_0.0.1-alpha.0_1518724003696_0.12950876369832076","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-02-15T02:59:41.388Z","modified":"2026-09-23T11:28:13.552Z","0.0.0":"2018-02-15T02:59:41.511Z","0.0.1-alpha.0":"2018-02-15T19:46:43.856Z"},"bugs":{"url":"https://github.com/expo/expo-phaser/issues"},"author":{"url":"https://expo.io/","name":"Evan Bacon","email":"bacon@expo.io"},"license":"MIT","homepage":"https://github.com/expo/expo-phaser#readme","keywords":["react","native","react-native","phaser-ce","phaser","expo","exponent","game","gl","graphics","opengl","2d","pixi","pixi.js","sprite","flash"],"repository":{"url":"git+https://github.com/expo/expo-phaser.git","type":"git"},"description":"Build awesome 2D games with Phaser.js and Expo","maintainers":[{"email":"ide+npm@jameside.com","name":"ide"},{"email":"brentvatne@gmail.com","name":"brentvatne"},{"email":"support@expo.io","name":"expoadmin"},{"email":"exponent.team@gmail.com","name":"exponent"},{"email":"me@bycedric.com","name":"bycedric"},{"email":"ckchien@gmail.com","name":"kudochien"},{"email":"hughesno1@gmail.com","name":"alanhughes"},{"email":"npm@tsapeta.com","name":"tsapeta"},{"email":"brent+expobotnpm@expo.io","name":"expo-bot"},{"email":"phil@kitten.sh","name":"philpl"},{"email":"ccheever@gmail.com","name":"ccheever"},{"email":"sz.dziedz@gmail.com","name":"szdziedzic"},{"email":"wschurman@gmail.com","name":"wschurman"},{"email":"baconbrix@gmail.com","name":"evanbacon"}],"readme":"[![NPM](https://nodei.co/npm/expo-phaser.png)](https://nodei.co/npm/expo-phaser/)\n\n# expo-phaser\n\nTools for using Phaser-ce to build native 2D games in Expo 👾\n\n### Installation\n\n```bash\nyarn add expo-phaser\n```\n\n### Usage\n\nImport the library into your JavaScript file:\n\n```js\nimport ExpoPhaser from 'expo-phaser';\n```\n\n## Functions\n\n### `ExpoPhaser.game({ context: WebGLRenderingContext, ...extras })`\n\nGiven a `context` from an\n[`Expo.GLView`](https://docs.expo.io/versions/latest/sdk/gl-view.html), return a\n[`Phaser.Game`](https://phaser.io/docs/2.6.2/Phaser.Game.html)\nthat draws into it.\n\n#### Props\n\n| Property | Type | Description | Default Value |\n| ----------- | :-------------------: | --------------------------------------------------------------------------- | :---------------------------: |\n| context | WebGLRenderingContext | Required: context that the `Phaser.Game` will render to | `null` |\n| width | number? | Optional: height of the `Phaser.Game` | `context.drawingBufferWidth` |\n| height | number? | Optional: width of the `Phaser.Game` | `context.drawingBufferHeight` |\n| title | string? | Optional: title of the `Phaser.Game` | `\"expo-phaser-game\"` |\n| preventLoop | boolean? | Optional: Prevents the app from calling `context.endFrameEXP()` every frame | `false` |\n\n#### Returns\n\n| Property | Type | Description |\n| -------- | :------------------------------------------------------------: | ------------------------------------------------ |\n| game | [`Phaser.Game`](https://phaser.io/docs/2.6.2/Phaser.Game.html) | The Phaser-ce game used for rendering game logic |\n\n#### Example\n\n```js\nconst game = ExpoPhaser.game({ context });\n```\n\n## What does it do?\n\nUnder the hood, ExpoPhaser is maintaining global instances of a few libraries.\n\n* [Custom Phaser Pixi.js](https://github.com/photonstorm/phaser-ce/tree/master/src/pixi)\n* [Custom Phaser p2.js](https://github.com/photonstorm/phaser-ce/blob/master/build/custom/p2.js)\n* [Phaser-ce (Community Edition)](https://github.com/photonstorm/phaser-ce)\n\n```js\nwindow.PIXI = require('phaser-ce/build/custom/pixi');\nwindow.p2 = require('phaser-ce/build/custom/p2');\nwindow.Phaser = require('phaser-ce/build/phaser');\n```\n\nOther libs can be included but are not required. For instance you can import the custom Creature lib the same way.\nWe also [override the `PIXI.WebGLRenderer.updateTexture`](https://github.com/expo/expo-phaser/tree/master/lib/Phaser.js) to make it compatible with Expo.\n\nFinally when a new instance of `Expo.Game` is created, we set the `document.readyState` to `'complete'` and save the global instance of `context`\n\n```js\nglobal.__context = context;\nglobal.document.readyState = 'complete';\n```\n\nThen we create a standard render loop and call `context.endFrameEXP()` to flush the frame queue and render our context through `EXGL`.\n\n```js\nconst render = () => {\n requestAnimationFrame(render);\n context.endFrameEXP();\n};\n```\n\n## Example\n\nIt's important to note that you must preload all of your assets before starting the app, as the `Phaser.State.preload` method cannot be asynchronous.\nCreating a game in Expo is very simple with `ExpoPhaser`, we preload our assets, create a view, initialize our game, then add our assets.\n\n**We create an `Expo.GLView` to render our game to.**\n\n```jsx\nreturn (\n startGame({ context })}\n />\n);\n```\n\n**Then we create our `Phaser.Game` instance and assign it a playable state. We can then choose to start said state.**\n\n```js\nfunction startGame({ context }) {\n const game = ExpoPhaser.game({ context });\n\n game.state.add('Playable', {\n preload: function() {\n /// This function cannot be async, preload all assets before getting here.\n game.load.image(\n 'man',\n Expo.Asset.fromModule(Assets['man.json']).localUri,\n );\n },\n create: function() {},\n update: function() {},\n });\n\n game.state.start('Playable');\n}\n```\n\n**Preloading**\n\nIn React Native all assets must be static resources, because of this we must create a reference to all the assets we may use, then download them and get their local URI.\nExpo has a convenient way of saving reference. We preload an `Expo.Asset` then if we create the same instance later we can simple call `asset.localUri`.\n\nIn a standard Phaser app we would load an asset like this:\n\n```js\ngame.load.image('man', './assets/man.png');\n```\n\nIn expo we would load it like this:\n\n```js\nconst preloadedExpoAsset = Expo.Asset.fromModule(require('./assets/man.png'))\nawait preloadedExpoAsset.downloadAsync();\n\n...\n\ngame.load.image('man', preloadedExpoAsset.localUri);\n```\n\n### All together\n\nThis example shows how to load an animated texture atlas and apply arcade physics to it.\n\n```js\nimport React from 'react';\nimport Expo from 'expo';\nimport ExpoPhaser from 'expo-phaser';\n\nconst Assets = {\n 'man.png': require('./assets/man.png'),\n 'man.json': require('./assets/man.json'),\n};\n\nexport default class App extends React.Component {\n state = { loading: true };\n async componentWillMount() {\n const downloads = [];\n for (let key of Object.keys(Assets)) {\n const asset = Expo.Asset.fromModule(Assets[key]);\n downloads.push(asset.downloadAsync());\n }\n await Promise.all(downloads);\n this.setState({ loading: false });\n }\n render() {\n if (this.state.loading) {\n return ;\n }\n\n return (\n startGame({ context })}\n />\n );\n }\n}\n\nfunction startGame({ context }) {\n const game = ExpoPhaser.game({ context });\n\n game.state.add('Playable', {\n preload: function() {\n const atlas = Expo.Asset.fromModule(Assets['man.json']).localUri;\n const texture = Expo.Asset.fromModule(Assets['man.png']).localUri;\n game.load.atlasJSONHash('man', texture, atlas);\n },\n create: function() {\n game.stage.backgroundColor = '#4488AA';\n\n game.physics.startSystem(Phaser.Physics.ARCADE);\n\n // Set the world (global) gravity\n game.physics.arcade.gravity.y = 100;\n\n const man = game.add.sprite(200, 200, 'man');\n game.physics.enable([man], Phaser.Physics.ARCADE);\n\n // Here we add a new animation called 'run'\n // We haven't specified any frames because it's using every frame in the texture atlas\n\n man.animations.add('run');\n man.body.collideWorldBounds = true;\n man.body.bounce.y = 0.8;\n man.body.gravity.y = 200;\n\n // And this starts the animation playing by using its key (\"run\")\n // 15 is the frame rate (15fps)\n // true means it will loop when it finishes\n man.animations.play('run', 15, true);\n },\n update: function() {},\n });\n\n game.state.start('Playable');\n}\n```\n","readmeFilename":"README.md"}