Search the Community

Hello, I'm a developer at Colonist.io and we are looking to increase the game performance on all devices. To test performance, we run multiple instances to force our computer to work harder. We noticed that one of the biggest FPS word is the Player Container View which only displays content and it has zero animations. When we hide it using PIXI.JS Developer Tools, FPS increase by ~15 on all instances. We already started optimizing by using `cacheAsBitmap`, however it is not possible to cache the whole container as content inside it changes from time to time (text and colors). We tried enabling `cacheAsBitmap` by default, disable it on every change, and enable it again after that, however it has some issues such as not being able to listen for `onClick` and a small but noticeable jitter. Some notes: - We are using PIXI.JS 5.3.12 - Spector.js only reports 9 draws - Attached is the structure of every single player container and what we are optimizing - We are aware that all GUI should be made with raw HTML and CSS but we want that to be our last resort. - Sprites are loaded and rendered with the following logic: // This gets run before the game starts export function loadImages() { for(const img of getImagesToPreload()) { const imgPath: string = UIImagePathController.getImagePath(img.name + img.extension) PIXI.Loader.shared.add(img.name, imgPath, {crossOrigin: true}) } PIXI.Loader.shared.onProgress.add(loadProgressHandler) PIXI.Loader.shared.load(assetsFinishedLoading) } // This is an example of how we load a texture static getTextureForCard(cardEnum: CardEnum): PIXI.Texture { const cardData = CardDataController.getCardDataForCard(cardEnum) if(cardData == undefined) { logError('getTextureForCard', [cardEnum]) return PIXI.Loader.shared.resources.card_rescardback.texture } return PIXI.Loader.shared.resources[cardData.imageFileName].texture } I don't really know what the approach here should be. Any help is appreciated. Thanks!

Hello everyone, I'm suggesting using pixi (v5) for a component on a really bloated site, and its bringing too much weight to the final bundle. We don't need everything the library offers, so I was wondering if we can import what we need and maybe minimize the impact on the final bundle weight. Has anyone encountered a similar issue? How did you manage it?

Faced with these errors and do not know what it could be. Games are running through webview on the phone and problems have appeared recently, before everything was working fine Image from iOS.MP4

Hey guys! I'm stuck with one task, maybe someone has experience to help with it. For recording video I using CCapture.js, but when I start it everything stops with no errors. My basic code is: const videoContainer = document.getElementById('videoContainer'); vw = 1280, vh = 720, videoUrl = 'assets/video/landscape.mp4'; PIXI.settings.RESOLUTION = 2; app = new PIXI.Application({ width: vw, height: vh, backgroundColor: bgColor, }); const videoBg = PIXI.Texture.from(videoUrl); const videoSprite = new PIXI.Sprite(videoBg); const videoControler = videoSprite._texture.baseTexture.resource.source; videoContainer.appendChild(app.view); let capturer = new CCapture( { format: 'webm' } ); let n = 0; app.ticker.add(() => { if(n == 0){ capturer.start(); } capturer.capture(app.view); if(videoControler.currentTime >= videoControler.duration){ capturer.stop(); capturer.save(); app.ticker.destroy(); } n += 1; }); Also I created some example and you can see it stops at the beginning too: https://codepen.io/fjtwmjzf-the-lessful/pen/zYZJwvQ I would be grateful for any help!

