0

誰でも助けてください。継承パターンに基づいたこの本のチュートリアルに従っています: https ://books.google.co.uk/books?id=UpiJAwAAQBAJ&pg=PR4&lpg=PR4&dq=beginning+html5+games+with+ createjs Cordova は、iOS と Android にインストールしようとしています。インストールは問題ないようですが、画像を引き延ばさずに（すべてのデバイスで）画面に合わせる方法がわかりません。ステージ (キャンバス) のサイズを変更してコンテナーをフロートする必要があることを読みましたが、このサンプルでそれを行う方法がわかりません。誰か助けてください。以下に、うまくいけば問題を説明するプロジェクトからサンプルを抽出しました。これについて何か助けていただければ幸いです....

索引.html

<!DOCTYPE html>
<html>
    <head>
        <!--CREATEJS-->
        <script src="js/lib/easeljs-0.8.2.min.js"></script>
        <script src="js/lib/preloadjs-0.6.2.min.js"></script>

    <body onload="init();">
        <div id="gameWrapper">
        <div>
            <canvas id="canvas" width="768" height="1024"></canvas>
        </div>
    </body>

    <script>
        var stage;
        var canvas;
        function init() {
            window.game = window.game || {};
            game.main = new game.TestGame();
        }
    </script>
</html>

Testgame.js

(function (window) {

window.game = window.game || {}

function TestGame() {
    this.initialize();
}

var p = TestGame.prototype = new createjs.Container();

p.Container_initialize = p.initialize;

p.initialize = function () {
    this.Container_initialize();

    canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    if (window.devicePixelRatio > 1) {
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    stage = new createjs.Stage(canvas);

    screen_width = canvas.width;
    screen_height = canvas.height;
    stage = new createjs.Stage(canvas);

    game.Device.prepare();
    //preload all assets using PreloadJS
    this.preloadAssets();
};

p.gameStateMainMenu = function () {  
    var w = window.innerWidth;
    var h = window.innerHeight;

    stage.canvas.width = w;
    stage.canvas.height = h; 

    var scene = new game.MainMenu();

    var ratio = screen_width / screen_height;
    var windowRatio = w/h;     

    //***** scaleX is making the image too small
    var scale = w / screen_width;

    if (windowRatio > ratio) {
        scale = h / screen_height;
    }

    // Scale up to fit width or height
    scene.scaleX = scene.scaleY = scale; 
    stage.addChild(scene);

    this.disposeCurrentScene();
    this.currentScene = scene;
    this.sceneName = 'MainMenu';
    this.changeState(game.GameStates.RUN_SCENE);
};

window.game.TestGame = TestGame;

}(window));

MainMenu.js

(function () {

window.game = window.game || {}

function MainMenu() {
    this.initialize();
};

var p = MainMenu.prototype = new createjs.Container();
p.Container_initialize = p.initialize;

 p.initialize = function () {
    this.Container_initialize();

    this.addBG();
    this.addGraphics();
};

p.addBG = function () {
    var bg = new createjs.Bitmap(game.assets.getAsset(game.assets.BG));
    this.addChild(bg);
};

p.addGraphics = function () {
    var circle = new createjs.Bitmap(game.assets.getAsset(game.assets.CIRCLE));
    circle.regX = circle.getBounds().width /2;
    circle.x = screen_width /2;
    circle.y = 50;
    this.addChild(circle);
}

window.game.MainMenu = MainMenu;
}());
4

1 に答える 1

0

EaselJS でコンテンツを描画している場合、キャンバス コンテキストを手動で変換することはお勧めしません。代わりに、元のサイズとターゲットのビューポート サイズに基づいてコンテンツをスケーリングします。

私が答えた別の質問は次のとおりです: createJs を使用してレスポンシブ キャンバスを作成し、さまざまなモバイル デバイスの画面に適応させるにはどうすればよいですか?

そして、ウィンドウに合わせてコンテンツをスケーリングする方法を示す簡単なフィドル: https://jsfiddle.net/lannymcnie/4yy08pax/

scaleXプロパティとscaleYプロパティを設定することで、任意の DisplayObject をスケーリングできます。

content.scaleX = content.scaleY = scale;

それが役立つことを願っています。

于 2016-03-05T15:58:32.977 に答える