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>

测试游戏.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));

主菜单.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 回答