David Higuita Posted July 23, 2017 Share Posted July 23, 2017 Hello, I am developing a game, and in a parte o this I need move and sprite and after some events move many sprites, but using app.tocker.add doesn't work In a first part I used this code to move a box appearBoxOrigin() { let counter = 0; this.app.ticker.add(() => { if (counter === 35) { counter = 0; this.app.ticker.stop(); this.addInteractiveImagesToOriginBox(); this.appearBoxHighLow(); } else { this.Boxes.origin.sprite.x -= 10; counter += 1; } }); } Afer I used this another code to move another sprite, but code doesn't work, doesn't show error, only doesn't run, I don't know if is because I use stop function to stop the animation. I'd like know How can I use ticker to make animation, how can I start and stop, and really I don't understand how make animations, so I use this counter but making essay and error but I'm not sure. this.app.ticker.add(() => { if (counter === 0) this.app.ticker.start(); if (counter === 35) { counter = 0; this.app.ticker.stop(); this.appearLoftSoftBoxes(); } else { this.Boxes.targetHigh.sprite.x -= 10; this.Boxes.targetLow.sprite.x -= 10; /* this.interactiveImages.map((image, index) => { this.interactiveImages[index].setPosition( { x: this.interactiveImages[index].x - 1, y: this.interactiveImages[index].y }, ); return null; }); */ counter += 1; } console.log('ticker move images'); }); But my variable this.interactiveImages (a class) seem like render again and show me an error on the constructor of these variables. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 24, 2017 Share Posted July 24, 2017 var myTween = () => { if (counter == 0) this.app.ticker.remove(myTween); //... } this.app.ticker.add(myTween, PIXI.UPDATE_PRIORITY.NORMAL); You can omit update priority, its NORMAL by default, i just want you to know that you can specify order of animation handlers. Please clone pixijs from github and explore it when you find something you dont understand in docs. Sources are your best friend. For example, Application: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js David Higuita 1 Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 24, 2017 Author Share Posted July 24, 2017 @ivan.popelyshev Thank you for the answer, I'll test it on a moment, so I have reviewed the source, but I don't understand somethings but is great. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 24, 2017 Author Share Posted July 24, 2017 @ivan.popelyshev I made what you tell me and if I want when finish current animation (myTween) start another animation doesn't start, and I don't know if is for the remove, and I have tried removing that function and only call another animation and it fails. initFrogAnimation() { let counter = 0; let frames = 0; const animation = () => { if (frames === 12) { this.app.ticker.remove(animation); this.moveFrog(); } if (counter === 20 && frames < 13) { counter = 0; frames += 1; this.Frog.choose(frames); } else { counter += 1; } }; this.app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL); } moveFrog() { let counter = 0; let motion = 0; const animation = () => { if (motion === 20) { this.app.ticker.remove(animation); } else if (counter === 5) { this.Frog.sprite.x -= 5; this.Frog.sprite.y += 1; counter = 0; motion += 1; } else { counter += 1; } }; this.app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL); } What is wrong? I have readed source but I can't solve my questions. Thanks again Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 24, 2017 Share Posted July 24, 2017 this should work.If it doesnt, try "let" instead of const may be? Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 24, 2017 Author Share Posted July 24, 2017 I changed const to let and doesnt work, I don't know why Thanks for help Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 24, 2017 Share Posted July 24, 2017 It looks correct. I cant debug it, well, because, i dont have your demo Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 25, 2017 Author Share Posted July 25, 2017 Perfect, so like this is a thing of the job I can't share it, but I don't know if you know where is an example with one of these cases to watch how are many animations on an app. I'll make a similar demo like the job code and share it with you. Thank you. Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 25, 2017 Author Share Posted July 25, 2017 @ivan.popelyshev Thanks for all, I tried with next code and worked fine, but in my game structure doesn't work fine.I want to ask you, What is the best way to make the game using classes? I mean, separate sprites by classes and that each one get on its constructor another sprites to use them and apply on them animations. import * as Pixi from 'pixi.js'; import './styles.scss'; const initConfig = { antialias: false, transparent: true, resolution: 1, }; const app = new Pixi.Application(window.innerWidth, window.innerHeight, initConfig); document.querySelector('.pixi-container').appendChild(app.view); // sprites let Frog; const rotateAnimation = () => { let counter = 0; let motion = 0; const animation = () => { if (motion === 25) { app.ticker.remove(animation); } else if (counter === 5) { Frog.rotation += 0.1 * 0.005; motion += 1; counter = 0; } else { counter += 1; } }; app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL); }; const randomMotion = () => { let counter = 0; let motion = 0; const animation = () => { if (motion === 20) { app.ticker.remove(animation); rotateAnimation(); } else if (counter === 5) { Frog.x += 10; Frog.y += 5; motion += 1; counter = 0; } else { counter += 1; } }; app.ticker.add(animation, Pixi.UPDATE_PRIORITY.NORMAL); }; Pixi.loader .add('frog', './assets/Images/frog.jpg') .load(() => { Frog = new Pixi.Sprite(Pixi.loader.resources.frog.texture); app.stage.addChild(Frog); app.renderer.render(app.stage); // animations randomMotion(); }); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 25, 2017 Share Posted July 25, 2017 Are there any errors in console? Quote Link to comment Share on other sites More sharing options...
David Higuita Posted July 25, 2017 Author Share Posted July 25, 2017 With this new structure works fine. I changed my structure, and now is working, now I must solve how can I add to an animation fileset, so that was a real problem Thank you Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 26, 2017 Share Posted July 26, 2017 I advice you to use https://greensock.com/1-20-0 , however i dont know how to make it work with pixi ticker, it works in it sown independent loop, I havent look into it yet. David Higuita 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.