Search the Community
Showing results for tags 'ticker'.
-
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.