Search the Community

I am working on image corousal (Image slide). I have two images in two different container under main container. Canvas size is 270* 270. So two containers are set in a position of -270, 0. When user starts slide right animation, I will start ticker and will stop until second container reaches to x coordinate '0'. this.appRenderer.ticker.add(delta => this.tickSlideRight(currentSlideNumber,delta)); // ticker right slide tickSlideRight(currentSlideNumber,delta){ try{ this.imageBaseContainer[currentSlideNumber].x += 1 + delta; if(this.imageBaseContainer[currentSlideNumber].x >= this.appRenderer.screen.width) { console.log(this.imageBaseContainer[currentSlideNumber].x, this.appRenderer.screen.width); this.appRenderer.ticker.stop(); } }catch(ex){ alert(ex.message); //TO-DO } } Can anybody helps me to give duration for ticker within container slide should be happend.

Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js. So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site. Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started. See this code (https://www.pixiplayground.com/#/edit/S~1QvhfSNDyACDvb0nkfc) It's a simple code for a line chart. 1. Add a basic PIXI container 2. Draw the first line with 4 dots. 3. Add next line every second using PIXI ticker and Change line x position. It works nicely at the moment But about 2 minutes later, the browser is crashed. I don't know why and how can I fix it. Help me!

import { utils, Application, Graphics } from 'pixi.js' import { PixiConfig } from './constants' const kind = utils.isWebGLSupported() ? 'WebGL' : 'canvas' utils.sayHello(kind) const state = { circle: { x: 0, y: 0} } const stage = () => { const graphics = new Graphics() graphics.lineStyle(0) graphics.beginFill(0xFFFF0B, .5) graphics.drawCircle(state.circle.x,90,60) graphics.endFill() return graphics } const gameLoop = delta => { state.circle.x += 1 + delta } const setup = () => { const app = new Application(PixiConfig) document.body.appendChild(app.view) app.stage.addChild(stage()) app.ticker.add(delta => gameLoop(delta)) } setup() Hi, I recently started to learn PIXI and now Im playing with animations using the ticker. This code actually draws a circle and I can se gameLoop() is being called and updating state.circle.x though it looks like it not redrawing the stage. What Im missing?

What is the difference between PIXI.ticker.shared.elapsedMS and the deltaTime in ticker.add(function (deltaTime) { renderer.render(stage); }); The elapsedMS returns 6.94444444444 the deltaTime returns 0.416666666 I don't see the relation. Thanks

Hello, why the shared ticker is automatically initialized when PIXI lib is included??, should not be started manually? https://jsfiddle.net/y7hu9pu5/1/ What I understand between a PIXI.App and Renderer is that the App includes the Renderer, the Ticker and the first node. So if I use PIXI.autoDetectRenderer is because I just need a renderer and there is no reason to start the ticker unless I ask for it. PIXI.ticker.shared.add(function(dt) { console.log('tick',dt) }) Thanks

Hello, I have a PIXI app with many child (in a tree structure). I need to update only child that contains the method "update". There is any logic inside PIXI for this or I would need to add each of those object in the shared.ticker? I did this, but there could be a better way that could allow me to remove the ticker listener if I need to. THIS IS NOT FOR SPRITE ANIMATIONS, it's mostly to change objects position https://jsfiddle.net/32ce1rcw/2/ Thanks.

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.

Hey guys sorry if this is a noob question I am new to pixi js and game development. I am trying to split up my game logic and animations into two different tickers. I want my animations to run at 60fps where my game logic can run at around 15 fps. I was wondering if there was a way to slow down the ticking rate of the tickers in order to achieve this affect. Thanks!

In createjs you do something like this: createjs.Ticker.addEventListener("tick", handleTicker); How would u do it for PIXI? I tried this but this didn't work. PIXI.Ticker.addEventListener("tick", handleTicker); If you could help me thanks.