0

HTML 5 と Impact は初めてです。HTML 5、Javascript でプログラミングを開始します。Impact は Javascript 用の最高の 2D エンジンの 1 つだと聞いたので、購入して試してみることにしました。しかし、その前に、Impact と Javascript が使用しているデバイスを検出し、それに合わせて調整することを確認したいと思います。

このページで、Nexus 7、iPhone、iPad、タブレット、その他のメディア デバイスなど、あらゆる種類のデバイスを判別できるようにしたいと考えています。画面サイズは、これらすべてのデバイスにあり、一般的ではないためです。iPhone は、小型で安価な Android デバイスよりも多くのピクセルを備えています。

Impact のコストは約 99.99 であるため、モバイル デバイスをチェックするために HTML 5 コードが必要なのか、それとも画面サイズを自動的に自動調整するだけなのかを確認したいと思います。

私の質問は、Impact (Javascript または HTML 5) は、デバイスがポータブル、モバイル、またはタブレット デバイスであるかどうかをどのように認識するのでしょうか?

コードは自動的に調整されますか? また、調整される場合、グラフィックスやその他のボタンを使用するのに十分な大きさになるようにどのように調整しますか?

4

4 に答える 4

1

Impacts ig.ua.*プロパティを使用して、特定のデバイスを確認できます。メインファイルが読み込まig.uaれるとすぐに使用できます。impact.js

if( ig.ua.mobile ) {
    // Disable sound for all mobile devices
    ig.Sound.enabled = false;
}

if( ig.ua.iPhone4 ) {
    // The iPhone 4 has more pixels - we'll scale the 
    // game up by a factor of 4
    ig.main('#canvas', MyGame, 60, 160, 160, 4);
}
else if( ig.ua.mobile ) {
    // All other mobile devices
    ig.main('#canvas', MyGame, 60, 160, 160, 2);
}
else {
    // Desktop browsers
    ig.main('#canvas', MyGame, 60, 240, 160, 2);
}

メディアクエリを使用してスタイリングすることで、レイアウトを変更することもできます。

@media screen and (min-width: 1200px) {
    #canvas{
        width:600px;
    }
}
@media screen and (max-width: 320px) {
        #canvas{
            width:160px;
        }
    }

メディア クエリは、デバイスのサイズではなく、ブラウザー ウィンドウのサイズに基づいています。

于 2014-07-10T07:24:26.917 に答える
0

Impact はデバイスを検出しますが、必要な詳細レベルではない可能性があります。一連ig.uaのフラグが設定されます。バージョン 1.24 を見ると、現在、iPhone、iPhone4 (実際には iPhone の Retina スクリーンのみを検出するように見えるため、すべての新しい携帯電話が含まれます)、iPad、Android、および Windows Phone を検出します。これらはすべて、ユーザー エージェント文字列を照会することによって行われます。この関数を変更して、より多くのユーザー エージェントを検出することもできますが、ユーザー エージェントによる検出は常に少し脆弱です。

画面サイズに関しては、オブジェクトにはとのig.ua2 つのオブジェクトも含まれます。とを使用します。との値を使用し、デバイスのピクセル比を掛けます。viewportscreenviewportwindow.innerWidthwindow.innerHeightscreenwindow.screen.availWidthwindow.screen.availHeight

Impact はデバイスに合わせて自動的に調整されませんが、Sai の回答でわかるようig.uaに、キャンバスのサイズを変更するために使用できます。

もう 1 つのオプションは、キャンバス要素に CSS を適用し、レスポンシブ サイズを指定することです (たとえば、パーセンテージで指定します)。これを行うときは、CSS がキャンバス全体を拡大縮小することに注意する必要があります。そのため、ゲームの外観が低下する可能性があります (ラスター イメージを元のサイズよりも効果的に拡大しているため)。これをより大きなデバイス用の大きなキャンバス サイズと組み合わせると、品質の低下を抑えることができます。

于 2014-08-26T09:55:49.243 に答える