Question

有人能帮忙吗？我遵循本书中基于继承模式的教程：https://books.google.co.uk/books?id=UpiJAwAAQBAJ&pg=PR4&lpg=PR4&dq=beginning+html5+games+with+createjs我正在使用Cordova尝试在iOS和Android上安装它。它似乎安装好然而我无法弄清楚如何让它适合屏幕（在所有设备上）而不拉伸图像。我已经读过我需要调整舞台（画布）的大小并浮动容器，但我不知道如何使用此示例来完成它。有人能帮忙吗？下面我从项目中提取了样本，希望能够说明问题。我真的很感激任何帮助....

Index.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;
}());

Answer 1

如果您使用EaselJS绘制内容，我不建议手动转换画布上下文。相反，只需根据内容的原始大小和目标视口大小来缩放内容。

这是我回答的另一个问题： How should I create a responsive canvas with createJs to adapt different mobile device's screens?

快速提示如何缩放内容以适应窗口：https://jsfiddle.net/lannymcnie/4yy08pax/

您可以通过设置scaleX和scaleY属性来缩放任何DisplayObject：

content.scaleX = content.scaleY = scale;

希望有所帮助。

如何使EaselJS和Cordova响应？

Index.html

Testgame.js

MainMenu.js

1 个答案: