Search the Community

Hi everyone, I am trying to tile a floor but I would like to create a sort of "offset" in the tiling. I added pictures to best explain what I am trying to do. The first is what I am doing now. The second is what I would like. How can I do this? Thanks!

Hi, I have a box mesh I make for steps, but it will vary in size depending upon user input. Right now, when I add a texture, since the texture stretches to cover a face, it gets distorted on the different faces of the step. ( pic attached ) I'd like to specify a set amount (ex: 2 units width, 2 units height ) and have the texture tile with those dimensions regardless of it's mesh's dimensions. So if the mesh is 2 units high & 5 units wide, the texture will automatically tile once vertically, and 2.5 times across. I can workaround this by calculating the `uScale` & `vScale` based on the mesh / texture's size but is there any built in method to accomplish this? I'd rather not have to track the texture's dimensions & do this every time, if possible

Hi All I am experimenting with displacement mapping and have had a degree of success, but have encountered some issues that the community might be able to help with. Looking at the <shape>.applyDisplacementMap() function it can be seen that it does not support the ability to control how a displacement map texture is applied to the shape. Therefore, if you create a complex 3D model that requires greater control over how the displacement map is applied (i.e. tiled) to it then unfortunately you will encounter problems. I started out by creating a 3D model and then applying texture, bump and displacement map to it. I used the standard applyDisplacementMap() function which produced the following result: http://www.babylonjs-playground.com/#1PLEVL#1 The above example illustrates how the displacement map is being stretched across the entire geometry of the shape – which is not what I want. I want the ability to control how the displacement map is tiled across the geometry of the shape – similar to that of uScale & vScale for bumpTexture: e.g. mat2.bumpTexture.uScale = 5; mat2.bumpTexture.vScale = 9; I looked at the underlying functionality of applyDisplacementMapFromBuffer() in an attempt to try and extend it to have greater control over the tiling – but TBH I am not understanding how some of the key lines of code are working. So, I decided to take another approach. Before I explain my solution “I KNOW” this is not a scalable solution and not efficient on many levels. However, it enabled me to apply a tiled displacement map to small geometry shapes – this allowed me to envisage what shapes will look like when displacement maps are applied correctly. NOTE: the main issue with the approach I took is memory allocation – i.e. you will hit out of memory if you try and apply my method to a large 3D model mesh. The interim solution I created is to create a displacement map texture (image) that is sized and tiled appropriately such that I can apply it to the 3D model geometry using the applyDisplacementMapFromBuffer() function. The solution I created is below: http://www.babylonjs-playground.com/#1PLEVL Explanation: line 94: obtains the displacement map image (not tiled) line 97: creates a tiled displacement map image (mirroring that of the bumpTexture uScale/vScale) line 99: apply tiled displacement map to 3D mesh line 101~102: free resources (because line 97 is very resource intensive!) The above solution generates nice results as per the PG example – but this is not something that is scalable (the right approach is ofcourse to tile a smaller texture across the geometry of the 3D mesh). I am hoping (praying) that one of the Babylon JS arch master developers can tweak the applyDisplacementMap() function such that the uScale/vScale tiling can be controlled. Perhaps someone can point me in the right direction so I can do this myself? Anyway, I hope this example is of some use to the community.

Hello, I'm new in this forum. I have a problem with the init function. This is my code: BgLava = game.TilingSprite.extend({ init:function(){ this._super('lava.png', game.system.width, game.system.height, {speed:{x:0, y:25}}); game.scene.stage.addChild(this); game.scene.addObject(this); var t = game.scene.addTween(this.speed, {x: 100}, 1000, {easing: game.Tween.Easing.Back.In}).repeat().yoyo().start(); } });I extend the TilingSprite class and I try to tween the speed of the sprite. But nothing happens. If I move this line: var t = game.scene.addTween(this.speed, {x: 100}, 1000, {easing: game.Tween.Easing.Back.In}).repeat().yoyo().start(); to the game.scene code it works perfectly. I've had some problems with the init method before but this one I can't solve. It's like the this inside init() it's different from the object that's being created. CLASS = Class.extend({ init:function(){ console.log(this); //<-1 }});//* Inside Scenevar c = new CLASS();console.log(c); //<-2It's not pointing to the same object? Is there a way to create a tween for the speed inside the init function? Thanks!

Is it possible to tile a frame texture in a movie clip object. So in otherwords can I make a animated MovieClip act like a Tiling sprite and change the width and height but have the textures just repeat infinitely instead of stretching? OR can I use a tiling sprite like a MovieClip and have the texture be updated to do animations? Or do i have to create a bunch of MovieClip Objects next to eachother?

First of all, hey guys! I've been floating about the forum for a while now, and look forward to posting a lot more in the near future. I've been having quite a bit of fun playing around with Pixi these last few months, I'm in the midst of developing a game powered by it. Anyway, I've hit a problem that I thought somebody may be able to help out with; I was creating mountains by using a TilingSprite masked by a Graphics object, this was working beautifully up until I tried to use another mask somewhere else. The problem was that the two completely unrelated masks were interfering with one another. After doing a little research I found that this was a known bug with the WebGL renderer and was fixed in the latest release, however, after downloading and testing the latest release it appears that TilingSprites can no longer be masked? I have set up a simple test to illustrate the problem: http://danielboa.com/maskTest/ Open up the developer console and you will see the error "Uncaught TypeError: Cannot read property 'primitiveShader' of undefined". I tried the same thing but with the Canvas renderer and no error is displayed, but the mask also doesn't seem to have any effect. Hopefully someone more clued up on the WebGL renderer can shed some light on this problem. Many thanks, Daniel.

Hi, Do you know if there is a way to use the tiling sprite object with a texture having a size being not a power of 2 ( Even if it is a bit less efficient ) ?