Search the Community

Showing results for tags 'alpha'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 54 results

  1. 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: , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,
  2. PBR, alpha and transparency

    Hi, The last build has some changes in the way PBR Materials are rendered with transparency 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 !
  3. 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 : 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
  4. 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.
  5. 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 =,0); box.alpha = 0.1; box.moveTo(0, 0); box.beginFill(0x000000); box.drawRect(borderSide, borderTop, ( - borderSide * 2),; box.endFill(); var fadeTween ={ 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
  6. 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 : 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 :
  7. PBR Alpha Map

    Does the PBR material have an Alpha Map Texture?
  8. GUI Functionality

    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 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.
  9. [OWN - Closed Alpha] Testers needed!

    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!
  10. Hi there, Is there any kind of renderer.sortObjects() or renderer.depthTest() like other frameworks have? I have several transparent objects (alpha < 1.0) on the scene and sometimes renderer behaves glitchy (please see attachment). Theoretically, could write a function for sorting meshes by a distance to camera and set .alphaIndex, but it doesn't solve the problem with self-intersection like frame does c) & b). Babylon.JS 3.01, materials are PBRMaterial() with .disableDepthWrite = false and .alphaMode = 2. Any ideas? Thanks in advance!
  11. Hi, I want to use textures with contain areas which zero alpha. However I see unwanted borders around them. Here is a playground to clarify my problem: Am I doing something wrong? How can I get rid of the border? Edit: Here is the same problem, with a different texture: Many thanks, Cheers, jan
  12. Arc rotate camera

    Hi, I have created the object on Babylon Js and can able to rotate and view the object using arc rotate camera. My requirement is: 1. I positioned the camera on some position. 2. When the user click and move the mouse on canvas, can able to rotate the object. I have done the above things Whenever the user release the mouse on canvas while rotating, the camera back to the default position of initial stage.----> This is my requirement. Can anyone help on this?
  13. 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!
  14. Alpha Map in Video

    I'm trying to use a video to set the alpha information on a standard material. The video displays fine(passed into the diffuse) but can't figure out how to pass this into the alpha with correct results. My code.. Ref: scene.seaPlane = BABYLON.Mesh.CreateGround("ground1", 36,36, 2, scene); var mat = new BABYLON.StandardMaterial("mat", scene); var videoTexture = new BABYLON.VideoTexture("video", ["textures/waterRing.mp4"], scene, true, true); mat.diffuseTexture = videoTexture; mat.diffuseTexture.hasAlpha = true; mat.useAlphaFromDiffuseTexture = true; scene.seaPlane.material = mat;; There is no explicit alpha channel in my video file, so perhaps this is where I'm going wrong? Maybe it's better to render the video out as a sequence of pngs Thanks,
  15. 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
  16. I can rotate camera, but cannot move. `camera.cameraDirection` is changing, but camera position is not.
  17. Hi, I've some trouble though debugging so much..I have an obj/mtl file and the mesh and textutre is basically loading well, so far so good. But the texture (png) is an alpha image and this isn't transparent after loading. This is technically OK because there is no implementation inside objFileLoader for this case. I just want to set mesh.material.diffuseTexture.hasAlpha = true in the success-callbak of the ImportMesh-function , but the material isn't bound at this time. So, where to set "hasAlpha=true" , at which time is the material bound to the mesh? Thanks PS: I can enable it in the render loop (hack, because it's undeterminable how much frames I must wait), I also can activate hasAlpha with the DebugLayer manually BABYLON.SceneLoader.ImportMesh("", "blabla", "blabla.obj", scene, function (meshes) { var m = meshes[0]; m.material <== NOT AVAILABLE scene.getMaterialByName("Mat1"); <== scene.materials==empty }); scene.registerBeforeRender(function () { frame++; if (frame == 100) { var mbyname = demo.scene.getMaterialByName("Mat1"); <== OK , Material is bound to the mesh }
  18. I am using the GLTFLoader to load a scene which contains lots of meshes with textures that have alpha transparency. The meshes seem to be in the correct place in space but when panning around it seems that order that the transparent objects are rendered is backwards -- the transparent texture which should be rendered first is rendered last (that is, the one in the front is behind and the one in the back is in front). I don't find a lot of documentation of how to update the depth buffer for alpha texture rendering. Is there a call I should make to recompute the scene to get depths correct? Is this just a bug in the GLTFLoader?
  19. Lag When Toggling Visible

    Hi, I'm creating my first project with Phaser. I have two large background TileSprites that I want to toggle between as the game is played. When the game state calls the create() method it creates the sprites and then sets one visible true and the other false. After a set time, it will swap. The first time this swap is called, there's a bit of lag. Subsequent swaps have no lag. I've experiencing this on my Nexus 5X and Laptop (Core i7 + GTX960M). I'm guessing that because I almost immediately set visible to false, the second sprite isn't being rendered to the GPU. Once it has rendered at least one time, then subsequent calls to toggle the visibility don't lag cause the texture is somehow cached. This is all conjecture on my part, I really don't know how these things work. Is there anyway to cache a sprite/texture to the GPU, so that toggling the visibility won't cause lag? Thanks!
  20. I have an ArcCamera with a root object as it's target. I'm going for a 3rd person or "over the shoulder camera". I want the root to rotate on the y axis when the ArcCamera moves on the alpha axis. I'm currently doing something like: It seems like the alpha is at a lower magnitude than what the rotation vector expects. I can rotate the camera like 3 times around the root before it rotates completely
  21. Fading out emitters particles

    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.
  22. SPS with alpha channel

    Hi all, @jerome I have done a SPS whose some particles have a little transparency and others not. However, I have a problem with particles that I dont want to apply alpha because now they are not solid cube!!. When I enable alpha chanel: #spsArquetas.mesh.hasVertexAlpha = true; for the solid particle I get this result: The result that I want to get is the follow: Thanks!
  23. Hello everyone! I wonder if it is possible to "make objects disappear in the distance", just like a fog but playing with the alpha channel. I've tried this: scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR; scene.fogColor = new BABYLON.Color4(0,0,0,0.00001); scene.fogStart = 30; scene.fogEnd = 70; I expected it to work because if I understood correctly the color with fog is computed like distanceCoef*fogColor + (1-distanceCoef)*originalColor where distanceCoef is between 0 and 1. But it seems like these are treated as Color3 and not Color4. I really need transparency because I don't plan to have a uniform background. Any idea? To test this you can go to, paste the code above somewhere and set the background color to anything. Thank you! EDIT: Added screenshot: here I would like the objects to become transparent in the distance (so appear more and more green), not just black. EDIT 2: I found an example of exactly what I would like, this is a screenshot from a RockBand game, see how the neck disappears in the distance?
  24. I noticed that decals can be transparent in places but they are either 100% transparent in a pixel or 0%. I would like to have "soft" edges on my decals and also be able to only slightly color the underlying object. So a 50% transparency decal for example, or a decal with different values for the alpha channel. Is there any way to accomplish this? I tried setting visibility to 0.5 on the decal, but this breaks it (it's rendered transparent.. but as a square instead of the texture). Example here (line 38 breaks it):