Search the Community

Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between) nothing major probably 2-3 layers at max. The game is for mobile and file sizes have got to be as low as possible. The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images. png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080) but maybe extending it to a square 2k, then using that with alpha masks from (colourless pngs) as an alternative (if that makes sense). I thought this way I could drop the size of the jpg more without as much degradation as a png would have (& have finer control). Hoping the colourless pngs wouldn't make as big of a hit essentially just being an alpha map.. Sounds a long way around a small problem, just theorizing atm & wondering if anyone had tried anything similar, noticed any peformance hits using masks v png or even found a nicer alternative? Cheers for any advice!

Trying to upgrade a working game I wrote on an earlier version of BabylonJs. The code below uses 4.0.0-alpha.9 (having struggled somewhat to get the latest 3.3 to work with Oimo.js). I get an error in Chrome: here's the offending code in Chrome … and here's the earlier place where billboard gets defined If I comment out the 7 lines where I setPhysicsState and the 6 lines where I setLinearVelocity, the scene loads ok. If I comment out line 356 I get a similar error from 357. I'm thinking that my BABYLON.Mesh.CreatePlane doesn't have a setPhysicsState method any more and setLinearVelocity could have disappeared too. Thanks so much. Simon P.S. Great to see all the recent babylonjs activity, it's a fantastic creation, I didn't realize that this was happening from my use of Nuget Package Manager within Visual Studio until I started to dig deeper.

Hello! I'm trying to do simple explosion with emitter. I want particles to slowly fade out so I do: emitter.setAlpha(0.2, 1, 10, Phaser.Easing.Linear.None, false); emitter.autoAlpha = true; But when i run game and emitter start doing it's job it throws at the console: Uncaught TypeError: Cannot read property 'v' of undefined at Phaser.Particle.update (phaser_phaser_1.js:99052) at Phaser.Particles.Arcade.Emitter.update (phaser_phaser_1.js:99548) at Phaser.World.Phaser.Group.update (phaser_phaser_1.js:33716) at Phaser.Stage.update (phaser_phaser_1.js:31820) at Phaser.Game.updateLogic (phaser_phaser_1.js:36338) at Phaser.Game.update (phaser_phaser_1.js:36280) at Phaser.RequestAnimationFrame.updateRAF (phaser_phaser_1.js:61979) at _onLoop (phaser_phaser_1.js:61962) What am I doing wrong with this task? Edit: Solved - it seems like I set too low alpha rate parameter (third param. in setAlpha). I misunderstood how it works. Now I get it. If I set rate as 1500 ms particles will fade out in this time. It works now.

Hello, Is there any way to force Phase to update texture without a delay? Shortly said, I have issue with Phaser.Group.generateTexture() method: 1) Lets say you have group, which fade out to alpha = 0. 2) Later you want set group back to alpha = 1 and 3) generate sprite this.game.add.sprite(0, 0, group.generateTexture()) RESULT: you will get empty sprite... However, if I do lets say 100ms delay, everything works as expected... If I fade out group to 0.1 instead of 0, I am getting texture with 0.1 transparency, which means that PIXI needs time (one tick?) to actually update alpha. QUESTION: Is there any way to fix this problem? Thanks

Hey everyone. Is there a possibility to use something like a "master alpha" for a group of sprites instead of them all having their individual alphas changed? If that's not clear enough: I have a group of overlapping sprites that make up a bigger element. Now I want to fade this in/out as one single object using a tween. Instead, the sprites fade individually which results in them overallbeing less transparent in overlapping areas as well as initially covered sprites to shine through for the duration of the fade. Obviously, I could alternatively just make it all one sprite, but due to multiple possible combinations, that would be quite costly. Does anyone have an idea? Thanks! EDIT: After some more research, I think rendertexture might be what I need, right?

Howdy friends! I've noticed that if I use either the alpha channel of a diffuseTexture or an opacityTexture, there are really bad artifacts around the edge of the alpha channel on iOS. Consider this playground: http://playground.babylonjs.com/#35QZ3E#1 On Desktop all seems ok: But on iOS i'm getting: @Deltakosh is there some magic ingredient i'm missing to refine the edges of the alpha channel? Thanks! JPS

