Search the Community

Hello. I currently have a strange problem when drawing lines or a rectangle on a existing container. Containers Layout: ---------------------------------- - World : Container -> SceneManager -> GetActiveScene(): Container When the world get's created i get the ActiveScene from the scene manager. But when the graphics object is rendered it has a differant size then its container where it is placed in. Code Snippet: NewScene(sceneOptions: ISceneOptions): boolean { //this.ActiveScene.removeAllListeners(); //this.ActiveScene.destroy(); this.ActiveScene = new Scene(0xe3d8c3); this.ActiveScene.y = 110; this.ActiveScene.width = 900; this.ActiveScene.height = 400; var graphics = new Graphics(); graphics.beginFill(0xffffff); // draw a rectangle graphics.drawRect(0, 0, 900, this.ActiveScene.height - 25); //this.ActiveScene.addChild(Overlay.Instance.Overlay); this.logger.log('New Scene created!'); this.ActiveScene.addChild(graphics); return true; } Hope anyone can help.

We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise https://github.com/pixijs/pixi.js/issues/5087.

Hello, (working better in Chrome than Safari) <edit> I have changed the background to white and it seems that the issue is not just the seems but that the transparent portions seem to show when viewed on edge.</edit> I'm new to BabylonJS and have been working on different implementations of the Menger Sponge fractal to learn the framework. I'm on my third implementation now which allows me to quickly generate an L4 Menger sponge using only 984 vertices!!!! I accomplish this by using 81 planes in each dimension that have different parts of the Sierpinski carpet as materials. I'm having issues with artifacts/seams where perpendicular planes are intersecting and I'm not sure where to go with it. (artifact may be the wrong term) I've Googled but may not be using the best search terms. I've tried re-creating my textures in case the images were off by a few pixels but that doesn't seem to be the problem. Moving the camera show the artifacts/seams blinking in and out, specifically around the hollow center. It makes it look like it is assembled with small blocks but it isn't. That is where the planes intersect. At certain angles with certain lighting they seem to disappear which leads me to believe they are artifact related and not due to the texture images. https://playground.babylonjs.com/#MFTLRX#12 My goal is to make this into a single multi-material object that I can instance to get really intricate sponges utilizing very little resources. Thanks for your time and any ideas/advice. -mc

Hi ! I have a mobile game based on pixi.js+pixi-spine (let's call it the client). I also have a backend in node.js (let's call it the server). Now, I want to dynamically generate gifs from my spine characters and display/send them from server's side. I have 2 options: generate the gif files on the client, send them to the server store my spine assets on server, generate the gifs server side I'd prefer option 2, but rendering on an headless server seems to not be a straight road. I tried quickly node-pixi, just the require is complaining about window missing. Anybody has experience doing tis kind of server side rendering? Any suggestions?

Hi there, I'm trying to run babylon on an Angular 5 application, but the quality of the rendering is very low (see image below). This is what I've done: Install babylon through npm: npm i --save babylonjs Then I had some warning during compiling process. It couldn't find cannon, earcut and oimo, so I added them through npm too. Then I created my scene (following the relevant code): init(canvasId: string, canvasWidth: number) { const canvas = <HTMLCanvasElement>document.getElementById(canvasId); this.engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); this.createScene(canvas); } createScene(canvas: HTMLCanvasElement): void { this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color4(0.5, 0.5, 0.5, 1); this.camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), this.scene); this.camera.attachControl(canvas, true); // Create default pipeline and enable dof with Medium blur level this.renderingPipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene, [this.scene.activeCamera]); this.renderingPipeline.samples = 4; this.renderingPipeline.fxaaEnabled = true; // Add lights to the scene const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), this.scene); const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), this.scene); const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, this.scene); this.animate(); } private animate(): void { // run the render loop this.engine.runRenderLoop(() => { this.scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', () => { this.engine.resize(); }); } Everything runs without error, but the render quality is very bad. How is this possible? Are there any specific steps to do when working with Angular? Unfortunately same code works fine in PG, so I did not create one as the problem seems to be related to angular.

hi everyone I want to make a online game, so I need to run the game at the same time in local (browser) and on a server (nodejs), on the server, all the code must be executed, except the canvas rendering. any clue where to start? PD: the biggest problem I see is that the objects that leave the screen, by default are no longer evaluated.

Hello, It has been a while I did not introduced a new feature in BJS so as the higlight layer was famous, let s introduce the glow layer: http://www.babylonjs.com/demos/glowlayer/ Documentation is available here: https://doc.babylonjs.com/how_to/glow_layer

