leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added option to move relative to viewport

Browse Source 
If a mobile user taps to the side of the character, they will have less room to tap and so are either tapping all over the screen awkwardly or are accidentally mis-stepping.
By moving the player by tapping relative to the game's viewport and not the character, the user does not need to move their fingers as much and so can use the entire viewport as a d-pad.
This commit is contained in:
mruac 2022-12-25 20:54:09 +10:30
parent 15a8be1c15
commit 695b18efa2
1 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/main.js
View File

@ -874,11 +874,25 @@ class Player extends PrimaryView {
// TODO allow starting a level without moving?
// TODO if you don't move the touch, the player can pass it and will keep going in that
// direction?
let [px, py] = (()=>{
if (this.renderer.directional_touch_type === 0){
let [px, py] = this.level.player.visual_position();
px += 0.5;
py += 0.5;
return [px, py];
}else if (this.renderer.directional_touch_type === 1){
return [touch_target.offsetLeft + touch_target.offsetWidth / 2, touch_target.offsetTop + touch_target.offsetHeight / 2];
}
})();
for (let touch of ev.changedTouches) {
let [x, y] = this.renderer.point_to_real_cell_coords(touch.clientX, touch.clientY);
let [x, y] = (()=>{
if (this.renderer.directional_touch_type === 0){
return this.renderer.point_to_real_cell_coords(touch.clientX, touch.clientY);
}else if (this.renderer.directional_touch_type === 1){
return [touch.clientX, touch.clientY];
}
})();
let dx = x - px;
let dy = y - py;
// Divine a direction from the results
@ -1418,6 +1432,8 @@ class Player extends PrimaryView {
}
this.renderer.use_cc2_anim_speed = options.use_cc2_anim_speed ?? false;
this.renderer.directional_touch_type = options.directional_touch_type ?? 0;
if (this.level) {
this.update_tileset();
this.adjust_scale(); // in case tile size changed
@ -2946,7 +2962,13 @@ class OptionsOverlay extends DialogOverlay {
mk('dd', mk('label', mk('input', {name: 'show-captions', type: 'checkbox'}), " Enable captions")),
mk('dt'),
mk('dd', mk('label', mk('input', {name: 'use-cc2-anim-speed', type: 'checkbox'}), " Use CC2 animation speed")),
);
mk('dt', "Directional touch type (for mobile)"),
mk('dd',
mk('select', {name: 'dir-touch-type'},
mk('option', {value: '0'}, "Relative to player"),
mk('option', {value: '1'}, "Relative to viewport")
),
), );
// Update volume live, if the player is active and was playing when this dialog was opened
// (note that it won't auto-pause until open())
let player = this.conductor.player;
@ -3054,6 +3076,7 @@ class OptionsOverlay extends DialogOverlay {
this.root.elements['spatial-mode'].value = this.conductor.options.spatial_mode ?? 2;
this.root.elements['show-captions'].checked = this.conductor.options.show_captions ?? false;
this.root.elements['use-cc2-anim-speed'].checked = this.conductor.options.use_cc2_anim_speed ?? false;
this.root.elements['dir-touch-type'].checked = this.conductor.options.directional_touch_type ?? 0;
this.root.elements['custom-tileset'].addEventListener('change', ev => {
this._load_custom_tileset(ev.target.files[0]);
@ -3068,6 +3091,7 @@ class OptionsOverlay extends DialogOverlay {
options.spatial_mode = parseInt(this.root.elements['spatial-mode'].value, 10);
options.show_captions = this.root.elements['show-captions'].checked;
options.use_cc2_anim_speed = this.root.elements['use-cc2-anim-speed'].checked;
options.directional_touch_type = parseInt(this.root.elements['dir-touch-type'].value, 10);
// Tileset stuff: slightly more complicated. Save custom ones to localStorage as data
// URIs, and /delete/ any custom ones we're not using any more, both of which require