When I started out I was really interested in phaser3 but I abandoned it cuz of trouble, but now later I am working on a card game, to play, But I am struggling with two things, first off the intellisense on visual studio code is not working, and second I tried 3-4 solutions to make my game mobile friendly, I am using grunt,
and no matter what I try it sizes to 800 x 600…
Anyway keep up the good work
Welcome Donjon,
To get intellisense working in Visual Studio code:
- Create a file called “jsconfig.json” and place that in the root of your project folder.
- Paste the following into jsconfig (Note, this assumes you are using ES6, if not, just remove that part.):
{ "compilerOptions": { "target": "es6" }, "exclude": [ "node_modules/**/*", "node_modules/" ] }
- Put the attached file into a folder labeled something like, “defs”.
phaser.d.ts (70.9 KB)
To change the size of your game:
-
In your main class, instantiate Phaser as follows:
var config = { type: Phaser.AUTO, width: 768, height: 1024, parent: 'gameWrapper', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_VERTICALLY }, }; this.game = new Phaser.Game(config); -
Simply change “Width” and “Height” in the above code to your desired values.
Hope that helps and happy coding!
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var config = {
type: Phaser.AUTO,
width: 768,
height: 1024,
parent: 'gameWrapper',
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_VERTICALLY
},
};
//global variables
window.onload = function () {
var game = new Phaser.Game(config);
// Game States
game.state.add('boot', require('./states/boot'));
game.state.add('gameover', require('./states/gameover'));
game.state.add('menu', require('./states/menu'));
game.state.add('play', require('./states/play'));
game.state.add('preload', require('./states/preload'));
game.state.start('boot');
};
},{"./states/boot":2,"./states/gameover":3,"./states/menu":4,"./states/play":5,"./states/preload":6}],2:[function(require,module,exports){
'use strict';
function Boot() {
}
Boot.prototype = {
preload: function() {
this.load.image('preloader', 'assets/preloader.gif');
},
create: function() {
this.game.input.maxPointers = 1;
this.game.state.start('preload');
}
};
module.exports = Boot;
},{}],3:[function(require,module,exports){
'use strict';
function GameOver() {}
function resize() {
var canvas = game.canvas, width = document.getElementsByClassName("parent-container")[0].offsetWidth, height = window.innerHeight;
var wratio = width / height, ratio = canvas.width / canvas.height;
if (wratio < ratio) {
canvas.style.width = width + 'px';
canvas.style.height = (width / ratio) + 'px';
} else {
canvas.style.width = (height * ratio) + 'px';
canvas.style.height = height + 'px';
}
}
GameOver.prototype = {
preload: function () {
},
create: function () { window.addEventListener('resize', resize);
resize();
var style = { font: '65px Arial', fill: '#ffffff', align: 'center'};
this.titleText = this.game.add.text(this.game.world.centerX,100, 'Game Over!', style);
this.titleText.anchor.setTo(0.5, 0.5);
this.congratsText = this.game.add.text(this.game.world.centerX, 200, 'You Win!', { font: '32px Arial', fill: '#ffffff', align: 'center'});
this.congratsText.anchor.setTo(0.5, 0.5);
this.instructionText = this.game.add.text(this.game.world.centerX, 300, 'Click To Play Again', { font: '16px Arial', fill: '#ffffff', align: 'center'});
this.instructionText.anchor.setTo(0.5, 0.5);
},
update: function () {
if(this.game.input.activePointer.justPressed()) {
this.game.state.start('play');
}
}
};
module.exports = GameOver;
},{}],4:[function(require,module,exports){
'use strict';
function Menu() {}
Menu.prototype = {
preload: function() {
},
create: function() {
var style = { font: '65px Arial', fill: '#ffffff', align: 'center'};
this.sprite = this.game.add.sprite(this.game.world.centerX, 138, 'yeoman');
this.sprite.anchor.setTo(0.5, 0.5);
this.titleText = this.game.add.text(this.game.world.centerX, 300, '\'Allo, \'Allo!', style);
this.titleText.anchor.setTo(0.5, 0.5);
this.instructionsText = this.game.add.text(this.game.world.centerX, 400, 'Click anywhere to play "Click The Yeoman Logo"', { font: '16px Arial', fill: '#ffffff', align: 'center'});
this.instructionsText.anchor.setTo(0.5, 0.5);
this.sprite.angle = -20;
this.game.add.tween(this.sprite).to({angle: 20}, 1000, Phaser.Easing.Linear.NONE, true, 0, 1000, true);
},
update: function() {
if(this.game.input.activePointer.justPressed()) {
this.game.state.start('play');
}
}
};
module.exports = Menu;
},{}],5:[function(require,module,exports){
'use strict';
function Play() {}
Play.prototype = {
create: function() {
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.sprite = this.game.add.sprite(this.game.width/2, this.game.height/2, 'yeoman');
this.sprite.inputEnabled = true;
this.game.physics.arcade.enable(this.sprite);
this.sprite.body.collideWorldBounds = true;
this.sprite.body.bounce.setTo(1,1);
this.sprite.body.velocity.x = this.game.rnd.integerInRange(-500,500);
this.sprite.body.velocity.y = this.game.rnd.integerInRange(-500,500);
this.sprite.events.onInputDown.add(this.clickListener, this);
},
update: function() {
},
clickListener: function() {
this.game.state.start('gameover');
}
};
module.exports = Play;
},{}],6:[function(require,module,exports){
'use strict';
function Preload() {
this.asset = null;
this.ready = false;
}
Preload.prototype = {
preload: function() {
this.asset = this.add.sprite(this.width/2,this.height/2, 'preloader');
this.asset.anchor.setTo(0.5, 0.5);
this.load.onLoadComplete.addOnce(this.onLoadComplete, this);
this.load.setPreloadSprite(this.asset);
this.load.image('yeoman', 'assets/yeoman-logo.png');
},
create: function() {
this.asset.cropEnabled = false;
},
update: function() {
if(!!this.ready) {
this.game.state.start('menu');
}
},
onLoadComplete: function() {
this.ready = true;
}
};
module.exports = Preload;
},{}]},{},[1])
Hello this is the code I am using It’s not really working putting the config object into the game, however, intellisense is now working, I hope you are more experienced and can see what is overwriting what
Thanks for all help
I also checked in the phaser.js file it says 800 600 and not to change it there but obviously something is missing, or I am just tired not to see =)
Delete this function in your code:
function resize() {
var canvas = game.canvas, width = document.getElementsByClassName(“parent-container”)[0].offsetWidth, height = window.innerHeight;
var wratio = width / height, ratio = canvas.width / canvas.height;if (wratio < ratio) { canvas.style.width = width + 'px'; canvas.style.height = (width / ratio) + 'px'; } else { canvas.style.width = (height * ratio) + 'px'; canvas.style.height = height + 'px'; } }