Hello everyone, I just upgraded my project from Phaser CE to Phaser 3 (latest beta) and I noticed that framerate has dropped down dramatically. I know that version 3 is using custom renderer and not Pixi, but as I understand, the WebGL version should have similar performance as the original Pixi renderer. I have just a single isometric scene with 64x64 tile sprites, every sprite is 80x40 and there are 128 single textures. Before upgrade, I got solid 50-60 FPS, now I can barely move the camera without FPS dropping under 15 FPS. Has anyone actually tested the rendering performance of Phaser 3? Thank you for any hint, Have a nice day, Max.

So it's been a while since i played with pixi.js, there has been new version etc. I have used version 4.4.0 last time. Has lots of things changed? Anyhow, here is my jsfiddle: https://jsfiddle.net/hp4yn6kz/2/ As you can see, you cant see any text in the canvas. I also tried with texture atlas, but it renders nothing. Did i do something wrong? This worked before.

Hello guys, I have some big problems with the performance by switching tabs and the rendering progress. Maybe some of you can help me. (Sry for my english I give my best.) The game about I'm talking is to find under: https://dsbmg.de/slotdemo/app.html It's a slotmachine I build. The big problem is, that some users would like to play the game in more than one tab and some tabs are in background sometimes. Thats why I done the following. The backend is a php file which is doing the whole math and connecting to the database to save player-data for each bet and other things. Then there is a webworker as middleware which communicates with the backend and the frontend builded with phaser. If a user switch the tab, a javascript code recognize the visibiltychange event and then send the new state to the middleware. The middleware itself take this event and switch internal from visible to none-visible and sending a break to the frontend that kills the tweens if there are some. After that point the middleware just "taking" to the backend with a delay, like the slot would be rendering, but without doing anything. (in autoplay mode) After switching the tab back to the front from the background, the visibiltychange event sending a message from the frontend to the middleware which switches the intern state to visible and the next game starting rendering again. But at that point the tweens and updates are not running well. They make a lot of problems which I can't figure out. Do anyone of you have an idea what I can do better? Have you any idea what I can do to get a better performance? If the slot is just running in one tab (background or front) there seems to be no such problems, just if you open another tab with the game. Hope you can help me to build a better engine for the slot.

Hi. I'm trying to get softer shadows in my scene using a blur exponential shadow map. When enabled, the shadow generator seems to incorrectly affect one of my meshes. Here's my scene with a default shadow generator (blur disabled): Looking good. You can see the hard shadows from the tree, cast onto the clouds in the bottom left corner. And here's with blur enabled: The shadows look softer on the clouds, but the tree mesh got significantly darker. Here's my code: // light & shadows var lightPos = new BABYLON.Vector3(160, 80, 160); var dirLight = new BABYLON.DirectionalLight("dir01", lightPos.negate(), scene); dirLight.position = lightPos; var shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight); // shadowGenerator.useBlurExponentialShadowMap = true; // materials var treeMat = new BABYLON.StandardMaterial("treeMat", scene); var cloudMat = new BABYLON.StandardMaterial("cloudMat", scene); var atlasTex = new BABYLON.Texture("textures/Website_Atlas.jpg", scene); treeMat.diffuseTexture = atlasTex; cloudMat.diffuseTexture = atlasTex; // meshes var finishedLoadingMeshes = function (task) { task.loadedMeshes.forEach(function (mesh) { switch (task.name) { case 'treeMeshTask': mesh.material = treeMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); break; case 'cloudMeshTask': mesh.material = cloudMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); // create cloud rings... break; } }); }; var treeMeshTask = assetsManager.addMeshTask("treeMeshTask", "", "meshes/tree/", "Website_Tree.gltf"); treeMeshTask.onSuccess = finishedLoadingMeshes; var cloudMeshTask = assetsManager.addMeshTask("cloudMeshTask", "", "meshes/clouds/", "Website_Cloud.gltf"); cloudMeshTask.onSuccess = finishedLoadingMeshes; Has anyone had this problem before? I searched the forum and couldn't find any similar issues.

Hello everyone, I have a case where I have lots of sprites on screen and each sprite has a Phaser.Text attached to it. Right now, I'm rendering in this order : renderSprite -> renderText, renderNextSprite -> renderNextText, thus having to flush the context every time I draw the text since it's not using a common sprite atlas. What I'd like to do is : renderAllSprites -> renderAllTexts So my question is, is there a way to tell Phaser not render any of these objects, and in the render() function of my current state, call what to render manually ? I'm opened to other suggestions, but please bear in mind that I cannot switch to bitmap fonts due to the fact that I need to support many languages. Thanks.

