# Hi gamedevs!

**URL:** <https://phaser.discourse.group/t/hi-gamedevs/2231>\
**Category:** Phaser 3\
**Created:** [April 24, 2019, 7:34am UTC](https://phaser.discourse.group/t/hi-gamedevs/2231 "2019-04-24T07:34:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![donjon1234](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@donjon1234](https://phaser.discourse.group/u/donjon1234)\
**Post date:** [April 24, 2019, 7:34am UTC](https://phaser.discourse.group/t/hi-gamedevs/2231/1 "2019-04-24T07:34:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [April 24, 2019, 3:38pm UTC](https://phaser.discourse.group/t/hi-gamedevs/2231/2 "2019-04-24T15:38:42Z")

</div>

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](https://phaser.discourse.group/uploads/phaser1/original/2X/5/53244415698d7fc0c5bad048f371211cc1f62bea.ts) (70.9 KB)

**To change the size of your game:**

- In your main class, instantiate Phaser as follows:

- Simply change “Width” and “Height” in the above code to your desired values.

Hope that helps and happy coding!

---

<div class="post-metadata">

**Author:** ![donjon1234](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@donjon1234](https://phaser.discourse.group/u/donjon1234)\
**Post date:** [April 24, 2019, 4:39pm UTC](https://phaser.discourse.group/t/hi-gamedevs/2231/3 "2019-04-24T16:39:38Z")

</div>

> [@Jake.Caron](#):
>
> var config = { type: Phaser.AUTO, width: 768, height: 1024, parent: ‘gameWrapper’, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER\_VERTICALLY }, };

```
(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

---

<div class="post-metadata">

**Author:** ![donjon1234](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@donjon1234](https://phaser.discourse.group/u/donjon1234)\
**Post date:** [April 24, 2019, 4:42pm UTC](https://phaser.discourse.group/t/hi-gamedevs/2231/4 "2019-04-24T16:42:08Z")

</div>

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 =)

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [April 24, 2019, 5:19pm UTC](https://phaser.discourse.group/t/hi-gamedevs/2231/5 "2019-04-24T17:19:39Z")

</div>

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';
> }
> }
> 
> ```