Search the Community

I want to make my fish(fish_) can transform to another form (fishFly_) while jumping, and I wrote a function called "jump" to do so. But when I was trying to change the .visible of them, console gave me: Uncaught ReferenceError: fish_ is not defined at jump (game.js:142) //the line of "fish_.visible = true;" in "else statement" of "jump function" at t.fn (game.js:127) //which is the line of app.ticker at t.emit (TickerListener.ts:107) at e.update (Ticker.ts:479) at _tick (Ticker.ts:187) seems like I used the wrong way to change it. Can someone help me T_T p.s not native in English, Sorry for my poor English let Resources = PIXI.Loader.shared.resources, Container = PIXI.Container, AnimatedSprite = PIXI.AnimatedSprite; //put in loader and .load(setup functions) let fish = new Container; fish.jump = 0; function fishSetup(){ let fish_ = new AnimatedSprite(Resources['fishWalk'].spritesheet.animations["lagi3_2"]); fish_.anchor.set(0.5,1); fish_.x = 120; fish_.y = 660; fish_.zIndex = 31; fish_.animationSpeed = 0.15; fish_.gotoAndStop(2); fish.addChild(fish_); } function flyingFishSetup() { let fishFly_ = new AnimatedSprite(Resources['fishFly'].spritesheet.anmations["fishFly"]); fishFly_.anchor.set(0.5,1); fishFly_.x = this.fish_.x; fishFly_.y = this.fish_.y; fishFly_.zIndex = 32; fishFly_.animationSpeed = 0.25; fishFly_.play(); fish.addChild(fishFly_); } app.ticker.add(delta=>jump(delta)); function jump(delta){ if(fish.jump){ fish_.visible = false; fishFly_.visible = true; } else{ fish_.visible = true; fishFly_.visible = false; } } window.addEventListener("keydown",downHandler); function downHandler(e){ if(e.keyCode === 32){ console.log("jump key") fish.jump = 1; } }

So I wanted a loading animation in the starting phases of my game, like you do, but I am pretty new to pixi so I tried to follow some tutorials to create an animated sprite from a sprite sheet using the built in code in Pixi to extract an animation from a texture packer file, but no matter what I do, i get this message ( load is the animation id) Uncaught TypeError: Cannot read property 'load' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 usually there are 2 or 4 of these messages in the console, i saw another page said the issue was because pixi couldn't recognize the json file type because there was no extension, but mine has that, many examples had let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"].spritesheet; while I have let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"]; but with the .spritesheet added it makes things worse, saying this Uncaught TypeError: Cannot read property 'animations' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 I've looked at a ton of differen't tutorials and pages concerning glitches like mine, but none of them have told me anything of use, while my code seems to follow the structure of all the other pages, it still rejects my animation file, it could be because of the html, or the pixi file, but as I said I am completely new to this and I have no idea what could be wrong. index.html loadanim.json

I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.

Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either. // The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet} // containing the animation definitions: PIXI.loader.add("assets/spritesheet.json").load(setup); function setup() { let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet; animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]); } Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help. EDIT: I attached some pictures that showcase my issue.

I am trying to write a plugin for RPG Maker MV, which uses Pixi.js. The problem may be an incompatibility, but I have asked several people now and I just don't know where else to ask. The PIXI Version I tried it on was 4.5.4 Kreaturen.Kampfsystem.StarteKampf = function () { // Kampf Übergang for (var i = 1; i <= Kreaturen.Kampfsystem.KampfÜbergang.AnzahlFrames; i++) { Kampf_Anfang.frames.push(PIXI.Texture.fromImage(Kreaturen.Kampfsystem.KampfÜbergang.Pfad + i + '.png')); } Kampf_Anfang.anim = new PIXI.extras.AnimatedSprite(Kampf_Anfang.frames); console.log(' Kampf_Anfang.anim: ', Kampf_Anfang.anim); Kampf_Anfang.anim.animationSpeed = 0.5; Kampf_Anfang.anim.loop = false; Kampf_Anfang.anim.gotoAndPlay(0); // force reset frame Kampf_Container.addChild(Kampf_Anfang.anim); SceneManager._scene.addChild(Kampf_Container); Kampf_Anfang.anim.onComplete = function() { console.log(88888) Kreaturen.Kampfsystem.KampfAktiv = true; } } Everything works fine, the picture gets displayed but the animation just doesn't play... And because of that the .onComplete function never triggers Does anybody have an idea why this may occur?

