Website URL

Twitter

Skype

Location

Interests

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

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'

Hello! It's been a while since my last topic, I've been feeding my brain a little bit and here is the result: I've created a tiny boilerplate available on Github. The aim of the project is to help other developers to get started a little bit faster without having to spend too much time setting up Build tasks (basically setting up the transpiler). The project comes with: A heavily commented gulpfile that uses Browserify and Babel to transpile your ES6 code into ES5.Two build modes: development and production (neither one is too complex or opinionated).Browsersync for live reload and weinre for your mobile debugging needs.UglifyJS for the production build. No sitelock or heavy obfuscation code included.You can access the repo here: https://github.com/belohlavek/phaser-es6-boilerplate You can see the example included on codepen (no modules): http://codepen.io/belohlavek/full/aORJVL Bonus information: You can get code intellisense for ES6 with VSCode + phaser.d.ts (Typescript definition). Works like a charm on Ubuntu. If you feel I missed out on something, or worst, if you think I screwed up please let me know! I'm sure there are at least a couple of dumb typos out there. Are any of you already using Babel with Phaser? Any Typescript users willing to give ES2015 a try? Thanks for reading

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?

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?

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.

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

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?

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!

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.

Hey guys, I have decided to start using webpack and ES6 with my games, I have managed to run a sample with 'npm start', however I am unable to debug it in WebStorm.
I am using the example here: https://github.com/SvetoslavKuzmanov/phaser-game-boilerplate
This is my debug configuration in the image.
I would like to use npm directly from WebStorm and be able to debug my code with preview in the browser. Also I have heard that it is possible to have live editing set up, so my code changes will appear immediately in the browser.
Has anyone done that?

Hi Guys,
I have been using ES6 for my game development and I really enjoy the functionality it supports. I started of using this example (Boilerplate) and kept the gulp compiling/traversing script, as it suits my needs well. I ran into a little challenge, that I could not figure out yet, but maybe somebody else has a good idea on how to achieve the following:
After the gulp script ran through it creates a build.js file, which starts like this
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
and ends like this:
},{}]},{},[44])
So it creates this nice little sandbox around my code. The sandbox is unfortunately also what is giving me a little headache, as I would like to consume some off the classes/methods outside of sandbox. For instance to simple call new Game(); from another script, that is linked to my index file.
Important to mention here is that I would like to keep the sandbox and only expose certain functionality to the outside world.
Hope somebody has a clever idea to help me on this issue! Thanks guys!

Hello there.
For my first Phaser game I want to create an endless runner. I want to be sure right from the start that everything I'm doing is done in the best possible way.
I know there might be no straight / easy solutions, but I want to know your opinion, as my experience with Phaser is rather short (1 week).
1. Idea
I'm having one big Phaser.Group called Platforms, which is called right in the main game and that group handles everything when it comes to the groups.
Inside of Platforms you can spawn platform which is also a group. And that group (platform) has many instances of Ground, which is extension of the Phaser.Sprite
// ground.js
class Ground extends Phaser.Sprite {
constructor(game, x, y, frame) {
super(game, x, y, 'tileset', frame);
const BODY_OFFSET = 3;
this.game.physics.arcade.enable(this);
this.anchor.setTo(0, 1);
this.body.immovable = true;
this.body.allowGravity = false;
this.body.offset.y = BODY_OFFSET;
this.body.height -= BODY_OFFSET;
this.body.velocity.x = -this.game.global.speed;
this.body.friction.x = 0;
}
}
export default Ground;
// platform.js
import Ground from './ground';
class Platform extends Phaser.Group {
constructor(game, { startX = 0, startY = game.height, width = game.width } = {}) {
super(game, startX);
this.settings = { startX, startY, width };
this.flags = {
extended: false
};
// Platform building loop
// 1. Prepare variables
let tileLevel = 1,
tileFrame = 8;
// Y axis
for(let y = startY; y <= this.game.height + this.game.global.tileSize; y += this.game.global.tileSize) {
// X axis
tileLevel === 1 ? tileFrame = 8 : tileFrame = 1;
for(let x = 0; x < width; x += this.game.global.tileSize ) {
this.add(new Ground(this.game, x, y, tileFrame));
}
tileLevel++;
}
}
update() {
// When off bounds - spawn another platform
if ((this.centerX < this.game.width) && (!this.flags.extended)) {
this.flags.extended = true;
this.game.global.spawnPlatform.dispatch(this.right);
}
if(this.right < 0) {
this.destroy();
}
}
}
export default Platform;
Every little piece of ground has the same velocity and settings. Player collision is checked based on platforms.children.
For now I'm destroying platform when it goes off screen and calling global spawnPlatform function when middle of a platform is on the left border of the screen (to spawn it a little earlier).
And here come my questions and ideas:
2. Ideas & questions
Recently I've learned about Object pools. My platforms were done by doing some random numbers (width, height etc) but I've noticed that even with one platform performance goes dramatically down. I mean maybe not dramatically, but it's not a good sign. There was that "sawtooth" pattern on the memory section (DevTools).
Here are my ideas:
2.1 Leave it as it is
Platform spawns, platform goes off the screen, platform gets destroyed.
2.2 Generate many random platforms at the beginning, and then just re-use them
At the beginning game would generate a big array of defined platforms, that would still be much-less random. When the platform goes off the screen it's not destroyed. Instead it's killed. But here comes my problem - you can't kill groups. Only sprites inside (Ground instances) could've been killed. But will it be really a better solution? Killing every ground, moving the platform out of 'living' array, and then when platform gets spawned revive them?
2.3 Generate object pool of Ground instances and use them as 'blocks' for platforms
I think that's pretty much the same as 2.2, but maybe a little bit different. Creating big arrays of different types of blocks, and then using them to build platforms. I think like max 5 platforms will be visible at one moment on the screen so I wouldn't have to create many blocks. Platform goes off - Ground(s) get killed, group destroyed (?)
Also before I end - on the screenshot you can see that sometimes the connections between tiles are visible. I don't think that's the spritesheet case. Maybe something with small delays between creating each platform? Not quite sure. Any ideas?
Another problem lies in gaps between each platform. I guess that's caused by a delay between creating a platform and spawning it.
I want to ensure I'm doing everything right from the beginning, so pardon me if I sound stupid or that's just silly question. Hopefully someone will be able to answer my question and help me out.
Thanks for creating Phaser. Making games have always been my dream, but recently I was focused on the front-end development. Now I can combine those two

