Question

无论我尝试什么，我都无法在Cocoon中使用canvas + webview引擎来使用PIXI.WebGLRenderer。这是一个简单的例子：

case "radio":
  if ($(".gender:checked").length == 0)//no radio checked.
    errorTag.html("Gender cannot be blank.");
  else
    errorTag.html("");
break;

使用Cocoon Launcher应用程序，我测试了这个： iPhone5（iOS 10.2） iPad2（iOS 9.3.5） HP 10 Plus（android 4.4.2）

使用webview +，所有显示“renderer = 1”（表示var serialized= $('.form-inline').serializeArray(); console.log(serialized); -> Array[ Object, Object]）但是使用canvas +，所有显示“renderer = 2”（表示serialized）是否可以使用canvas +模式在Pixi.js中使用WebGL？

我还尝试通过将<!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>行替换为：

来强制渲染器成为WebGL

PIXI.WebGLRenderer

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

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

那么，使用带有Pixi.js的Cocoon Canvas +模式的WebGL是否可行？任何帮助非常感谢，谢谢

Answer 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 ......所以看起来我也会坚持使用它。

如何让Cocoonjs的Pixijs使用带有canvas + webview引擎的WebGLRenderer

1 个答案: