Подскажите как переписать код с Phaser 3 на Phaser 2?

[Katy93]

У меня есть код написанный на Phaser 3.0, взять он был с одного сайта по FLASH/HTML 5. Мне нужно переписать на Phaser 2.0. При попытке в html файле заменить библиотеку с Phaser 3 на Phaser 2, выдаёт сообщения об ошибке:
game.js:20 Uncaught TypeError: Class extends value undefined is not a function or null(anonymous function) @ game.js:20
game.js:16 Uncaught ReferenceError: playGame is not defined
Как правильно написать этот код на Phaser 2?

var game;
var gameOptions = {
    colors: ["0xffffff","0xff0000","0x00ff00","0x0000ff","0xffff00"],
    columns: 3,
    rows: 4,
    thumbWidth: 60,
    thumbHeight: 60,
    spacing: 20,
    localStorageName: "levelselect"
}
window.onload = function() {
    var gameConfig = {
        width: 320,
        height: 480,
        backgroundColor: 0x222222,
        scene: [playGame, playLevel]
    }
    game = new Phaser.Game(gameConfig);
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    preload(){
        this.load.spritesheet("levelthumb", "levelthumb.png", {
            frameWidth: 60,
            frameHeight: 60
        });
        this.load.image("levelpages", "levelpages.png");
        this.load.image("transp", "transp.png");
    }
    create(){
    }
}
class playLevel extends Phaser.Scene{
    constructor(){
        super("PlayLevel");
    }
    init(data){
        this.level = data.level;
        this.stars = data.stars;
    }
    create(){
    }
}

[Rise]

Обратимся к первоисточнику, там есть ссылка на версию 2.

[Katy93]

Я и забыла, что там есть исходники и для Phaser версия 2, просто я эту статью давно проходила и к ней больше не возвращалась, а исходники остались. Мне нужно было ещё сделать выбор спрайта у картинки, и я уже взяла этот вариант.

var thumb = game.add.sprite(80, 120, "levelthumb");
thumb.animations.add('sprite',[1]);
thumb.animations.play('sprite');

А оказывается надо было просто заменить функцию setFrame на frame, чтобы всё заработало, а то при использовании setFrame, вся картинка исчезает.

Спасибо за помощь.

[Rise]

Katy93,
Еще заметка, там в phaser 3 автор уже использует class-ы, что есть не phaser-ные различия, а js-ные.

Не знаю очевидно ли это новичкам, но не вдаваясь в детали, положение в js сейчас примерно такое:
- современный js считается версии ES6, она же ES2015, и выше (6 - номер издания, 2015 - год издания).
- самый кроссбраузерный js считается версии ES5 (2009-2011).
- компиляторы, transpilers (traceur, babel, coffeescript, typescript, ...), позволяют писать код в одной версии, а конечный код получать в другие.
- сборщики, bundlers (grunt, gulp, webpack, rollup, ...), позволяют собрать все в один файл, как минимум.

Поэтому, если тебе эстетически нужны модули, классы, итераторы, генераторы, промисы и другие фишки современного js, но не нужны старые браузеры, то можешь писать на чистом ES6 без посредников.

Отличие ES6 от ES5.