Phaser: Question: why using custom Class utility

[sercand]

Hello, I have noticed that phaser uses weird custom Class utility to create classes. Apparently, the code is taken from https://github.com/mattdesl/klasse which is deprecated, and the author suggests to use es6 classes. Is there any reason to not use es6 classes?

[photonstorm]

Because then we'd have to use Babel or similar to transpile it all back again, which is overkill when all we needed was a bit of syntactic sugar for an object prototype. When we switch to ES6 we'll do it properly, not just for classes.

[Asgator]

@photonstorm you can used https://babeljs.io/docs/plugins/transform-class-properties/ or https://github.com/babel/babel/tree/master/packages/babel-preset-env some minimal add code

Bec now your classes don't work with babel class. It not cool bec most people's used babel in all projects + react or babel optimisation code. Babel it standard but you are create bicycle

[photonstorm]

Nothing about how we've done it prevents you from using Babel as part of the workflow in creating your games. You can write your games in ES6 quite happily and use Babel to transpile them. The current method we use won't error and it won't get in the way, it works perfectly with ES6 classes.

Here is a test app to prove it:

import Phaser from '../node_modules/phaser/src/phaser';

class MyScene extends Phaser.Scene {

    constructor (config)
    {
        super(config);
    }

    preload ()
    {
        this.load.image('face', '../assets/bw-face.png');
    }

    create ()
    {
        this.add.image(400, 300, 'face');

        let text = this.add.text(100, 100, 'Phaser 3');

        this.tweens.add({

            targets: text,
            y: 500,
            ease: 'Bounce.easeOut',
            duration: 2000,
            repeat: -1,
            yoyo: true

        });
    }

}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: MyScene
};

const game = new Phaser.Game(config);

and here is our webpack config:

 var path = require('path');
 var webpack = require('webpack');
 module.exports = {
     entry: './src/app.js',
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'app.bundle.js'
     },
     module: {
         loaders: [
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: ['env']
                 }
             }
         ]
     },
     stats: {
         colors: true
     },
    plugins: [

        new webpack.DefinePlugin({
            'CANVAS_RENDERER': JSON.stringify(true),
            'WEBGL_RENDERER': JSON.stringify(true)
        })

    ]
 };

All we've done is create a fresh npm init, install babel-core, babel-loader, babel-preset-env, webpack and phaser@beta and then built it. Babel transpiles it no problem and builds our bundle and the app runs.

Babel is standard if you want to code in ES6, I agree. We chose to build v3 in ES5 and migrate it to ES6 later this year. That was our choice. It prevents no-one from using ES6 to make their games. There are no bicycles here, please, let this be the end of it, this is not a productive use of our time.