Hi, has anyone noticed that rendering is looking blured if game is left in background tab or computer is locked for some time ? or its just my computer? (chrome, safari on macbook) After refresh of the page its back to normal.

Hello, when I make 3D models I usually make a texture atlas to reduce number of DrawCalls. Is that the case for PIXI? Do we need to make an atlas for PIXI or maybe PIXI renderer handles multiple graphics efficiently? If not is there a good tutorial out there?

Just a quick question; how to not freeze the render loop when doing "heavy" operations? Example: In my game, I have a stage that is composed of squares. The player can move around the stage but so can the enemies. The enemies are using a pathfinding system that uses navigation mesh. This navigation mesh is created dynamically when the game runs. Player can destroy the tiles of the stage. The tile destruction triggers the recalculation of the navmesh. The recalculation itself is a pretty heavy operation that freezes the whole game for a second or so. What I'm pretty much asking is if there is an async functionality for heavy functions/operations that are triggered from the render loop. Or what is the best way to handle these situations?

Hi, I am new to Phaser and trying to develop a game that includes some light weighted animations so that the game always covers the whole screen available. To achieve this I am using a background image larger then the canvas size and scaling down the game components to fit into the screen, Initially i included some text inside these game components which was getting pixelated when scaling down the component by 50%, so I have decided to keep text elements out of the components and replacing them by lowering the font size. The issue seems resolved but when the game goes fullscreen and restored back to default size the text again is getting blurred. Anybody ever encountered any such issue? What could be the possible reason for this behavior. I am attaching the screenshot of the text in both the situation. Whenever the screen is resized, I destroy the current text element and redraw it using the new font-size. After restoring screen from fullscreen mode. Default screen on initial load.

Hi, new to Phaser. I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions. I am using Phaser 2.6.2. I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true. In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER). As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom. However, I noticed that there seems to be an "edge" in my game where rendering stops. I added a debug rectangle set to the bounds of my button group, and I didn't see it. I then set the y value to be bounds.y -100, to push it "up", and this is what I see: You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons). And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color). But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off? I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()): world x: -156 world y: 0.5 world height: 75 world width: 920 stage x: -156 stage y: 0 stage height: 920 stage width: 920 Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot. The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering. I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game? So my questions are: What is causing the rendering to cut off where it is? Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered? Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one? Why are the buttons still visible even though they appear below the line where rendering is getting cut off? If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be? Bonus question: The answer here: Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage? How exactly do you do that? I had added them by adding a group to the Game, then adding the Button objects to the group. Does that mean they live in the World? Or the Stage?

Hey everyone, I have a very simple 2D "minigame" that looks like this (please don't mind the uglyness) : So very simple, only one sprite and a couple of shapes. But my computer (macbook pro) often starts heating up while running the task. So I ran a memory audit (around 700ko increase per minute, that are due to me storing a lot of stuff) and also ran a CPU profile with devtools. Here are the results of the CPU profile: I was wondering if those results seemed ok to you ? @Nockawa Or do you think I might be doing something wrong in the code? (too large to share) When I look at the engine.fps I am at around 60fps, so perfect on that side. The game will be used by around 300 people all over the US with all sort of computers, mine is a high end macbook pro of last year (with of course a shity gpu but still pretty common for macs): 2.2Ghz i7 - 16Gb ddr3 - Intel iris pro 1536 mb - Mac/OS sierra using Chrome Canari Thanks !

Hi everyone. Developing for few month on babylon now, I'm currently facing an issue. I wish i could display edges of a mesh through an other one. For example, i'm a super hooman and wanna see meshes through a wall, just by their edges. I don't want to make a transparent wall by the way, this is not the purpose for multiple reasons. It appears to me that the edges rendering is done by the mesh (by its AbstractMesh inheritance) itself and block the way i want to simulate this behavior. I'm a little bit confused, even on my method and the way to do it, have you ever facing this behavior and how did you make it ? Thanks.

Hello, Just a tiny Playground to demo the impact of the environment texture on rabbit: http://www.babylonjs-playground.com/#1P98HI#59 The environment (HDRCubeTexture) and only the environment is swapped every 5 seconds. Please note that the first load may be time consuming to download. Hope that can help to better understand the impact in the pbr material (even on fully white rabbits bottom row). CU,

I'm making a game that uses pixel art, I'm designing it so that the user can choose to display the game at various screen sizes while maintaining the correct aspect ratio, doubling the number of pixels, 1x, 2x, 3x etc. I've set the game to use crisp rendering: Phaser.Canvas.setImageRenderingCrisp(game.canvas); And set the game scale mode to SHOW_ALL to maintain the aspect ratio when resizing: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; I've also set the PIXI scale mode: PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; (I tried setting Phaser.Canvas.setSmoothingEnabled(game.context, false); but it gave me an error, never mind) However the game still looks smoothed when resizing the window in Safari on macOS Sierra, I tested it in chrome and the pixels are crisp as expected. I tried adding these CSS rules to my internal stylesheet: image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: optimize-contrast; image-rendering: pixelated; /* Awesome future-browsers */ -ms-interpolation-mode: nearest-neighbor; /* IE */ Again, to no avail. Does anyone know of a work-around for Safari? Thanks. This is for Phaser 2.6.1

Hi there. I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github. Basically I tried to render my tiled map and got stuck. To specify my problem: I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter). I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties). I've got a regular two-dimensional array that simulates the map. For example: var map = [ [2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 2, 2, 2, 2, 2], ]; I'll skip the init and assignments. Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this: var texture = loader.resources["tileset"].texture; var s; for rows for cols // I frame the texture to get the tile I'm interested in // for example air (x: 0, y: 0) or the ground (x: 64, y: 0) texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 ); // create sprite out of the framed texture s = new PIXI.Sprite( texture ); // add the sprite to the stage stage.addChild( s ); // Anakin vs Luke texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 ); Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions: 1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file. 2. If not, can it be easily done without any other libraries?