Helloo. Is this behaviour https://playground.babylonjs.com/#22T0N0 intended? If the child alpha is 1 --> it animates with the parent. if the child alpha is less than 1 --> it doesn't animate with parent. I was expecting the transparent middle button also become invisible as it's parents alpha reaches 0. Took me a while to figure out why some buttons weren't fading out along with their mama.

Hi guys ? I have one question about exported .babylon file. Is it posibel chagne alpha(transparency) of exported .babylon file? I want to make it slowly disepeat or sotmhig like that. When i change the aplha to 0 nothing happens. BABYLON.SceneLoader.ImportMesh("", "textures", "myObj.babylon", scene, function (newMeshes) { var myObj = newMeshes[0]; myObj.alpha = 0; } So I looked in the exported property whith console.log(myObj). BABYLON.SceneLoader.ImportMesh("", "textures", "myObj.babylon", scene, function (newMeshes) { var myObj = newMeshes[0]; console.log(myObj); } it shows me, that alpha is set NaN. And when I again change the alpha to 0 and looked in the property ... alpha was set 0 but again nothing happens. Why is like that ? Sorry for my bad english. ?

Hi guys, I have a tiny sprite placed in a png sized like the game, with alpha, so I only see my tiny sprite surrounded by blank space. It's done this way because I want to place it in (0, 0) and be displayed in it's original position. So, I'm trying to place this sprites and they all go in the same place, center of the screen, like they are trimmed sprites. Any solution for this? Thank you.

Yo @Deltakosh How do I tell a Standard Material to use alpha from the diffuse texture... ??? When using PBR there is a property called 'useAlphaFromAlbedoTexture' What is the equivalent for Standard Materials or how do you support 'Transpency' for legacy diffuse workflow ???

Hello Babylon.js people, I am trying to make a viewer for working with BIM stuff (building and all the stuff inside), so there can be quite a lot of objects and having each one in its own mesh isn't really an option. So I tried to use two SPS, a single mesh and two meshes, one mesh/sps for opaque objects and another for transparent ones (saw the idea in another post on the forum). Thing is I need to "highlight", hide and have transparent not pickable objects too. Here is what I have for now : There is a space (big transparent blue-ish), with objects in it (yellow-ish opaque ones in the front) and also transparent grey "boxes". To be able to switch objects visibility/color quickly I tried to put all objects in both meshes : opaque ones hidden in the transparent mesh transparent ones hidden in the opaque mesh Then just toggle visibility, but then this kind of thing can happen : The front box is now transparent with a red color, the other "yellow-ish" box is partly hidden with a red tint (that's correct), but the grey opaque box isn't hidden/tinted (that's not ok) at all and keeps its grey color, looking like it is closer to the camera while it is actually not. I feel like I tried quite a lot of things and combinations so I may have missed the working one. I also posted an issue trying to have a simple example to demonstrate what felt like a bug : https://github.com/BabylonJS/Babylon.js/issues/2832 As I wrote there, using needDepthPrePass kind of fixes it, but not really since it messes up transparent objects inside another transparent object. Alpha mode is promising but the ghost/shiny effect is too powerful : I would need the behaviour, without the side effect... Any help/suggestions is welcome, and if you have questions or need more details, feel free to ask References : https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered https://doc.babylonjs.com/resources/how_to_use_blend_modes

