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