Hi everyone, I'm trying to build a camera for a large exported JSON map. Currently, what I'm doing is pivoting the movement around the player to give the illusion of movement like this in the game loop ``` this.playerOffsetX -= this.sprite.vx; this.playerOffsetY -= this.sprite.vy; this.player.x += this.sprite.vx; //NOTE, this does not actually move the sprite, this.player is just a Javascript object with an x and y property this.player.y += this.sprite.vy; this.staticBackground.pivot.set(this.player.x, this.player.y); ``` Now after the player has moved a number of pixels = the length of my file, I re-draw the map by adjusting the row and column of the original map and re-draw everything again (inefficient, I know for now until I get it working correctly) ``` renderMap(initial = false) { //move the camera to give illusion of movement // if (newLeftX === this.leftX && newLeftY === this.leftY && !initial) return; const layers = this.map.layers; //camera spans 10 tiles to right and down const mapWidth = this.map.width; const mapHeight = this.map.height; var updateMap = initial; if (!initial) { // this.staticBackground.position.set(this.sprite.x, this.sprite.y); if (this.playerOffsetX !== 0) { if (this.playerOffsetX % SQUARELENGTH === 0) { this.staticBackground.removeChildren(); const step = Math.floor(this.playerOffsetX / SQUARELENGTH); this.leftX -= step; if (this.leftX <= 0) { this.leftX = 0; } this.playerOffsetX = this.sprite.width / 2; updateMap = true; } } if (this.playerOffsetY !== 0) { if (this.playerOffsetY % SQUARELENGTH === 0) { this.staticBackground.removeChildren(); //TODO: fix this const step = Math.floor(this.playerOffsetY / SQUARELENGTH); this.leftY -= step; console.log("step: ", step," new y:", this.leftY); if (this.leftY <= 0) { this.leftY = 0; } this.playerOffsetY = this.sprite.height / 2; updateMap = true; console.log("refresh y: ", this.leftY); } } if (!updateMap) { return ; } } else { this.staticBackground.position.set(0, 0); } console.log("ran: ", this.leftX, this.leftY); for (let layer = 0; layer < layers.length; layer++) { const currLayerData = layers[layer].data; //calculate exact window we need to iterate, since window is square //but data is a 1D array, we will still encounter some elements outside window //still a 4x improvement const start = (this.leftY * mapWidth - 1) + this.leftX; const end = start + WINDOW_WIDTH + (WINDOW_HEIGHT * mapWidth) + 1; console.log(this.leftX, this.leftY, start, end, currLayerData.length); for (let i = start; i < end; i++) { //position on our screen //data is stored as one very long string, representing a 2D grid //y and x are in terms of rows and cols of tiles not raw pixels const y = i / mapHeight| 0; const x = i % mapWidth | 0; //choose tile if (currLayerData[i] !== 0 && currLayerData[i] < 100) { //only continue if in window of map const yOffset = y - this.leftY; const xOffset = x - this.leftX //tile window is WINDOW_WIDTH x WINDOW_HEIGHT if (yOffset >= -5 && yOffset <= WINDOW_HEIGHT + 5 && xOffset >= -5 && xOffset <= WINDOW_WIDTH + 5) { //elements are stored corresponding to sequential ids, that map back //to the tileset - 20 = # of tiles in each row in our tileset const tileRow = Math.floor(currLayerData[i] / 20); const tileCol = ((currLayerData[i] - 1) % 20); const sprite = new PIXI.Texture(TextureCache["/static/img/rpg.png"]); sprite.frame = new PIXI.Rectangle(tileCol * SQUARELENGTH, tileRow * SQUARELENGTH, SQUARELENGTH, SQUARELENGTH); const layer = new PIXI.Sprite(sprite); layer.x = xOffset * SQUARELENGTH; layer.y = yOffset * SQUARELENGTH; this.staticBackground.addChild(layer); } } } } } ``` The problem is that I'm getting some weird tearing issues - I think the problem is to do with pivoting - I pivot the map around the player coordinates (which keeps increasing or decreasing) but when I redraw the map in the given area, the pivot is not adjusted for that offset, but I'm not sure which offset that is. Anybody have an idea of why this is not working correctly? Is there an easier/better approach?

