Jump to content

PIXI JS Cordova IOS issues rendering canvas


Recommended Posts

I am unable to successfully view a canvas element on rendered by pixi.js.  The element attaches fine in a browser and if I add a static canvas to the page it will also display properly in broswer and ios simulator when ran through cordova.  Has anyone else experienced this or found a work around?  The code is pretty straight forward:


onDeviceReady: function() {

    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 = new Container();

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


Link to comment
Share on other sites

Does the renderer actually attach?

Are you running the rest of your code before the `deviceReady` event fires? as in, are you trying to render to the renderer/stage before it is actually in the DOM? (I'm assuming this is a synchronous task for your web builds but has become async here, I'm assuming this actually is not the case as your variables are all local inside your function so there would be no way of triggering a render anyway).

Are you sure window.innerWidth and innerHeight are returning correctly? Maybe try hardcoding these to something like 800x600 to make sure you get something.

I've done a very similar method for programmatically adding a canvas to the page and then running stuff (although never specifically with PIXI) and had no issue punting it through cordova to produce a build.

Link to comment
Share on other sites

Yes, I've attempted hard coding the height and width of the renderer, but didn't have any luck there either.  Also moved the variables outside the object.  I'm not 100% sure about the async.  The device ready function event is where cordova/phonegap (tried it as well) directs you to put in the code according to the docs.  All this still works fine when launching the browser.

Link to comment
Share on other sites

This actually looks like it may be rendering, as if I run this in the browser the canvas renders as black in chrome, but renders transparent in safari.  Even using these settings when instantiating the object fails, i.e. black background in chrome and transparent in safari.  Seems PIXI can't apply these properly from within cordova as this works properly when serving straight from apache.  So maybe a scoping issue?

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});

Link to comment
Share on other sites

On 21/11/2016 at 5:57 PM, bretly said:

Seems PIXI can't apply these properly from within cordova as this works properly when serving straight from apache

Nah, its not that. PIXI doesn't care about anything other than the canvas implementation.

I really don't know what is causing this issue for you, Cordova (Phonegap), by default will use the system browser to do its stuff, although you could use wkwebview for iOS but, again, I still think its just the standard safari in there, certainly related to the DOM, I'm not sure how Crosswalk affects Android but I was pretty sure it was just running the latest version of chrome inside your app as a webview. 

When you say, run in a browser (i.e. safari), is that on-device? Emulating from your computer doesn't count, is it working perfectly being served into Safari/Chrome on your device?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...