Search the Community

There's a TileSprite implementation in my project that seems to offset and distort on live production kiosks. this.tileTexture = PIXI.Texture.from(ConveyorAsset.RED); this.tile = new PIXI.TilingSprite(this.tileTexture, 491, 50); animate: function() { this.tile.tilePosition.x -= 0.51; if (this.enabled === true) { this.frameId = requestAnimationFrame(this.animate.bind(this)); } } I've let this animation run for 12-hours at a time on my development computer, and never seen an issue. However, at production facilities on kiosks running 24-hours a day, eventually there's some offset to the tile data that corrupts the animation. Any insight as to what might cause this, or how to debug it? Kiosks are Intel i5-7300, onboard Intel HD Graphics 620 Conveyor.mp4

Hi, I want to achieve a repeated texture effect something like this: In plain OpenGL you can set the texture wrap to GL_REPEAT and multiply the UV's by a factor and your are done. In Pixi i've tried PIXI.extras.TilingSprite (with hundreds of objects) but this seems to be very slow on my MacBook. So i thought it would be possible by simply changing the UVs and set the texture wrap mode to repeat but this does not work: let resources = PIXI.loader.resources; let tex = resources[item.texture].texture; tex.wrapMode = PIXI.WRAP_MODES.REPEAT; //texture size is 128x128 let texRectangle = new Rectangle(0, 0, 256, 256); tex.frame = texRectangle; let pixiItem = new Sprite(tex); //using this instead I have a FPS drop from 60fps to 5fps let pixiItem = new PIXI.extras.TilingSprite(tex); With a little research I found this: https://github.com/pixijs/pixi.js/commit/7db340ce8e62de3a14bc796fe34fe344de27a701#diff-450b030630803a4d2e7ad3ba09ff17f6 It seems that texture coordinates are now based on UINT16. So a float based scale would not be possible Any hints on this? Thanks!

Hi everyone, I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js. My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions): I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and display them again. I got randomness dsiplaying but no spinning animation. So tried next step -> Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution -> Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)): this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); then, creating TilingSprite from this rectangle, and positioning it: this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height) this.tilingReelThree.position.set(363, 210); this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y); of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: this.y_3; // this one to pass value for moving sprite on y axis this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops. realization is the following: var position = function () { // this function is called from update() main animating function if (this.y == 0) { } else { this.tilingReelOne.tilePosition.y += this.y_1 * 12; this.tilingReelTwo.tilePosition.y += this.y_2 * 13; this.tilingReelThree.tilePosition.y += this.y_3 * 14; } this.distance_1--; this.distance_2--; this.distance_3--; if (this.distance_1 <= 0) this.y_1 = 0; if (this.distance_2 <= 0) this.y_2 = 0; if (this.distance_3 <= 0) this.y_3 = 0; }; //this one is trigerred on Spin button push var spin = function () { this.state = SLOT_STATE.SPINNING; this.y_1 = 1; this.y_2 = 1; this.y_3 = 1; this.distance_1 = 150; this.distance_2 = 220; this.distance_3 = 275; }; As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. So here are the questions: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? Thank you in advance,

I am using a TilingSprite for the background of a game. Its a top-down view so I'm setting the tiling sprite tilePosition x & y as the player moves around. I'm using a 256px square tile that is in a texture atlas I have generated in texturepacker, and I have set the sprite extrude value to 2 within texturepacker. But I'm still seeing lines appear between the tiles intermittently as I move around in the game. Is there something I'm missing? Would I maybe be better off using an individual image as texture source for the tiling sprite, rather than an atlas subtexture? I have added my tilingsprite source images to my atlas with the intention of minimising the number of calls to upload textures to the GPU, but perhaps a tiling sprite texture should be an exception to this guideline?

