2016-12-15 7 views
1

Cocoon内のcanvas + webviewエンジンでPIXI.WebGLRendererを試しても使用できないようです。ここでは簡単な例です: のiPhone5(iOSの10.2) のiPad2(iOSの9.3.5) HP 10のプラス(アンドロイド4.4.2)CocoonjsでPixieにCanvas + webviewエンジンでWebGLRendererを使用する方法

:私は上でこれをテストしてみたコクーンランチャーアプリで

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <script type="text/javascript" src="http://pixijs.download/release/pixi.js"></script> 
    <title>Simple Test</title> 
    </head> 
    <body style="background-color: #99ff99; margin: 0; padding: 0;" onload="runTest()"> 
<script> 
function runTest() { 
    var renderer = PIXI.autoDetectRenderer(500, 200); 
    document.body.appendChild(renderer.view); 
    var stageContainer = new PIXI.Container(); 
    var text = new PIXI.Text('renderer.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" }); 
    text.x = text.y = 50; 
    stageContainer.addChild(text); 
    renderer.render(stageContainer); 
} 
</script> 
    </body> 
</html> 

WebViewの+、(PIXI.WebGLRendererを意味する)すべての表示「レンダラ= 1」 を有するがキャンバス+、(PIXI.CanvasRendererを意味する)すべての表示「レンダラ= 2」 と

はそれがピクシーでのWebGLで動作するようにキャンバス+モードを取得することが可能です。 js?

私はまたしてautoDetectRendererラインを置き換えることにより、WebGLのようにレンダリングを強制的に試してみました:iPhoneとiPadのクラッシュにこの場合

var renderer = new PIXI.WebGLRenderer(500, 200); 

私コクーンランチャーを! アンドロイドでは、黒い画面が表示されます。

私はPixi.js v3.0.1でも同じ結果を試しました。

Pixian.jsでCocoonのCanvas +モードでWebGLを使用することはできますか? 助けていただきありがとうございます。ありがとうございました

答えて

1

最新のPixi.js(v4.2.3)では動作しませんでしたが、古いバージョン - v3.0.10のみで動作しました。それだけでPixi.js

の古いバージョンで動作するので、これは部分的にしか答えです

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script src="js/pixi-3.0.10.js"></script> 
    <title>Simple Test</title> 
    </head> 
    <body style="background-color: #99ff99; margin: 0; padding: 0;"> 
<script> 
function runTest() { 
    var renderer = new PIXI.WebGLRenderer(300, 100); 
    document.body.appendChild(renderer.view); 
    var stageContainer = new PIXI.Container(); 
    var text = new PIXI.Text('rrr.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" }); 
    text.x = text.y = 50; 
    stageContainer.addChild(text); 
    renderer.render(stageContainer); 
} 
document.addEventListener("deviceready", runTest, false); 
</script> 
    </body> 
</html> 

: キーはcordova.jsを追加し、ここでdocument.addEventListener("deviceready", runTest, false);

を使用していたことは、いくつかの更新されたコードです

私にとっては、webview +モードと比較して、うまくいきませんでしたので、キャンバス+を今放棄しています。また、私が作った様々なパフォーマンステストによれば、古いPixi.js v3.0.10もv4.2.3のパフォーマンスを飛躍的に上回っているようだ。私もそれに固執するように見える。

関連する問題