CODEWITHSUNDEEP
javascriptcordovaresponsive-designeaseljspreloadjs
user3805377
user3805377

Reputation: 27

How can I make EaselJS and Cordova responsive?

Is anyone able to help please. I am following the tutorials in this book which are based on the Inheritance Pattern: https://books.google.co.uk/books?id=UpiJAwAAQBAJ&pg=PR4&lpg=PR4&dq=beginning+html5+games+with+createjs I am using Cordova to try to install it on iOS and Android. It seems to install okay however I cannot work out how to get it to fit the screen (on all devices) while not stretching the images. I have read that I need to resize the stage (canvas) and float the container but I can't work out how to do it with this sample. Would anyone be able to help please? Below I have extracted samples from the project which will hopefully illustrate the problem. I'd really appreciate any help with this....

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

Upvotes: 0

Views: 1026

Answers (1)

Lanny
Lanny

Reputation: 11294

If you are drawing content with EaselJS, I do not recommend manually transforming the canvas context. Instead, just scale the content based on its original size, and the target viewport size.

Here is another question I answered: How should I create a responsive canvas with createJs to adapt different mobile device's screens?

And a quick fiddle showing how to scale content to fit a window: https://jsfiddle.net/lannymcnie/4yy08pax/

You can scale any DisplayObject by setting the scaleX and scaleY properties:

content.scaleX = content.scaleY = scale;

Hope that helps.

Upvotes: 0

Related Questions