Search the Community

Hi All, I Hope I've put this in the right place, I've been struggling with this issue for a while now. I've had a stack overflow issue open for more than a year and no replies. In basics. I overlay a canvas on my UI DOM, this canvas has animations / particles / tutorial pointers etc. to make the UI prettier and filled with motion. The problem comes when you try to scroll something that is underneath this canvas, the scrolling becomes disproportionate Please see my stackoverflow issues: https://stackoverflow.com/questions/67511840/disproportional-overflow-scrolling-on-scaled-element https://stackoverflow.com/questions/67541498/disproportionate-scrolling-on-element-with-an-overlaying-pointer-eventsnone-el Has anyone battle with this before? Or perhaps any suggestions for a workaround? Kind Regards, SanCoca

Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?

Steps to reproduce: git clone https://[email protected]/dmitrydranitski/pixijs-5.1.1-5.1.5-update-bug.git cd into dir npm i npm run dev go to the url (https://localhost:8080 by default) you should see the page Ctrl+C - stop the webpack-dev-server rm -rf node_modules npm i [email protected] npm run dev go to the url (https://localhost:8080 by default) The code is not working. I can not see the reason, seems like a bug? Thanks in advance for any help!

I could replicate this issue in this CodePen https://codepen.io/mariogarranz/pen/Yzqjboj In this example I create one ParticleEmitterManager and it into a Container that had its scale modified. Then I add 3 ParticleEmitters to this ParticleEmitterManager, all of them with the exact same settings, but everytime a new ParticleEmitter is added, some offset is added to its positioning and scaling, so in the end you can see all 3 of them in different spots and scales. This seems like a bug to me, but maybe I got something wrong? My game uses a container with a scale for the board of the game and it's being impossible to have the particles display properly over it, unless I use 1 ParticleEmitterManager for each ParticleEmitter, which seems too overkill.

I am re-writing this one... thought it was solved but it is not. There is an typescript mismatch between the Phaser3 ts definitions and a body of Phaser.Physics.Arcade.Body. >body< is only defined as an object. So I get typescript errors for using: onFloor(); onCeiling(); setVelocity; etc. etc. for every method which should be available. This can be found in the docs: 1. I enable physics for the sprite 2. run this in a JS file to disable ts. (tested, working, with all methods) 3. run it in ts, I get an error: That <any body method> is not available in type "object". It's not that certain line, but somewere the track of the physics body definition is broken on typescript. (updated docs, ts, phaser to newest version) /** * If this Game Object is enabled for physics then this property will contain a reference to a Physics Body. */ body: object; I don't know how to address this "bug", since it should be fixed in the live code which is automatically generated by the phaser docs repo. And I am not experienced enough in the build process of the docs. maybe someone can look after this and tell me how to. regards

Hello I'm a beginner with Phaser and I want to extended a physcis sprite. So this is my code. class Player extends Phaser.Physics.Arcade.Sprite { constructor (scene, x, y,texture) { super(scene, x, y,texture); } } var player1; var MyScene = new Phaser.Class({ Extends: Phaser.Scene, initialize: function MyScene (config) { Phaser.Scene.call(this, config) }, preload: function () { this.load.image('back', 'img/background.jpg'); this.load.image('dude', 'img/player.png'); }, create: function () { this.add.image(540,360, 'back'); player1 = new Player(this, 400, 100, 'dude'); this.add.existing(player1); } }); var config = { type: Phaser.AUTO, width: 1080, height: 720, physics: { default: 'arcade', arcade: { gravity: { y: 1000 }, debug: false } }, scene: MyScene }; var game = new Phaser.Game(config); The object display the sprite but the object don't fall and I can not set something in my class. I search a long time a long time on internet and I didn't found. Do someone know where is my mistake ?

My Babylon.js scene was working finely yesterday...but today it showing me following errors. I definitely tell that this error is due to babylon.gui.js file. I have imported the scripts in following manner. and I used it to create gui as: var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); Please help me with this..how can I resolve the error and get my scene working smoothly..?? Thanks if you can help me..!

I'm trying to cast some shadows from a voxely mesh onto itself, and I seem to be getting a bit of light right at the base of the shadows. Any idea how to fix? First picture is the shadows in their simplest mode before any blurring: And here are some shadows with all of the effects, which causes even more light to appear: I'm not sure how to reproduce it in the playground. I got my shadows just by copying and pasting the ShadowGenerator from the shadow demo: https://playground.babylonjs.com/#FH3FM2 In the shadow demo there is no problem, the shadow goes right to the foot of the columns without any light appearing underneath. My scene is one single mesh, so I tried merging the ground and the columns in the shadow demo but that didn't reproduce it either. Here is the merged: https://playground.babylonjs.com/#FH3FM2#12 Any ideas?

