enchant.jsではcanvasとWebGLを使ってゲームを作れますが、
この二つを同時に使ったゲームも作る事が可能です。
その際の手順と注意点をまとめます。
##gl-matrixのバージョン
JavaScript向け行列計算ライブラリgl-matrixのバージョンが新しすぎる場合、
gl.enchant.jsが動作しません。
1.3.7系で動作を確認しています。同系はgitHubのwise9/enchant.js/libsから得られます。
##pushSceneしない
内部描画の都合上、起動時のcurrentSceneを外してしまうとWebGLの描画が停止します。
これを回避するためには、SceneではなくGroupを使ったスプライト管理が推奨です。
##プラグインの読み込み順序
Coreクラスを上書きしている関係で、一部のプラグインの読み込み順序が非可換です。
9leap投稿のためのAPIが必要な場合は、nineleap.enchant.jsをgl.enchant.jsより先に読み込んでおく必要があります。
example
<script type="text/javascript" src="./gl-matrix-min.js"></script>
<script type="text/javascript" src="./enchant.js"></script>
<script type="text/javascript" src="./nineleap.enchant.js"></script>
<script type="text/javascript" src="./gl.enchant.js"></script>
<script type="text/javascript" src="./main.js"></script>
##そのほか
WebGL内のテクスチャにCanvasを用いる場合は、SceneTexture.gl.enchant.jsが利用できます。（宣伝）
##同時利用のサンプル
sample.html
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./gl-matrix-min.js"></script>
<script type="text/javascript" src="./enchant.js"></script>
<script type="text/javascript" src="./gl.enchant.js"></script>
<script type="text/javascript" src="./primitive.gl.enchant.js"></script>
<script type="text/javascript">
enchant();
var MyClass = {};
MyClass.COLOR1 = "#1f8f76"; //初期色
MyClass.COLOR2 = "#ff3333"; //反応色
MyClass.COLOR3 = "#ffcc33"; //touchBG
MyClass.Cube = enchant.Class.create(enchant.gl.primitive.Cube,{
initialize: function(scale, color){
enchant.gl.primitive.Cube.call(this, scale);
this.mesh.setBaseColor(color);
this.mesh.texture.ambient = [0.4, 0.4, 0.4, 1];
this.mesh.texture.diffuse = [0.7, 0.7, 0.7, 1];
this.mesh.texture.specular = [0.7, 0.7, 0.7, 1];
this.addEventListener('enterframe', function(){
this.loop();
});
},
loop: function(){
this.rotationApply(new Quat(0, 1, 0, Math.PI/180));
}
});
var set2d = function(){
var core = enchant.Core.instance;
//新しいSceneクラスではなくcurrentsceneを使用する
var scene = core.currentScene;
core.currentScene.backgroundColor = null;
var group = new Group();
scene.addChild(group);
var t = new Label("");
t.x = 200;
t.y = 100;
t.font = "32px sans bold";
t.color = MyClass.COLOR2;
t.text = "TOUCH";
t.addEventListener('touchstart', function(e){
this.color = MyClass.COLOR1;
//backgroundcolorの設定でScene3dは不可視になる。
core.currentScene.backgroundColor = MyClass.COLOR3;
})
t.addEventListener('touchend', function(e){
this.color = MyClass.COLOR2;
//nullの代入で背景は復元できる。
core.currentScene.backgroundColor = null;
})
group.addChild(t);
}
var set3d = function(){
//WebGLシーンの宣言
var scene3d = new Scene3D();
//カメラの宣言と設定
var camera = scene3d.getCamera();
camera.x = 10;
camera.y = 0;
camera.z = 0;
camera.centerX = 0;
camera.centerY = 0;
camera.centerZ = 0;
camera.upVectorX = 0;
camera.upVectorY = 1;
camera.upVectorZ = 0;
//光源設定
var dLight = new DirectionalLight();
dLight.color = [1.0, 1.0, 1.0];
var aLight = new AmbientLight();
aLight.color = [1.0, 1.0, 1.0];
scene3d.backgroundColor = [0.1, 0.2, 0.25, 1];
scene3d.setDirectionalLight(dLight);
scene3d.setAmbientLight(aLight);
//立方体を表示
var c =new MyClass.Cube(1, MyClass.COLOR2);
c.x = 0;
c.y = 0;
c.z = 0;
//射影座標のタッチ判定時に色を変える
c.addEventListener('touchstart', function(e){
this.mesh.setBaseColor(MyClass.COLOR1);
})
c.addEventListener('touchend', function(e){
this.mesh.setBaseColor(MyClass.COLOR2);
})
scene3d.addChild(c);
}
window.onload = function(){
var core = new Core(512, 512);
core.onload = function(){
set2d();
set3d();
};
core.start();
}
</script>
<style type="text/css">
body{
margin: 0;
}
</style>
</head>
<body>
</body>
</html>