1

何を試しても、Cocoon 内の canvas+ Webview エンジンで PIXI.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>

Cocoon Launcher アプリを使用して、これをテストしました: iPhone5 (iOS 10.2) iPad2 (iOS 9.3.5) HP 10 Plus (android 4.4.2)

webview+ では、すべて「renderer=1」と表示されます (これは を意味PIXI.WebGLRendererします)。しかし、canvas+ では、すべて「renderer=2」と表示されます (これは を意味しますPIXI.CanvasRenderer)。

autoDetectRenderer行を次のように置き換えて、レンダラーを強制的に WebGL にすることも試みました。

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

この場合、iPhone と iPad の Cocoon Launcher がクラッシュします。Androidでは、黒い画面が表示されるだけです。

Pixi.js v3.0.1 でも試してみましたが、同じ結果が得られました。

では、Pixi.js を使用して Cocoon の Canvas+ モードで WebGL を使用することは可能ですか? どんな助けでも大歓迎です、ありがとう

4

1 に答える 1

1

私はなんとかそれを動作させましたが、最新の Pixi.js (v4.2.3) ではなく、古いバージョン - v3.0.10 のみでした。重要なのは、cordova.js を追加して、document.addEventListener( "deviceready", runTest, false );

更新されたコードは次のとおりです。

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

古いバージョンの Pixi.js でのみ機能するため、これは部分的な回答にすぎません。

私に関して言えば、webview+ モードと比較して動作が悪く不安定な結果を示したため、今のところ canvas+ を放棄しています。また、余談ですが、私が行ったさまざまなパフォーマンス テストによると、古い Pixi.js v3.0.10 は v4.2.3 のパフォーマンスも大幅に上回っているようです.

于 2016-12-15T17:53:44.980 に答える