ARTWORLD – movement

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.


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:

scroll camera example:


World Camera example:

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

Get world point rrom camera:

Move And Stop At Position:

Virtual Joystick

Swipe discussion

Swipe example

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;