Hello Pixi Developers and Users I would like first to present myself as a newcomer on the forum Im the developer of Sprite Basic Compiler Game Engine (https://spritebasic.com) It is cloud-based game framework with Basic Scripts tha uses PixiJS as web gl renderer as long as PhysicsJS as physic engine and other librairies needed to create games like the great Kittykatattack libraries For a demo and future game i wish to write, i would like to create a tilingsprite, for an endless scrolling background, made of an array of textures What would be the best strategy to concatenate an array of textures, that might be of different dimensions, into a large tiling sprite, either in portrait or landscape. Would create a large tiling sprite make performances suffer or the part of the tiling sprite that is not currently displayed would be correctly cropped from screen display/calculations? Many thanks if you can light me on this specific Benoit

Hi all, I'm using Phaser and I came across a glitch which is, I think, due to a bug in the PIXI.TilingSprite.protototype._renderCanvas() method. The bug might be linked to a bad restore of the context. In my game, once I introduced tiling sprites, everything started to "slide". So I assumed that adding tiling sprites to the game introduced the "sliding" effect in the context. To prove me right I logged "context.currentTransform" at the start and end of the TilingSprite._renderCanvas() method, and I came across that result : Start of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0} End of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -1255, f: -822} So as you can see the e and f parameters are different. If I do a context.save() at the start of the method and a context.restore() at the end, everything works perfectly. Same goes if I hardcode context.setTransform(1, 0, 0, 1, 0, 0); If it helps reproduce the bug, here are the values I have in the method : wt = {a: 1, b: 0, c: 0, d: 1, tx: -1255, ty: -822, type: 24} resolution = 1 tx = -1255 ty = -822 tilePosition = {type: 25, x: 219, y: 0} tileScale = {type: 25, x: 1, y: 1} tilePosition.x = 219 tilePosition.y = 0 this._width = 4200 this._height = 2400 I'm not a Pixi expert (first post in this section!), nor in canvas/context, so I'm sorry for any mistake. Also I hope this has not been flagged already! Thanks guys!

Hi guys, I developed a PixiJS rewriting of XMoto for the web : http://js.xmoto.io/ (original version is here: https://xmoto.tuxfamily.org/) Everything works quite well, but as I want to update PixiJS version from version 3 to 4, I get a weird visual glitch using WebGL and TilingSprite (it doesn't happen on canvas2D!). Do you have any idea why this happens? Am I the only one having this issue as TilingSprites are quite common? Staging version on V4 is here: http://staging.xmoto.io (you should directly see the glitch). Open Source code is here: http://github.com/michaelhoste/xmoto.js Typical code for sky is here: https://github.com/MichaelHoste/xmoto.js/blob/master/src/level_elements/sky.coffee#L30 and here: https://github.com/MichaelHoste/xmoto.js/blob/master/src/level_elements/sky.coffee#L51 I'm running on MacOS 10.12 (Sierra) on a mid-2012 macbook pro retina. Do you see anything obvious ? :-) Thanks

var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: false }); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); var grid = new PIXI.Graphics(); grid.lineStyle(1, 0xffffff, 1); grid.moveTo(0,10); grid.lineTo(20,10); grid.moveTo(10,0); grid.lineTo(10,20); //grid.cacheAsBitmap = true; stage.addChild(grid); var tilingSprite = new PIXI.extras.TilingSprite(grid.generateTexture(2), 800, 600); //tilingSprite.cacheAsBitmap = true; tilingSprite.x = 0; tilingSprite.y = 0; stage.addChild(tilingSprite); animate(); function animate() { renderer.render(stage); requestAnimationFrame( animate ); } Drop this into https://pixijs.github.io/examples/. 1) How can I eliminate spaces between tiles? 2) Is there some forced antialias? The tiled texture gets blurry and displaced Help, plizz. I tested with both dev4 and 3.0.11

Problems with TilingSprite in Safari: Is there a work-around? See playground: http://ekelokorpi.github.io/panda.js-site/engine/playground/#tilingsprite_scroll