Hi All, I'm a new developer and have been enjoying PIXI so far! I am new to most aspects of game and web dev as well, and I was glad to see an active forum like this one. If I have a game object composed of multiple sprites which all use the same x/y position, can I link the position values of the sprites to the x/y I am tracking in my wrapper object? I'm looking for a way to have the sprite position values reference the same memory location as a global x and y value, such that updating the global value would intrinsically update the position of a number of sprites. It looks like the sprite x and y values are getter/setter functions, so at that point I got stuck determining if this would be possible. For now I wrote a setX and setY function that loop through all the associated sprites and set their position values, and I was wondering if this is an efficient way to solve the problem? I'm trying to be cautious about processing overhead and want to understand best practices for any operations that are going to take place on every update scan. Thanks!

Hi, I am trying to update the basetexture source with different images at different points in my game. In pixi 4 it was easy, we could use BaseTexture.updateSourceImageO , but in Pixi 5 we dont have this at all. Is there any straight forward way to do it in Pixi 5 ? I havent found any s far. Migration to pixi 5 is stalled due to this. Any help is much appreciated. regards, Arin

I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 objects, all needing animations, but only about 1000 of those will ever need to dynamically update their geometry at a given time, simultaneously. Whenever I see advice for performance, I always see pointers to using textures and sprites. Unfortunately, I don't think I can use textures or sprites here instead, because I'm not just doing simple transforms on the geometries, but changing fundamental parameters of the geometries (ie: one custom path to another). I cannot share my project code unfortunately, but here is a sandbox with n number of randomly placed circles, each of which has its r animating. If you change n to 300 in App.js, things start getting pretty janky... While this is a contrived example, the fundamental requirements are accurate: large number of dynamic geometries animating simultaneously. Thanks in advance for any guidance / advice / direction / tutelage. Note - I am very new to webgl, and it seems very daunting, which is why I'm currently opting to use react-pixi. I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start...

Hello, I am working on a game with pixi js. to make the game look normalized on every screen, im scaled the stage as follows this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio); and on orientation change I am rotating the whole stage. now my problem is, if i have any buttons on stage, who are at top or at right side of stage, they do not respond to any touch event. Please help i'm in a very big trouble. I tried to use mappositiontopoint as well. but didn't understand how to correctly use here. Please help

Hello. I'm trying to make a filter to transition between the current texture of a Sprite and a new one. I've put together a barebones example here: https://www.pixiplayground.com/#/edit/KozVneSNjCuVZKi_fgNJa When you click on the blue sprite, a filter is applied. Currently, this filter takes a new texture as uniform and uses it to sample the fragment color (I have removed all the blending code to make it clearer). And it seems as this texture is being upscaled? Both textures have the same size. As a reference, I have added a second sprite with the new texture being applied. Thanx in advance!!!

