1

私はlimeJSを使用して、limeJSにGUIを配置する最良の方法を見つけようとしています。より良い説明は次のとおりです。

「SceneWithGui」と呼ばれるクラスと「GuiOverlay」と呼ばれるクラスの 2 つのクラスを作成しました。私の意図は、「SceneWithGui」が「lime.Scene」から継承し、プロパティと 2 つのメソッドを追加することです。

  • guiLayer (GuiOverlay オブジェクト)
  • setGuiLayer
  • getGuiLayer

次のように：

//set main namespace
goog.provide('tictacawesome.SceneWithGui');

//get requirements
goog.require('lime.Scene');
goog.require('tictacawesome.GuiOverlay');

tictacawesome.SceneWithGui =  function() {
    lime.Node.call(this);

    this.guiLayer = {}; 
};
goog.inherits(tictacawesome.SceneWithGui, lime.Scene);

tictacawesome.SceneWithGui.prototype.setGuiLayer = function (domElement){
    this.guiLayer = new tictacawesome.GuiOverlay(domElement);
};

tictacawesome.SceneWithGui.prototype.getGuiLayer = function (){
    return this.guiLayer;
};

「GuiOverlay」の意図は、シーンまたはディレクターのサイズが変更されたときに DOM 要素を保持することです。そのために、「lime.Node」から継承しただけで、すでに設定されているものであることを願っています。私のコード:

//set main namespace
goog.provide('tictacawesome.GuiOverlay');

//get requirements
goog.require('lime.Node');

tictacawesome.GuiOverlay = function(domElement){
    lime.Node.call(this);
    this.setRenderer(lime.Renderer.DOM);
    this.domElement = domElement;
};

goog.inherits(tictacawesome.GuiOverlay, lime.Node);

そして、それが基本的にすべてのアイデアです。視覚化を改善するために、使用例を次に示します。

//set main namespace
goog.provide('tictacawesome.menuscreen');

//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Sprite');
goog.require('lime.Label');
goog.require('tictacawesome.SceneWithGui');

tictacawesome.menuscreen = function(guiLayer) {
    goog.base(this);
    this.setSize(1024,768).setRenderer(lime.Renderer.DOM);

    var backLayer = new lime.Layer().setAnchorPoint(0, 0).setSize(1024,768),
        uiLayer = new lime.Layer().setAnchorPoint(0, 0).setSize(1024,768),
        backSprite = new lime.Sprite().setAnchorPoint(0, 0).setSize(1024,768).setFill('assets/background.png');

    backLayer.appendChild(backSprite);
    this.appendChild(backLayer);    

    lime.Label.installFont('Metal', 'assets/metalang.ttf');

    var title = new lime.Label().
        setText('TicTacAwesome').
        setFontColor('#CCCCCC').        
        setFontSize(50).
        setPosition(1024/2, 100).setFontFamily('Metal');    

    uiLayer.appendChild(title);

    this.appendChild(uiLayer);

    this.setGuiLayer(guiLayer);
};

goog.inherits(tictacawesome.menuscreen, tictacawesome.SceneWithGui);

コード上ではすべてき​​れいに見えますが、機能しません (シーンはもう表示されません)。Chrome コンソールで表示されるエラーは次のとおりです。

キャッチされていない TypeError: 未定義の director.js:301 のプロパティ 'style' を読み取れません

キャッチされていない TypeError: 未定義のプロパティ 'transform_cache_' を読み取ることができません

私は JS の経験があまりないので、見つけた唯一の手がかりは、「tictacawesome.menuscreen」が「goog.base(this)」に到達したときに発生するということです。

更新:コードをいじった後、(この編集の前に) 以前に抱えていた問題を解決することができ、今では上記の問題に出くわしました。に達するdirectior.js:301と、ラインはscene.domElement.style['display']='none';です。scene存在しますが、scene.domElementしません。どういうわけか、私の guiOverlay で domElement を台無しにしましたか?

何か案は？デザインに明らかな欠陥はありますか? 私は正しい道を進んでいますか？

ありがとう。

4

1 に答える 1

0

あなたの SceneWithGui はライムを拡張します。シーンがライムを呼び出します。ノード.call(this); SceneWithGui で。

SceneWithGui のコードは次のようになります。

//set main namespace
goog.provide('tictacawesome.SceneWithGui');

//get requirements
goog.require('lime.Scene');
goog.require('tictacawesome.GuiOverlay');

tictacawesome.SceneWithGui =  function() {
    lime.Scene.call(this);//This was lime.Node.call(this);

    this.guiLayer = {}; 
};
goog.inherits(tictacawesome.SceneWithGui, lime.Scene);

tictacawesome.SceneWithGui.prototype.setGuiLayer = function (domElement){
    this.guiLayer = new tictacawesome.GuiOverlay(domElement);
};

tictacawesome.SceneWithGui.prototype.getGuiLayer = function (){
    return this.guiLayer;
};

その行で var scene = newlime.Scene() ブレークポイントを使用して通常のシーンを作成し、それにステップインすると、非常に迅速に見つけることができます。

Scene.js に移動し、lime.Node.call(this); にブレークポイントを設定します。

その後、scene = new tictacawesome.menuscreen(); を作成するときに気付くでしょう。そのブレークポイントがヒットしないこと。

于 2013-05-08T02:33:03.553 に答える