Hi there, completely new to Pixi.js, but so far liking the experience. I am experimenting with masking and wondering if TilingSprite could be used as a mask for another container? // Main container var stage = new PIXI.Container(); // Mask mask = new PIXI.Container(); var maskUpTile = PIXI.Texture.fromImage('img/mask-up.png'); mask.x = 0; mask.y = 0; // Top part of the mask - transparent png var maskTop = new PIXI.extras.TilingSprite(maskUpTile, renderer.width, renderer.height); maskTop.x = 0; maskTop.y = 0; mask.addChild(maskTop); // Middle bit - just a black rectangle var maskMiddle = new PIXI.Graphics(); maskMiddle.beginFill(0x505050, 1); maskMiddle.drawRect(renderer.width*0.25, renderer.height*0.25, renderer.width/2, renderer.height/2); maskMiddle.endFill(); mask.addChild(maskMiddle); // Mask main container stage.addChild(mask); stage.mask = maskTop; renderer.render(stage); Using the maskMiddle (simple rectangle) as a mask works fine, but I was wondering if repeatable transparent png can be used for masking. And yes, what am I doing wrong? Thanks heaps for any tips. Cheers Petr

Hello, Let's say that i have an "Interactive" Sprite Button (sprite.interactive = true) ready for receiving click/touch events, and above of it there is a big TilingSprite (with the size of all screen) to create a Flash effect. The tiling sprite is visible (tilingSprite.visible = true) and its alpha oscillate between 0.1 to 0.5. The problem is when i want to touch/click the Sprite button nothing happens... The only way to receive a touch/click event is by setting tilingSprite.visible = false. Is there any way to set the interaction manager to "bypass" some elements like some TilingSprites or others?

