Search the Community

Showing results for tags 'es6'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 42 results

  1. Hello everyone! TLDR; I'm trying to get the plugin 'phaser-input' (made by Orange Games) to be loaded and running properly in a webpack + ES6 style environment. I'm fairly new to the phaser game dev environment, and I really like how someone has created a boilerplate project that has ES6 style coding enabled [ phaser-es6-webpack]. But I think phaser2 by default was never meant to be coded in this style, with importing dependencies from a package manager; you are suppose to load the library and any plugins in the index.html's header area via script tags, so that it can do it's thing with the global namespace. (I didn't realize this until I got too far ahead in development) In my project, I have added to the webpack.config.js file to make the plugin 'phaser-input' ES6 compatible, and importable into my project. // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Phaser webpack config const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaserInput = path.join(__dirname, '/node_modules/@orange-games/phaser-input/build/phaser-input.js'); module.exports = { mode: 'development', entry: { app: ['babel-polyfill', path.resolve(__dirname, 'client/src/main.js')], vendor: ['pixi', 'p2', 'phaser', 'phaser-input', 'webfontloader'], }, output: { pathinfo: true, path: path.resolve(__dirname, 'client/build/js'), publicPath: './js', filename: '[name].js', }, devServer: { contentBase: path.resolve(__dirname, 'client'), }, watch: true, plugins: [ new HtmlWebpackPlugin({ filename: '../index.html', template: './client/src/index.html', chunks: ['vendor', 'app'], chunksSortMode: 'manual', minify: { removeAttributeQuotes: false, collapseWhitespace: false, html5: false, minifyCSS: false, minifyJS: false, minifyURLs: false, removeComments: false, removeEmptyAttributes: false, }, // hash: false, }), ], module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client/src') }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] }, { test: /phaser-input\.js$/, use: ['exports-loader?PhaserInput=true'] }, ], }, node: { fs: 'empty', net: 'empty', tls: 'empty', }, resolve: { alias: { phaser, pixi, p2, 'phaser-input': phaserInput, }, }, }; The documentation recommends that the plugin be added using [ game.add.plugin(PhaserInput.Plugin); ] But I've seen other plugins use [ game.plugins.add(PhaserInput.Plugin) ]. I have this snipped added to my game state file. (the other code has been removed for clarity) import Phaser from 'phaser-ce'; import PhaserInput from '@orange-games/phaser-input/build/phaser-input'; export default class Game extends Phaser.State { preload() { this.game.plugins.add(PhaserInput.Plugin); } } The documentation simply shows the use of the plugin using the snipped [ var input = game.add.inputField(10, 90); ]. Where the function 'inputField' has been added to the framework. This is where I get stuck, the plugin function (inputField) that is suppose to be added never actually gets added at all to [ game.add ]. This in results in an error. import Phaser from 'phaser-ce'; export default class FormOverlay extends Phaser.Group { constructor({ game }) { super(game); this.testInput = game.add.inputField(10, 90); } } Is there a proper way of loading plugins in this webpack + ES6 style? I've wasted an afternoon trying to figure out how to get this plugin to work, I must be missing something here. If you know the answer to this issues, I would greatly appreciate if you can share the answer. Thanks for reading!
  2. Phaser3 Es6 Webpack4 Boilerplate

    Hi guys I spent some time creating a small boilerplate to use the new Phaser 3 with ES6 and Webpack 4. Plain webpack 4 Boilerplate with Babel, SASS and Phaser3 on board Some cool features: webpack 4, chunks and minifies; webpack-dev-server, development server that provides live reloading and fast in-memory access to assets; @babel/core and @babel/preset-env; eslint; updated, tried to use the latest version of everything (until this post ). I hope it helps, any sugestions, feedbacks or pull requests would be amazing!
  3. I'm having trouble using `createInstance` when importing BabylonJS as an ES6 module. // <script src='main.js' type='module'></script> import {Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, Color3, HemisphericLight} from './node_modules/babylonjs/es6.js' document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('renderCanvas') const engine = new Engine(canvas, true) const scene = new Scene(engine) const camera = new ArcRotateCamera('camera', 1, 0.8, 10, new Vector3(0, 0, 0)) camera.setPosition(new Vector3(0, 0, -100)) scene.activeCamera.attachControl(canvas) const light = new HemisphericLight('', new Vector3(0, 1, 0)) light.diffuse = new Color3(1, 1, 1) light.groundColor = new Color3(0.2, 0.2, 0.2) let mesh = MeshBuilder.CreateSphere('', {}) mesh.createInstance('') }) If I run the previous code I get the following error: TypeError: Cannot set property renderingGroupId of [object Object] which has only a getter es6.js:17243 at InstancedMesh.AbstractMesh [as constructor] (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:17243:37) at new InstancedMesh (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:55221:33) at Mesh.createInstance (c:\Users\phil\code\sandbox\babylonjs-test\node_modules\babylonjs\es6.js:29095:21) at HTMLDocument.document.addEventListener (c:\Users\phil\code\sandbox\babylonjs-test\main.js:19:9) Importing the library in a script tag works fine: // <script src="https://cdn.babylonjs.com/babylon.js"></script> // <script src='main.js'></script> document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('renderCanvas') const engine = new BABYLON.Engine(canvas, true) const scene = new BABYLON.Scene(engine) const camera = new BABYLON.ArcRotateCamera('camera', 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0)) camera.setPosition(new BABYLON.Vector3(0, 0, -100)) scene.activeCamera.attachControl(canvas) const light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0)) light.diffuse = new BABYLON.Color3(1, 1, 1) light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2) let mesh = BABYLON.MeshBuilder.CreateSphere('', {}) mesh.createInstance('') }) I'd like to avoid bundlers and transpilers while developing the code and just package it up later on.
  4. Hi there! We’re looking for a talented, self-motivated and experienced Full Stack Developer to build games for Africa. About Us: Big5 Games is a Gamification Platform for Africa. We’re on a mission to get Africans playing more games! We’re working on a range of games to entertain and educate utilising the latest technologies and platforms. www.big5games.com Core Skills: • Full Stack JavaScript Developer • Solid skill set in Node.js, MongoDB, Angular • Good knowledge of JavaScript, ES6, HTML5, CSS • Knowledge of React • Experience with test frameworks • Ability to apply programming and documentation principles • Able to work remotely with other team members • Good communication skills Bonus Skills: • Experience in HTML5 game development • Knowledge of game engines and services such as: GameMaker, PlayFab, Phaser, Facebook Instant Games • Knowledge of cloud systems such as Heroku and CloudFlare • Familiarity with the Lean Startup and Agile Methodologies About You: Timely and committed - you manage your time well. Quality-driven - you create great work you’re proud of! Fast learner - you’ll learn a lot with us, and we move fast! Team player - you share, discuss, ask for advice, and report on your work on yourself. You’ll work independently, we don’t want to be on your back. Passionate about technology - you are interested in new technologies and experiment with your own projects. We Offer You: Exciting, dynamic and ambitious projects to work on. Flexibility to work remotely where you want and when you want. This is a fully remote role. Join our open, collaborative culture (we want to share our knowledge as well as learn from you!) Develop your entrepreneurial side. Additional opportunities as we grow and learn together. Big5 Games is an equal opportunity employer. We’re excited to work with talented and empathetic people no matter their race, colour, gender, sexual orientation, religion, national origin, physical disability, or age.
  5. Deployment issue ES6

    I've got an odd issue with the deployment of a PIXI project. I'm creating an ES6 JS file - when I view it through localhost, or push it up to my site, it works fine. But, when I deploy through the end client system, the game fails. This is obviously something to do with their bundling, but I just cannot work around it. I get the error 'PIXI is not defined at...' which it appears it should be, as the PIXI.min.js has been added into the bundled JS file above the game code. I think this is caused by PIXI being a global variable, but I've not been able to get it to work. Anyone got any ideas?
  6. Hello dear community, I have just pushed a new version of Babylon to NPM. 3.2.0-alpha2 has a bit of changed package structure, which is, in general, transparent to the regular user. You will still be able to do the following: import * as BABYLON from "babylonjs"; What's new and exciting about this release are the extra modules that were added to this package. Babylon's npm package now contains commonjs and es6-ready modules, including typescript typings (for the commonjs modules). With the updated package you could do the following in TypeScript (and JavaScript): import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core"; import { ArcRotateCamera } from "babylonjs/arcRotateCamera"; import { HemisphericLight } from "babylonjs/hemisphericLight"; import { MeshBuilder } from "babylonjs/meshBuilder"; var canvas: any = document.getElementById("renderCanvas"); var engine: Engine = new Engine(canvas, true); function createScene(): Scene { var scene: Scene = new Scene(engine); var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene); camera.attachControl(canvas, true); var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene); var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene); return scene; } var scene: Scene = createScene(); engine.runRenderLoop(() => { scene.render(); }); window.addEventListener("resize", () => { engine.resize(); }); This will be using the commonjs modules available in the babylonjs package. The file generated (using webpack) will be roughly 2.2 MB unminified (which is an improvement to the 4+MB unminified Babylon file). To use es6, simple add /es6 after the module name. for example: import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6"; I have worked a lot to make it work correctly. But there are (probably) many things I did catch. Please: Be patient! it was just released, there might be a few bugs. Use it, abuse it, make it fail, and let me know when it did! I want to fix all bugs until 3.2 is officially released I will write a detailed documentation page about how to use it. For a list of modules, you can refer to config.json in our Gulp directory (until I finish the docs) : https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Gulp/config.json#L21 . Add "core", being the most important package there is. Enjoy!
  7. PIXI es6 & Babel

    Hi all After a few working projects in PIXI on es5, we're now starting to try and build a framework using es6 & babel. We have a boilerplate setup and have got the basics working, though it is slow. Because PIXI.js modules aren't decoupled, it takes a good 5 seconds+ on a simple project to recompile on each save & refresh the browser. I understand there is work possibly planned for V5 on this, but are there any workarounds in the meantime anyone has found to make the workflow a little quicker? Thanks in advance!
  8. Phaser/Cordova/Webpack(ES6)

    I created a quickstart application that I hope would be useful to some of you. It is a Phaser 2.8.8 quick start application that incorporates Webpack (ES6), and Cordova. It supports iOS and Android out of the box, along with all default Phaser supported web browsers. https://github.com/udia-software/phaser-cordova-es6 The code is on Github and is licensed under Apache V2. Enjoy!
  9. Are you using JavaScript ES 6?

    Hi, In Phaser Editor we are about to replace the current JavaScript intelli-sense engine by the one used by VSCode (Salsa). Salsa works well for JavaScript ES6 but for ES3 it lacks important features like type inference of prototype inheritance. But, is not the time to forget ES3 and start coding in ES6? If you want to target older browsers you can compile the ES6 code into ES3 just before to publish the game (as probably you are doing now to create the .min files), but in the meantime, you can code and test in ES6. ES6 is very nice for Phaser games development, especially when you want to create custom objects, like sprites, just compare these codes: ES6: class MySprite extends Phaser.Sprite { constructor(game) { super(game, "dude"); } update() { // custom behavior } } ES3: MySprite = function (game) { Phaser.Sprite.call(this, game, "dude"); } MySprite.prototype = Object.create(Phaser.Sprite.prototype); MySprite.prototype.constructor = MySprite; MySprite.prototyte.update = function () { // custom behavior } The ES6 code is way more clear and simple. Actually, the ES3 way is so confusing that probably I wrote it wrong ;-)
  10. Hello, How can I use Babylon's extensions with NPM imports (es6 style)? To resume my problem: 1. I use NPM and Webpack for my project. To use Babylon I've install the node module babylonjs and I import the lib with the line: import BABYLON from 'babylonjs' 2. I would like use too the Sky extension https://doc.babylonjs.com/extensions/sky To do that I try to import it with the line: import {skyMaterial} from 'babylonjs/dist/preview release/materialsLibrary/babylon.skyMaterial.min.js' 3. The compilation is done but in my Browser I've an error : Uncaught ReferenceError: __extends is not defined at eval (webpack-internal:///36:1) at BABYLON (webpack-internal:///36:1) at eval (webpack-internal:///36:1) at Object.<anonymous> (app.js:951) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///29:7) at Object.<anonymous> (app.js:904) at __webpack_require__ (app.js:660) at fn (app.js:86) I've forgot something or it's the wrong way?
  11. Hi. In v2 (community edition, as far as I've tested) you could, using webpack and the expose-loader plugin, pretty much use Phaser in a bundler environment and get full (except when a physics engine was selected, but it's not a big deal) intellisense/auto-complete in VSCode and in other editors too, I believe. You could code using ES6 and lint the whole thing without issues. It doesn't seem to be the same in v3. Importing (import Phaser from 'phaser';) doesn't seem to return the same result in v3 as it did in v2 - I can't have const game = new Phaser.game(options); - and the phaser3-project-template npm package shows a global import (import 'phaser';), which causes intellisense/linting to fail. Is there a way to have Phaser imported into a const instead of the global space and have it "work" the way it used to in v2? Is it done in a different way? I know things have changed in the core, but I was hoping to keep the same tooling as before, with intellisense and linting working. Thanks, and please forgive the broken English.
  12. Use panda with ES6

    Hi, How can I use panda with ES6? I mean, I downloaded the code (with get an index.html, engine and game dorectories) I have tested and in main.js works fine, but I want to import panda on another javascript file to get all core using the import, just import game from 'engine/core' But i get a small object, but doesn't get a full object, for example, I don't get the complete object My structure is this . └── demo ├── _demo │ ├── assets │ │ └── Images │ │ ├── frog.jpg │ │ └── logo.png │ └── settings.json ├── app.js ├── index.html ├── js │ └── pandajs │ ├── engine │ │ ├── analytics.js │ │ ├── audio.js │ │ ├── camera.js │ │ ├── core.js │ │ ├── debug.js │ │ ├── keyboard.js │ │ ├── loader.js │ │ ├── particle.js │ │ ├── physics.js │ │ ├── pixi.js │ │ ├── pool.js │ │ ├── renderer.js │ │ ├── scene.js │ │ ├── storage.js │ │ ├── system.js │ │ ├── timer.js │ │ └── tween.js │ └── game │ ├── config.js │ └── main.js ├── media │ └── logo.png ├── scss └── styles.scss This is my app.js file import game from './js/pandajs/engine/core'; game.module( 'game.main' ) .body(function() { game.addAsset('logo.png', 'logo'); game.createScene('Main', { backgroundColor: 0xb9bec7, init: function() { var logo = new game.Sprite('logo'); logo.anchor.x = 0.5; logo.anchor.y = 0.5; logo.position.x = game.system.width / 2; logo.position.y = game.system.height / 2; this.stage.addChild(logo); var tween = new game.Tween(logo.scale); tween.to({ x: 1.1, y: 1.1 }, 1000); tween.repeat(); tween.yoyo(); tween.start(); } }); }); And I want use the app.js to import panda and create my game with classes. Is it possible? I want to do it to because we need create many simple games, but I have tested pixi.js and really doesn't like me and I want to use panda but I must use it with ES6 Thanks
  13. Hi, Someone have tried to use LegacyPbrMaterial with webpack? I copied file babylon.legacyPbrMaterial.min.js and made import in project (import "babylonjs/babylon.legacyPbrMaterial") but after that I get error Uncaught ReferenceError: __extends is not defined at babylon.legacyPbrMaterial.js:1 at BABYLON (babylon.legacyPbrMaterial.js:1) at Object.exports.byteLength (babylon.legacyPbrMaterial.js:2) at __webpack_require__ (bootstrap 3ce2b0a…:19) I have same erro if i try ti use inpsector. I am missing some config for webpack or typescript?
  14. Hi, if I use import { Engine } from "babylonjs"; I get error that babylon.d.ts is not a model. Looks like that export = BABYLON is missing at the end of file. Could it be added or there is reason why it is missing? I saw this thread but looks like it still is missing in git
  15. Latest NPM for BabylonJS 3.0 alpha includes Canvas2D! I am having difficulty importing Canvas2D into my project. I have no troubles at all with regular BabylonJS only with importing Canvas2D. // I can import the main babylonJS in a variety of ways and they all work. // explicit imports import { Sound, Mesh, ShadowGenerator, ... } from 'babylonjs' // default and named import BABYLON, { Sound, Mesh, ShadowGenerator, ... } from 'babylonjs' // tried also named default only and * After that I am importing the Canvas2D and have tried various ways. // named default import import Canvas2D from 'babylonjs/babylon.canvas2d' // as side-effect import from 'babylonjs/babylon.canvas2d' // explicit imports import { ScreenSpaceCanvas2D } from 'babylonjs/babylon.canvas2d' The error I am getting is "TypeError: Cannot read property 'Effect' of undefined". So, basically line 1 of babylon.canvas2d, where BABYLON is undefined. Removing those will fail later (ie: BABYLON.Vector2 being undefined). I was reading on the ES6 spec that there is no guarantee of ordering only that the imports will all be run before code is executed. I looked through other NPMs where I can import add on modules separately and they have extra declarations in package.json (ie: "jsnext:main": "index", "module": index") and they are exporting explicitly in index.js the other modules from the main project. I tried that and a few other things, but am unable to get Canvas2D to import unfortunately. If anybody has successfully imported BabylonJS without creating their own bundle any tips would be appreciated. I'm using webpack and babel (https://babeljs.io/).
  16. Hi, Since the problem took me over a week to figure out, here is my solution to bundle your project using web-pack keeping Babylon as a dependency. NB: I am not certain what are the NECESSARY steps (ie what I could simplify) but those are SUFFICIENT steps. My constraints were : The final bundle can be imported both in the browser and in node using any kind of import method : require(), import/export, or <script src=...> tags It has to protect against errors in node due to access to window or document that will be undefined BABYLON has to load has a global in the browser using the script tag (window.BABYLON) BABYLON needs to include Canvas2D BABYLON needs to remain external of the bundle so the custom library is light and in theory could load any version of BABYLON Solution to protect loading in node.js: Build a custom bundle on Babylon website with Canvas2D ONLY, un-minified, and WITHOUT OIMO OR HANDJS. I did not test all possibilities but since the bundle is a concatenation suppose to be web compatible only, the exports will break in webpack or node in general. But using only this custom version will produce bugs in node due to access to undefined window. Then I had to bundle this custom build using webpack, you can see the configuration of webpack and the builder.js here : https://github.com/albertbuchard/experiment-babylon-js.git The important thing here is how the builder checks for window being defined and the webpack config exporting your named library with UMD. Publish this bundle to NPM (in the github look at the package.json it has three scripts to produce a unminified version, a minified version, and publish the repo on npm) Those two steps will allow to load Babylon using any kind of import method, and do not produce errors in node (but returns an empty object, of course any call to BABYLON function will fail) Solution to keep Babylon as a dependency in your custom library: In your library npm install the-custom-babylon-we-just-built Import BABYLON in your scripts any way you want using this custom repo ( es6 import syntax will work <3 ) i.e import BABYLON from 'the-custom-babylon-we-just-built' Then take a look at the webpack config and builder.js of this repo to understand how to manage EXTERNALS: https://github.com/albertbuchard/Experiment.js The key element here is how you write your external array: externals: { ... lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, ... 'experiment-babylon-js': { commonjs: 'experiment-babylon-js', commonjs2: 'experiment-babylon-js', amd: 'experiment-babylon-js', root: 'BABYLON', }, ... 'experiment-babylon-js/lib/babylon.custom.js': { commonjs: 'experiment-babylon-js/lib/babylon.custom.js', commonjs2: 'experiment-babylon-js/lib/babylon.custom.js', amd: 'experiment-babylon-js/lib/babylon.custom.js', root: 'BABYLON', }, }, All but the root (Global environment reference) must be the NAME OF OUR MODULE as you would import it using require('NAME OF YOUR MODULE') so usually the name of your npm folder like the first two exaple, OR the direct path to the file you want to load like the third example. It has to be the same as the import names you are using in your library. So if you import babylon like so : // in your library const BABYLON = require('./path/to/babylon.js') // in your webpack config externals: { ... './path/to/babylon.js': { commonjs: './path/to/babylon.js', commonjs2: './path/to/babylon.js', amd: './path/to/babylon.js', root: 'BABYLON' } ... } Hope it will help some of you ! @Nikos123
  17. Extends class from different folder

    I'm using https://github.com/lean/phaser-es6-webpack for our company projects. Currently, we separate code into different projects, a framework and games using it. But when we trying to extends class from our framework using relative path, ex: import Sprite from "../../Framework/src/Sprite" class GameSprite extends from Sprite we get this error: Uncaught TypeError: Class constructor cannot be invoked without 'new'
  18. Hello guys I have recently started doing my projects in ES6 and I am wondering the following. //Player.js class Player extends Phaser.Image { constructor(game, x, y, sheet, key) { super(game, x, y, sheet, key); } } export default Player; //GameState.js import Player from 'views/Player'; class GameState extends Phaser.State { create() { this.player = new Player(); // Cannot see required parameters //If I call it like that this.player = Player.constructor() // I can see them - obviously } } export default GameState; Should I just initialize the new Player and then just call the constructor so I can actually create what I need?
  19. Hello fellow devs I have used THIS template to create my own project. It all works well, but I am working with WebStorm and I am struggling to create a debug profile. I don't want to use the Google Chrome debug. Any ideas? P.S. I also read something about live mobile debug - is that straight on a device? If so - what kind of setup do I need to make such connection between my IDE and the device? Is it also possible to live-reload only the changes that have been made and not the whole game state?
  20. I've been working on a BabylonJS game for fun and wanted to try out integrating with React and Redux for maintaining game state and showing a UI outside of the canvas. I took as a starting point the Quarto game from Temechon (with permission). I changed the game a bit mostly so that there was enough state from my Redux reducer to do the full UI in React, so remove all direct DOM manipulation and moved logic around for that (some using 'redux-saga'). There is an npm which contains the React <Scene .../> component and a redux middleware for intercepting actions. In the demo, you can see when you mouse off the canvas that the lighting is dimmed - this is not part of the component, but a prop called from the event added in Quarto. There is built-in support for showing the debug-layer via a React component <Button onClick={this.toggleDebug}>...</Button>. The full demo can be viewed here (click on Quarto link). Note that the game is loaded as a fractal and only downloaded when you click the link - good for Single Page Applications with multiple components. https://brianzinn.github.io/react-redux-babylonjs-starter-kit/ Original demo (includes a tutorial to explain the game): http://www.pixelcodr.com/games/quarto/index.html The source code for the NPM component is: https://www.npmjs.com/package/react-babylonjs https://github.com/brianzinn/react-babylonJS/ Full source-code of the demo is in a starter kit I created (forked from davezuko) that uses react-babylonjs with hot reloading and ES6 support (via babel) and to have your babylonJS project running without needing apache or IIS. So, this is a quick way to get started. There are issues for sure, but my workflow is going well and that is my main goal - speed of development. Make a change see it right away. https://github.com/brianzinn/react-redux-babylonjs-starter-kit Things I would like to add are support for more events, add tutorial in Quarto, figure out why multiple events fire sometimes, WebGL crash issues, etc - so not a v1 component, but worthwhile to share I think. If you are looking for deploying across mobile platforms then you may want to look at other GUI options, but especially for rapid prototyping or targeting desktop browsers this was really fast for me, especially with HMR.
  21. I am writing games in Phaser using webpack for building deployment versions and running hot reload server for development and i am using karma for testing. I am new to most of those technologies so i am open to critique but if someone looks for starting point for connecting Phaser with those technologies i have made git repo that maybe is good starting point to start building your own projects: https://github.com/Xesenix/game-webpack-react-phaser-scaffold If you are more advanced at using such an environment for developing phaser games I would appreciate advices what i can fix with it
  22. Hey people; I have been developing a framework. I want to publish it as an npm package. I bundle my code with webpack on framework project and I am using bundled js file inside the game project which is bundled via browserify. I wanted to test it with different bundlers. My case is; On framework; the folder hieararchy is; -src --index.js -release --index.js Webpack bundles ./src/index.js to ./release/indes.js in ./src/index.js I have simplest code snippet as follows; module.exports = 'tattaratatta'; on game project that I use framework, I have app.js and bundle.js. on app.js inside the game project I have the following code; var fr = require('./../framework/release/index.js'); console.log(fr); this logs out an empty object. but when I change it to; var fr = require('./../framework/src/index.js'); console.log(fr); it logs out tattaratatta correctly. I watched some tutorials on youtube, read some tutorials online but can't find out what I am doing wrong. Appearently, I can't seem to require te module from the bundled file. Any idea?
  23. Hello! I just started playing around with Phaser today and I'm enjoying it a lot. I come from a frontend / UI engineering background so I'm used to modularizing my components and tying them together using require statements. So far, all the examples I've seen in Phaser are all written in a single file which makes me uncomfortable if my game is to become more complicated. For example I have a group called "ships" which can all shoot "weapons" I want each ship to have properties like current ammo, health, player_id, etc. However I've only been able to define them this way. ships = game.add.physicsGroup(); // ships.enableBody = true /* SET UP PLAYER */ player = ships.create(0, 0, 'ship'); player.anchor.setTo(0.5, 0.5); game.physics.arcade.enable(player); /* SET UP LASER */ laser = game.add.weapon(30, 'bullet'); // fire 30 shots every 100ms laser.bulletKillType = Phaser.Weapon.KILL_DISTANCE; laser.bulletKillDistance = 500; laser.bulletRotateToVelocity = true; laser.bulletSpeed = 600; laser.fireRate = 100; laser.trackSprite(player, 0, 0, true); Now I would ideally like to have something like this: class Ship { constructor(x, y){ ships.create(x, y,'ship'); ... health = 500; armor = 600; ammoCapacity = 1000; currentAmmo = 1000; } } But currently I have to declare a ton of global variables. I found the phaser-es6-boilerplate. Is this is the standard and should I be safe following the paradigms expressed there? Thanks for any feedback!
  24. Phaser Arcade Slopes ES6 help

    I've been trying to get a ES6 version of a game together. I've had to shim Phaser (to get around a PIXI is undefined issue). 'use strict'; require('./../../dist/pixi'); require('./../../dist/phaser'); require('./../../dist/phaser-arcade-slopes'); module.exports = Phaser; I've wanted to incorporate a plugin (phaser-arcade-slopes), so I attach it to Phaser in the Shim (see above). There seems to be an issue when I start to use it. I get: SAT is undefined This is a library phaser-arcade-slopes relies on. Here is my code. https://github.com/richardhealy/emagine Should be pretty easy to setup. nom install npm run build-init nom build If you go to index.html, you'll see the error in the console.