diff --git a/.npmignore b/.npmignore index d7fc1d2..0f49ac4 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,2 @@ -node_modules react demo-* \ No newline at end of file diff --git a/package.json b/package.json index 4825a36..8219301 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "@ion-phaser-ce/core", "version": "1.0.0", + "private": false, "description": "A web component to integrate Phaser Framework CE (Community Edition) with Angular, React, Vue, etc", "keywords": [ "ionic", @@ -46,6 +47,5 @@ "repository": { "type": "git", "url": "https://github.com/proyecto26/ion-phaser-ce.git" - }, - "private": false + } } diff --git a/react/README.md b/react/README.md index 1f37d49..cb2a17d 100644 --- a/react/README.md +++ b/react/README.md @@ -1,18 +1,28 @@ # IonPhaser for React ## Introduction -React specific wrapper for [ion-phaser](https://github.com/proyecto26/ion-phaser) component. +React specific wrapper for [ion-phaser-ce](https://github.com/proyecto26/ion-phaser-ce) component. ## Why? *Most people who use React don’t use [Web Components](https://reactjs.org/docs/web-components.html)* and there're some limitations handling data with [Custom Components](https://custom-elements-everywhere.com/) from React. -Thus, this **React component** was created not to need to reference their **Custom Elements** using a **ref** and manually attach the **game**, this makes working with [IonPhaser](https://github.com/proyecto26/ion-phaser) not cumbersome πŸ‘πŸ» +Thus, this **React component** was created not to need to reference their **Custom Elements** using a **ref** and manually attach the **game**, this makes working with [IonPhaser](https://github.com/proyecto26/ion-phaser-ce) not cumbersome πŸ‘πŸ» ## Usage +- Import Phaser CE dependencies before, check the example [here](https://github.com/proyecto26/ion-phaser-ce/blob/master/demo-react/src/global.js): + +```js +window.PIXI = require('phaser-ce/build/custom/pixi'); +window.p2 = require('phaser-ce/build/custom/p2'); +window.Phaser = require('phaser-ce/build/custom/phaser-split'); +``` + +- Using the **IonPhaser** component: + ```tsx import React, { Component } from 'react' -import Phaser from 'phaser' -import { IonPhaser } from '@ion-phaser/react' +import Phaser from 'phaser-ce' +import { IonPhaser } from '@ion-phaser-ce/react' class App extends Component { @@ -21,21 +31,21 @@ class App extends Component { game: { width: "100%", height: "100%", - type: Phaser.AUTO, - scene: { + renderer: Phaser.AUTO, + state: { init: function() { - this.cameras.main.setBackgroundColor('#24252A') + this.stage.backgroundColor = '#24252A'; }, create: function() { this.helloWorld = this.add.text( - this.cameras.main.centerX, - this.cameras.main.centerY, + this.game.world.centerX, + this.game.world.centerY, "Hello World", { font: "40px Arial", fill: "#ffffff" } ); - this.helloWorld.setOrigin(0.5); + this.helloWorld.anchor.set(0.5); }, update: function() { this.helloWorld.angle += 1; @@ -59,7 +69,7 @@ export default App; ## Supporting 🍻 I believe in Unicorns πŸ¦„ Support [me](http://www.paypal.me/jdnichollsc/2), if you do too. -[Professionally supported @ion-phaser/react is coming soon](https://tidelift.com/subscription/pkg/npm--ion-phaser-react?utm_source=npm--ion-phaser-react&utm_medium=referral&utm_campaign=readme) +[Professionally supported @ion-phaser-ce/react is coming soon](https://tidelift.com/subscription/pkg/npm--ion-phaser-react?utm_source=npm--ion-phaser-react&utm_medium=referral&utm_campaign=readme) ## Happy coding πŸ’― Made with ❀️ diff --git a/react/package.json b/react/package.json index 80a374f..f67a4df 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "@ion-phaser-ce/react", - "version": "1.0.0", + "version": "1.0.1", "description": "React specific wrapper for @ion-phaser-ce/core", "keywords": [ "ionic", @@ -35,7 +35,7 @@ "dist/" ], "dependencies": { - "@ion-phaser-ce/core": "file:.." + "@ion-phaser-ce/core": "^1.0.0" }, "devDependencies": { "@types/jest": "^23.3.9", diff --git a/react/rollup.config.js b/react/rollup.config.js index d33d597..3632ad7 100644 --- a/react/rollup.config.js +++ b/react/rollup.config.js @@ -2,32 +2,19 @@ import resolve from 'rollup-plugin-node-resolve'; import sourcemaps from 'rollup-plugin-sourcemaps'; import commonjs from 'rollup-plugin-commonjs'; -// import path from 'path'; -// const phaserModule = path.join(__dirname, './node_modules/phaser-ce/'); -// const pixi = path.resolve(phaserModule, 'phaser-ce/build/custom/pixi'); -// const p2 = path.resolve(phaserModule, 'phaser-ce/build/custom/p2'); - export default { input: 'dist-transpiled/index.js', output: [ { file: 'dist/index.esm.js', format: 'es', - sourcemap: true, - globals: { - 'phaser-ce/build/custom/pixi': 'PIXI', - 'phaser-ce/build/custom/p2': 'p2' - } + sourcemap: true }, { file: 'dist/index.js', format: 'commonjs', preferConst: true, - sourcemap: true, - globals: { - 'phaser-ce/build/custom/pixi': 'PIXI', - 'phaser-ce/build/custom/p2': 'p2' - } + sourcemap: true } ], external: [ @@ -35,8 +22,6 @@ export default { '@ion-phaser-ce/core/loader', 'react', 'tslib', - 'phaser-ce/build/custom/pixi', - 'phaser-ce/build/custom/p2', 'phaser-ce' ], plugins: [