Jump to content

setOrigin (new to Phaser and game dev)


Recommended Posts

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() {


  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');
        { 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);


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...