hi, after get the examples from : https://phaser.io/examples/v2/tilemaps/tile-properties i'm searching to modify the object of the tiles, but i can't modify the alpha and the scale (=> see //HERE THE PROBLEM). how do you do to reach that ? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render}); function preload() { // tiles are 16x16 each game.load.image('tiles', 'tiles.png'); } var cursors; var currentDataString; function create() { // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 128; y++) { for (var x = 0; x < 128; x++) { data += game.rnd.between(0, 20).toString(); if (x < 127) { data += ','; } } if (y < 127) { data += "\n"; } } // console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); // Create our map (the 16x16 is the tile size) map = game.add.tilemap('dynamicMap', 16, 16); // 'tiles' = cache image key, 16x16 = tile size map.addTilesetImage('tiles', 'tiles', 16, 16); // 0 is important layer = map.createLayer(0); // Scroll it layer.resizeWorld(); game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); // Our painting marker marker = game.add.graphics(); marker.lineStyle(2, 0xffffff, 1); marker.drawRect(0, 0, 32, 32); game.input.addMoveCallback(updateMarker, this); game.input.onDown.add(getTileProperties, this); cursors = game.input.keyboard.createCursorKeys(); } function getTileProperties() { var x = layer.getTileX(game.input.activePointer.worldX); var y = layer.getTileY(game.input.activePointer.worldY); var tile = map.getTile(x, y, layer); console.log(tile) //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// //HERE THE PROBLEM tile.scale.x=.1 tile.alpha=.1 // Note: JSON.stringify will convert the object tile properties to a string currentDataString = JSON.stringify( tile.properties ); tile.properties.wibble = true; } function updateMarker() { marker.x = layer.getTileX(game.input.activePointer.worldX) * 32; marker.y = layer.getTileY(game.input.activePointer.worldY) * 32; } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { if(currentDataString){ game.debug.text('Tile properties: ' + currentDataString, 16, 550); } else { game.debug.text("Click on a tile to reveal the properties of the tile", 16, 550); } }

Hi, there. How to make a FreeCamera rotate only by Alpha rotation? Only longitudinal? I want to turn off a Beta rotation (up and down rotation of camera). Thanks.

Howdy, Is it possible to use the new glow layer with material alpha and the opacity fresnel parameters? Seems as though every time I enable opacityFresnelParameters or alpha on a material, the glow no longer works. See this playground: https://www.babylonjs-playground.com/#LRFB2D#13 If you uncomment lines 12-17 the glow layer stops having an impact. Am I doing something dumb? Thanks, JPS

Hi, I am playing around with the StandardMaterial settings and I came across an issue. If I set the alpha value of the StandardMaterial weird rendering glitches appear on my mesh. You can see it in the playground example if you rotate the mesh around. Setting the alpha to 0.9999 makes no sense, I am aware of that but I am trying to write a shader based on the StandardMaterial and I do want to set parts of the mesh transparent - therefore I think I do need alphaBlending enabled (e.g.: gl_color = vec4(1.0, 0.0, 1.0, 0.5)). Is there a possibility to fix this? http://www.babylonjs-playground.com/#AFH1MN#1 Thanks for your help!

Hey guys, is it possible to select a sprite (via actionManager or scene.pickSprite, whatever) so the sprite transparency is taken into account? For example, in this playground the sprite is a circle: https://www.babylonjs-playground.com/#PVYYAQ , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,

Hi, The last build has some changes in the way PBR Materials are rendered with transparency http://playground.babylonjs.com/index.html#VXEHT4#1 http://playground.babylonjs.com/indexstable.html#VXEHT4#1 In the last build, you need to indicate the Material requires transparency (transparencyMode) to have it blended with the background. Seems like in the last stable version it was its default behaviour. Is it intended ? Thanks a lot for your inputs, have a nice day !

Hello, I did a small contribution to BJS which has been merged recently, and I saw that my code is now integrated in the preview release to download here : http://www.babylonjs.com/versionbuilder/ and also in the preview CDN . It would have been awesome to have it updated in my project through NPM ! When do you update alpha releases on NPM to match the current state of the preview release ? Thank you

I am a beginer of babylon.js. I was going to load obj file using babylon.objfileloader, but did't work alpha channel and transparency in loading obj.file. The code I worked is follow var loader = new BABYLON.AssetsManager(scene); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; var mesh; mesh = loader.addMeshTask("bane", "", "Assets/Chicken Coop/", id + ".obj"); obj file works well in assimpView, but don't work in babylon.js Here is result by babylon.js I believe you to help me. best regards.

