pixijs, how to distribute it?

[m.recupero]

hi everybody, 

I'm developing a browser game with pixijs, I have finished 90%. 

My problem is: as I distribute the game in the Apple Store or google play market. 

In this forum, I read that you use cocoonjs, but I don't want use it, because I have to change many things in the project (for example: canvas render, google font, etc...)

My game runs fine in chrome and firefox browsers (mobile and desktop) at 60 FPS. 

 

I tried to compile the project with apache cordova (PhoneGap), but it run at 12 FPS. This my question on stackoverflow:

http://stackoverflow.com/questions/22011274/why-performance-webgl-of-phonegap-is-different-from-firefox-or-chrome

 

I can not compile project with another embedded webview in phonegap, because it is very difficult, there is no documentation and is still unstable!!

chrmome webview for phonegap:

https://github.com/thedracle/cordova-android-chromeview

Firefox webview for phonegap:

https://wiki.mozilla.org/Mobile/Projects/GeckoView

 

Any idea?

Please give me some advice...sorry form my english. 

 

Marco.

[kuuuurija]

take a look at crosswalk, https://crosswalk-project.org/

[enpu]

There is also WebView in CocoonJS.

[nikolayku]

hi, i don't try by myself but hear that fast canvas plugin can help you.

look at here

[m.recupero]

Both FastCanvas and Crosswal can be a solutions!

I will try first Crosswalk because it relies on Chronium web browser.

 

Thanks.

[Prozi]

On 3/21/2014 at 8:37 PM, goldenratio said:

take a look at crosswalk, https://crosswalk-project.org/

I can confirm

Yesterday I moved (after about 2 days work) from standard android WebView to cordova crosswalk and I got like x3 performance yay

Thx people for advising this solution

[ivan.popelyshev]

Intel XDK, Crosswalk

[Gerente]

I have this same issue 4 years later (2018).

I''m trying apache cordova and PIXI render doesnt draw graphics. Any idea why?

[Gerente]

Should I use only canvas? I can see the square of 300x600 but it doesnt show any graphic or sprite.

  var renderer = PIXI.autoDetectRenderer(300, 600);
    renderer.root = new PIXI.Container();
    renderer.root.name = 'root'
    document.getElementsByTagName('body')[0].appendChild(renderer.view);


    var graphics = new PIXI.Graphics();
    graphics.position.set(0,0)
    graphics.beginFill(0xFF0000);
    graphics.drawRect(0, 0, 1, 1);
    graphics.endFill();
    renderer.root.addChild(graphics)


    renderer.render(renderer.root);    

[botmaster]

I had that problem before until I realized that despite nothing showing I was able to click on all buttons and interactive elements! Which meant everything was in there but not rendering. I fixed THAT problem by setting the rendereroptions property of 'transparent' to "notMultiplied". Would be nice if PIXI would let us know when it can't render correctly something ....

[Gerente]

Hi botmaster, 

 

you mean :  var renderer = PIXI.autoDetectRenderer(300, 600,{transparent:false}); ??

I just tried and still showing a weird transparent square at the right bottom when I add a graphic.

I dont see "notMultiplied" as a valid value for "transparent" param.

[botmaster]

Yeah it's not a valid value since it's supposed to be a boolean but that's how I fixed it anyway. The fix was posted by ivan on another thread where the user had a normal working app that was showing nothing on one browser only.

[Gerente]

I can't find the post, I saw "the light" with your answer but now I'm back to the darkness, very sad, even thinking to switch framework =(.

Mighty Ivan, I summon you! Please help!

[Gerente]

set the background blue to detect the render. That small transparent at the right bottom appears when I add a graphic. so weird.

I

 

 

[botmaster]

Here it is: 

 

[botmaster]

Also, each time I have a rendering problem of that nature I run all the pixi examples in the same browser to see if they show up, like that I can make a good comparison. If they show up and my stuff doesn't then I know I need to fix something but I also know it's doable. If even the pixi examples don't show up then I'm pretty much screwed.

[Gerente]

I'm doing a very basic test. Create  a Render and add a Rectangle, it works everywhere except with cordova.

so basically PIXI + CORDOVA doesnt work? that's sad. Ill try PHONE GAP and if doesnt work then its a PIXI issue

 

thanks botmaster for your help!

[botmaster]

Did you try to run the PIXI examples in there? That would give you your answer right away.

[Gerente]

Yes, what I did was copy this code into the cordova project and I still getting the same problem. It still showing that transparent square at the right bottom.

http://pixijs.io/examples/#/basics/basic.js

 

[Gerente]

I created a webview in android and I get the same problem.

I tried this and it works:

window.onload = function(){
    var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
}

 

so weird..

[Gerente]

Ok, I did some more test, and is not only PIXI that doesnt work.

The issue is when the android webview is too big, it draw the canvas, but it doesnt draw any graphic inside. I have not been able to figure out why it happen, but is related with the HEIGHT of the canvas, the width doesnt affect it.

[Gerente]

Ok, so it's an issue with the hardware acceleration in android

if you set it as false it works, but very slow, I need to find another solution.

 

<activity android:name=".MainActivity" android:hardwareAccelerated="false">

[Gerente]

yes, I found the issue!. its the emulator, it doesnt come with the last version of chrome. So, you test it on a real android device or full update your AVD! 

Im testing in a real android and it works fine!