Search the Community

Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance. My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas. My image path is an URL. My problem is: - the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears) - it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader Wish you have a nice day sir and stay safe canvas.html

Hello friends. I need a little help in my project. I have array of images with id and url. any part of those images can be rendered in different occasions, based on user filtering. I have custom resource manager which saves all downloaded images (or failed downloads) with id and resource returned by PIXI.Loader, and for each new image checks if texture is already available, if not adds id and url to Loader and loads. Now my problem is that image array itself is also user defined, so url's might be incorrect or duplicate. If there's two images (two different IDs) to be displayed and they have same url, I technically dont have them downloaded because I'm checking with id and they have different id, so I'm adding both to the Loader resource and load. I dont know how loader handles that but it throws this warning: BaseTexture added to the cache with an id [image url] that already had an entry Warning itself is not big of a problem, but I think loader still downloads the image twice and then tries to cache it, and then is this warning thrown. so I dont want download to be performed twice when I know that i already have a texture (or will have with different resource I guess). Can anyone please help me. I dont even know what can be the correct fix in this case, let alone how to do that

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 all, i'm having some troubles with loader and sprites.... I load all my general purpose sprites at begining without problems, they works fine, the problem appears when i try to load a new sprite when i press a button. I need to load a new "rotating planet skin" when a button is pressed. for my general purpose textures i load them like this.. var ef_circulo = []; var ef_transicion = []; const ef_energia = []; var textura_ef_circulo,textura_ef_transicion,textura_ef_energia; var ef_planeta = []; var textura_ef_planeta; const cargador = new PIXI.Loader(); cargador.add('circulo', 'img/ef_circulo.json') .add('transicion','img/efectos/transic.json') .add('energia','img/efectos/energia2.json') .load(efectos_cargados); function efectos_cargados() { // create an array to store the textures var i; for (i = 0; i < 74; i++) { textura_ef_circulo = PIXI.Texture.from('ef_circulo_' + (i) + '.png'); ef_circulo.push(textura_ef_circulo); } var explosion = capa_flotas.addChild(new PIXI.AnimatedSprite(ef_circulo)); explosion.anchor.set (0.5,0.5); explosion.pivot.set (0.5,0.5); explosion.gotoAndPlay(0); explosion.scale.set(1); explosion.rotation = (90*3.1416)/180; explosion.position.set (175, 35); explosion.animationSpeed = 0.4; for (i = 0; i < 25; i++) { textura_ef_transicion = PIXI.Texture.from('transicion_' + (i) + '.png'); ef_transicion.push(textura_ef_transicion); } transicion = sistemas.addChild(new PIXI.AnimatedSprite(ef_transicion)); transicion.scale.set(1); transicion.width =1024; transicion.height = 200; transicion.animationSpeed = 0.8; transicion.loop = true; // cargo las imagenes del efecto de energia for (i = 123; i > 0; i--) { //textura_ef_energia = PIXI.Texture.from('energia_' + (i) + '.png'); textura_ef_energia = PIXI.Texture.from('energia2_' + (i) + '.png'); ef_energia.push(textura_ef_energia); } } The previous code load some sprite textures for spaceships, stars.... Now i need to load 9 (for 9 planets on that star) new sprites depending on the star button pressed, and i'm trying this but didn`t work at all for (var i = 0; i < sistema_solar.planetas.length; i++){ if(sistema_solar.planetas[i].nom_jug.length != 0){ planetas[i] = new Planeta(...more data here,sistema_solar.planetas[i].img_planeta); } } function Planeta(some variables here,imagen_planeta) { ...more stuff here var loaderNumberNine = new PIXI.Loader(); //loaderNumberNine.add('planeta_g', 'img/sistema/p1.json'); loaderNumberNine.add('planeta_g', imagen_planeta); loaderNumberNine.load(function(loader, resources) { /*thats onload for you*/ var i; for (i = 0; i < 149; i++) { textura_ef_planeta = PIXI.Texture.from('p1_' + (i) + '.png'); ef_planeta.push(textura_ef_planeta); } }); ...more stuff here and i put the new sprite into a container. this.planet = cont_sistema.addChild(new PIXI.AnimatedSprite(ef_planeta)); this.planet.play(); this.planet.animationSpeed = 0.25; ...more stuff here } it works but not as espected... if i use loaderNumberNine.add('planeta_g', 'img/sistema/p1.json'); i alwais have the same planet skin if i use loaderNumberNine.add('planeta_g', imagen_planeta); where imagen_planeta is 'img/sistema/p1.json' or 'img/sistema/p2.json', or 'img/sistema/p3.json'.. it alwais load the first .json on the 9 sprites any help whould be much apreciated Edit: i forgot to mention i'm using PixiJS 5.3.6

Hello PIXI community! let image = PIXI.Sprite.from("imagePath"); I don't use loader for creating images and I pass this to a module where I need to get the real width of the image, but I get the width equal to 1 as I don't use loader (Hope I get this part right). So I used loader to get the real width but I got problems with passing the image to module as the image is used in setup function that is passed to loader. English is not my native language. Hope this makes sense)) So how do I create an image outside of the module and pass it to use it's width?

EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's necessary to create an XML file. After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? constructor($el, app) { this.app = app; this.title = $el; const loader = new PIXI.Loader(); loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => { this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "font", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.getPosition(); this.app.addChild(this.text); }); } Using `fontFamily: resources.font` instead returns the following error: FYI: I added the .fnt file to the appendix. font.fnt RL Unno.woff2

I'm trying to work out how to log asset byte sizes after load. e.g. something like this: PIXI.Loader.shared.add("bg", "img/bg.png") .on("progress", loadProgressHandler); function loadProgressHandler(loader, resource) { console.log(resource.size); } This possible?

Hello. My game loads many resources (100+); on specific PC occasional weird error happens: net::ERR_CONNECTION_RESET 200 OK for several files so loading abrupts. I failed to google what that error even means and every time it happens to different files and in 1 in 20 times game loads successfully. Errors I dealt with previously was 404 (Not Found) which was caused both by absent network or absent files, so I was just reloading the whole page hoping for network connection to recover. Anyway, error is an error, so failed files need to be recovered somehow, but I don't know how to do it yet. How can I know what files failed to load? Prints: Error: Failed to load element using: IMG Is there a way to know which file failed to load? How can I add failed file back to the loading bundle continuing the ongoing loading process? If sub-resource failed to load (for example, .png file of .json spritesheet) should I re-queue that sub-resource or it's parent? Thanks in advance.

I have a set of image textures produced from by loading an SVG dataURL with PIXI.loader. I need a fairly performant way to change the underlying data of these textures. The name of the texture has to remain the same. Any ideas?

Hi All, I am new to phaser and going through it and i came across state in phaser. I need to know if i can maintain my pervious state active in the background so that i can be able to handle assets loading in the active without getting caught in the Phaser.cache.getImage error. Thanks in advance,

Hi guys! New with PIXI and have some troubles with loading audio with PIXI.loader. startButton.on("pointerdown", function(){ changeLanguage('eng'); startAnimationBoard(); }); espButton.on("pointerdown", function(){ changeLanguage('esp'); startAnimationBoard(); }); function changeLanguage(lang){ if( lang == 'esp'){ sound.add('sceneLogo', './objects/mp3/esp/1.mp3') .add('scenePlay', './objects/mp3/esp/2.mp3') .add('sceneBalance', './objects/mp3/esp/3.mp3') .add('sceneHello', './objects/mp3/esp/4.mp3') .add('sceneInteractive', './objects/mp3/esp/5.mp3') .add('sceneAirport', './objects/mp3/esp/6.mp3') .add('sceneDownload', './objects/mp3/esp/7.mp3') .add('sceneData', './objects/mp3/esp/8.mp3') .add('scenePerson', './objects/mp3/esp/9.mp3') .add('sceneFinal', './objects/mp3/esp/10.mp3') .load(); } else if(lang == 'eng'){ sound.add('sceneLogo', './objects/mp3/eng/1.mp3') .add('scenePlay', './objects/mp3/eng/2.mp3') .add('sceneBalance', './objects/mp3/eng/3.mp3') .add('sceneHello', './objects/mp3/eng/4.mp3') .add('sceneInteractive', './objects/mp3/eng/5.mp3') .add('sceneAirport', './objects/mp3/eng/6.mp3') .add('sceneDownload', './objects/mp3/eng/7.mp3') .add('sceneData', './objects/mp3/eng/8.mp3') .add('scenePerson', './objects/mp3/eng/9.mp3') .add('sceneFinal', './objects/mp3/eng/10.mp3') .load(); } } Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms. Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all. Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets. Thank you! P.S. : iOs versions 10.1.x and 12.1.x

Hi everyone, In the obj file, when an object has multi-material, the obj file loader will create several meshes. I want to only create one mesh with multi-material, but got the wrong result: I attached the obj file and the new obj file loader I modified(objFileLoader_new.js ), can anybody help to have a look why it is wrong. It troubled me a whole day now. obj.rar

Hey, I got some scenes, which loading assets only needed in those, I would like to clear the cache out of the files when a new scene is started so that the memory is free again. But I can't find an example or something in the docs. I had a look at this.scene.cache.destroy(); But when I do this in a constructor: It throws an error that cache is not defined. Or at the first line in preload: it messes up the files that will be loaded afterward. Can anyone help me out regarding this? cheers

Hi, I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console: Debug: GET http://localhost:8081/dist/symbol_2 404 (Not Found) BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry addToCache @ BaseTexture.js:795 fromLoader @ Texture.js:478 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry addToCache @ Texture.js:508 fromLoader @ Texture.js:479 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry addToCache @ BaseTexture.js:795 My snippet: import * as PIXI from 'pixi.js' const symbols = [ { id: 0, img: PIXI.Texture.fromImage("symbol_1") }, { id: 1, img: PIXI.Texture.fromImage("symbol_2") }, { id: 2, img: PIXI.Texture.fromImage("symbol_3") }, { id: 3, img: PIXI.Texture.fromImage("symbol_4") } ]; export default class Symbol { /** * Generate random symbol tables * * @static * @param {number} reelsCount * @param {number} symbolsCount * @param {(symbolTables: Array<any>) => void} resolve * @memberof Symbol */ public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void { let symbolTables: Array<any> = new Array<any>(); for (let i = 0; i < reelsCount; i++) { let symbolTable: Array<any> = new Array<any>(); for (let x = 0; x < symbolsCount; x++) { let randomIndex: number = Math.floor(Math.random() * symbols.length); let id: number = symbols[randomIndex].id; let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img); symbolTable.push({id: id, img: sprite}); } symbolTables.push(symbolTable); } resolve(symbolTables); } } So, what's the wrong ? It's caching problem or? Thanks in advance.

How do I play animations created in the blender action editor? I'm trying to organize walk, run, idle, etc animations and start/stop them by name. Also is there a particularly good way to import the blender objects that don't have any world position when the game begins? I noticed there are many different ways to load things. Objects in this game are spawned in after a receiving a network message, so there's no pre-existing concept of a scene (or my brain just isn't used to thinking about scenes). Even the terrain itself is chosen by the server. Which loading strategy should I employ? Blender scene: Action editor from under the dopesheet: Loading and positioning the character (exported with blender/babylon exporter 5.6.4): BABYLON.SceneLoader.LoadAssetContainer("./", "blocky.babylon", this.scene, function (container) { console.log('CONTAINER', container) var meshes = container.meshes var materials = container.materials // manually position the object somewhere that i can see it when the game starts up let whatever = meshes[0] whatever.position.y = 21 whatever.position.z = 4 container.addAllToScene() // can i just get rid of this somehow? // would prefer something like scene.add(new BlockyEntity()), executed later }) When inspecting the loaded `container` object, none of the animations arrays are populated. There does appear to be a `container.skeletons[0]._ranges` that has properties that match the names of my animations (crazy, walk, walkdss, etc). I'm not sure how to play them. Here is the character (appears to be hovering on the last frame of one of one of the animations? or maybe this is just the pose it is in in blender not sure) Thanks

Hi all, I have just released Phaser Manifest Loader for those using webpack. I've been using this code in production for a while now, it makes it super easy to load assets via a simple manifest. Check it out! https://github.com/mattcolman/phaser-manifest-loader Cheers, Matt.

Hi, would like to propose some possible improvements for AssetsManager there are multiple tasks that can be added to manager, but I think would be nice to have general `addTask(task: AbstractAssetTask)` so custom tasks could be created and added to manager if needed. right now response in onSuccess can be just string or ArrayBuffer but I think it would be great to get back request object so there would be more control what to do on success. minor but I didnt found way to add mime types to loader, but that can be fixed on server side as well, so server always serves files with proper mime type I came across this when was trying to implement svg file loader task to load svg as document. Was quick to implement task but could not add it to mananger and it needed request.responseXML so had no acces to it For now used text file tasks and parse string using DomParser. So what other think about this ? Thanks

const atlasData = { // some data... } this.load.atlas("one", "one.png", atlasData); this.load.atlas("two", "two.png", atlasData); gets this error: File.js:557 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Function.File.createObjectURL (File.js:557) at ImageFile.onProcess (ImageFile.js:142) at LoaderPlugin.nextFile (LoaderPlugin.js:827) at ImageFile.onLoad (File.js:328) deleting either line works perfectly fine

currently thats how I am trying to load the level1 state js file into my current state, however when I try to call game.state.start('level1'); it fails to find the mentioned state. I am doing something wrong but unable to find any documentation to address this exact issue. Or should I just stick to including the state files in the script tags of the game html page?

I've read through just about all of this guide (https://github.com/kittykatattack/learningPixi). I think I have a grasp of how to switch stages/scenes. There's one part that doesn't make sense to me however. If I wanted to create a separate .js file for every class and every scene's code, what's the best practice for loading those files? I've seen examples where the index.html file just includes all of the scripts, but isn't that possibly a slow and/or bad experience? A previous flow I read about was loading the bare minimum (a background, logo, and loading graphic) and then loading all other images and javascript files. Is there a best practice to load these separate javascript files through the Pixi loader so the splash screen comes up instantly and show a loading bar while I pull in all these extra assets?

This is more a question about how people try to do things rather than a problem with PIXI per se. What I've found is, if I force the loading to fail (by turning off WiFi or similar) PIXI behaves as expected, an error event is fired, and then the game will play but with missing assets. The question: How do people gracefully handle the failure? Do you force the loader to start over? Push the error items to an array and reload? (I think this one is good, but there's a possibility that you could get caught up endlessly in the game retrying); Ignore it? (hey it's the internet, things break from time to time!) Create an error screen, which has a link for the player to start over? (this is probably the best option.) Thanks!

Howdy, Is there any way to customize how the blobs from textures in the GLTFLoader are treated? I'm running into an issue where the blobs are violating our content security policy because they are appended to our base url instead of the approved CDN the assets/textures are coming from. Let's say I'm pulling a GLTF asset via: let myAsset = assetsManager.addMeshTask("", "", "https://mycdn.com/static/gltf/", "my-asset.gltf"); So instead of: blob:https://myurl.me/24bde0c8-d576-4abb-a3f4-06a05b38b8f3 We get: https://mycdn.com/static/gltf/24bde0c8-d576-4abb-a3f4-06a05b38b8f3

I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch. I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling. Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched. Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in). What this means is that my app already has data urls for images and raw text or parsed DOM data for things like XML files. I don't need PIXI to make requests for these, but I do need PIXI to use that data. This leaves me with two questions: CreateJS will let me create Image objects from data urls. Is PIXI able to accept data urls when creating Textures or when making fromImage calls? CreateJS exposes a BitmapFont object. I can pass a png and fnt pair and get back an assembled bitmap font. I don't see an equivalent in PIXI. It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser. I don't need PIXI to make an XHR request to fetch the files. I just need it to accept the data I've already loaded and create the font. Is there a way to do this? Thanks.

I'm having some issues loading videos... I can get them load ok, but, as I've got a number of separate videos that I need to sequence together seamlessly (or as close as possible to) I'm preloading them, or trying to... ...but, despite the texture appearing to have loaded, there's a delay in starting playback. I've tried a number of things, but would welcome any ideas that anyone has to getting an accurate idea of how much is loaded? I did have an idea that I could load a video as a blob, but I couldn't find an example of loading an item as a blob and then converting it, any leads on that would be welcome.

Hi, I'm working on a game that may need to be playable on IE11 (ugh!) Having got my basic game now working, I've found that the sound is failing, with the error: Object doesn't support property or method 'addEventListener' It seems that pixi sound should work, but, it's not clear to me why this isn't happening for me... Any ideas?