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）是否可以让 canvas+ 模式与 Pixi.js 中的 WebGL 一起使用？

我还尝试通过将autoDetectRenderer行替换为以下内容来强制渲染器成为 WebGL：

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

在这种情况下，我在 iphone 和 ipad 上的 Cocoon Launcher 崩溃了！在android上，它只是显示一个黑屏。

我也尝试过 Pixi.js v3.0.1，结果相同。

那么，是否可以将 WebGL 与 Cocoon 的 Canvas+ 模式与 Pixi.js 一起使用？非常感谢任何帮助，谢谢

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

至于我，我现在要放弃 canvas+，因为与 webview+ 模式相比，我的工作显示出糟糕且不稳定的结果。另外，顺便说一句，根据我所做的各种性能测试，似乎旧的 Pixi.js v3.0.10 的性能也大大超过了 v4.2.3.. 所以看起来我也会坚持下去。

于 2016-12-15T17:53:44.980 回答