Why the ticker is not redrawing the stage?

[ellipticaldoor]

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?

 

[jonforum]

 

const myTicker = new PIXI.ticker.Ticker().add((delta) => {
  gameLoop(delta)
});

 

[ellipticaldoor]

Uhm, like this also doesn't work

 

import { utils, Application, Graphics, ticker } from 'pixi.js'
import { PixiConfig } from './constants'

if (module.hot) {
	module.hot.accept(() => {})
	module.hot.dispose(() => window.location.reload())
}

const kind = utils.isWebGLSupported() ? 'WebGL' : 'canvas'
utils.sayHello(kind)

const app = new Application(PixiConfig)
document.body.appendChild(app.view)

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 gameTicker = new ticker.Ticker().add((delta) => {
	gameLoop(delta)
})

const setup = () => {
	app.stage.addChild(stage())

	gameTicker.stop()
	gameTicker.add(delta => gameLoop(delta))
	gameTicker.start()
}

setup()

 

[ivan.popelyshev]

Ok, i see many closures, it seems that you know javascript operators. 

Why do you think pixi should update graphics element when you change "state.circle"? Pixi is not a telepathic reactive framework, its a renderer library.

[ellipticaldoor]

I pasted all the code just in case. Im starting to learn pixi and Im kind of lost.

Which is the recommended project structure? I want to make a tiling based game

[xerver]

All the ticker does is run the function you give it on some interval.

To render the scene you need to create a renderer and call the render method on it, passing in the scene you wish to render. Application does this for you.

I'd expect your OP to render a circle that does not move. Is that what you get?

[Gerente]

This might help you to start:

https://jsfiddle.net/vwcns1qk/4/

[ellipticaldoor]

I just figured out reading the docs, thanks for the help.