10 years ago by kanito
Hi everyone!
I'm becoming crazy because for a week, I've finish the programming of a game, and since that, I try to make the game to adjust to the width of the screen of any device (tablet, smartphone,...). I've read in the forums of impactjs, the cocoonjs and others and I found lots of goods ideas. But none works for me...
Here is the isuue: I've made a game that has a size of 726x480 and I want to make that the wide of the game (480 px) is adjusted to any screen is displayed.
Here is a part of the code game/main.js
#init: function() {
ig.input.bind(ig.KEY.MOUSE1, 'Click');
this.inicio = true;
this.Fondo = ig.game.spawnEntity( EntityFondo, 0, 0 );
this.PuestACero();
var ButMenu = ig.game.spawnEntity( EntityMenu, (window.innerWidth+480)/2 - 30, 10 );
},
update: function() {
...
});
var dips = window.devicePixelRatio;
var width = Math.floor(window.innerWidth * dips);
var height = Math.floor(window.innerHeight * dips);
ig.main( '#canvas', MyGame, 60, width, height, 1 );
});#
And the whole html file (I've modified it several times):
#<!DOCTYPE html>
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #fff;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<script type="text/javascript" src="lib/impact/impact.js"></script>
<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>#
As is, it doesn't works!
Can anyone helps me, please???
I'm becoming crazy because for a week, I've finish the programming of a game, and since that, I try to make the game to adjust to the width of the screen of any device (tablet, smartphone,...). I've read in the forums of impactjs, the cocoonjs and others and I found lots of goods ideas. But none works for me...
Here is the isuue: I've made a game that has a size of 726x480 and I want to make that the wide of the game (480 px) is adjusted to any screen is displayed.
Here is a part of the code game/main.js
#init: function() {
ig.input.bind(ig.KEY.MOUSE1, 'Click');
this.inicio = true;
this.Fondo = ig.game.spawnEntity( EntityFondo, 0, 0 );
this.PuestACero();
var ButMenu = ig.game.spawnEntity( EntityMenu, (window.innerWidth+480)/2 - 30, 10 );
},
update: function() {
...
});
var dips = window.devicePixelRatio;
var width = Math.floor(window.innerWidth * dips);
var height = Math.floor(window.innerHeight * dips);
ig.main( '#canvas', MyGame, 60, width, height, 1 );
});#
And the whole html file (I've modified it several times):
#<!DOCTYPE html>
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #fff;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width:100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<script type="text/javascript" src="lib/impact/impact.js"></script>
<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>#
As is, it doesn't works!
Can anyone helps me, please???