Sign in to follow this  
m.recupero

pixijs, how to distribute it?

Recommended Posts

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:


 

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:


Firefox webview for phonegap:


 

Any idea?

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

 

Marco.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ....

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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">

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.