使用cordova 和 pixi.js 无法在 iPhone 上呈现画布

Posted

技术标签:

【中文标题】使用cordova 和 pixi.js 无法在 iPhone 上呈现画布【英文标题】:Canvas won't render on iphone with cordova and pixi.js 【发布时间】:2016-11-20 14:42:53 【问题描述】:

在 iphone 上将画布附加到文档时遇到问题。运行时:cordova compile then:cordova 启动浏览器添加画布并呈现良好。使用 xcode 和 ios 模拟器,应用程序启动,但画布似乎永远不会被渲染。我在这里做错了吗?

onDeviceReady: function() 
    this.receivedEvent('deviceready');

    var Container  = PIXI.Container,
        autoDetectRenderer = PIXI.autoDetectRenderer,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite,
        Rectangle = PIXI.Rectangle,
        TextureCache = PIXI.TextureCache,
        Graphics = PIXI.Graphics,
        Text = PIXI.Text,
        ParticleContainer = PIXI.ParticleContainer,
        stage,
        renderer;

    stage = new Container();

    renderer = new autoDetectRenderer(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.view);


,

【问题讨论】:

【参考方案1】:

在该代码示例中,您从未真正呈现容器。检查 PIXI 示例,例如这里:https://pixijs.github.io/examples/#/basics/basic.js

所以你还需要调用: renderer.render(stage);

你很可能需要 requestAnimationFrame(functionToCall);当你有移动部件时,调用那里实际运行游戏。

【讨论】:

【参考方案2】:

与其他答案一样,您需要使用本机方法 requestAnimationFrame 递归调用 renderer.render(stage)。此外,Cordova 只是在 Web 视图中运行的网页,此示例将在任何 Web 浏览器中运行。

 onDeviceReady: function() 
     this.receivedEvent('deviceready');
    var Container  = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    Sprite = PIXI.Sprite,
    Rectangle = PIXI.Rectangle,
    TextureCache = PIXI.TextureCache,
    Graphics = PIXI.Graphics,
    Text = PIXI.Text,
    ParticleContainer = PIXI.ParticleContainer,
    stage,
    renderer;
    stage = new Container();
    renderer = new autoDetectRenderer(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.view);        
    // requestAnimationFrame will make gameLoop recursive
    function gameLoop() 
      // Loop this function 60 times per second
      requestAnimationFrame(gameLoop);
      //HERE: <-- the logic of your game or animation 
      renderer.render(stage);
     
   gameLoop(); 

,

有关requestAnimationFrame 的更多说明,请阅读以下链接https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

【讨论】:

以上是关于使用cordova 和 pixi.js 无法在 iPhone 上呈现画布的主要内容,如果未能解决你的问题,请参考以下文章

使用 Pixi.js 的里程表动画

如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?

用 pixi.js 画一个矩形

从 PIXI.js 中的同级或父 DOM 元素捕获鼠标事件

Pixi.js 中的自定义字体

Ionic 整合 pixi.js