I'm new to Pixi.js I did a code to make a simple 3 frame animatedSprite but it never leaves the first frame, if I do a gotoAndPlay(1) it goes to the desired frame and stops, and if I console.log the ticker it keeps on the frame as it were stopped but the playing property is true. Can't find the error anywhere. Somebody could help me out here? The code is below: var w = window.innerWidth, h = window.innerHeight, objs = {}, tex = {}, anim = {}, prop = w/16, props = { grass: [2060, 745, 16], trave: [1334, 471, 10], rede: [1309, 454, 9.8] }; var app = new PIXI.Application(w, h, {backgroundColor: 0x33aaff}); app.renderer.autoResize = true; resizeAll(); $('#div_canvas').append(app.view); objs['message'] = new PIXI.Text( "Carregando...", {fontFamily: "Arial", fontSize: 20, fill: "white"} ); objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.stage.addChild(objs['message']); app.loader .add('css/fonts/Quantico-Regular.otf') .add('img/grass.png') .add('img/trave.png') .add('img/rede.json') .on("progress", loadProgressHandler) .load(onAssetsLoaded); function loadProgressHandler(loader, resource){ objs['message'].text = "Carregando..."+(Math.round(loader.progress*100)/100)+"%"; objs['message'].position.set((app.screen.width/2)-(objs['message'].width/2), (app.screen.height/2)-(objs['message'].height/2)); app.renderer.render(app.stage); } function onAssetsLoaded() { app.stage.removeChild(objs.message); delete objs.message; tex['grass'] = app.loader.resources["img/grass.png"].texture; tex['trave'] = app.loader.resources["img/trave.png"].texture; tex['rede'] = app.loader.resources["img/rede.json"].textures; anim['rede'] = []; for(var i=0; i<3; i++){ anim['rede'].push(tex['rede']['rede0'+i+'.png']); } console.log(anim.rede); objs['grass'] = new PIXI.Sprite(tex['grass']); objs['grass'].anchor.set(0.5, 0.0); objs['grass'].position.set(app.screen.width/2, app.screen.height/2); objs['trave'] = new PIXI.Sprite(tex['trave']); objs['trave'].anchor.set(0.5, 0.8); objs['trave'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'] = new PIXI.extras.AnimatedSprite(anim.rede); objs['rede'].anchor.set(0.5, 0.8); objs['rede'].position.set(app.screen.width/2, app.screen.height/2); objs['rede'].animationSpeed = 1; objs['rede'].play(); resizeAll(); app.stage.addChild(objs['grass']); app.stage.addChild(objs['rede']); app.stage.addChild(objs['trave']); app.ticker.add(function() { console.log(objs['rede'].totalFrames, objs['rede'].currentFrame); }); } function resizeAll(){ var propW = w/16; var propH = h/9; if(propW>propH){ w = propH * 16; }else if(propW<propH){ h = propW * 9; } prop = w/16; for(var i in objs){ if(typeof props[i] !== 'undefined'){ objs[i].width = props[i][2]*prop; objs[i].height = (objs[i].width/props[i][0])*props[i][1]; } } app.renderer.resize(w, h); }

Hello there, What an amazing engine to render on webGL/Canvas! We are getting such a boost on performance thanks to this great library. Now, let's go to the point: We managed to partly migrate all our SVG animations to canvas using PixiJS. In order to do that, we had to parse our SVG so we could have a Container/Sprite/Textures structure that Pixi could manage and understand. We finally did it, and we have an Object like the onw you can see on the attached image: It is coming from the SVG you can find here: http://lab.pre.rtve.es/el-cuento/app/public/static/image/otto.svg So, what we have, is a lot of containers (what used to be groups in our SVG) and inside them, more Containers and finally Sprites containing Textures (what used to be paths). THE PROBLEM: We want to use Pixi's AnimatedSprite class so we can animate the mouth of our character, and when we do it, it works, but we lose the position of our Textures and they show at the upper left corner of our character. I can't see any position on this Sprites and Textures, so I guess they are just drawed where they are supposed to be and therefore when we try to animate them, we lose this relativeness to the parent and position. Any way to make them stay in place? Thank you very very much

I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position for each frame of animation for (var i = 0; i < array.length; i++) { var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h); frames.push(new PIXI.Texture(name, rect)); } return frames; } I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?

I am running a current animation on click. At the time of click, I start loading the next animation. On next click event, I fire the next animation, and hide current one with the code below. It is essential that the animation fires without delay. $("#canvas").on("click touch touchstart",function(){ if (firstRun){ current.gotoAndPlay(0); //current is an animated sprite loadNext(); console.log("first run"); firstRun=false; }else{ if (canRunNext){ next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); I noticed, that pixi doesn't prepare invisible object. There is a freeze between next.visible = true and next.gotoAndPlay(); How can I "prepare" the animation, so that it gets loaded and ready to go, immediately after goToAndPlay() is issued, but is invisible before that? this is the loadNext function. I stripped away some other functions that I think don't matter. I will gladly add them if needed. var firstRun = true; var infiniteLoader = PIXI.loader; function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); next.visible=true; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); app.stage.addChild(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); canRunNext=true; console.log("next loaded"); }); } }

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?