setOrigin (new to Phaser and game dev)

[grdigdev]

Hi, I'm new to game development.

I've succesfully setup the env with typescript and webpack-dev-server, but when applying the example project given on the phaser site, it seems the positions are not matching what is expected. When I try to use setOrigin, instead of pulling the image to the top-left corner, it is showing starting more or less on the center of the screen. Does anyone know whether there's any needed setup to force that to match what is expected?

import * as Phaser from 'phaser';


const sceneConfig: Phaser.Types.Scenes.SettingsConfig = {
  active: false,
  visible: false,
  key: 'Game',
};

export class GameScene extends Phaser.Scene {
 
  constructor() {
    super(sceneConfig);

  }

  preload() {
    this.load.image('sky', 'src/assets/sky.png');
    this.load.image('ground', 'src/assets/platform.png');
    this.load.image('star', 'src/assets/star.png');
    this.load.image('bomb', 'src/assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
  }
 
  create() {
    this.add.image(400, 300, 'sky').setOrigin(0,0) 
  }
 
  public update() {
    // TODO
  }
}


const gameConfig: Phaser.Types.Core.GameConfig = {
  title: 'Sample',
 
  type: Phaser.AUTO,
 
  scale: {
    width: window.innerWidth,
    height: window.innerHeight,
  },
 
  physics: {
    default: 'arcade',
  },

  scene: GameScene,
 
  parent: 'game',
  backgroundColor: '#000000',
};
 
export const game = new Phaser.Game(gameConfig);

 

[grdigdev]

Sorry folks, found out that using scale and window.innerWidth and window.innerHeight was doing that... also the image values should be 0, 0 and not 400, 300.