grdigdev Posted February 11, 2021 Share Posted February 11, 2021 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); Link to comment Share on other sites More sharing options...
grdigdev Posted February 12, 2021 Author Share Posted February 12, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts