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