Author: studioplay

We want to let the user be both able to move their Avatar with both the keyboard or by clicking with the mouse or by touch on a screen.

Combining these modes of input proofs to be a bit tricky. Not in the least because moving by clicking proofs the be tricky in itself. Phaser has automatic camera following that can interfere, or tilemap bounds.

/192.168.8.100

A few basic things are important:
1. do we get a consistent world coordinate on click
2. does the player move to that location

physics.moveto example: https://phaser.io/examples/v3/view/physics/arcade/move-to

scroll camera example: https://phaser.io/examples/v3/view/camera/scroll-view

localhost:5000/build/

World Camera example: https://labs.phaser.io/edit.html?src=src/camera/world%20camera.js&v=3.55.2

Concepts:
* onscreen debug/ control menu
* move, zoom camera
* list of events
* config parameters for the camera (acceleration, drag, maxSpeed)

Get world point rrom camera:
http://labs.phaser.io/edit.html?src=src/camera/get%20world%20point.js

Move And Stop At Position:
https://phaser.io/examples/v3/view/physics/arcade/move-and-stop-at-position

Virtual Joystick
https://codepen.io/rexrainbow/pen/oyqvQY

Swipe discussion
https://www.html5gamedevs.com/topic/39661-creating-swiping-mechanism/

Swipe example
https://www.thepolyglotdeveloper.com/2020/09/include-touch-cursor-gesture-events-phaser-game/

Resize the screen code snipplet:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var playerX = canvas.width / 2;
var playerY = canvas.height / 2;

$(window).on("resize", function () {
    $("#login,#game,#canvas").width( $(this).width());
    $("#login,#game,#canvas").height( $(this).height());
    playerX = canvas.width / 2;
    playerY = canvas.height / 2;
}).resize();

We want the game to be an ’empty’ canvas. The shape or size is not predefined.

So when resizing the window (when possible), the window should show more of the world, leaving all the elements where they where.

Phaser has a scale manager build in that handles different preferences

This one is suitable for our case: https://phaser.io/examples/v3/view/scalemanager/resize

There is also this examples, but it leaves scroll bars in the window:
https://phaser.io/examples/v3/view/scalemanager/manually-resize

When resizing some elements have to updated:
* the camera bounds
* the background bounds
* elements that are scaled or positioned relative to the window width and height

We try to give everything an absolute position.

If the player wants a more scaled up view, we provide zoom in and out buttons for that.

Here is camera zoom control example: https://labs.phaser.io/edit.html?src=src/game%20objects/container/container%20and%20camera%20zoom.js&v=3.55.2

In the main menu, zooming the camera out, does not update the background. So I would have to use the ScaleManager here.
https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html

In the main game the background is set to very large, maybe there this technique does work…

Zooming with the ScaleManager does nothing…

Article about rescaling scenes: https://phaser.discourse.group/t/making-the-game-to-fill-all-the-available-window-space/6420