Search the Community

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! I am loading SVG images in my application. The SVGs don't have a width and height defined in the file, but the viewbox. Loading them basically works with Pixi.js. But my problem is, that those SVG images are rasterized to an image default of 150x150px - in Chrome. In Safari on MacOS they are rasterized MUCH bigger. Is there any option, to tell the Texture Loader to use a given size? This would prevent above behaviour AND give the user the option, to define the size before rasterizing the image. I wouldn't want to set width and height in the SVG files. I looked a lot in BaseTexture and tried loader plugins (e.g. pre), but couldn't find any options to leverage. Any ideas appreciated, on how to tell the Loader which size the SVG should be rasterized Kind regards John

Hi there, I'm working on an app showing user uploaded maps (bitmaps). These maps can be of any resolution and often they are very large. Now down-scaling these images they become ugly and crunched, so I need to use mipmapping (Working in WebGL). I know mipmapping only works with "powered by two" resolutions, but is there any way I can resample my odd-sized maps, to fit into a "pb2" resolutioned baseTexture, and still know the original specs. Or how would you work around it? Thanks

I am creating animation frames from image the hard way -I am using PIXI.Texture and passing baseTexture and Rectangle (I don't use json directly, because of reusability of json instructions). See code below. I am getting an error: baseTexture.once is not a function. I don't know what is causing this error, but the animation is working as expected. Is this error something I shouldn't worry? function loadAssets() { PIXI.loader .add('first', 'assets/first.png') .load(function (loader, resources){ onLoaded(loader, resources) }); } function onLoaded(loader, resources) { console.log(resources.rot1.texture.baseTexture);// all rotations loaded var first = new PIXI.extras.AnimatedSprite(createFrames(resources["first"].texture.baseTexture)); .... } function createFrames(name) { var frames = []; for (var i = 0; i < 39; i++) { var rect = new PIXI.Rectangle(arr[i].frame.x, arr[i].frame.y, arr[i].frame.w, arr[i].frame.h); // stored in an array generated from json frames.push(new PIXI.Texture(name, rect)); } return frames; }

I have image with 10 different animations and 10 frames by each. On stage i have for example set of 15 diffeent objects with animation. From time to time i have to change set of animation to another.One way to do this is to delete objects and create them once more with needed sprite animation. var moveClip1 = createClip(5); createClip: function (symbolIndex) { var image = this.game.getImage('images.symbols'); var base = new PIXI.BaseTexture(image); var textures = []; for (j = 0; j < steps; j++) tempTexture = new PIXI.Texture(base, { x: this.game.symbolHeight * j, y: this.game.symbolWidth * symbolIndex, width: this.game.symbolHeight, height: this.game.symbolWidth }); textures.push(tempTexture); symbolClip= new PIXI.extras.AnimatedSprite(textures); } return (symbolClip) } Is it posible to change texture in existing object moveClip1 without recrete the object?

Hello! Allow me to get straight to the point: I'm looking to create pixel-perfect collision between two PIXI.Sprites. In other words, if two Sprites have overlapping pixels AND the overlapping pixels of both Sprites are not transparent in at least one coordinate, then a collision should be detected. I've been able to easily achieve this through the Textures of the Sprites, since I can simply use the "getImageData" function of the context to determine whether each pixel is transparent or not. The problem is, Sprites have more to them than that. They can be scaled and rotated. I'm looking for someway to check the collision of two sprites, even if they have been scaled, rotated, or had any other transformation preformed on them. In order to achieve this goal, I've thought of two things. Number 1 would be to somehow place the Sprite onto some canvas/context and then check that. Number 2 would be to somehow transform the coordinates of the pixel that's being checked to match the transformations of the Sprite itself. If anyone knows how I could do either, that would be wonderful. Of course, if there was just simply someway to "check" the transparency of the sprite relative to the screen somehow, that would be wonderful. Anyway, that's about it. Sorry if I'm being too... unspecific about things. I look forward to any answer someone could give me! ^^

hi. sometimes basetexture is failed to load? I don't kwow correct reason but it is happened if many images loaded at same time. specially it is happened with ios(iphone) so i wanna add reloading function. can you give me tips? i'm using pixi.js 3.0.11 yet.. thx a lot

hi i wanna check image(basetexture) loaded that load by altas... pixi call like under code var atlas_url = "data/packed/map_object.atlas"; PIXI.loader.add(map_name, atlas_url).load(onAssetsLoaded); // use callback var scope = this; function onAssetsLoaded(loader, res) { .... } i can't check basetexture loaded. how can i check loaded done..? thx

hi. ios is failed to load basetexture with many basetextures more than 5-10. and baseteuxtres size(capacity) is not small. it is big than 500kb have you every happened this on ios? thx.. best regards https://github.com/pixijs/pixi.js/issues/2758 Wrong shot that failed to load baseteuxtre Good shot that loaded basetexture

Wow, I cannot get past this error. What is causing this?

Hello, I am experiencing what I think is a quirk of WebGL's premultiplied rendering. My *.PNG sprites are getting rendered with slightly different RGB values than in the source file. However, a *.BMP sprite renders with perfect color, which supports my hypothesis that WebGL's premultiplied alpha is to blame. Basically, I just want to know how to disable premultiplied alpha for a texture in PIXI. Here is a screenshot (pull it up in Photoshop and sample the colors if you don't believe me): : Here is my source: var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); //Create a BMP sprite so we know what the colors are supposed to look like var bmp_spr = PIXI.Sprite.fromImage( 'test.bmp' ); stage.addChild(bmp_spr); //Create a PNG sprite to demonstrate the distorted colors var png_spr = PIXI.Sprite.fromImage( 'test.png' ); png_spr.position.x = 64; stage.addChild(png_spr); //Try to create a non-premultiplied PNG sprite to fix the problem var base_tex = PIXI.BaseTexture.fromImage( 'test2.png' ); base_tex.premultipliedAlpha = false; var tex = new PIXI.Texture( base_tex ); var nomult_spr = new PIXI.Sprite( tex ); nomult_spr.x = 128; stage.addChild( nomult_spr ); // start animating animate(); function animate() { requestAnimationFrame(animate); // render the container renderer.render(stage); }Test images are attached. Normally I'd be all for the speed boost that comes from premultiplying alpha, but it's ruining a shader I'm trying to write, where the tiny color differences butterfly effect out into huge glitches. I tried to disable premultiplied alpha in the source above but it didn't correct the colors, all it did was disable transparency. Thanks for any help! ---Sebastian test.bmp

How can i load a raw image and create a new BaseTexture and put it into the PIXI.BaseTextureCache before the create function is called ? I think this process can be do by the Phaser.Loader but i can't find a way to extend it to create a new loader function. if someone have any idea to do this, i really appreciate if you can help me