Hello everyone,
Pretty new to phaser and really enjoying my dev experience. Did multiple tutorials and examples but there is an issue I can not manage to solve properly though I think there has to be a way to do it simply. I am working on a point&click, the background image is quite a big image with a lot of details. Here is my config:
export const config: Phaser.Types.Core.GameConfig = {
title: "Point&Click",
type: Phaser.AUTO,
scene: [Boot, Preload, GameScene, ...(other game scenes), UiScene],
backgroundColor: "#333",
scale: {
mode: Phaser.Scale.FIT,
parent: "game-container",
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
width: 3302,
height: 2201,
max: {
width: 3302,
height: 2201
},
min: {
width: 1200,
height: 800
}
}
};
What I want is that on big screen (wider than 1200px) the game is played seeing the whole background picture. But on a mobile or smaller screen I want to have a scrolling/sliding way of moving on this background scene. Indeed if simply responsive the image would be too small for the game to be played.
I implemented a custom function that I am a calling in every of my game scenes for that but it seems overkill and still is not fully functional. Also it only works on the game scene but I also have to do custom code to fit my UiScene on top of it properly. Here is my custom function:
makeResponsive() {
this.input.on("pointermove", (p) => {
if (!p.isDown || window.innerWidth > config.scale.min.width) return;
const maxScrollX =
(config.scale.max.width -
window.innerWidth /
(config.scale.min.width / config.scale.max.width)) /
2;
const maxScrollY =
config.scale.max.height -
window.innerHeight / (config.scale.min.width / config.scale.max.width);
const newScrollX =
this.cameras.main.scrollX -
(p.x - p.prevPosition.x) / this.cameras.main.zoom;
this.cameras.main.scrollX =
newScrollX < -maxScrollX
? -maxScrollX
: newScrollX > maxScrollX
? maxScrollX
: newScrollX;
const newScrollY =
this.cameras.main.scrollY -
(p.y - p.prevPosition.y) / this.cameras.main.zoom;
this.cameras.main.scrollY =
newScrollY < 0 ? 0 : newScrollY > maxScrollY ? maxScrollY : newScrollY;
});
}
Here is a simplified reproductible example: https://codepen.io/Ivonig/pen/VwdzRma
Change browser width to see how to use the “drag n’ drop” of the background to move within the scene. It jumps a lot and still has issue but shows what I’d like to achieve. I feel that there has to be a config to make all this simplified but couldn’t find it. Any idea ?
Thanks a lot in advance.