Hi, I'm having trouble with browsers blocking popups. I know the rule is that it needs to be in response to a user action. Is this a bug with phaser? this.input.on('pointerdown', (pointer, targets) => { window.open('https://fb.gg/play/freeriderjumps', '_blank'); }); Thanks

I need to display a list of cards, and used a stackpanel for that. The cards should have some space between them, and i saw there's the padding property so i tried it. Problem 1: If i set the padding to the stackpanel, the cards get clipped because the padding is removed from the stackpanel available width for its children. Problem 2: The padding set on the second card gets removed from the card width, thus i need to increase its width by the same amount of the padding i need. Doesn't seem right. Maybe we need also a margin property if this behavior is by design? Playground to reproduce the bugs: https://www.babylonjs-playground.com/#F1Z1SC#1

In a game I am developing there is an odd issue where rotating the player character the water plane looses it's transparent state completely going opaque but only on a specific heading or the same heading facing the opposite direction, it only happens at a very small degree, you turn slightly and it goes back to transparent. How is rotating an object (which happens to be the player in this case) affect transparency only while facing in a specific direction when the object has nothing to do with the plane (except when the player moves the plane moves but it doesn't effect rotation or do anything with the plane while the character isn't moving). Is this a Three.js issue or a WebGL issue or what? I find nothing googling it in various manners even setting object.material.alphaTest doesn't do anything. It doesn't effect the shader for the water mirror, only the object material transparency.

I don't believe ArcRotateCamera correctly uses the upVector. Instead of getting into my use case, I've setup some playground demonstrations. Playground 1: This is the default. upVector is Y+. Behavior: Move the mouse left, spins clockwise around the Y axis. Move the mouse right, spins counter clockwise. Move the mouse up, pushes the Y+ axis away from the screen, move the mouse down, pulls the Y+ axis towards the screen. http://www.babylonjs-playground.com/#2K6AJC#2 This default works as expected. Playground 2: Set the upVector to Z+ Expected Behavior: Move the mouse left and right should spin around the Z axis. Move the mouse up and down should pull the Z axis towards and away from the screen. Unfortunately, that is not the actual behavior. http://www.babylonjs-playground.com/#2K6AJC#3 Thanks

Hello, I am getting a strange bug in chrome with the pointer lock API. When using chrome on windows 10, the mouse will randomly move to a new location as I move the mouse around. I have repeated this bug on seperate machines. Works fine on firefox. Here's a play ground: https://playground.babylonjs.com/#H9FRSI#2. I removed the non chrome pointer lock stuff. Pointerlock code for chrome: scene.onPointerDown = function (evt) { canvas.requestPointerLock(); }; I would really appreciate any help on this! Thanks!

Hello I found one bug I think. In this exampel https://www.babylonjs-playground.com/#KNE0O#4 I found this example o https://doc.babylonjs.com/babylon101/raycasts ray.show(scene, new BABYLON.Color3(1, 1, 0.1)); When I tried this code, which was prepared in exampel then babylon.js stop worked. Sorry for my poor english.

<html> <head> <script src="phaser.js"></script> </head> <body> <h1>Card Game</h1> <script> var config = { type: Phaser.AUTO, width: 1200, height: 1000, scene: { preload: preload, create: create, update: update } }; game = new Phaser.Game(config); var counter = 0; function preload () { this.load.image('background', 'assets/background.jpg'); this.load.image('wolf', 'assets/wolf.png') } function create () { this.add.image(600, 500, 'background'); creature = this.add.group(); creature.inputEnableChildren = true; wolf = creature.create(600, 500, 'wolf'); wolf.onInputDown.add(listener, this); } function listener(sprite){ console.log('click'); } function update () { } </script> </body> </html> The code above is supposed to log "click" on the console whenever the wolf image is clicked but instead I get an error after multiple hours of trying to fix it, I conceded and came to ask for help. Many thanks in advanced.

Hi there, i am currently trying to export just a model from blender using the babylonJS exporter provided on git. The installation worked. In the documentation there is an export property window shown where i can check what i want to export. But i cant't find this window? If i export as babylon there is just written no properties. I tried with Blender 2.79 2.76 2.73 (64/32 bit) and Exporter Version 5.6 and 5.5 The reason for this is that i want to export without the automatic texture bake... Can anyone please help me out? Best Regards

