Search the Community

Hello, I'm trying to export a model which is about 400,000 Polys. I know the maximum export is somewhere around 60, 000 for any one mesh. I am thinking about breaking and exporting the mesh in different parts. Will this lead to issues in the scene? Also, what is the best polygon count for a babylon scene for efficiency in web and mobile? Finaly, what is the maximum polygon count for a babylon scene before it crashes? Thank you in advance!

Hi, I am working on an HTML5 game and I use Arcade physics as physics system for the game. I am trying to implement a pause button functionality and ran into a problem of choosing which methods to use from the below mentioned methods. They all seem to be similar in functionality and the docs do not contain much further explanations. Can someone please elaborate a little on the functionalities of these methods and mention the difference between them? physics.pause(), physics.resume() scene.launch(), scene.start() scene.pause(), scene.resume(); scene.switch() physics.world.resume(), physics.world.pause()

Hi All I couldn't find a method to restart / reset a scene. Anyone know if there is one please? Or if there is a better way to do this. Thanks!

As I understand there was an optimization to how things are erased from old scenes (not active scenes). Considering the last sentence, I have to optimize my code. But I am not really aware of how. The shutdown event has to be called manually on custom GameObjects. But I only guess that's how to do: class Parrot extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x * SCALE, config.y * SCALE, 'animals', 15); this.scene.events.on('shutdown', this.destroy(), this); //<- is it just that? } } For any explanation I would be grateful, thanks in advance!

This is probably quite a simple problem to solve; but I'm pretty new to BabylonJS. I would like users of my code to be able to arbitrarily scale a 3D model loaded from a .babylon file using code like this: BABYLON.SceneLoader.Load("", "model.babylon", engine, function (newScene) {newScene.executeWhenReady(function () {... After the scene has been rendered using, engine.runRenderLoop(function() {newScene.render();}); I'm then trying to apply the user defined scaling value like this (for example 200% scaling): for (i = 0; i < newScene.meshes.length; i++){ newScene.meshes[i].scaling = new BABYLON.Vector3(2, 2, 2); } As you can see from the attached images of normal vs scaled; the 200 percent scaled version isn't scaled proportionately; e.g. the wheels out grow the chassis of the vehicle. Is this the correct way to scale a scene of multiple meshes? Should I instead be adding all my meshes to a parent node and then scaling that? (if so how). Appreciate the help; thanks!

Uncaught TypeError: Cannot read property 'sys' of undefined When I add the scene to the games config. It works perfectly. But when I add a scene via a running the current scene to start it a bit later, I get the error. The error is caused by adding a Scene via the Scene Manager (code below). This scene does exist with the gives name etc. doublechecked. Does anyone know what I am doing wrong? // adds a scene but throwing the error: sys of undefined. this.scene.add('name'); // adds a scene but throwing the error: sys of undefined too this.scene.add(ClassName); cheers,

Hi, i would like to import an OBJ file into my scene and I have got it. However, I don't get change the position and scale of the mesh. ¿How could I do it? This is my code: var loader = new BABYLON.AssetsManager(scene); var edificioB4 = loader.addMeshTask("A2", "", "http://localhost:8080/modelos/A2/", "A2.obj"); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; loader.load(); Thanks, JuanMa J.R.

Hi guys, I'm trying to make some windows(pop-ups) that I will use in my game, these are for game over, game won or showing different text tips. Will contain text, buttons, sprites. What is the best way to achieve this? If I use a container, how can I show/hide it? This environment is new for me so I'm open to suggestions and ideas. Thank you!

