CODEWITHSUNDEEP
javascriptioscordovacanvaspixi.js
dragonly
dragonly

Reputation: 33

Canvas won't render on iphone with cordova and pixi.js

Having issues with canvas being attached to the document on iphone. When running: cordova compile then: cordova launch browser the canvas is added and renders fine. Using xcode and the ios simulator the app launches but it appears that the canvas never gets rendered. Am I doing something wrong here?

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);


},

Upvotes: 0

Views: 986

Answers (2)

Juan Picado
Juan Picado

Reputation: 1996

Like in the other answer, you need to call renderer.render(stage) recursively with the native method requestAnimationFrame. Furthermore, Cordova is just a web page running within a Web View, this example will run in any web browser.

 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();

},

For additional explanation about requestAnimationFrame read the following link https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Upvotes: 1

Hachi
Hachi

Reputation: 536

On that code example you never actually render the container. Check PIXI examples e.g. here: https://pixijs.github.io/examples/#/basics/basic.js

So you need to also call: renderer.render(stage);

And you will most likely need requestAnimationFrame(functionToCall); call there to actually run the game, when you have moving parts.

Upvotes: 1

Related Questions