Hi! I am using Phaser CE, and here is some code: var level1 = { map:{ size:48, w:36, h:6, layout:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2] }, create: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#0ff"; game.renderer.renderSession.roundPixels = true; game.world.resize(this.map.size*this.map.w,this.map.size*this.map.h); this.background = game.add.tileSprite(0,0,game.world.width,game.world.height,'bg'); this.background.scale.setTo(3,3); this.ost = game.add.audio('music'); this.ost.loop = true; this.ost.play(); this.tiles = []; var j = 0; for(var i = 0;i<this.map.layout.length;i++){ if(this.map.layout[i]!=0){ switch(this.map.layout[i]){ case 1: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile2'); case 2: this.tiles[j] = game.add.sprite((i%this.map.w)*this.map.size,Math.floor(i/this.map.h)*this.map.size,'tile'); } this.tiles[j].width = this.map.size; this.tiles[j].height = this.map.size; game.physics.arcade.enable(this.tiles[j]); this.tiles[j].body.immovable = true; j++; } } player.create(); game.camera.follow(player.sprite,0.4,0.4); }, update: function(){ for(var i = 0; i < this.tiles.length; i++){ game.physics.arcade.collide(player.sprite,this.tiles[i]); } this.orientationChange(); player.render(); this.background.tilePosition.y += 0.25; }, orientationChange: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } } That was my player sprite colliding with a 1-D tilemap array. My problem is this -- When the player jumps, or isn't near the lower half, it looks normal(first screenshot. When it collides with the ground tiles (labeled 1 or 2) the camera acts as if I've touched the bottom of the screen, instead of showing the sprite on the tile, centered...(second screenshot) Please help! I am using Phaser from just a week, and this is a peculiar issue. There is a sample game at smvaidya.itch.io/DuskMite That map with tiles all over worked just fine but the one tiles which were set as floor (3 rows!) don't show up. They are under the screen. Why?

I have this scene, and whenever the zombie touches my debug object, it should turn velocity to 0, stop walking animation , and start attack animation, Not working (animation is stopped too): http://cypunkdb.net/t/phaser/tut0/nok.html Working (but not what I want): if I turn velocity to anything but 0, i will start moving again, but i don't want this... http://cypunkdb.net/t/phaser/tut0/ok.html is this a bug, or a feature? how could i stop the zombie movement, but continue the "attack" animation ?

Hello! I updated new version 3.2.0-alphaC and get an error with GPUParticleSystem.isReady(). Cause of this is when scene check isReady, it call GPS.isReady() but GPS not render at the moment. Means, _updateEffect and _renderEffect attribute undefined. See console: http://www.babylonjs-playground.com/#9RSEFL

