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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 61 results

  1. 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. 😁
  2. andrei.nicolae

    Sprite with alpha

    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.
  3. 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 ???
  4. 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 :
  5. hi, after get the examples from : 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 =; 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( ); = 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) {; } else if (cursors.right.isDown) {; } if (cursors.up.isDown) {; } else if (cursors.down.isDown) {; } } 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); } }
  6. 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.
  7. 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: If you uncomment lines 12-17 the glow layer stops having an impact. Am I doing something dumb? Thanks, JPS
  8. 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? Thanks for your help!
  9. 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,
  10. SvenFrankson

    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 !
  11. 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
  12. 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.
  13. 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
  14. 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!
  15. Thema

    PBR Alpha Map

    Does the PBR material have an Alpha Map Texture?
  16. 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
  17. Borjan

    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.
  18. 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!
  19. 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!
  20. Hello! I'm still new working with the framework. So, I got a player that for now dies if collides with another sprite or if it falls out the world (sprite !inworld, so kill it and restart), and when it dies, it displays a message and I put a black picture that I set alpha = .7 behind the text. When the player collides with the sprite everything is OK, but when it falls out the world the dark picture shows it without trasparency! I also tried loading a picture already with transparency edited with photoshop, so I shouldn't set the alpha property in phaser, but same result! Looks like a bug, but idk, I tried some things but ended in same result! here's my Play state: var play = { create: function () { this.cursor = game.input.keyboard.createCursorKeys(); this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);, -400, 2500, 1000); //Fisicas game.physics.startSystem(Phaser.Physics.ARCADE); = 1000; //fondo game.stage.backgroundColor = "#00FFFF"; //capa invisible //this.fondoInv.alpha = 0; //codigo de plataformas this.walls =; this.walls.enableBody = true; game.add.sprite(0, 553, 'plataforma', 0, this.walls); game.add.sprite(300, 400, 'plataforma', 0, this.walls); game.add.sprite(600, 300, 'plataforma', 0, this.walls); game.add.sprite(1000, 300, 'plataforma', 0, this.walls); this.walls.setAll('body.immovable', true); //asi no se caen //plataforma que se cae this.wall2 = game.add.sprite(1800, 300, 'plataforma'); game.physics.arcade.enable(this.wall2); //cosa que mata this.asesino = game.add.sprite(1200, 220, 'asesino'); game.physics.arcade.enable(this.asesino); this.asesino.body.immovable = true; //tipo this.player = game.add.sprite(125, 500, 'tipito'); this.player.anchor.setTo(0.5, 1);'tipito'); game.physics.arcade.enable(this.player); this.player.body.gravity.y = 800; //this.player.body.collideWorldBounds = true; (PRODUCE BUG CON //animaciones this.player.animations.add('correr', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], true); }, update: function () { //this.walkVelocityR = this.player.body.velocity.x = 200 //this.walkVelocityL = this.player.body.velocity.x = -200 //this.jumpVelocity = this.player.body.velocity.y = -400 game.physics.arcade.collide(this.player, this.walls); game.physics.arcade.collide(this.asesino, this.walls); game.physics.arcade.collide(this.player, this.wall2); game.physics.arcade.overlap(this.player, this.asesino, this.playerDie, null, this) //this.platforms.body.checkCollision.down = false;; if (!this.player.inWorld) { this.playerDie(); } //salto mientras camina if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.x = 380; this.player.body.velocity.x = -350; this.player.body.velocity.y = -500; //derecha } else if (this.cursor.right.isDown && this.cursor.left.isUp) { //this.cursor.left.enabled = false; this.player.body.velocity.x = 380;'correr', 5, true); this.player.scale.x = 1; //izquierda } else if (this.cursor.left.isDown && this.cursor.right.isUp) { //this.cursor.right.enabled = false; this.player.body.velocity.x = -380;'correr', 5, true); this.player.scale.x = -1; }else { this.player.body.velocity.x = 0; this.player.animations.stop(); this.player.frame = 4; } //salto if (this.player.body.wasTouching.down) { this.jumps = 1; console.log(this.jumps) } if (this.jumps > 0 && this.jump.justDown){ this.player.body.velocity.y = -500 this.jumps--; console.log(this.jumps); } }, render: function () { //game.debug.inputInfo(32,32); game.debug.key(this.cursor.right, 50, 50) }, playerDie: function () { this.player.kill(); this.fondoInv = game.add.sprite(,,'fondoInv'); this.fondoInv.alpha = .77; var perdiste = game.add.text( + (game.width/2), + (game.height/2), "You have lost", {font: "65px Arial", fill: "#ff0044", align: "center"}); perdiste.anchor.set(0.5,0.5); perdiste.fixedtoCamera = true;, this.start, this) }, start: function () { game.state.start('play'); } } Thanks for helping!
  21. 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
  22. Newlearner

    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?
  23. PixelPush

    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,
  24. I can rotate camera, but cannot move. `camera.cameraDirection` is changing, but camera position is not.
  25. 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 }