Question

我实际上正在尝试使用Pixi.js引擎开发一个小型浏览器游戏。

我希望它有一个真正的架构，所以我使用早午餐服务器（带咖啡脚本）。

我想重现示例1（http://www.goodboydigital.com/pixijs/examples/1/）。

我正在使用一个名为Game的对象。 App.init（）调用Game.init（）。

Game.coffee：

Game =
w: null
h: null
man: null
stage: null
renderer: null

init: ->
    @w = 300
    @h = 400

    @stage = new PIXI.Stage( 0x66FF99 )
    @renderer = new PIXI.WebGLRenderer(@w, @h)

    document.body.appendChild( @renderer.view )     

    @man = new PIXI.Sprite( PIXI.Texture.fromImage('../images/bob.png') )

    @man.anchor.x = 0.5
    @man.anchor.y = 0.5

    @man.position.x = @w/2
    @man.position.y = @h/2


    @stage.addChild( @man )
    console.debug 'Man created'

    @update()

    return 

update: ->
    requestAnimFrame( @update() )

    @man.rotation += 0.1

    if @stage.renderable then console.debug 'we can render !'
    else 'we can not render !'

    @renderer.render( @stage )

    return

module.exports = Game

但是当我尝试运行时，我会在控制台上看到它：

Man created ! 
Uncaught RangeError: Maximum call stack size

它说它来自我定义更新功能的行。我知道requestAnimFrame行有一些东西可以看，但我不知道为什么。

我对动画和咖啡脚本甚至是对象都很陌生。

所以，如果你能帮助我解决我的问题，那就太好了。

Answer 1

在update函数中，您正在调用@update()，这会导致堆栈溢出。函数requestAnimFrame期望回调函数作为参数：

requestAnimFrame @update

您应该在init函数中使用相同的行。

与问题无关，但这可能会对您有所帮助：

关于你的coffeescript代码的一些提示：

每次都不需要返回，最后一行自动变为返回。如果您没有使用返回值，则明确返回没有意义。
代码：if @stage.renderable then console.debug 'we can render !' else 'we can not render !'可能无法正常工作，因为console.debug仅在@stage.renderable评估为true时调用，否则，您只会{ {1}}代码中的字符串，它不执行任何操作。您可能希望实现的目标是'we can not render !'
虽然这种表示法是正确的，但coffeescript有classes，我建议你使用它，而不是创建对象。
如果您不确定咖啡代码的作用，请使用coffeescript official page上的console.debug if @stage.renderable then 'we can render !' else 'we can not render !'标签。或者使用try coffeescript并在本地查看。如果您正在使用编辑器，例如sublime，atom或任何IDE，例如WebStorm，则他们都可以选择直接以javascript格式预览coffeescript代码。

requestAnimFrame Stack Overflow PIXI js

1 个答案: