Search the Community

I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e) { let pos = e.data.global; player.x = pos.x; player.y = pos.y; } app.stage.interactive = true; app.stage.on("pointermove", movePlayer); Console screenshot: https://i.imgur.com/w4fAcb9.png I think that the problem may be related to webpack somehow ;(

How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React. Sorry for my bad English, I'm Spanish-speaking. I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button. All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement. class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing. In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :) class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); } // load images preload () { this.load.image('character', 'assets/sprites/character.png'); } update () { // player movement mechanics } } export default Character;

Hi all, Sorry if this is a very newb question... I have created a scene that uses a class instance. Within the class that is called, I have a constructor method that renders an image to use. The constructor method looks like this: export default class Gamepiece { constructor(scene){this.render = (x,y,sprite) => {let gp = scene.add.image(x,y,sprite).setScale(1.0,1.0).setDepth(100).setInteractive(); scene.input.setDraggable(gp);return gp; }} I call the class from a scene, and the returned class instance works fine until I try to apply drag events to it. Here is the working call to the class: let testObject = new Gamepiece(this); testObject.render(boardLayout[0].x,boardLayout[0].y,'gamePiece'); Unfortunately, it errors if I attempt to assign drag events to it. Here is the snippet for assigning the drag event: testObject.on('dragstart',function(){ console.log("dragstart fired"); }); The error is 'Uncaught TypeError: testObject.on is not a function' I see that an object that works normally with drag events is a graphics object. When I export the object to console, the object I am creating looks like this: Object{ render: function render(x, y, sprite) <prototype>: {…} circlesAvailable: circlesAvailable(gamePiece, connections) length: 2 name: "circlesAvailable" <prototype>: function () constructor: class Gamepiece { constructor(scene) } moveGamePiece: function moveGamePiece() <prototype> How (or is it possible) to reference this object to attach drag events to it? I've dug around, but can't seem to make it work. I'd assume the reference might be something like: testObject.prototype.graphics.on(){etc}. But I'm stuck. Feel free to suggest more efficient/practical ways to approach this. Thanks for any help you can provide! -Bruce

Hi all, I have a scene and a player, the player needs do something in the core game loop. Whenever I run into a situation like this I always end up creating an update method on the sprite/image/whatever and calling it from the scene like this: class Level1 extends Phaser.Scene { constructor () { this.player = new Player() } update () { this.player.updatePlayer() } } class Player extends Phaser.Physics.Matter.Image { updatePlayer(){ //do something } } It doesn't look too bad in this example, but I find things get messy once you start dealing with half a dozen game objects that all need to updated, sometimes I'll need to check if any of the game objects exist before calling their update method, adding to the mess. Is there a better way to do this? I know Unity/Unreal have game objects with update methods that just work™ without any need to connect them to the game's main update loop Thanks!

About the role A Game Developer at Roxor/Playsafe plays a crucial part of the creation of our awesome games. You will be working in a team that is responsible for taking the game from a concept stage to a finished game, optimized for both desktop and mobile devices. Not only will you write structured, testable quality code but you will also support our graphics and FX artists with implementing and coding art and graphical effects. We work in small agile teams consisting of a game designer, sound designer, producer, QA, artists and of course game developers. We believe that working closely in small team is crucial in creating the best games and it helps us in an agile way to take faster and better decisions. We develop our games in Javascript and TypeScript. They are rendered with the PIXI engine in WebGl and Canvas. To give the players the best experience, we put a lot of effort in optimizing our games for all platforms, both regarding file size and performance. We work in an ambitious, casual and fun atmosphere where we take a lot of pride in the games we create. Your Tasks ⦁ Participation in the design process for new features in the new games framework ⦁ Implementing new features in the new games framework ⦁ Implementing new games in games framework ⦁ Code Reviews of new features implemented by other developers Qualifications and Experience ⦁ +2 years of prior experience of software development as employee or contractor ⦁ Experience working with graphically performance-heavy web applications and games ⦁ Working experience with JavaScript, ActionScript, TypeScript, or similar ⦁ Working experience with any JavaScript based game engines, like PIXI, Phaser or similar ⦁ Interest in computer graphics programming, animations and effects ⦁ Good communication skills to explain technical requirements to the game designer and producer ⦁ Experience with client-server integrations ⦁ Understanding of good practice version control, artefact versioning, branching model ⦁ The ability to deliver in an agile, iterative environment where pace is high and all voices matter We also value ⦁ Experience with hardware-accelerated 3D techniques ⦁ Experience working with TDD and automated testing techniques ⦁ Any other creative skill, from sound design to 3D modeling Who are you and what do we offer We are seeking a social, positive, and driven person who can help us create the best video slots on the market. You are a team player with strong initiative and self-motivation thriving in a small team environment where the route from idea to implementation is very short. You should be collaborative, fun to work with and be able to augment our design process with great animation instincts and a firm grasp of the best tools for building cross platform experiences for the modern web. If your interested in the position please feel free to notify me at [email protected]. We are based in Cape Town, South Africa. GameDeveloperRole - Job Description.docx

Hey guys! I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this? Looks like it's coming from the mini-signals dependency. I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled. Any ideas of a solution?

I created a minimal boilerplate just to set up ES6 workflow with no configuration using Parcel, so you don't have to install a lot of devDependencies. Github repo: https://github.com/22mahmoud/Phaser.io-v3-Boilerplate I plan to make CLI create a new project and generate scenes and game objects Questions, suggestions, and contributions are welcomed

I`m use in creating simple game - ES6 syntax, and I cannot add plugin to my game (phaser-plugin-game-scale). Help me and explain how to use plugin in ES6 syntax. Thanks!!

How do you configure the server for this template ? => https://github.com/nkholski/phaser3-es6-webpack I'm trying to do it by following this tutorial => https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-1/?a=13 I added two dependencies: nodemon and express. I created the server.js file with the server configuration. const express = require('express') const app = express() const server = require('http').Server(app) const path = require('path') app.get('/', function(req, res) { res.sendFile(path.resolve('index.html')) }) server.listen(8081, function() { console.log(`Listening on ${server.address().port}`) }) In the package.json file, I added a command to start the server: nodemon src/server/server.js The server starts correctly but the indicated html file can not read the scripts (" The load failed for the "script" element with the source vendor.js and app.js"). Project structure:

Hello everyone this is my first post on this forum. I wanted to share the Puzzle Bobble clone (gameboy version) I made with Phaser, ES6, and webpack. I tried to make the stages similar to the original series. Currently there is a total of 50 stages but I plan to add the rest of the stages if I can find them on the internet. I also drew all the sprites in photoshop. Hope you guys enjoy it! https://html5bubbleshooter.co/

Hello there, i would like to use the babylonjs package in my JS project. If I do this with my import statement, everything goes. I then call a function in another file and want to assign a new standard material to the object (I pass scene to the function). But now he tells me "this.getScene is not a function". Can it be because this package is not designed for webpack+js+module? Uncaught (in promise) TypeError: this.getScene is not a function

In the Phaser 3 examples we have an example extending Phaser.Scene like so (http://labs.phaser.io/edit.html?src=src\scenes\scene from class.js): var MyScene = new Phaser.Class({ Extends: Phaser.Scene, // [...] using ES6 we might say instead: class MyScene extends Phaser.Scene { From what I see, I think that these are functionally very similar. But I could easily have missed or misunderstood something. Are these the same in effect (or almost the same)? If there are differences, what are the significant differences? Is one preferred over the other (assuming ES6 is an option)?

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!

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!

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.

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?

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.

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!

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!

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!

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

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?

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.

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

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?