Having a problem with a flicker effect I am having when creating a moving starfield in the background of a game I am working on. It's a bit hard to describe the effect so I will do my best without a video and hopefully someone can help. If needed I can create a recording of what's happening. Sometimes this flicker seems more like a pulse with the stars fading in and out. The faster the shift of tilePosition the faster this pulse seems to be resulting in a "flickering" effect. My technique: 4 tiling sprites are created. The background one is a jpg with stars and a bit of nebular gas clouds here and there. It is 4000x4000px in size. The other 3 are transparent png files with random white pixels on an image 2000x2000px. Each of the 4 tiling sprites' tilePosition is incremented at a different rate to each other based on the spaceship (which remains fixed in the middle of the screen). My renderer is automatically set to the innerWidth and innerHeight of the window if that matters - but doesn't seem to with other projects I have been playing around with. function updateBackground(x,y){ //console.log(x + ":" + y); sprites.cloudstars.tilePosition.x += (x * 0.01); sprites.cloudstars.tilePosition.y += (y * 0.01); sprites.star1.tilePosition.x += (x * 0.2); sprites.star1.tilePosition.y += (y * 0.2); sprites.star2.tilePosition.x += (x * 1); sprites.star2.tilePosition.y += (y * 1); sprites.star3.tilePosition.x += (x * 10); sprites.star3.tilePosition.y += (y * 10);}The problem: The stars seem to flicker (which sounds like it would be a good idea but isn't) when the starfield is shifted. It depends on the values of X and Y which are calculated by the direction and speed of the ship as follows: function moveShip(){ var newX = 0; var newY = 0; if(player.speed > 0){ var newX = (Math.cos(sprites.ship.rotation) * (player.speed * -0.01)); var newY = (Math.sin(sprites.ship.rotation) * (player.speed * -0.01)); } return [newX, newY];}What I have tried: - Reducing the size of the png files - Making sure the white pixels in the png file are not transparent in any way, solid white pixels - Moving the starfield at different rates in the first part of code I have linked - Turning off antialiasing for the PIXI.autoDetectRenderer I have spent about 30 hours of time trying to get this to work and am about to give up completely, hence turning to this forum for maybe some advice. If there is a better way to do it I am more than happy to give this a try. Thanks in advance.

Im trying to create a 9 slice style object to render shapes with repeating tiles. SpriteBatch appears to offer the fastest rendering solution but when I add a tiling sprite to a SpriteBatch it fails to repeat the texture even when the tiling sprites width/height dimensions suggest it should. Everything works fine when I instead embed it in a DisplayObjectContainer. Is it possible to have a TilingSprite inside a SpriteBatch or will I need to used a DisplayObjectContainer instead? Another possibility for me would be to manually generate and position sprites inside a SpriteBatch to achieve the same effect. An awkward solution I'd rather avoid but if there's still a performance gain over using a DisplayObjectContainer, its one I'd be forced to use...

First of all I'd like to thank the pixi.js team for doing such a great job to the renderer in the past few months. I'm getting close to releasing my app but while testing it on an Iphone 4 I noticed that it ran horribly on ~5 fps. I was using an old, january version of pixi.js so I thought I'd give it a shot and download the latest one and the game instantly jumped to ~26 fps! Now that's an incredible amount of jump and getting the canvas to render 5 times faster is awesome, but the game is still a bit slow to me! The game has been dumbed down a few times graphically and it's pretty well optimized so I don't see any other way of improving it unless there's some trick with the TilingSprite-s. The reason I'm suspecting that the TilingSprite-s are behind this problem will be explained by these screenshots below that I made on an Iphone 4 using CocoonJs launcher: (Please note that these images are a level of intellectual property.) The 1st image is the actual game running using all the layers/TilingSprite-s/graphics. ~26 fps The 2nd image has 2 TilingSprite layers - forest (1024x256) and hills (512x128) - removed. ~43 fps (+17) The 3rd image has (all) 3 TilingSprite layers - forest, hills and grass (64x16) - removed. ~61 fps (+18) Removing two, huge layers yielded basically the same result in improvement as removing the last, tiny horizontal TilingSprite layer, the grass. So the game runs absolutely smooth when there are no TilingSprite-s present at all, but even when a single, small one is introduced, the fps will drop considerably. Is there a way to optimize these TilingSprite-s or any alternatives to them? I'm definitely not aiming to get 60 fps on such an old device as an Iphone 4, but I'd be content getting 40 using all the assets. Thanks in advance!

Hi all, I just posted this issue over here at the PIXI github (https://github.com/GoodBoyDigital/pixi.js/issues/1038) - But thought it might be worth it to fire up a discussion and see if anyone had come accross the issue before. I'll give a brief overview incase people can't be bothered to look at the github link, basically what's happening is this : webGL Renderer -> canvas Renderer That's two sprites on a blank stage, one is a standard PIXI.Sprite (the square) and the other is a PIXI.TilingSprite (the circle) - under webGL it runs fine, under canvas it fails...as you can see. The code to reproduce the issue is over at the above mentioned github link. I'm using the latest PIXI and have tested it on firefox, chrome, and using cordova crosswalk on android devices. I also have a secondary question for anyone familiar with cordova crosswalk (or just plain crosswalk as well) When I build this into an app using crosswalk, on one of my test phones it forces the canvasRenderer when I use autoDetectRenderer. And when I try to set the renderer manually with "renderer = new PIXI.WebGLRenderer" I get an error saying the phone does not support webGL. However, when I build this using intelXDK (which as far as I know uses cordova crosswalk) the issue never arises, it's as if the phone magically can use webGL again. Any Ideas?

I'm trying to use tilingsprite for the ground layer, and moving background layers in a 2d scroller game. There is a small but easily noticable visual bug at the edges of the textures. It seems like pixijs puts the second texture one pixel farther, than it should be. I scale all pixi.DisplayObject to fit the screen, in the current image the scale was between 1-2. I tried it out with scale=1, but the result was the same. I could work around this issue, by using 2 textures, and do a custom tilingsprite, but I think it would be nicer to use the pixijs one. It would be important for me to fix this issue.

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.