Search the Community

Hello everyone! Maybe someone has experience and can share with it. The question is how you guys croping media content inside PIXI Application. I have a lot of different stock video and images with different sizes. User can choose aspect ratio of final result: landscape (1920x1080), square (1080x1080), vertical (607,5x1080). The size of main container always is 1920x1080. Also there should be good resolution, let`s say: PIXI.settings.RESOLUTION = 2; I made some images to demonstrate how I want to make it. For example, user can choose vertical ratio and with horizontal hd video (or hd image) - so video (image) should be cropped, and around this video (image) should be for example black (or can be else) color. My code is: const video = some_json_data; const videoContainer = document.getElementById('videoContainer'); switch (video.aspectRatio){ case "square": vw = 1080; vh = 1080; break; case "landscape": vw = 1920; vh = 1080; break; case "vertical": vw = 607.5; vh = 1080; break; default: break; } const bgColor = '0x000000'; PIXI.settings.RESOLUTION = 2; app = new PIXI.Application({ width: vw, height: vh, backgroundColor: bgColor, }); videoContainer.appendChild(app.view); const renderer = PIXI.autoDetectRenderer({ width: vw, height: vh, resolution: 2 }); renderer.view.style.width = `${vw}px`; renderer.view.style.height = `${vh}px`; // create the root of the scene graph const stage = new PIXI.Container(); app.stage.addChild(stage); videoBg = PIXI.Texture.from(videoUrl); videoSprite = new PIXI.Sprite(videoBg); const videoController = videoSprite._texture.baseTexture.resource.source; app.stage.addChild(videoSprite); videoBg.baseTexture.resource.source.loop = false; videoBg.baseTexture.resource.autoPlay = false; // Width videoSprite.width = vw; videoSprite.height = vh; // move the sprite to the center of the screen videoSprite.alpha = 1; videoSprite.anchor.set(.5); videoSprite.x = app.screen.width / 2; videoSprite.y = app.screen.height / 2; app.ticker.add(function () { // render the stage renderer.render(stage); });

Hey guys! I need to add a UID to my headers for getting Texture (video or images). Is there any way to do this in PIXI? For example: PIXI.Texture.from(testVideo, {header: { 'UID': 'XXX' }}); I also tryed PIXI.Texture.fromUrl but had the same result.

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

Hi Team ... While seeking a webm there is a strange glitch that happens consistently (replication steps can be found in the attached video: webm-glitch-pixiv6-compressed.mp4). This same glitch does not happen if let the video play undisturbed (i.e. without seeking to random points in time) which rules out the possiblity of the video being corrupt. What are the things that I tried: I tried to see if the previous versions of PIXI (namely v5) had the issue, and surely they did. I tried to apply the pixi-patch from the following links, but they didn't work - https://github.com/pixijs/pixi.js/issues/3526 https://github.com/pixijs/pixi.js/issues/408 The problem seems to be there in multiple versions of PIXI: PIXI v6.0.2: https://jsfiddle.net/zodiacleo/spgzy4x3/17/ PIXI v5.3.3: https://jsfiddle.net/zodiacleo/dbhf2xu9/17/ SpectorJS trace has been attached (file: webm-glitch-spector-error.json) Please let me know if I can provide more information on this. webm-glitch-pixiv6-compressed.mp4 webm-glitch-spector-error.json

Hello, I'd like to visualize a simplex noise map by representing the values as shades of gray on a 2d image. While using Processing/p5js I used to be able to access the pixels array and then set the values and update the image. Is there any similar way of achieving this in pixi, or should I look elsewhere? If I had to build the image in p5, can I convert it to a pixi texture right away? (meaning, without intermediately saving it to disk or similar)

Hello, I'm trying to load sprite sheets to build a tiling map in Pixi. I have my spritesheets defined in a custom data structure like so: { "image": "../aside/tileset_1bit.png", "spacing": 0, "tile_height": 16, "tile_width": 16 } Now, I add the json file to the loader, and hit loader.load(), calling an onComplete function: let loader = new PIXI.Loader(); let path = './data/spritesheets/dev_tileset.json'; loader.add(path); loader.onComplete.add((loader) => loadSpriteTextures(loader)); loader.load(); function loadSpriteTextures(loader) { for (let key in loader.resources) { if (loader.resources[key].extension == 'json') { let data = loader.resources[key].data; let { image, spacing, tile_height, tile_width, } = data; let sheet = new Spritesheet(image, spacing, tile_height, tile_width); spriteSheets.push(sheet); loader.add(sheet.image); } } } Except, when I call loader.add(sheet.image), I get an error: "resource-loader.esm.js:1992 Uncaught Error: Resource named "../aside/tileset_1bit.png" already exists." I know for a fact that the image "../aside/tileset_1bit.png" does *not* exist in the loader. If I don't call the add() and try looking, it's not there (as expected). I need the second load() step to actually load the images into the loader, which I'd later reference from my Spritesheet object, but this error is baffling me. Any ideas what cause this? Is it a bug?

Hi, my game is supposed to have support for canvas, and so I added the pixijs-legacy when we upgraded to 5.0.4. However, it seems it won't recognize the fallback support and I still get this error. I can see the pixi-js legacy being loaded, though. I'm not too familiar with the whole workflow yet, so I'm finding it hard to figure out. Do you guys hav e any idea how to fix it? Thank you so much,