| 内容 |
|
| ゲーム ループを作成します。 | HTML を拡張します。 |
応答性の高いレイアウト
このチュートリアルは、java スクリプトの設定を使用して応答性の高いレイアウトを作成する方法を示します。ライブラリに 2 つのボックスを追加します。赤と緑を作る。これらのボックスは単なる例です。任意の図形またはオブジェクトを使用できます。
エディターに、ボックスを追加します。
左と右の側面を埋めるので、ボックスを配置します。それらの周囲に境界線をまま。
これは今、左と右の側面上のコンテンツを含む web ページの例です。デスクトップ web ブラウザーまたはランドス ケープ モードで携帯電話上の罰金になります。残念ながら、このレイアウトはポートレート モードでうまく動作しません。いずれか、2 つのボックスは小さなに合わせて、または、画面いっぱいに拡大縮小する必要がありますを切り、箱の側面。
このような状況は、応答性の高いレイアウトが必要です。ポートレート モードでは、他の上に 1 つのボックスを移動してください。これを行うに、JavaScript を使用してボックスを移動する必要があります。これをオフにすることを意味します 'タイムラインを使用します。' ボックスの設定、'スクリプト ID'。
映画の境界の外側にボックスを移動するために、ムービーのプロパティ内のクリップをオフにする必要があります。
ボックスを配置する最適な場所は、'サイズ変更時' 映画イベント。我々 が必要な関数は、GetLeft、GetTop、GetWidth と GetHeight。これらの関数は、web ブラウザーまたは映画の座標を使用してデバイスの境界を与えます。クリップをオンにすると、これらの値は、映画の境界を返します。'None' を使用している場合は、映画のスケール、GetLeft と GetTop は常に 0 を返します、無視することができます。まず左側を埋める 1 つそして右側を塗りつぶします、他の 2 つのボックスを配置することができます。
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
次に、サイズ 10 の枠線を追加します。この 10 の値はピクセル単位で必ずしも、映画の同じスケールであります。映画を使用するすべてのピクセルは 'None' をスケールします。
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
最後に我々 は、web ブラウザーまたはデバイスの幅が高さよりも小さいかどうかを参照してくださいにテストします。それが起こるとき、ボックスを垂直方向に再配置します。
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
今、あなたは見ることができる、プレーヤーのサイズを変更する場合、2 つのボックスは自動的に彼ら自身を手配します。これら 2 つのボックスは、他の図形やオブジェクトを簡単に交換できます。次の使用例より複雑なレイアウトを処理するために拡張できます。
| ゲーム ループを作成します。 | HTML を拡張します。 |