Hi, I am currently having an issue where my alpha tween on my game isn't working as I expected. I set the tween to happen over 5 seconds however it seems to only take a fraction of the time and ignores the time. Here is my code: var box = this.game.add.graphics(0,0); box.alpha = 0.1; box.moveTo(0, 0); box.beginFill(0x000000); box.drawRect(borderSide, borderTop, (this.game.world.width - borderSide * 2), this.game.world.height); box.endFill(); var fadeTween = this.game.add.tween(box).to({ alpha: 1 }, 5000, "Linear", true); fadeTween.onComplete.add(this._end_game, this); You can see my video attached below for an example of this in action. Thanks, Jamie alpha.mp4

Hi everyone! I've been working on my own in the past months on a game, OWN. It is a competitive, multiplayer, real-time, free-to-play and browser-based game developped with Phaser of course. To quickly sum it up, it is kind of a mix between Super smash bros and League of Legends. In 1v1, 2v2 or 3v3 you face opponents in a quick deathmatch on a small map. Games are super fast (3-4 min max) so that you can easily choose how much time you want to spend playing. Here is a short video footage of the game (sorry for the poor quality, it's just raw sequences to get an idea) : Even though the game is not quite finished yet, I'd like to increase the number of testers to have more feedback and to test the architecture. So I really do hope some of you will be curious enough to give it a try. If you're interested, please PM me so I will provide you with some registration keys for you and a couple of friends. Hope you guys have a nice day!

Does the PBR material have an Alpha Map Texture?

Hi, I updated phaser lib from older version to 2.6.2 and now there is no more "alpha" property in "sprite" object. I see "alpha" is still available using tween. But what if I want to change it directly like it was in previous version? : this.background = this.add.sprite(0, 0, 'back'); this.background.alpha = 0; thanks

I've just removed the prefix "solved". As a matter of fact, I've made a mistake by stuffing 5 issues in one post. The first issue has been responded to, the others not. Next time, I'll start more focused topics. Two issues have to do with my lack of experience (and shortcomings in the documentation) see #1 and #4. Points #2 and #5 are questions/suggestions regarding the functionality. I believe those are of interest to other forum users. For me, there is a simple workaround: will use a fixed-size font. Point #3 is something I've incidentally discovered while testing, but of no further interest to me. .............................................. I have used the GUI extension and basically it does what I need. See https://www.babylonjs-playground.com/index.html#RBP60B#8 Yet I have several questions and suggestions. 1. The background color of a container, in my case an instance of BABYLON.GUI.Rectangle is assigned by a string value ("black", "white"...). Which colors are possible? I would prefer to use BABYLON.Color3(...) 2. What I need is a 'sticky' label. For that, I create a rectangle and used it as a container for a TextBlock and that works fine. However, what I would like to have is that my label would be transparent or semi-transparent and the text not. In the present implementation, if I change alpha of the rectangle, it seems topropagate to child controls (my TextBlock), so the text becomes also semi-transparent. I believe this is a small bug: if I want the text to be semi-transparent, I can change the alpha of the TextBlock 3. I can link a TextBlock directly to a mesh. However, in that case I cannot change link offsets (linkOffsetX, linkOffsetY ...). Apparently, linkOffsetY has some value (100?) and the others are 0. Wouldn't it be a welcome feature? 4. Vertical text alignment of a TextBlock can be controlled by setting textVerticalAlignment to 0, 1 or 2, but I could not find it in the documentation. 5. Apparently, the object TextBlock has been designed to work in conjunction with some container object. Otherwise, it has no boundaries so it cannot decide on text wrapping. Is it possible to let the container (a Rectangle, for example) to be resized to match the text size (this would need to be somehow reconciled with wrapping - maybe like in MS PowerPoint). The simplest possibility would be to enable the programmer to do it. For example, to introduce a method that would return the "bounding box" of a text with the preset width and word wrap (Y/N). If I would have something like that, I could decide dynamically what container size I would need and whether to truncate my text.

Hello, Trying out Canvas2D, getting: 'BABYLON.Text2D is not a constructor' Using alpha version ('babylon/babylon.3.0.0-alpha.max.js'). Did anything change, or is extension needed? Thanks!