Hi everyone, I'm running into a weird bug. I'm working on a very tiny display game (128*100) with a tiny 4x4 tilemap (with 8x8 tiles in it, I don't know if it could be the problem) and a small 16x16 sprite with some tiny bounds on it , and this is the heart of my problem. Also, I'm on a retina mac, maybe the resolution is a problem here. here is my full code: var config = { type: Phaser.CANVAS, width: 128, height: 100, zoom: 5, backgroundColor: '#2d2d2d', parent: 'phaser-example', pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 250 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; new Phaser.Game(config); let map; let cursors; let player; let floorLayer; function preload () { this.load.spritesheet('rick-stand', 'gfx/rick_Stand.png', { frameWidth: 16, frameHeight: 16 }); this.load.image('lev1_8x8', 'levels/one/8x8.png'); this.load.tilemapTiledJSON('level1-1', 'levels/one/level1-1.json'); } function create () { cursors = this.input.keyboard.createCursorKeys(); map = this.add.tilemap('level1-1'); const smallTiles = map.addTilesetImage('lev1_8x8'); floorLayer = map.createStaticLayer('floor', smallTiles); floorLayer.setCollisionByExclusion([ -1 ]); player = this.physics.add.sprite(15, 41, 'rick-stand'); this.physics.add.collider(player, floorLayer); this.cameras.main.startFollow(player); player.setSize(8, 12, false); player.setOffset(5, 4); } function update (time, delta) { player.body.setVelocityX(0); if (cursors.left.isDown) { player.body.setVelocityX(-22); } else if (cursors.right.isDown) { player.body.setVelocityX(22); } if ((cursors.space.isDown || cursors.up.isDown) && player.body.onFloor()) { player.body.setVelocityY(-100); } } nothing fancy I guess, not the setSize command, which causes a bug. Here, the width of the body of my sprite is 8 (because I want my 16x16 sprite to 'fall' into small 8px width hole) Here is the bug, the sprite "jump" backward randomly you can test that here https://s3-eu-west-1.amazonaws.com/stuff-games/rick/bug/index.html (the game is zoomed 5x, but with no zoom, the bug is the same) If I change to player.setSize(9, 12, false); (9 instead of 8) there's no more bug (see that here https://s3-eu-west-1.amazonaws.com/stuff-games/rick/nobug/index.html) Using values below 8 causes bug too... Is that a known bug? I'm not afraid to look at it closely, but I even don't know what to check first... Is that a physics problem? a tilemap problem? a Sprite problem?

I was unable to transform mesh instance if the original mesh had a shader material. Is this a bug? I have created a playground example using box mesh. If you open the debug -> mesh panel, you realize there are 6 meshes, but only 5 are displayed. This is because one of the instances in the second row was not transformed properly. On the other hand, clones of meshes with shader material can be transformed properly. https://playground.babylonjs.com/#B2NZ1M#1

I'm new to Pixi.js I did a code to make a simple 3 frame animatedSprite but it never leaves the first frame, if I do a gotoAndPlay(1) it goes to the desired frame and stops, and if I console.log the ticker it keeps on the frame as it were stopped but the playing property is true. Can't find the error anywhere. Somebody could help me out here? The code is below: var w = window.innerWidth, h = window.innerHeight, objs = {}, tex = {}, anim = {}, prop = w/16, props = { grass: [2060, 745, 16], trave: [1334, 471, 10], rede: [1309, 454, 9.8] }; var app = new PIXI.Application(w, h, {backgroundColor: 0x33aaff}); app.renderer.autoResize = true; resizeAll(); $('#div_canvas').append(app.view); objs['message'] = new PIXI.Text( "Carregando...", {fontFamily: "Arial", fontSize: 20, fill: "white"} ); objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.stage.addChild(objs['message']); app.loader .add('css/fonts/Quantico-Regular.otf') .add('img/grass.png') .add('img/trave.png') .add('img/rede.json') .on("progress", loadProgressHandler) .load(onAssetsLoaded); function loadProgressHandler(loader, resource){ objs['message'].text = "Carregando..."+(Math.round(loader.progress*100)/100)+"%"; objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.renderer.render(app.stage); } function onAssetsLoaded() { app.stage.removeChild(objs.message); delete objs.message; tex['grass'] = app.loader.resources["img/grass.png"].texture; tex['trave'] = app.loader.resources["img/trave.png"].texture; tex['rede'] = app.loader.resources["img/rede.json"].textures; anim['rede'] = []; for(var i=0; i<3; i++){ anim['rede'].push(tex['rede']['rede0'+i+'.png']); } console.log(anim.rede); objs['grass'] = new PIXI.Sprite(tex['grass']); objs['grass'].anchor.set(0.5, 0.0); objs['grass'].position.set(app.screen.width/2, app.screen.height/2); objs['trave'] = new PIXI.Sprite(tex['trave']); objs['trave'].anchor.set(0.5, 0.8); objs['trave'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'] = new PIXI.extras.AnimatedSprite(anim.rede); objs['rede'].anchor.set(0.5, 0.8); objs['rede'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'].animationSpeed = 1; objs['rede'].play(); resizeAll(); app.stage.addChild(objs['grass']); app.stage.addChild(objs['rede']); app.stage.addChild(objs['trave']); app.ticker.add(function() { console.log(objs['rede'].totalFrames, objs['rede'].currentFrame); }); } function resizeAll(){ var propW = w/16; var propH = h/9; if(propW>propH){ w = propH * 16; }else if(propW<propH){ h = propW * 9; } prop = w/16; for(var i in objs){ if(typeof props[i] !== 'undefined'){ objs[i].width = props[i][2]*prop; objs[i].height = (objs[i].width/props[i][0])*props[i][1]; } } app.renderer.resize(w, h); }

As in topic. It's not critical but it's annoying

Hi admin people I create this topic to point an annoying bug: a teammate tried to create an account, but can't validate it! It seems that is the security question which generate issue. I try myself to generate a test account (with strong password, with typing Chrome instead of chrome, adblocker disabled, on Firefox - my teammate is on Chrome), and couldn't validate it too.

Hi everyone, I'm trying to integrate VR cameras to my project, but I encountered some problems with the VRDeviceOrientationArcRotateCamera. As you can see there : https://www.babylonjs-playground.com/#1BILUK#2 , I can't set the target of the camera on the moving sphere, and I have no idea what's going wrong with my code. If you have some ideas about how I can fix that, you are very welcome