Has anyone done or found blank ES6 Phaser template? All I have found, are just ready multiple state and gulp templates. ES6 is new thing for me, so that's why I'd wish to get just blank project template without multiple states etc.

Hello everyone! I have kind of a complicated question. I'm currently doing my thesis at uni, the topic being web based games (specifically 3d ones). I'm going to create a small multiplayer Bomberman clone and reflect the process on the thesis itself; what problems I had, how does the development compare to for example Unity etc. I have used Unity kind of a lot and know the basics of threejs. However, after many hours I decided to make the game with Babylon, since it seems to be more suitable for the task at hand. I have a strong web-development background, so the thesis pretty much gives me some time to learn more about game programming
Ah yes the question itself, which is pretty much about setting up the project. I would like to have help with these areas:
Using modern JavaScript, ES6 syntax and features for BabylonJS.
Maybe load the modules using, for example, SystemJS. Is this a silly idea?
Is it best to use, for example, Gulp for the deployment stuff, like minification?
However, I have not found that many sample projects at all for the engine itself. Maybe I haven't digged far enough? If anyone has any useful links, sample projects or ideas to share with me I would be really blessed. Thank you in advance for reading my lengthy post

Hey everyone,
Just a quick question: Can we build phaser games with es6 ?
I'm currently learning the es6 language by making pong, and as I go along I want to make the same pong game but with using phaser or Lazer.
Very Kind Regards,
Cedric

Dear awesome community,
I have a question about transpiling es6 to native javascript/es5.
I am looking for something like atom's typescript plugin, this makes compiling typescript really easy.
There is now a babel plugin which is: language-babel.
I have no clue on how to set this up and what I have to do. There is no actual tutorial / guide to be found.
How do you set up a transpiling system? like the typescript plugin
thank you so much in advance
Very kind regards,
Cedric

I've made an tutorial based on my approach to enemies in my Metroid Remake extending Phaser.Sprite into a generic Enemy class which in turn is extended to create actual enemies. The tutorial uses ES6/ES2015 but the approach could be used with ES5 (which the my code is actually transpiled to).
It's my first tutorial ever. Both positive and (constructive) negative feedback is appreciated. Let me know if you find something you disagree with in my approach, or ways to improve it. Also, English isn't my native language so any feedback on how I could improve hard-to-understand parts is equally appreciated.
Link: http://metroid.niklasberg.se/2016/02/12/phaser-making-and-using-a-generic-enemy-class-es6es2015/

Hi everyone,
I was very interested in developing a phaser game in ES6 and I have found some boilerplate which are very good but I decided to make my own.
https://github.com/cstuncsik/phaser-es6-demo
Cheers

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');