I have utility functions and lot of them are just drawing to game.add.graphics object. Some of them have rather complex behavior, like calculating some values to see if something should be drawn or not. The problem is these function can accept large number of different values so I should be testing them. An example function: drawShelve: function (dataObject) { var halfHeight = this.roundNumber((dataObject.frameHeight / 2), frnConst.BETTER_PRECISION), halfRearHeight = this.roundNumber((dataObject.rearHeight / 2), frnConst.BETTER_PRECISION), grObject = null, shelve = { graphicsObj: dataObject.graphicsObj, borderSize: constGr.DEFAULT_GRAPHICS_BORDER_SIZE, borderColor: dataObject.borderColor, borderAlpha: 1, areaColor: dataObject.areaColor, frontColor: dataObject.frontColor, thickness: dataObject.thickness, polygon: { pt1: {x: 0, y: 0}, cp1: {x: 0, y: 0}, pt2: {x: 0, y: 0}, pt3: {x: 0, y: 0}, cp2: {x: 0, y: 0}, pt4: {x: 0, y: 0}, pt5: {x: 0, y: 0} } }; // draw top corner shelves if (dataObject.shiftY >= this.roundNumber(dataObject.y + dataObject.halfCupboardDepth, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY < this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve = {/* some code */}; grObject = this.drawShelveWithArea(shelve); // draw rectangle instead of full shelve when exact half is hit with a Y coordinate } else if (dataObject.shiftY === this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { grObject = /* draw rect code here */; // draw bottom corner shelves } else if (dataObject.shiftY > this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY <= this.roundNumber(dataObject.y + halfHeight + halfRearHeight, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve.polygon = {/* some code here */}; grObject = this.drawShelveWithArea(shelve); } return grObject; } As you can see, there is if block and then two else-if blocks. All conditions are calculated and I must test if the shelve is drawn or not for different values, i.e not null. I set QUnit and added game object where can i draw with HEADLESS mode, but from the following picture I still see canvas added to my test page. How can i test without adding game object at all? Is it possible to utilize functions like: shelveWithArea.beginFill(dataObject.areaColor, 1); shelveWithArea.moveTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.bezierCurveTo(polygon.pt3.x, polygon.pt3.y, polygon.cp2.x, polygon.cp2.y, polygon.pt4.x, polygon.pt4.y); shelveWithArea.lineTo(polygon.pt5.x, polygon.pt5.y); shelveWithArea.lineTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.endFill(); Without a need of Phaser.Game object?

Hey Everybody! I have a rigged and animated character that is rendering funny. Eyes, teeth, tongue,etc are all showing through the main mesh of the head. How can I fix this?

Hello, I'm currently working with flat shaded meshes and point lights in my Babylon.JS scene and the light is reflecting in a not-flat-shaded way. Playground demo: http://babylonjs-playground.com/#BRSMM#0 My own screenshot: http://prnt.sc/bx9h3o My target is to have one "flat color" per face and no light beam reflections which fade over distance. Is my target even possible with point lights or do I have to use other lights like the hemispheric light? Thanks for every answer, Simon