Seemingly simple task, yet so unclear and confusing in Pixi. After searching for a while, found this and that is exactly what I need https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js And that is for Pixi 4. Once I copied the code into pixi examples window and fixed the method names, I saw this (Attachment) const shaderVert = ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; varying vec2 vFilterCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; } `; const shaderFrag = ` varying vec2 vTextureCoord; uniform vec2 scale; uniform sampler2D uSampler; uniform sampler2D backdropSampler; uniform vec4 filterArea; uniform vec4 filterClamp; void main(void) { vec4 map = texture2D(uSampler, vTextureCoord); map -= 0.5; map.xy *= scale / filterArea.xy; vec2 dis = clamp(vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y), filterClamp.xy, filterClamp.zw); gl_FragColor = texture2D(backdropSampler, dis); } `; class DisplacementFilter extends PIXI.Filter { constructor(scale) { super( shaderVert, shaderFrag ); this.uniforms.scale = {x: 1, y: 1}; if (scale === null || scale === undefined) { scale = 20; } this.scale = new PIXI.Point(scale, scale); this.backdropUniformName = 'backdropSampler'; } apply(filterManager, input, output) { this.uniforms.scale.x = this.scale.x; this.uniforms.scale.y = this.scale.y; // draw the filter... filterManager.applyFilter(this, input, output); this.clearColor = [0.5, 0.5, 0.5, 1.0]; } } const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); app.stage.interactive = true; app.stage.filters = [new PIXI.filters.AlphaFilter()]; app.stage.filterArea = app.screen; const container = new PIXI.Container(); app.stage.addChild(container); const padding = 100; const bounds = new PIXI.Rectangle( -padding, -padding, app.screen.width + padding * 2, app.screen.height + padding * 2 ); const maggots = []; for (let i = 0; i < 20; i++) { const maggot = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/maggot.png'); maggot.anchor.set(0.5); container.addChild(maggot); maggot.direction = Math.random() * Math.PI * 2; maggot.speed = 1; maggot.turnSpeed = Math.random() - 0.8; maggot.x = Math.random() * bounds.width; maggot.y = Math.random() * bounds.height; maggot.scale.set(1 + Math.random() * 0.3); maggot.original = new PIXI.Point(); maggot.original.copyFrom(maggot.scale); maggots.push(maggot); } const displacementContainer = new PIXI.Container(); const displacementTexture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/pixi-filters/displace.png'); for (let i = -1; i <= 1; i += 2) { let sprite1 = new PIXI.Sprite(displacementTexture); sprite1.position.set(100*i, 0); sprite1.anchor.set(0.5); displacementContainer.addChild(sprite1); } app.stage.addChild(displacementContainer); const displacementFilter = new DisplacementFilter(); displacementContainer.filters = [displacementFilter]; displacementFilter.scale.x = 110; displacementFilter.scale.y = 110; //displacementFilter.padding = 0; const ringTexture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/pixi-filters/ring.png'); const rings = new PIXI.Container(); for (let i = -1; i <= 1; i += 2) { let sprite1 = new PIXI.Sprite(ringTexture); sprite1.position.set(100*i, 0); sprite1.anchor.set(0.5); rings.addChild(sprite1); } rings.visible = false; app.stage.addChild(rings); const bg = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bg_grass.jpg'); bg.width = app.screen.width; bg.height = app.screen.height; bg.alpha = 1; app.stage.addChildAt(bg, 0); app.stage .on('mousemove', onPointerMove) .on('touchmove', onPointerMove); function onPointerMove(eventData) { rings.visible = true; displacementContainer.position.set(eventData.data.global.x, eventData.data.global.y); rings.position.copyFrom(displacementContainer.position); } let count = 0; app.ticker.add(function () { count += 0.05; for (let i = 0; i < maggots.length; i++) { const maggot = maggots[i]; maggot.direction += maggot.turnSpeed * 0.01; maggot.x += Math.sin(maggot.direction) * maggot.speed; maggot.y += Math.cos(maggot.direction) * maggot.speed; maggot.rotation = -maggot.direction - Math.PI / 2; maggot.scale.x = maggot.original.x + Math.sin(count) * 0.2; // wrap the maggots around as the crawl if (maggot.x < bounds.x) { maggot.x += bounds.width; } else if (maggot.x > bounds.x + bounds.width) { maggot.x -= bounds.width; } if (maggot.y < bounds.y) { maggot.y += bounds.height; } else if (maggot.y > bounds.y + bounds.height) { maggot.y -= bounds.height; } } }); Obviously, something isn't working as in Pixi 4. CIED6wShf9.mp4

I'am trying to create 5 sprites and combine them into 1 sprite only once. Then i create multiple objects and assign that 1 sprite to each one of those objects. My idea is that each object has 5 properties like name, image etc.. and if i create 5 sprites per object then it will cause alot of draw calls and sometimes fps drops if the objects are too many, so iam trying to combine the 5 sprites into 1 sprite then add that sprite to each object and inside the object i want to be able to change the sprites inside the 1 parent sprite for each object while that 1 sprite is acting as if it was actually only 1 sprite, basically without adding the 5 sprites as children to 1 sprite. 1 - I wanna know if this is possible 2- if it is, I want to know how i would do it because iam kinda new to pixi and i dont know what to do i have tried multiple ideas but all of them failed so i came here.

I am working on a game view that has overlay modal with scrollable container (Parent container with mask and content container with y transforms on scroll). In general everything works fine, but I notice my phone heating up sometimes when scrolling this view for a while. I am not using any expensive things like antialiasing, however my stage devicePixelRatio is set at 3 (for iphone xs display). I assume that with every scroll my whole view is being re-rendered, hence causing this heating up? I was wondering if pixi has a mechanism to separate this scroll container onto a separate layer of some sort and not re-render anything else? The only solution I can come up with atm is to use second pixi stage on a separate canvas perhaps, but wanted to check here first just in case there is a more elegant solution.

Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178, 229, 25] but I got [255, 255, 255, 25] (without premultipled alpha) and [31, 184, 235, 25] (with premultipled alpha) https://www.pixiplayground.com/#/edit/785nGjqG5wSZoa9r2Xn7I Thank you in advance for a response!

Nothing..

I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin https://pixijs.download/dev/docs/PIXI.Prepare_.html for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.

Can I draw this line in pixi and animate her? bandicam 2020-07-09 09-28-29-227.mp4

Hello, I need help in drawing text vertically using using pixi. Ex: have to print text "NAME" in container as below; N A M E Ex 2: Text=" NAME PIXI" N P A I M X E I

[SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called stabfish.io My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: https://stabfish.io/old pixiJs: https://stabfish.io/pixi I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .

Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is the position and size of a graphic which is used for masking the text below it. As a graphic, the mask(white rectangle) appears small. However when applied to the text behind, it appears bigger and position also changes.

https://github.com/Hocti/PIXIMC you don't need any adobe animate plugin, just use the "generate texture atlas" function in adobe animate then you can read them in to pixi.js by PIXIMC. Here is a pixi.js demo: https://piximc.s3.amazonaws.com/demo/demo_scene.html and the original swf file: https://piximc.s3.amazonaws.com/demo/demo_swf.html I reproduce almost all animation and graphic functions, but it's not my final goal still. I will make some extra functions that adobe doesn't provided: 1) changing MC skin 2) playing with "action" like spine So I can draw some Stickman animations to create game sprites in a super quick way , and maybe find a better illustrator to redraw it as a new skin I hope someone will find it useful.

Hello, I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be in the way I'm creating the mesh? I've checked other example from pixi's page in which shader with heightmap is used on a mesh and works perfectly fine - pixiExample. I'll be very grateful if I get this normal map thing working.

Hi all, i've been messing with something for a couple days. I'm passing in a transparent blurred PNG to a shader, as well as a solid PNG background, and running it through a grayscale shader. If I simply display the pixels of the blurred PNG, it is output on top of the solid background as expected. The grayscale part of the shader works fine. However, the grayscale portion of the photo has a harsh transition to the background. It doesn't fade nicely and follow the alpha of the blurred PNG, like a blendMode would. I realize they are different things, but I feel like I am missing something obvious, and that it should work as I'm expecting. I have a playground setup to demonstrate the issue. Ignore the ugliness of the assets, it gets the point across better https://www.pixiplayground.com/#/edit/0ZaLP0UrUIPKfyHU_S3-o In the photo attached, the desired result is on the left (from Photoshop Color BlendMode). The right is the result from the playground. You can tell that the grayscale area on the right is much larger, since I believe that any alpha that is NOT 0, it being set to 1. I would like to try and maintain the alpha from the original blurred PNG. It may not seem like much but it really kills what I'm going for with the aliased edge like that. Thank you!

I am developing a unique but really simple puzzle game that consist in just put all the players (astronauts) in the goal squares at the same time. Rules: All astronauts move at once. NOTE: Only puzzle games lovers would enjoy this game, so if you aren't, you can skip seeing it:). Some levels could be really challenging. Here it is: https://llpujol.itch.io/puzzle-astronauts Comments & improve suggestions are welcomed:), Hope someone could enjoy it:)

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