Коммит 60e7c534 создал по автору avathar's avatar avathar
Просмотр файлов

#174 продолжение рефакторинга 

Оптимизированы функции перетаскивания и зумма
владелец 87bb728f
Скрыть пробелы
Построчно Рядом
universo-frontend/src/apps/spaces-2d/EndlessCanvas.ts
Просмотр файла @ 60e7c534
......@@ -26,6 +26,7 @@ export class EndlessCanvas extends Phaser.Scene {
router: Router;
isDark: boolean;
debugTable: Phaser.GameObjects.Text;
keys: object;
constructor() {
super({
......@@ -41,6 +42,17 @@ export class EndlessCanvas extends Phaser.Scene {
}
preload() {
this.keys = this.input.keyboard.addKeys({
up: 'up',
down: 'down',
left: 'left',
right: 'right',
space: 'SPACE',
shift: 'SHIFT',
ctrl: Phaser.Input.Keyboard.KeyCodes.CTRL,
alt: 'ALT',
});
this.load.scenePlugin(
'rexuiplugin',
'rexuiplugin.min.js',
......@@ -103,7 +115,7 @@ export class EndlessCanvas extends Phaser.Scene {
const toolbar = CreateToolbar(this, toolbarButtons(this));
// метод для вставки DOM элемента
domElement(this);
// domElement(this);
// подключение таблички с отладочными данными (отображается при флаге debug в LocalStorage)
createDebugTable(this);
// кнопки для зума
......
universo-frontend/src/apps/spaces-2d/PhaserConfig.ts
Просмотр файла @ 60e7c534
......@@ -20,7 +20,12 @@ export const getPhaserConfig = (scene: any[]): Types.Core.GameConfig => ({
scene: scene,
autoFocus: true,
disableContextMenu: true,
input: { windowEvents: true },
input: {
keyboard: {
target: window,
},
windowEvents: true,
},
backgroundColor: '#absdef',
plugins: {
......
universo-frontend/src/apps/spaces-2d/controls.ts
Просмотр файла @ 60e7c534
export default (scene) => {
import { EndlessCanvas } from './EndlessCanvas';
export default (scene: EndlessCanvas) => {
const DRAG_SENSITIVITY = 0.0003;
const dragStartPoint = { x: 0, y: 0 };
let isSpaceDown = false;
let isDragging = false;
// Обработчик событий клавиатуры для клавиши пробела
scene.input.keyboard.on('keydown-SPACE', () => {
isSpaceDown = true; // Клавиша пробела зажата
scene.input.setDefaultCursor('grab'); // Меняем курсор на "Рука"
});
scene.input.keyboard.on('keyup-SPACE', () => {
isSpaceDown = false; // Клавиша пробела отпущена
scene.input.setDefaultCursor('default'); // Возвращаем стандартный курсор
isDragging = false; // Отключаем перетаскивание
});
const updateCursor = (cursorStyle) => {
scene.input.setDefaultCursor(cursorStyle);
};
// Включаем интерактивность сцены
scene.input.on('pointerdown', (pointer) => {
if (!isSpaceDown && pointer.button !== 2) return; // Изменено условие для проверки правой кнопки мыши
const startDragging = (pointer) => {
dragStartPoint.x = pointer.x;
dragStartPoint.y = pointer.y;
isDragging = true;
scene.input.setDefaultCursor('grab');
});
updateCursor('grab');
};
scene.input.on('pointermove', (pointer) => {
if (!isDragging) return;
const dragX = pointer.x - dragStartPoint.x;
const dragY = pointer.y - dragStartPoint.y;
const stopDragging = () => {
isDragging = false;
updateCursor('default');
};
const handleDrag = (pointer) => {
const { x, y } = pointer;
const dragX = x - dragStartPoint.x;
const dragY = y - dragStartPoint.y;
scene.cameras.main.scrollX -= dragX;
scene.cameras.main.scrollY -= dragY;
dragStartPoint.x = pointer.x;
dragStartPoint.y = pointer.y;
});
dragStartPoint.x = x;
dragStartPoint.y = y;
};
scene.input.on('pointerup', () => {
isDragging = false;
scene.input.setDefaultCursor('default'); // Возвращаем стандартный курсор
const handleWheel = (pointer, gameObjects, deltaX, deltaY) => {
//@ts-ignore
if (!scene.keys.ctrl.isDown) {
scene.cameras.main.scrollX -= deltaX * DRAG_SENSITIVITY;
scene.cameras.main.scrollY -= deltaY * DRAG_SENSITIVITY;
}
};
//@ts-ignore
scene.keys.space.on('down', () => updateCursor('grab'));
//@ts-ignore
scene.keys.space.on('up', stopDragging);
scene.input.on('pointerdown', (pointer) => {
//@ts-ignore
if (scene.keys.space.isDown && pointer.button === 0) startDragging(pointer);
});
//перемещение холста при использовании тачпада или колёсиком мыши
scene.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => {
const sensibility = 0.3;
scene.cameras.main.scrollX -= deltaX * sensibility;
scene.cameras.main.scrollY -= deltaY * sensibility;
scene.input.on('pointermove', (pointer) => {
if (isDragging) handleDrag(pointer);
});
scene.input.on('pointerup', stopDragging);
scene.input.on('wheel', handleWheel);
};
universo-frontend/src/apps/spaces-2d/domElement.ts
Просмотр файла @ 60e7c534
import { CreateDOM } from './CreateDOM';
export default (scene) => {
// const content =
// 'Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.';
// const domElement = CreateDOM(scene, content);
// domElement.setPosition(500, 500);
// domElement.setDepth(1000);
//scene.cameras.main.ignore([domElement]);
const content =
'Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.';
const domElement = CreateDOM(scene, content);
domElement.setPosition(500, 500);
domElement.setDepth(1000);
scene.cameras.main.ignore([domElement]);
};
universo-frontend/src/apps/spaces-2d/zoomButtons.ts
Просмотр файла @ 60e7c534
export default (scene) => {
let zoomPercentage: number;
import { EndlessCanvas } from './EndlessCanvas';
export default (scene: EndlessCanvas) => {
const ZOOM_MAX = 2;
const ZOOM_MIN = 0.1;
const ZOOM_STEP = 0.1;
const ZOOM_SENSITIVITY = 0.0003;
let zoomText: Phaser.GameObjects.Text;
const updateZoomPercentage = (value: number): void => {
zoomPercentage += value;
zoomText.setText(`${zoomPercentage}%`);
};
const zoomButtonsBackground = scene.add
.image(
scene.cameras.main.width - 170,
......@@ -13,50 +14,62 @@ export default (scene) => {
)
.setScale(1.25);
zoomButtonsBackground.setInteractive({ cursor: 'pointer' });
zoomPercentage = 100;
function createZoomButton(
x: number,
y: number,
texture: string,
zoomChange: number,
) {
const button = scene.add.image(x, y, texture).setScale(0.15);
button.setInteractive({ cursor: 'pointer' });
button.on('pointerdown', () => updateZoom(zoomChange));
return button;
}
function updateZoom(change: number) {
let newZoom = scene.cameras.main.zoom + change;
newZoom = Phaser.Math.Clamp(newZoom, ZOOM_MIN, ZOOM_MAX);
scene.cameras.main.zoom = newZoom;
updateZoomPercentage();
}
function updateZoomPercentage() {
zoomText.setText(`${(scene.cameras.main.zoom * 100).toFixed(0)}%`);
}
zoomText = scene.add.text(
scene.cameras.main.width - 190,
scene.cameras.main.height - 38,
`${zoomPercentage}%`,
`${(scene.cameras.main.zoom * 100).toFixed(0)}%`,
{ fontSize: 18, color: '#000' },
);
const zoomPlusButton = scene.add
.image(
scene.cameras.main.width - 210,
scene.cameras.main.height - 30,
'plus',
)
.setScale(0.15);
zoomPlusButton.setInteractive({ cursor: 'pointer' });
zoomPlusButton.on('pointerdown', () => {
if (zoomPercentage < 200) {
// Проверяем, что zoom меньше 200%
scene.cameras.main.zoom += 0.1;
updateZoomPercentage(10); // Увеличиваем счетчик на 10%
}
});
// Добавляем кнопку для уменьшения zoom
const zoomMinusButton = scene.add
.image(
scene.cameras.main.width - 125,
scene.cameras.main.height - 30,
'minus',
)
.setScale(0.15);
zoomMinusButton.setInteractive({ cursor: 'pointer' });
zoomMinusButton.on('pointerdown', () => {
if (zoomPercentage > 10) {
// Проверяем, что zoom больше 10%
scene.cameras.main.zoom -= 0.1;
updateZoomPercentage(-10); // Уменьшаем счетчик на 10%
const zoomPlusButton = createZoomButton(
scene.cameras.main.width - 210,
scene.cameras.main.height - 30,
'plus',
ZOOM_STEP,
);
const zoomMinusButton = createZoomButton(
scene.cameras.main.width - 125,
scene.cameras.main.height - 30,
'minus',
-ZOOM_STEP,
);
scene.input.on('wheel', (pointer, gameObjects, deltaX, deltaY) => {
//@ts-ignore
if (scene.keys.ctrl.isDown) {
updateZoom(deltaY * ZOOM_SENSITIVITY);
}
});
scene.cameras.main.ignore([
zoomButtonsBackground,
zoomPlusButton,
zoomMinusButton,
zoomButtonsBackground,
zoomText,
]);
};
universo-frontend/src/apps/utils/debug/debugUpdater.ts
Просмотр файла @ 60e7c534
......@@ -6,11 +6,16 @@ import { LocalStorage } from 'quasar';
export default function (scene: EndlessCanvas) {
if (LocalStorage.has('debug') && scene.debugTable) {
const pointer0 = scene.input.manager.pointers[0];
const keys = scene.keys;
const keysArr = Object.keys(keys).map((key) => {
return key + ':' + keys[key].isDown;
});
const stringArray = [
pointer0.worldX.toFixed(0) + 'x' + pointer0.worldY.toFixed(0),
pointer0.x + 'x' + pointer0.y,
'button:' + pointer0.button,
...keysArr,
];
const maxSize = GetMaxTextObjectSize(scene, stringArray);
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать