Search the Community

Hi guys, I'm trying to add Phaser particle system plugin to my starter project. I've bought the ParticleStorm yesterday and thought it would be practically self explanatory to add it to the project. But it was not that way I really hope you have any idea or could give me any tips, how can I come closer to the solution. It seems that I really lack knowledge about Webpack + Npm/node modules Let's start at the beginning. I bought the system, and got a package which seems like a module, so I've copied the complete project folder inside my node_modules folder. I've tried to manually install the package npm install -g phaser-particle-storm or npm install -g ./phaser-particle-storm, but I get "Could not install from "phaser-particle-storm" as it does not contain a package.json file. (ERR ENOLOCAL)". I moved further, thinking maybe I do not need to install it, so I've added path to particlestorm.d.ts into tsconfig.json. And then I've tried to add the module to Phaser.Game.PluginsManager like this: this.manager = this.game.plugins.add(Phaser.ParticleStorm);. And because phaser.d.ts has this line of the code at the beginning of the file declare module "phaser-ce" { export = Phaser; }, I think that it wants to look after the ParticleStorm inside phaser-ce.js or even phaser-split.js (do you know maybe whats with that split variant? ). My next try was then to add something similar to the particlestorm.d.ts, like declare module "phaser-particle-storm" { export = Phaser.ParticleStorm; }, and then in my class I have an import statement import * as PStorm from 'phaser-particle-storm';, but then I get a complain, that it can not find the module. Adding particlesstorm.js and particlestorm.d.ts scripts inside my project did not result in any success. I would like that the plugin would be part of the project like Phaser game engine is. I have no clue in which direction do I need to go from here. Obviously I'm missing something.

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.

First of all Is it called "module" or "library" if it extends pixi.js' functionality? How to use them with Typescript? I'm not totally new to typescript but aren't pro w/ it at all. I added pixi.js and the typings via npm (and successfully use npm-modules and their @types in typescript for the server of this project) But when it comes to pixi.js modules things get weird, it's not enough to add them via npm and adding import * as Stuff from 'pixi-module' which makes sense, because afaik they extend the PIXI namespaces. So I tried adding this reference thing /// <reference path="../node_modules/pixi-module/stuff.d.ts"> but even that did only work half-way. Hard to explain but it was like adding the Apples to PIXI, but not the AppleTree, if I may explain it this way. Even with `require('pixi-module')` Even stranger: VSCode finds the module and even suggests it when writing an import statement. But after auto-completing it, it tells me the module is not found. (The webpack run tells me so, too.) Tried it with @ivan.popelyshev pixi-projection, failed half-way and tried it again with pixi-particles. None of them did work as expected in the end. Wat? To conclude this: How to add modules after `npm install pixi-module` in my Typescript code, where I did `import * as PIXI from 'pixi.js'` Thanks <3

I'm currently trying to get my first Phaser project working, fiddled around a whole day trying to get it all set up but since I'm completely new to writing bigger JS projects with modules, I have no idea how any of this works, even after googling and reading a million guides. I want to write TypeScript in VSCode. So first I installed phaser with npm install phaser --save Then I import Phaser in my app.ts with import Phaser = require("phaser-ce"); Did I pick the right syntax out of the 50 different ones? Whatever, this is the one I chose. So, while im coding I now got code completion and type hints working, but after compiling to JS, I now have multiple problems: First of all, the compiler adds code to my main JS file which tries to access a global module or exports object which obviously doesn't exist. Why? Why does it assume this exists? How can I turn this off? No idea. This is what it pastes righto onto line 2 of the main JS file: Object.defineProperty(exports, "__esModule", { value: true }); And since "exports" doesn't exist unless I hack it into the HTML file, it gives me an error. But now the more important question is... how exactly do I import Phaser? As far as I know you can't really import other JS files into another? (At least not in ES5 as far as I know). (Great, after switching my text color to an illegible light gray, forcing me to manually recolor all the text to black, now the text editor here creates a new paragraph instead of a new line everytime I press enter. Whyyyyyyy...........) In order to get code hints I need to import Phaser in my TypeScript file with the import statement, but if I use anything other than "module": "commonjs" in my tsconfig.json It can't find phaser anymore: // tsconfig.json // ... "compilerOptions": { "module": "commonjs", // ... // game.ts import Phaser = require("phaser-ce"); // WORKS // tsconfig.json // ... "compilerOptions": { "module": "anything other than commonjs", // ... // game.ts import * as Phaser from "phaser-ce"; // Can't use same syntax. Why? I don't know. // TypeScriptCompiler error: // Cannot find module 'phaser-ce' But of course commonjs doesn't work in the browser so... I tried instead to load the typings manually by copying the into /node_modules/@types/phaser and then instead of importing Phaser, instead referencing the typings with: /// <reference types="phaser"/> And including phaser.js in my index.htm But since Phaser itself has a bunch of dependencies that it tries to load with require() which of course doesn't exist and even if it did couldn't work, how am I supposed to do this correctly? It just whines about Pixi not being defined and some other stuff. I read http://phaser.io/tutorials/how-to-use-phaser-with-typescript but it never mentions how Pixi etc is supposed to be included and doesn't say anything about require, export, module errors, it just works apparently, but not for me. Which of the 50 different module systems does Phaser use, how does it export itself? RequireJS? AMD? UMD? ES6? ES2015? I have no idea how many different methods there are and how to tell which one is being used. How do I import it correctly? Do I need to manually add ALL *.js files of phaser into the <head> of my index.htm? This is all waaaaay too confusing....., help please Edit: I got a basic version working for now by just scrapping all the import stuff, setting tsconfig.json "module" to "none", adding a ///<reference types="phaser-ce"/> at the top of my game.ts and just including phaser.js in the html file. How it gets it's dependencies I still don't know but at least it works now. I also have no Idea where it gets the typings from, I guess it must be magic.