I'm trying to code a simple game using scenes. I am new to Phaser 3 and relatively new to coding in general so I may be making a dumb mistake. I've just hit a wall. I'm trying to get my main menu "start" button to start the game state. Simple enough right? But when I run the files on http-server, i get: ``ncaught ReferenceError: Game is not defined at testmain.js:6`` my html: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>FCM Classes Test</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> </head> <body> <canvas id="canvas"></canvas> <script type="module" src="js/testmain.js"></script> <script type="module" src="js/scenes/game.js"></script> <script src="js/scenes/mainMenu.js"></script> <script src="js/scenes/preload.js"></script> </body> </html> main.js var config = { type: Phaser.AUTO, width: 800, height: 800, parent: "#canvas", scene: [Preload, MainMenu, Game ], title: 'Fantasy Cage Match' } let game = new Phaser.Game(config); mainMenu.js let startButton, menubg; class MainMenu extends Phaser.Scene{ constructor() { super({key: "MainMenu"}); } create() { this.menubg = this.add.image(400,400,'menubg'); this.startButton = this.add.sprite(400, 400, 'startbutton').setInteractive(); this.startButton.on('pointerdown', function startGame(pointer){ this.scene.start('gamescene'); }, this); } } and my game.js I haven't added any other code because I just want to see my sprite move around on screen.. (I know i haven't done anything with cursors yet..) import Player from '../characters/Player.js' let bg, cursors, player; class Game extends Phaser.Scene{ constructor() { super({key: "gamescene"}); } create(){ bg = this.add.image(400,400,'background'); player = this.add.sprite(400,400,'dude'); this.player = new Player(this) setupCollision(this) } } First time posting, so I'm sorry if I didn't follow correct etiquette. Thanks in advance for any ideas.

Hello! I was wondering if this is the correct approach, regarding management of the collider when restarting a scene. I have added this collider in my scene: this.physics.add.collider( this.traps, this.player, this.playerTrap, null, this ); I restart the scene as soon as this collision happens in the playerTrap() function: private playerTrap(): void { this.player.setAlive(false); this.cleanScene(); this.scene.start("GameScene"); } The cleanScene(): private cleanScene(): void { this.physics.destroy(); } Without the cleanScene() function he restarts the scene infinitely. I always thought that when using this.scene.start he auto cleans everything and reboots.

Hi, I was wondering, is it possible / could it be possible to create multiple animations for a single mesh but have them as separate animatables so you can pause and play etc each individual animation applied to that mesh? ive tried to create a new BABYLON.Animatable each time i create an animation but then the _runtimeAnimation is empty and .pause() .play() doesnt work. any help is much appreciate and if anything else needs explaining just let me know! many thanks, John

let MainMenu = new Phaser.Class({ Extends: Phaser.Scene, initialize: function MyScene(config) { Phaser.Scene.call(this, config) }, preload: function () { this.load.image('Logo', 'assets/Logo.png'); }, create: function () { this.Logo = this.add.image(1024/2 ,100, 'Logo').setScale(2); Phaser.Display.Align.In.TopCenter(Logo); } }); I have this class (Scene?) that should represent my game's main menu. But, i want to pass to this class the game object that i'm creating in another file. In this case i want it merely to set my game's logo in top center using game.width and game.height as a way to make the logo be correctly placed with any size of the canvas. How can i do it?

So i'm trying to switch scenes when a tween is complete, however i get the titular error 'Cannot read property 'start' of undefined' , and i don't know why this is... Here's the code: class StartScreen extends Phaser.Scene{ constructor(){ super({key: "StartScreen"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); } create() { this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.logo = this.add.image(1024/2 , 300, 'Logo').setScale(2); this.text = this.add.text(320, 450, 'Push Enter', { font: '50px NES', fill: '#FFF'}); this.enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER); } update(){ if(this.enter.isDown){ this.text.destroy(); this.enter = ''; this.tweens.add({ targets: this.logo, y: 150, duration: 2000, onComplete: this.onCompleteHandler }); } } onCompleteHandler(){ this.scene.start('MainMenu'); } } class MainMenu extends Phaser.Scene{ constructor(){ super({key: "MainMenu"}); } preload() { this.load.image('Logo', 'assets/Logo.png'); this.load.spritesheet('background', 'assets/backs.png' , { frameWidth: 480, frameHeight: 320 }); this.anims.create({ key: 'stars', frames: this.anims.generateFrameNames('background', { start: 0, end: 127 }), repeat: -1 }); this.add.sprite(1024/2 , 400, 'background').play('stars', true).setScale(2.5); this.add.image(150 , 300, 'Logo').setScale(2); } create() { } }

Hello there! Up to now, I accessed the desired gameobjects directly in the update function and called their update function. Is it not possible that these are updated automatically? Shouldn't exactly the setActive() function of gameobjects take over this task (if set to true, processed by the scenes UpdateList)? But this seems not to work (is set to true by default anyway). Or did I misunderstand or overlook something? Thank you!

hi i use unity create a simple scene one cube,sphere and plane bake the scene then use the export toolkit get three files .babylon file .manifest file and the bake light png picture file i drag the .babylon file to the sandbox , the web page show not as in the unity i check the tutorial in http://doc.babylonjs.com/how_to/load_from_any_file_type still have no idea how can i import the babylon file and the png file make them work now i do not know how to use it can some help me? regards

In phaser3, it is possible to add scene at runtime, but how to destroy and free a scene instance? Or should scene instance be kept always?

http://www.babylonjs-playground.com/#PFCYT#1 This playground makes 9 meshes and tries to delete them all at once in a loop. It does not work. Am I missing something? I defeated the problem via this unholy function ... function deleteAllMeshes(scene){ var countMesh = 0; scene.meshes.forEach(function(m) { countMesh++; console.log(m.name); m.dispose(); }); console.log(countMesh + " meshes deleted"); var x = countMeshes(scene); if(x > 0) { deleteAllMeshes(scene); } } Here is the output of the unholy function proving only half of the meshes are deleted per function call.

Hi everyone, as someone new to Phaser I came across the question most of us (newbies) have after a few hours experimenting.. Am I doing it right?! Obviously there's never only one "right way" of doing things, after watching a few tutorials I ended up with the code below. I'm looking for a feedback in the following topics: Classes - If I am not mistaken I've probably tried 3 differents ways of making classes, this one was the most logical to my eyes. (I'm refering to classes which I want to use as scenes) Var vs this. - Is there any difference? I see people using var x and this.x (I assume I can also use let instead of var since I'm always on the same block) Starting a new scene - This is the part I am really confused about, I have menuNumber initialized in another .js and basically I'm waiting for a pointerdown event to happen in one of the images to then change menuNumber value that will be read through update() since it's an infinite loop in order to start a new scene. Note: Everything is working fine and I'm preloading all the images in another .js file class MainMenu extends Phaser.Scene { constructor() { super({key: "MainMenu"}); } create() { this.add.image(640, 320, "background"); //var title = this.add.image(200, 200, "title"); reduce png size var jogarBut = this.add.image(960, 120, "jogarBut").setInteractive(); var opcoesBut = this.add.image(960, 180, "opcoesBut").setInteractive(); var ajudaBut = this.add.image(960, 240, "ajudaBut").setInteractive(); var rankingBut = this.add.image(960, 300, "rankingBut").setInteractive(); var creditosBut = this.add.image(960, 360, "creditosBut").setInteractive(); var sairBut = this.add.image(960, 420, "sairBut").setInteractive(); //Click on title easter egg - to do menuNumber = -1; jogarBut.on("pointerdown", function (ev) { menuNumber = 0; }); opcoesBut.on("pointerdown", function (ev) { menuNumber = 1; }); ajudaBut.on("pointerdown", function (ev) { menuNumber = 2; }); rankingBut.on("pointerdown", function (ev) { menuNumber = 3; }); creditosBut.on("pointerdown", function (ev) { menuNumber = 4; }); sairBut.on("pointerdown", function (ev) { menuNumber = 5; }); } update() { if(menuNumber===0){ this.scene.start("Jogar"); } else if (menuNumber===1){ this.scene.start("OpcoesMenu"); } else if (menuNumber===2){ this.scene.start("AjudaMenu"); } else if (menuNumber===3){ this.scene.start("RankingMenu"); } else if (menuNumber===4){ this.scene.start("CreditosMenu"); } else if (menuNumber===5){ this.scene.start(""); } } }

What the best way to get the filename of the scene that was loaded... Not the scene.database.currentSceneUrl but the actual "sceneFilename" that get passed to the SceneLoader.Load(). It get used ALOT internally in babylon.SceneLoader but the engine actually STORES the sceneFilename. yo @Deltakosh do you think we can store the sceneFilename from the SceneLoader.Load() on the scene and expose some kind of scene.filename property ... Not the ImportMeshes, but just the main SCENE LOAD FILENAME

Hello, I have a pretty complex scene built and I am having very heavy lag issues. Even though I have a lot of meshes, they are all instances of default ones... so I don't think there's any reason I should be getting only ~10 FPS. Could anyone provide me with any sort of clue as to why my performance is so low? By the way, each of those cylinders are composed of many layers of cylinders. There's usually 3 cylinders (the middle one, the border, and the outline) and under them could be at least 3 others stacked (the ones that look like shadows). Aside from that, each little "group" that you see in the screenshot has a "mapMesh" object which the cylinders are parented to. All those mapMeshes are parented to a worldMesh. For the GUI text and images, each letter/image is an instance of a previously generated text/image. Each letter is parented to a wordMesh, which is then parented to a labelMesh, which is then parented to the mapMesh or the cylinder in the case of the ones on top of it. The background with a gridMaterial has size 300 x 300 and gridRatio of 4. There's also a linear fog which starts at the end of the camera (usually 50 units apart from cylinders in the y axis) and ends at 50 units after that and has a density of 0.01. After this scene is fully generated, there isn't much coding running at all... no animations or anything, it's pretty static. However, I cannot freeze world matrices because I might need to move the cylinders. I appreciate any help, really stuck on how to improve performance here and not degrade the quality of my scene.

Hi community, I want to propose you some addition to assetManager and sceneOptimizer. If the solution already exist, said me assetManager : 1. Get loading percent, not on x file loaded but on stream data loaded when it's possible. > for more precision and to show state if you load some big files. 2. Add "abort" function and "onAbort" callback to cancel running tasks and loading files. > Currently "clean" function delete tasks in assetManager but not abort current loads. That mean if you have a big file in loading, it don't stop. sceneOptimizer : 1. Add a starter level to try optimizing render : > I tested the current sceneOptimizer and the problem is it try the best render first. If you have an older device, the website crash and the browser reload page before that sceneOptimizer can downgrade the render. So, it's a loop without ending. 2. Create two steps to optimize render : > First : upgrading. The sceneOptimizer try to reach "x" FPS with the starter level. If it's ok, it upgrade render again until when it can't reach "x" FPS. > Second : dowgrading. If the last try (or the first try with the starter level ) not reach FPS, the sceneOptimizer downgrade until when it can reach FPS. If the sceneOptimizer reach "x" FPS, it stop. > Of course, we keep "trackerDuration" : time in milliseconds between passes. > You will can restart the sceneOptimizer when you add or change something like the current version What do you think about this ? Have a nice day !

Hi everyone So I'm back in to looking at Baylon after having to concentrate on other areas of my project first. I'm at the stage now where I'm loading a .babylon file exported from Blender, I'm attaching camera controls to the active camera (configured in blender to be Arc), and I'm using Pep instead of Hand for the interactions because Hand hates me and I don't deserve nice things. Anyway here's the issue, with the camera controls attached as so: scene.activeCamera.attachControl( canvas, false ); everything works fine in Mac safari 11.0.3 and Chrome 63.0.3239.132, but when in Firefox 58.01 the page scrolls as well as the scene when using the mouse wheel to zoom. I've tried setting that false value to true, but all that did was stop scene scrolling everywhere. The canvas element has the attribute: touch-action="none" set in the html and the similar declaration in CSS. This wouldn't be such a problem if the entire scene was the whole page, but in my case the canvas is only part of the visible page. Can someone shed some light on this please? Cheers

Hi guys! I recently start a little kind-of cornell box scene, I still have some little tweaks to do before release it for everyone (... in facts, you can already grab the sources). I think this will sometimes be more useful to make some tests in this little environement rather than one with default skybox and default sphere And, in relation with this topic about reflection probe, it's precisely a scene which will be perfect to test these kind of issues. But, after many tries, I never succeed to make a playground-version of my scene. Here the correct version, on my personnal website : https://www.nothing-is-3d.com/dl/babylonJS/cornellBox/BJS-PBR/ Here my try in the playground : http://www.babylonjs-playground.com/#59ZXVF#5 As you can see, loading lightmaps texture goes wrong. Where am I wrong ? PS: we can note a huge bug in firefox, which doesn't load correcly the materials! [edit: dedicated thread]

Hello! I wasn't sure what to call it but I am working on a game with my husband (terrible idea, he's a designer..) and he asked if I could create a menu screen that plays out a little scene or something. He showed me this video as an example of Mario Kart SNES (only watch the first 35 seconds of so): https://www.youtube.com/watch?v=AlAmXXNz5ac I am aware of how to use states and all but, I only just started using Phaser and I was trying to think out how I would create something similar to the scene played out in the example (Maybe something not so complex), also if this is possible how would I loop this scene, since a user might leave the scene playing to see the end of it? Thank you in advance for all of your help!!

I get an error when I try to run the babylon inspector with scene.debugLayer.show(); And it only happens when I go to the GUI tab. "babylonjs": "3.1.1", "babylonjs-gui": "^3.1.1",