So... I've been trying for days now to get modules to play nice with babylon.js, thus far without success. babelify, webpack, browserify, nothing seems to be working. Can anyone give me a hint on how to properly package it so that it actually functions? The current error I'm running into (and there have been dozens of various errors from the various attempts) is that BABYLON is not defined. require ('./babylon.js');var createScene = require ('./Sub_Scene1.js'); console.log('1');window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas');var engine = new BABYLON.Engine(canvas, true); console.log('2'); var scene = createScene;engine.runRenderLoop(function(){scene.render();}); window.addEventListener('resize', function() {engine.resize();});});console.log('3');

Hey guys, Over the past few weeks I have been learning more about Phaser and TypeScript and I have started a blog to share what I have learned and post code that I think will help people better use Phaser with TypeScript. I was waiting to post anything about them here until I had a post with actual code in it and a GitHub repo. (Though I saw today a link to one of the posts was on the front page, thanks Rich!) I use OSX and WebStorm, but you should be able to use the code and examples in pretty much any TypeScript environment. But keep in mind these tutorials use more advanced TypeScript features (AMD modularization etc). Posts: Set Phasers to TypeScript! - Setting up a TypeScript dev environment the hard way (Brackets, Prepros, Terminal), or the easy way (WebStorm) Big Boy TypeScript: AMD Modularization and Dependency Management – Part 1 - A preface to using AMD modularization, with some "guided reading" to explain the concepts. Big Boy TypeScript: AMD Modularization and Dependency Management – Part 2 - Has example code from a Git repo. Shows how to organize your project to use AMD Modularization. Introduces you to the three ways you have to import and reference files as well as how to export classes and modules. More AMD Modularization and Finite State Machines in Phaser - Cleared up some issues with AMD modules from the last blog. Used the TypeState library to show how to easily use Finite State Machines in Phaser! Has example code and a demo! More to come! If you haven't ever used TypeScript, I would recommend doing some reading at the TypeScript website before reading these blogs. Afterwards, do some Phaser stuff with TypeScript.

I am new to Phaser and really excited about the posibilities it opens to game developers. There is one issue I like to talk about - modularity. Phaser is 45,000 lines of JS. the code seems to be well written and domuented but it's still a lot of code to reason with and to maintain. I am coming from a Node.js mindset and in the Node world everything is modular. The idea is to constract your app using small NPM modules. This modular approach is one of the reason for the popularity of the Node echosystem. Node itself has small core and the community adds more functionality by publishing their libraries to NPM. How cool it would be if we could have something like this; var gameLoop = require('game-loop'); var keyboard = require('keyboard'); var entity = require('entity'); var physiqueEngine = require('engine'); etc.. Now if something new comes up, we don't need to wait for anyone to add this new hotness into our framework since there is no big framework. we just replace whatever we want. In addition it will be easier to contribute to the different libraries since each of them is small and is doing only 1 thing (the unix philosophy). In the 3d game development there is a good example to this approach - http://voxeljs.com/ In the DB world there is levelDB which also based on this - https://github.com/rvagg/node-levelup/wiki/Modules There is an interesting project for 2d games that is trying this approach - http://crtrdg.com/ And here is a recent blog post by Seth, the developer of this project - http://learnjs.io/blog/2014/03/04/gameloop-load-images-sprite-2d/ I don't know what is the effort and viability for breaking up Phaser into small modules, but at least let's have a discussion about it!