mirror of
https://github.com/Heretek-AI/GDevelop.git
synced 2026-08-25 12:23:58 -04:00
D8H
5139 lines
171 KiB
TypeScript
5139 lines
171 KiB
TypeScript
namespace gdjs {
|
|
const logger = new gdjs.Logger('In-Game editor');
|
|
|
|
/**
|
|
* A minimal utility to define DOM elements.
|
|
* Also copied in InGameDebugger.tsx.
|
|
*/
|
|
function h<K extends keyof HTMLElementTagNameMap>(
|
|
tag: K,
|
|
attrs: {
|
|
style?: Partial<CSSStyleDeclaration>;
|
|
onClick?: () => void;
|
|
},
|
|
...nodes: (HTMLElement | string)[]
|
|
): HTMLElement {
|
|
const node = document.createElement(tag);
|
|
Object.keys(attrs).forEach((key) => {
|
|
if (key === 'style') {
|
|
for (const [styleName, value] of Object.entries(attrs.style!)) {
|
|
node.style[styleName] = value;
|
|
}
|
|
} else if (key === 'onClick') {
|
|
node.addEventListener('click', attrs[key]!);
|
|
} else {
|
|
node.setAttribute(key, '' + attrs[key]);
|
|
}
|
|
});
|
|
|
|
node.append(...nodes);
|
|
return node;
|
|
}
|
|
|
|
/**
|
|
* Adapt the Three.js TransformControls gizmos so that the axis are in the same direction as in GDevelop.
|
|
* This does not change the way the controls work (notably when dragged), it's only a visual adaptation.
|
|
*/
|
|
const patchAxesOnTransformControlsGizmos = (
|
|
controls: THREE_ADDONS.TransformControls
|
|
) => {
|
|
const gizmoRoot = controls && (controls as any)._gizmo;
|
|
if (!gizmoRoot) return;
|
|
|
|
// Flip gizmo (visual), picker (raycast), and helper (guide lines)
|
|
const groupsToFlip = ['gizmo', 'picker', 'helper'];
|
|
|
|
// Bake axis reflections into geometry so per-frame handle scaling
|
|
// inside TransformControlsGizmo.updateMatrixWorld() won't undo it.
|
|
const flipY = new THREE.Matrix4().makeScale(1, -1, 1);
|
|
const flipX = new THREE.Matrix4().makeScale(-1, 1, 1);
|
|
|
|
// For translate mode: flip Y-axis handles
|
|
const shouldFlipYByName = (name) =>
|
|
name === 'Y' || name === 'XY' || name === 'YZ';
|
|
|
|
// For scale mode: flip X-axis handles
|
|
const shouldFlipXByName = (name) =>
|
|
name === 'X' || name === 'XY' || name === 'XZ';
|
|
|
|
// Process translate mode (flip Y)
|
|
for (const group of groupsToFlip) {
|
|
const root = gizmoRoot[group] && gizmoRoot[group]['translate'];
|
|
if (!root) continue;
|
|
|
|
root.traverse((obj) => {
|
|
if (!obj || !obj.geometry) return;
|
|
const name = obj.name || '';
|
|
if (!shouldFlipYByName(name)) return;
|
|
|
|
// Bake the Y flip directly into the geometry
|
|
obj.geometry.applyMatrix4(flipY);
|
|
|
|
// Keep raycasting bounds correct after mutation
|
|
if (typeof obj.geometry.computeBoundingBox === 'function') {
|
|
obj.geometry.computeBoundingBox();
|
|
}
|
|
if (typeof obj.geometry.computeBoundingSphere === 'function') {
|
|
obj.geometry.computeBoundingSphere();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Process scale mode (flip X)
|
|
for (const group of groupsToFlip) {
|
|
const root = gizmoRoot[group] && gizmoRoot[group]['scale'];
|
|
if (!root) continue;
|
|
|
|
root.traverse((obj) => {
|
|
if (!obj || !obj.geometry) return;
|
|
const name = obj.name || '';
|
|
if (!shouldFlipXByName(name)) return;
|
|
|
|
// Bake the X flip directly into the geometry
|
|
obj.geometry.applyMatrix4(flipX);
|
|
|
|
// Keep raycasting bounds correct after mutation
|
|
if (typeof obj.geometry.computeBoundingBox === 'function') {
|
|
obj.geometry.computeBoundingBox();
|
|
}
|
|
if (typeof obj.geometry.computeBoundingSphere === 'function') {
|
|
obj.geometry.computeBoundingSphere();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const patchColorsOnTransformControlsGizmos = (
|
|
controls: THREE_ADDONS.TransformControls
|
|
) => {
|
|
const gizmoRoot = controls && (controls as any)._gizmo;
|
|
if (!gizmoRoot) return;
|
|
|
|
const colorMap = {
|
|
x: 0xf53e63,
|
|
y: 0xa4e507,
|
|
z: 0x36a9f5,
|
|
e: 0xffff00,
|
|
xyz: 0xffffff,
|
|
xyze: 0x787878,
|
|
highlight: 0xeeeeee,
|
|
};
|
|
const modes = ['translate', 'rotate', 'scale'];
|
|
const groups = ['gizmo', 'helper'];
|
|
|
|
// Helper to determine which color to use based on handle name
|
|
const getColorForHandle = (name) => {
|
|
const nameLower = (name || '').toLowerCase();
|
|
|
|
if (nameLower === 'xyze') return colorMap.xyze;
|
|
if (nameLower === 'xyz') return colorMap.xyz;
|
|
if (nameLower === 'e') return colorMap.e;
|
|
|
|
// For plane handles (XY, YZ, XZ), use the color of the missing axis
|
|
if (nameLower === 'xy') return colorMap.z;
|
|
if (nameLower === 'yz') return colorMap.x;
|
|
if (nameLower === 'xz') return colorMap.y;
|
|
|
|
// Single axis handles
|
|
if (nameLower === 'x' || nameLower.includes('x')) return colorMap.x;
|
|
if (nameLower === 'y' || nameLower.includes('y')) return colorMap.y;
|
|
if (nameLower === 'z' || nameLower.includes('z')) return colorMap.z;
|
|
|
|
return null;
|
|
};
|
|
|
|
// Apply colors to all gizmo materials
|
|
for (const mode of modes) {
|
|
for (const group of groups) {
|
|
const root = gizmoRoot[group] && gizmoRoot[group][mode];
|
|
if (!root) continue;
|
|
|
|
root.traverse((obj) => {
|
|
if (!obj || !obj.material) return;
|
|
|
|
const color = getColorForHandle(obj.name);
|
|
if (color === null) return;
|
|
|
|
// Update the material color and store it as the base color
|
|
obj.material.color.setHex(color);
|
|
obj.material._color = obj.material.color.clone();
|
|
obj.material._opacity = obj.material.opacity;
|
|
});
|
|
}
|
|
}
|
|
|
|
// Patch the gizmo's updateMatrixWorld to use custom highlight color
|
|
if (!gizmoRoot._originalUpdateMatrixWorld) {
|
|
gizmoRoot._originalUpdateMatrixWorld =
|
|
gizmoRoot.updateMatrixWorld.bind(gizmoRoot);
|
|
gizmoRoot._customHighlightColor = colorMap.highlight;
|
|
|
|
gizmoRoot.updateMatrixWorld = function (force) {
|
|
// Call original update first
|
|
this._originalUpdateMatrixWorld(force);
|
|
|
|
// Override the highlight color if an axis is selected
|
|
if (this.enabled && this.axis) {
|
|
const modes = ['translate', 'rotate', 'scale'];
|
|
const groups = ['gizmo', 'helper'];
|
|
|
|
for (const mode of modes) {
|
|
for (const group of groups) {
|
|
const root = this[group] && this[group][mode];
|
|
if (!root) continue;
|
|
|
|
root.traverse((obj) => {
|
|
if (!obj || !obj.material) return;
|
|
|
|
// Check if this handle should be highlighted
|
|
const shouldHighlight =
|
|
obj.name === this.axis ||
|
|
this.axis.split('').some((a) => obj.name === a);
|
|
|
|
if (shouldHighlight) {
|
|
// Apply custom highlight color
|
|
obj.material.color.setHex(this._customHighlightColor);
|
|
obj.material.opacity = 1.0;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
} else {
|
|
// Update the stored highlight color if already patched
|
|
gizmoRoot._customHighlightColor = colorMap.highlight;
|
|
}
|
|
};
|
|
|
|
function patchNegativeAxisHandlesOnTransformControlsGizmos(
|
|
controls: THREE_ADDONS.TransformControls
|
|
) {
|
|
const gizmo = (controls as any)._gizmo;
|
|
if (!gizmo) return;
|
|
|
|
// Helper function to remove specific children from gizmo groups
|
|
function removeNegativeHandles(gizmoGroup, mode) {
|
|
if (!gizmoGroup || !gizmoGroup.children) return;
|
|
|
|
const toRemove: Array<THREE.Mesh> = [];
|
|
const seenAxes = { X: [], Y: [], Z: [] };
|
|
|
|
// First pass: catalog all children by axis
|
|
gizmoGroup.children.forEach((child) => {
|
|
if (child.name === 'X' || child.name === 'Y' || child.name === 'Z') {
|
|
seenAxes[child.name].push(child);
|
|
}
|
|
});
|
|
|
|
// Second pass: mark negative handles for removal
|
|
Object.keys(seenAxes).forEach((axisName) => {
|
|
const axisChildren = seenAxes[axisName];
|
|
|
|
if (mode === 'translate' && axisChildren.length >= 2) {
|
|
// In translate: [positive arrow at index 0, negative arrow at index 1, line at index 2]
|
|
// Remove the negative arrow (index 1)
|
|
toRemove.push(axisChildren[1]);
|
|
} else if (mode === 'scale' && axisChildren.length >= 3) {
|
|
// In scale: [negative cube at index 0, line at index 1, positive cube at index 2]
|
|
// Remove the negative cube (index 2)
|
|
toRemove.push(axisChildren[0]);
|
|
}
|
|
});
|
|
|
|
// Remove marked children
|
|
toRemove.forEach((child) => {
|
|
gizmoGroup.remove(child);
|
|
if (child.geometry) child.geometry.dispose();
|
|
if (child.material && Array.isArray(child.material)) {
|
|
child.material.forEach((material) => material.dispose());
|
|
} else if (child.material) {
|
|
child.material.dispose();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Only process the visual gizmos, NOT the pickers (which handle interaction)
|
|
if (gizmo.gizmo && gizmo.gizmo['translate']) {
|
|
removeNegativeHandles(gizmo.gizmo['translate'], 'translate');
|
|
}
|
|
|
|
if (gizmo.gizmo && gizmo.gizmo['scale']) {
|
|
removeNegativeHandles(gizmo.gizmo['scale'], 'scale');
|
|
}
|
|
|
|
// Keep the pickers intact for interaction - they're invisible anyway
|
|
}
|
|
|
|
const getSvgIconUrl = (game: RuntimeGame, resourceName: string) => {
|
|
const resource = game.getResourceLoader().getResource(resourceName);
|
|
if (!resource) return '';
|
|
return game.getResourceLoader().getFullUrl(resource.file);
|
|
};
|
|
|
|
const LEFT_KEY = 37;
|
|
const UP_KEY = 38;
|
|
const RIGHT_KEY = 39;
|
|
const DOWN_KEY = 40;
|
|
const ALT_KEY = 18;
|
|
const DEL_KEY = 46;
|
|
const BACKSPACE_KEY = 8;
|
|
const LEFT_ALT_KEY = gdjs.InputManager.getLocationAwareKeyCode(ALT_KEY, 1);
|
|
const RIGHT_ALT_KEY = gdjs.InputManager.getLocationAwareKeyCode(ALT_KEY, 2);
|
|
const SHIFT_KEY = 16;
|
|
const LEFT_SHIFT_KEY = gdjs.InputManager.getLocationAwareKeyCode(
|
|
SHIFT_KEY,
|
|
1
|
|
);
|
|
const RIGHT_SHIFT_KEY = gdjs.InputManager.getLocationAwareKeyCode(
|
|
SHIFT_KEY,
|
|
2
|
|
);
|
|
const SPACE_KEY = 32;
|
|
const CTRL_KEY = 17;
|
|
const LEFT_CTRL_KEY = gdjs.InputManager.getLocationAwareKeyCode(CTRL_KEY, 1);
|
|
const RIGHT_CTRL_KEY = gdjs.InputManager.getLocationAwareKeyCode(CTRL_KEY, 2);
|
|
const LEFT_META_KEY = gdjs.InputManager.getLocationAwareKeyCode(91, 1);
|
|
const RIGHT_META_KEY = gdjs.InputManager.getLocationAwareKeyCode(93, 2);
|
|
const W_KEY = 87;
|
|
const A_KEY = 65;
|
|
const C_KEY = 67;
|
|
const S_KEY = 83;
|
|
const D_KEY = 68;
|
|
const Q_KEY = 81;
|
|
const E_KEY = 69;
|
|
const F_KEY = 70;
|
|
const O_KEY = 79;
|
|
const V_KEY = 86;
|
|
const X_KEY = 88;
|
|
const Y_KEY = 89;
|
|
const Z_KEY = 90;
|
|
const ESC_KEY = 27;
|
|
const EQUAL_KEY = 187;
|
|
const MINUS_KEY = 189;
|
|
const KEY_DIGIT_1 = 49;
|
|
const KEY_DIGIT_2 = 50;
|
|
const KEY_DIGIT_3 = 51;
|
|
const ROTATION_SNAP_DEGREES = 45;
|
|
|
|
const exceptionallyGetKeyCodeFromLocationAwareKeyCode = (
|
|
locationAwareKeyCode: number
|
|
): number => {
|
|
return locationAwareKeyCode % 1000;
|
|
};
|
|
|
|
// See same factors in `newIDE/app/src/Utils/ZoomUtils.js`.
|
|
const zoomInFactor = Math.pow(2, (2 * 1) / 16);
|
|
const zoomOutFactor = Math.pow(2, (-2 * 1) / 16);
|
|
|
|
const instanceStateFlag = {
|
|
selected: 1,
|
|
locked: 2,
|
|
hovered: 4,
|
|
};
|
|
const instanceWireframeColor = {
|
|
[instanceStateFlag.hovered]: '#54daff',
|
|
[instanceStateFlag.selected]: '#f2a63c',
|
|
[instanceStateFlag.selected | instanceStateFlag.hovered]: '#ffd200',
|
|
[instanceStateFlag.locked | instanceStateFlag.hovered]: '#b02715',
|
|
[instanceStateFlag.locked | instanceStateFlag.selected]: '#b87f7f',
|
|
[instanceStateFlag.locked |
|
|
instanceStateFlag.selected |
|
|
instanceStateFlag.hovered]: '#f51e02',
|
|
};
|
|
|
|
const editorCameraFov = 45;
|
|
|
|
/** @category In-Game Editor */
|
|
export type InGameEditorSettings = {
|
|
theme: {
|
|
iconButtonSelectedBackgroundColor: string;
|
|
iconButtonSelectedColor: string;
|
|
toolbarBackgroundColor: string;
|
|
toolbarSeparatorColor: string;
|
|
textColorPrimary: string;
|
|
};
|
|
};
|
|
|
|
const defaultInGameEditorSettings: InGameEditorSettings = {
|
|
theme: {
|
|
iconButtonSelectedBackgroundColor: 'black',
|
|
iconButtonSelectedColor: 'black',
|
|
toolbarBackgroundColor: 'black',
|
|
toolbarSeparatorColor: 'black',
|
|
textColorPrimary: 'black',
|
|
},
|
|
};
|
|
|
|
let hasWindowFocus = true;
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('focus', () => {
|
|
hasWindowFocus = true;
|
|
});
|
|
window.addEventListener('blur', () => {
|
|
hasWindowFocus = false;
|
|
});
|
|
}
|
|
|
|
function isDefined<T>(value: T | null | undefined): value is NonNullable<T> {
|
|
return value !== null && value !== undefined;
|
|
}
|
|
|
|
type Point3D = [float, float, float];
|
|
|
|
type RuntimeObjectWith3D = RuntimeObject &
|
|
Base3DHandler &
|
|
Resizable &
|
|
Scalable &
|
|
Flippable & {
|
|
getCenterZInScene(): float;
|
|
};
|
|
|
|
const is3D = (object: gdjs.RuntimeObject): object is RuntimeObjectWith3D => {
|
|
return gdjs.Base3DHandler.is3D(object);
|
|
};
|
|
|
|
type AABB3D = {
|
|
min: Point3D;
|
|
max: Point3D;
|
|
};
|
|
|
|
const defaultEffectsData: EffectData[] = [
|
|
{
|
|
effectType: 'Scene3D::HemisphereLight',
|
|
name: 'Default Light for in-game editor',
|
|
doubleParameters: { elevation: 45, intensity: 1, rotation: 0 },
|
|
stringParameters: {
|
|
groundColor: '64;64;64',
|
|
skyColor: '255;255;255',
|
|
top: 'Y-',
|
|
},
|
|
booleanParameters: {},
|
|
},
|
|
];
|
|
|
|
// TODO: factor this?
|
|
const isMacLike =
|
|
typeof navigator !== 'undefined' &&
|
|
navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)
|
|
? true
|
|
: false;
|
|
|
|
const isControlOrCmdPressed = (inputManager: gdjs.InputManager) => {
|
|
// On macOS, meta key (Apple/Command key) acts as Control key on Windows/Linux.
|
|
return (
|
|
inputManager.isKeyPressed(LEFT_CTRL_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_CTRL_KEY) ||
|
|
inputManager.isKeyPressed(LEFT_META_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_META_KEY)
|
|
);
|
|
};
|
|
|
|
const isAltPressed = (inputManager: gdjs.InputManager) => {
|
|
return (
|
|
inputManager.isKeyPressed(LEFT_ALT_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_ALT_KEY)
|
|
);
|
|
};
|
|
|
|
const isShiftPressed = (inputManager: gdjs.InputManager) => {
|
|
return (
|
|
inputManager.isKeyPressed(LEFT_SHIFT_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_SHIFT_KEY)
|
|
);
|
|
};
|
|
|
|
const isControlPressedOnly = (inputManager: gdjs.InputManager) => {
|
|
return (
|
|
isControlOrCmdPressed(inputManager) &&
|
|
!isShiftPressed(inputManager) &&
|
|
!isAltPressed(inputManager)
|
|
);
|
|
};
|
|
|
|
const isControlPlusShiftPressedOnly = (inputManager: gdjs.InputManager) => {
|
|
return (
|
|
isControlOrCmdPressed(inputManager) &&
|
|
isShiftPressed(inputManager) &&
|
|
!isAltPressed(inputManager)
|
|
);
|
|
};
|
|
|
|
const isSpacePressed = (inputManager: gdjs.InputManager) =>
|
|
inputManager.isKeyPressed(SPACE_KEY);
|
|
|
|
const shouldDeleteSelection = (inputManager: gdjs.InputManager) => {
|
|
return (
|
|
inputManager.isKeyPressed(DEL_KEY) ||
|
|
inputManager.isKeyPressed(BACKSPACE_KEY)
|
|
);
|
|
};
|
|
|
|
const shouldScrollHorizontally = isAltPressed;
|
|
|
|
const shouldZoom = (inputManager: gdjs.InputManager) => {
|
|
// Browsers trigger a wheel event with ctrlKey or metaKey to true when the user
|
|
// does a pinch gesture on a trackpad. If this is the case, we zoom.
|
|
// see https://dev.to/danburzo/pinch-me-i-m-zooming-gestures-in-the-dom-a0e
|
|
if (isControlOrCmdPressed(inputManager)) return true;
|
|
if (isMacLike) {
|
|
return isControlOrCmdPressed(inputManager);
|
|
} else {
|
|
return (
|
|
!isControlOrCmdPressed(inputManager) &&
|
|
!isAltPressed(inputManager) &&
|
|
!isShiftPressed(inputManager)
|
|
);
|
|
}
|
|
};
|
|
|
|
const pressAndReleaseForClickDuration = 200;
|
|
const timeBetweenClicksForDoubleClick = 400;
|
|
|
|
/** Get the identifiers of the touches that are currently active, without the mouse. */
|
|
const getCurrentTouchIdentifiers = (inputManager: gdjs.InputManager) => {
|
|
return inputManager
|
|
.getAllTouchIdentifiers()
|
|
.slice()
|
|
.filter((id) => id !== gdjs.InputManager.MOUSE_TOUCH_ID) // Exclude mouse touch
|
|
.sort((a, b) => a - b); // Ensure stable order to help comparisons.
|
|
};
|
|
|
|
const getTouchesCentroid = (inputManager: gdjs.InputManager) => {
|
|
const ids = getCurrentTouchIdentifiers(inputManager);
|
|
if (ids.length === 0) return { x: 0, y: 0 };
|
|
let sx = 0;
|
|
let sy = 0;
|
|
for (let i = 0; i < ids.length; i++) {
|
|
sx += inputManager.getTouchX(ids[i]);
|
|
sy += inputManager.getTouchY(ids[i]);
|
|
}
|
|
return { x: sx / ids.length, y: sy / ids.length };
|
|
};
|
|
|
|
const getTouchesDistance = (inputManager: gdjs.InputManager) => {
|
|
const ids = getCurrentTouchIdentifiers(inputManager);
|
|
if (ids.length === 0) return 0;
|
|
return Math.hypot(
|
|
inputManager.getTouchX(ids[0]) - inputManager.getTouchX(ids[1]),
|
|
inputManager.getTouchY(ids[0]) - inputManager.getTouchY(ids[1])
|
|
);
|
|
};
|
|
|
|
const areSameTouchesSet = (ids1: Array<integer>, ids2: Array<integer>) => {
|
|
if (ids1.length !== ids2.length) return false;
|
|
for (let i = 0; i < ids1.length; i++) {
|
|
if (ids1[i] !== ids2[i]) return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const freeCameraKeys = [
|
|
LEFT_KEY,
|
|
RIGHT_KEY,
|
|
UP_KEY,
|
|
DOWN_KEY,
|
|
W_KEY,
|
|
S_KEY,
|
|
A_KEY,
|
|
D_KEY,
|
|
Q_KEY,
|
|
E_KEY,
|
|
];
|
|
const shouldSwitchToFreeCamera = (inputManager: gdjs.InputManager) =>
|
|
!isControlOrCmdPressed(inputManager) &&
|
|
!isAltPressed(inputManager) &&
|
|
!isShiftPressed(inputManager) &&
|
|
freeCameraKeys.some((key) => inputManager.isKeyPressed(key));
|
|
|
|
const snap = (value: float, size: float, offset: float) =>
|
|
size ? offset + size * Math.round((value - offset) / size) : value;
|
|
|
|
class Selection {
|
|
private _selectedObjects: Array<gdjs.RuntimeObject> = [];
|
|
|
|
add(object: gdjs.RuntimeObject) {
|
|
if (!this._selectedObjects.includes(object)) {
|
|
this._selectedObjects.push(object);
|
|
}
|
|
}
|
|
|
|
addAll(objects: RuntimeObject[]) {
|
|
for (const object of objects) {
|
|
this.add(object);
|
|
}
|
|
}
|
|
|
|
clear() {
|
|
this._selectedObjects = [];
|
|
}
|
|
|
|
toggle(object: gdjs.RuntimeObject) {
|
|
const index = this._selectedObjects.indexOf(object);
|
|
if (index < 0) {
|
|
this._selectedObjects.push(object);
|
|
} else {
|
|
this._selectedObjects.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
getSelectedObjects() {
|
|
return this._selectedObjects;
|
|
}
|
|
|
|
getLastSelectedObject(options?: {
|
|
ignoreIf: (object: gdjs.RuntimeObject) => boolean;
|
|
}): gdjs.RuntimeObject | null {
|
|
if (options && options.ignoreIf) {
|
|
for (let i = this._selectedObjects.length - 1; i >= 0; i--) {
|
|
const object = this._selectedObjects[i];
|
|
if (!options.ignoreIf(object)) {
|
|
return object;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
return this._selectedObjects[this._selectedObjects.length - 1] || null;
|
|
}
|
|
|
|
getAABB(): AABB3D | null {
|
|
let aabb: AABB3D | null = null;
|
|
for (const object of this._selectedObjects) {
|
|
if (is3D(object)) {
|
|
const aabb2D = object.getAABB();
|
|
const minZ = object.getUnrotatedAABBMinZ();
|
|
const maxZ = object.getUnrotatedAABBMaxZ();
|
|
if (aabb) {
|
|
aabb.min[0] = Math.min(aabb.min[0], aabb2D.min[0]);
|
|
aabb.min[1] = Math.min(aabb.min[1], aabb2D.min[1]);
|
|
aabb.min[2] = Math.min(aabb.min[2], minZ);
|
|
aabb.max[0] = Math.max(aabb.max[0], aabb2D.max[0]);
|
|
aabb.max[1] = Math.max(aabb.max[1], aabb2D.max[1]);
|
|
aabb.max[2] = Math.max(aabb.max[2], maxZ);
|
|
} else {
|
|
aabb = {
|
|
min: [aabb2D.min[0], aabb2D.min[1], minZ],
|
|
max: [aabb2D.max[0], aabb2D.max[1], maxZ],
|
|
};
|
|
}
|
|
}
|
|
}
|
|
return aabb;
|
|
}
|
|
}
|
|
|
|
class ObjectMover {
|
|
private editor: InGameEditor;
|
|
private _changeHappened = false;
|
|
private startTime = 0;
|
|
|
|
constructor(editor: InGameEditor) {
|
|
this.editor = editor;
|
|
}
|
|
|
|
_objectInitialPositions: Map<
|
|
gdjs.RuntimeObject,
|
|
{
|
|
x: float;
|
|
y: float;
|
|
z: float;
|
|
rotationX: float;
|
|
rotationY: float;
|
|
angle: float;
|
|
width: float;
|
|
height: float;
|
|
depth: float;
|
|
}
|
|
> = new Map();
|
|
|
|
startMove() {
|
|
this._changeHappened = false;
|
|
this._objectInitialPositions.clear();
|
|
this.startTime = Date.now();
|
|
}
|
|
|
|
endMove(): boolean {
|
|
const changeHappened = this._changeHappened;
|
|
this._objectInitialPositions.clear();
|
|
this._changeHappened = false;
|
|
return changeHappened;
|
|
}
|
|
|
|
move(
|
|
selectedObjects: Array<gdjs.RuntimeObject>,
|
|
movement: {
|
|
translationX: float;
|
|
translationY: float;
|
|
translationZ: float;
|
|
rotationX: float;
|
|
rotationY: float;
|
|
rotationZ: float;
|
|
scaleX: float;
|
|
scaleY: float;
|
|
scaleZ: float;
|
|
}
|
|
) {
|
|
if (Date.now() - this.startTime < 150) {
|
|
// Avoid miss-clicks gizmo dragging point to change object positions.
|
|
return;
|
|
}
|
|
selectedObjects.forEach((object) => {
|
|
if (this.editor.isInstanceLocked(object)) {
|
|
return;
|
|
}
|
|
|
|
this._changeHappened =
|
|
this._changeHappened ||
|
|
movement.translationX !== 0 ||
|
|
movement.translationY !== 0 ||
|
|
movement.translationZ !== 0 ||
|
|
movement.rotationX !== 0 ||
|
|
movement.rotationY !== 0 ||
|
|
movement.rotationZ !== 0 ||
|
|
movement.scaleX !== 1 ||
|
|
movement.scaleY !== 1 ||
|
|
movement.scaleZ !== 1;
|
|
|
|
let initialPosition = this._objectInitialPositions.get(object);
|
|
if (!initialPosition) {
|
|
initialPosition = is3D(object)
|
|
? {
|
|
x: object.getX(),
|
|
y: object.getY(),
|
|
z: object.getZ(),
|
|
rotationX: object.getRotationX(),
|
|
rotationY: object.getRotationY(),
|
|
angle: object.getAngle(),
|
|
width: object.getWidth(),
|
|
height: object.getHeight(),
|
|
depth: object.getDepth(),
|
|
}
|
|
: {
|
|
x: object.getX(),
|
|
y: object.getY(),
|
|
z: 0,
|
|
rotationX: 0,
|
|
rotationY: 0,
|
|
angle: object.getAngle(),
|
|
width: object.getWidth(),
|
|
height: object.getHeight(),
|
|
depth: 0,
|
|
};
|
|
this._objectInitialPositions.set(object, initialPosition);
|
|
}
|
|
// TODO Remove this when we handle 2D instances controls
|
|
if (!is3D(object)) {
|
|
return;
|
|
}
|
|
object.setX(Math.round(initialPosition.x + movement.translationX));
|
|
object.setY(Math.round(initialPosition.y + movement.translationY));
|
|
object.setAngle(
|
|
gdjs.evtTools.common.mod(
|
|
Math.round(initialPosition.angle + movement.rotationZ),
|
|
360
|
|
)
|
|
);
|
|
if (movement.scaleX !== 1) {
|
|
object.setWidth(
|
|
Math.round(initialPosition.width * Math.abs(movement.scaleX))
|
|
);
|
|
}
|
|
if (movement.scaleY !== 1) {
|
|
object.setHeight(
|
|
Math.round(initialPosition.height * Math.abs(movement.scaleY))
|
|
);
|
|
}
|
|
if (is3D(object)) {
|
|
object.setZ(Math.round(initialPosition.z + movement.translationZ));
|
|
object.setRotationX(
|
|
gdjs.evtTools.common.mod(
|
|
Math.round(initialPosition.rotationX + movement.rotationX),
|
|
360
|
|
)
|
|
);
|
|
object.setRotationY(
|
|
gdjs.evtTools.common.mod(
|
|
Math.round(initialPosition.rotationY + movement.rotationY),
|
|
360
|
|
)
|
|
);
|
|
if (movement.scaleZ !== 1) {
|
|
object.setDepth(
|
|
Math.round(initialPosition.depth * Math.abs(movement.scaleZ))
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
const getCameraForwardVector = (threeCamera: THREE.Camera) => {
|
|
// Make sure camera's matrixWorld is up-to-date (usually is, but good practice).
|
|
threeCamera.updateMatrixWorld();
|
|
|
|
// threeCamera.matrixWorld is a 4x4. In Three.js, the columns correspond to:
|
|
// [ right.x, up.x, forwardNeg.x, pos.x
|
|
// right.y, up.y, forwardNeg.y, pos.y
|
|
// right.z, up.z, forwardNeg.z, pos.z
|
|
// 0, 0, 0, 1 ]
|
|
//
|
|
// By default, a Three.js camera looks down the -Z axis, so the "forward" axis
|
|
// in the matrix is actually the negative Z column. We'll call it "forward" below.
|
|
const elements = threeCamera.matrixWorld.elements;
|
|
|
|
// Local forward axis in world space (note we take the negative of that column).
|
|
const forward = new THREE.Vector3(-elements[8], elements[9], -elements[10]);
|
|
|
|
// Normalize it, just in case (they should generally be unit vectors).
|
|
forward.normalize();
|
|
|
|
return { forward };
|
|
};
|
|
|
|
/** @category In-Game Editor */
|
|
export class InGameEditor {
|
|
private _editorId: string = '';
|
|
private _runtimeGame: RuntimeGame;
|
|
private _currentScene: gdjs.RuntimeScene | null = null;
|
|
private _editedInstanceContainer: gdjs.RuntimeInstanceContainer | null =
|
|
null;
|
|
private _editedInstanceDataList: InstanceData[] = [];
|
|
private _editedLayerDataList: LayerData[] = [];
|
|
private _selectedLayerName: string = '';
|
|
private _innerArea: AABB3D | null = null;
|
|
private _threeInnerArea: THREE.Object3D | null = null;
|
|
private _unregisterContextLostListener: (() => void) | null = null;
|
|
private _tempVector2d: THREE.Vector2 = new THREE.Vector2();
|
|
private _raycaster: THREE.Raycaster = new THREE.Raycaster();
|
|
|
|
private _isVisible = true;
|
|
private _timeSinceLastInteraction = 0;
|
|
private _isFirstFrame = true;
|
|
|
|
private _editorCamera;
|
|
|
|
/** Keep track of the focus to know if the game was blurred since the last frame. */
|
|
private _windowHadFocus = true;
|
|
|
|
// The controls shown to manipulate the selection.
|
|
private _selectionControls: {
|
|
object: gdjs.RuntimeObject;
|
|
dummyThreeObject: THREE.Object3D;
|
|
threeTransformControls: THREE_ADDONS.TransformControls;
|
|
} | null = null;
|
|
private _transformControlsMode: 'translate' | 'rotate' | 'scale' =
|
|
'translate';
|
|
private _editorGrid: EditorGrid;
|
|
private _selectionControlsMovementTotalDelta: {
|
|
translationX: float;
|
|
translationY: float;
|
|
translationZ: float;
|
|
rotationX: float;
|
|
rotationY: float;
|
|
rotationZ: float;
|
|
scaleX: float;
|
|
scaleY: float;
|
|
scaleZ: float;
|
|
} | null = null;
|
|
private _hasSelectionActuallyMoved = false;
|
|
private _isTransformControlsHovered = false;
|
|
private _wasMovingSelectionLastFrame = false;
|
|
|
|
private _selectionBox: THREE_ADDONS.SelectionBox | null = null;
|
|
private _selectionBoxElement: HTMLDivElement;
|
|
private _selectionBoxStartCursorX: float = 0;
|
|
private _selectionBoxStartCursorY: float = 0;
|
|
|
|
// The selected objects.
|
|
private _selection = new Selection();
|
|
private _selectionBoxes: Map<RuntimeObject, ObjectSelectionBoxHelper> =
|
|
new Map();
|
|
private _objectMover = new ObjectMover(this);
|
|
|
|
private _wasMouseLeftButtonPressed = false;
|
|
private _wasMouseRightButtonPressed = false;
|
|
private _wasMouseMiddleButtonPressed = false;
|
|
private _pressedOriginalCursorX: float = 0;
|
|
private _pressedOriginalCursorY: float = 0;
|
|
private _previousCursorX: float = 0;
|
|
private _previousCursorY: float = 0;
|
|
private _pressedRightButtonTime: number = 0;
|
|
private _pressedMiddleButtonTime: number = 0;
|
|
|
|
private _lastClickOnObjectUnderCursor: {
|
|
object: gdjs.RuntimeObject | null;
|
|
time: number;
|
|
} = {
|
|
object: null,
|
|
time: 0,
|
|
};
|
|
|
|
// Dragged new object:
|
|
private _draggedNewObject: gdjs.RuntimeObject | null = null;
|
|
private _draggedSelectedObject: gdjs.RuntimeObject | null = null;
|
|
private _draggedSelectedObjectInitialX: float = 0;
|
|
private _draggedSelectedObjectInitialY: float = 0;
|
|
private _draggedSelectedObjectInitialZ: float = 0;
|
|
private _draggedSelectedObjectTotalDelta: {
|
|
translationX: float;
|
|
translationY: float;
|
|
translationZ: float;
|
|
rotationX: float;
|
|
rotationY: float;
|
|
rotationZ: float;
|
|
scaleX: float;
|
|
scaleY: float;
|
|
scaleZ: float;
|
|
} = {
|
|
translationX: 0,
|
|
translationY: 0,
|
|
translationZ: 0,
|
|
rotationX: 0,
|
|
rotationY: 0,
|
|
rotationZ: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
scaleZ: 1,
|
|
};
|
|
private _instancesEditorSettings: InstancesEditorSettings | null = null;
|
|
private _toolbar: Toolbar;
|
|
private _inGameEditorSettings: InGameEditorSettings;
|
|
|
|
constructor(
|
|
game: RuntimeGame,
|
|
projectData: ProjectData,
|
|
inGameEditorSettings: InGameEditorSettings | null
|
|
) {
|
|
this._runtimeGame = game;
|
|
this._editorCamera = new EditorCamera(this);
|
|
this._editorGrid = new EditorGrid(this);
|
|
|
|
this._selectionBoxElement = document.createElement('div');
|
|
this._selectionBoxElement.style.position = 'fixed';
|
|
this._selectionBoxElement.style.backgroundColor = '#f2a63c44';
|
|
this._selectionBoxElement.style.border = '1px solid #f2a63c';
|
|
|
|
this._inGameEditorSettings =
|
|
inGameEditorSettings || defaultInGameEditorSettings;
|
|
|
|
this._toolbar = new Toolbar({
|
|
getTransformControlsMode: () => this._getTransformControlsMode(),
|
|
setTransformControlsMode: (mode: 'translate' | 'rotate' | 'scale') =>
|
|
this._setTransformControlsMode(mode),
|
|
focusOnSelection: () => this._focusOnSelection(),
|
|
switchToFreeCamera: () => this._getEditorCamera().switchToFreeCamera(),
|
|
switchToOrbitCamera: () =>
|
|
this._getEditorCamera().switchToOrbitAroundZ0(4000),
|
|
isFreeCamera: () => this._getEditorCamera().isFreeCamera(),
|
|
getSvgIconUrl: (iconName: string) => getSvgIconUrl(game, iconName),
|
|
hasSelectionControlsShown: () => !!this._selectionControls,
|
|
});
|
|
|
|
this._applyInGameEditorSettings();
|
|
this.onProjectDataChange(projectData);
|
|
|
|
// Uncomment to get access to the runtime game from the console and do
|
|
// testing.
|
|
// window.globalRuntimeGameForTesting = game;
|
|
}
|
|
|
|
private _setupWebGLContextLostListener(): void {
|
|
const canvas = this._runtimeGame.getRenderer().getCanvas();
|
|
if (!canvas) return;
|
|
|
|
const handleContextLost = (event: Event) => {
|
|
console.warn('WebGL context lost, notifying the editor...');
|
|
|
|
// Prevent to restore the context, and prefer to let the editor handle this
|
|
// to restart from a clean state.
|
|
event.preventDefault();
|
|
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (debuggerClient) {
|
|
debuggerClient.sendGraphicsContextLost();
|
|
}
|
|
};
|
|
|
|
canvas.addEventListener('webglcontextlost', handleContextLost);
|
|
canvas.addEventListener('contextlost', handleContextLost);
|
|
this._unregisterContextLostListener = () => {
|
|
canvas.removeEventListener('webglcontextlost', handleContextLost);
|
|
canvas.removeEventListener('contextlost', handleContextLost);
|
|
};
|
|
}
|
|
|
|
dispose(): void {
|
|
if (this._unregisterContextLostListener) {
|
|
this._unregisterContextLostListener();
|
|
this._unregisterContextLostListener = null;
|
|
}
|
|
}
|
|
|
|
private _applyInGameEditorSettings() {
|
|
if (typeof document === 'undefined') return;
|
|
|
|
const rootElement = document.documentElement;
|
|
if (!rootElement) return;
|
|
|
|
rootElement.style.setProperty(
|
|
'--in-game-editor-theme-icon-button-selected-background-color',
|
|
this._inGameEditorSettings.theme.iconButtonSelectedBackgroundColor
|
|
);
|
|
rootElement.style.setProperty(
|
|
'--in-game-editor-theme-icon-button-selected-color',
|
|
this._inGameEditorSettings.theme.iconButtonSelectedColor
|
|
);
|
|
rootElement.style.setProperty(
|
|
'--in-game-editor-theme-toolbar-background-color',
|
|
this._inGameEditorSettings.theme.toolbarBackgroundColor
|
|
);
|
|
rootElement.style.setProperty(
|
|
'--in-game-editor-theme-toolbar-separator-color',
|
|
this._inGameEditorSettings.theme.toolbarSeparatorColor
|
|
);
|
|
rootElement.style.setProperty(
|
|
'--in-game-editor-theme-text-color-primary',
|
|
this._inGameEditorSettings.theme.textColorPrimary
|
|
);
|
|
}
|
|
|
|
setInGameEditorSettings(inGameEditorSettings: InGameEditorSettings) {
|
|
this._inGameEditorSettings = {
|
|
...this._inGameEditorSettings,
|
|
...inGameEditorSettings,
|
|
};
|
|
this._applyInGameEditorSettings();
|
|
}
|
|
|
|
getRuntimeGame() {
|
|
return this._runtimeGame;
|
|
}
|
|
|
|
onProjectDataChange(projectData: ProjectData): void {
|
|
this.setEffectsHiddenInEditor(
|
|
!!projectData.properties.areEffectsHiddenInEditor
|
|
);
|
|
}
|
|
|
|
onLayersDataChange(
|
|
layersData: Array<LayerData>,
|
|
areEffectsHiddenInEditor: boolean
|
|
): void {
|
|
for (const layerData of layersData) {
|
|
// Camera controls don't work in orthographic.
|
|
if (layerData.cameraType === 'orthographic') {
|
|
layerData.cameraType = 'perspective';
|
|
}
|
|
layerData.camera3DFieldOfView = editorCameraFov;
|
|
// Force 2D and 3D objects to be visible on any layer.
|
|
layerData.renderingType = '2d+3d';
|
|
if (areEffectsHiddenInEditor) {
|
|
if (layerData.effects !== defaultEffectsData) {
|
|
layerData._hiddenEffects = layerData.effects;
|
|
layerData.effects = defaultEffectsData;
|
|
}
|
|
} else {
|
|
if (layerData._hiddenEffects) {
|
|
layerData.effects = layerData._hiddenEffects;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Modify the layer data accordingly.
|
|
* `gdjs.HotReloader.hotReloadRuntimeSceneLayers` must be run for the
|
|
* changes to be applied.
|
|
*/
|
|
setEffectsHiddenInEditor(areEffectsHiddenInEditor: boolean) {
|
|
const projectData = this._runtimeGame.getGameData();
|
|
projectData.properties.areEffectsHiddenInEditor =
|
|
areEffectsHiddenInEditor;
|
|
for (const layoutData of projectData.layouts) {
|
|
this.onLayersDataChange(layoutData.layers, areEffectsHiddenInEditor);
|
|
}
|
|
}
|
|
|
|
areEffectsHidden(): boolean {
|
|
return !!this._runtimeGame.getGameData().properties
|
|
.areEffectsHiddenInEditor;
|
|
}
|
|
|
|
getEditorId(): string {
|
|
return this._editorId;
|
|
}
|
|
|
|
getEditedInstanceDataList(): InstanceData[] {
|
|
return this._editedInstanceDataList;
|
|
}
|
|
|
|
getEditedLayerDataList(): LayerData[] {
|
|
return this._editedLayerDataList;
|
|
}
|
|
|
|
getEditedInstanceContainer(): gdjs.RuntimeInstanceContainer | null {
|
|
return this._editedInstanceContainer;
|
|
}
|
|
|
|
getCurrentScene(): gdjs.RuntimeScene | null {
|
|
return this._currentScene;
|
|
}
|
|
|
|
/**
|
|
* Return the layer to be used for camera calculus.
|
|
* @see getEditorLayer
|
|
*/
|
|
private getCameraLayer(layerName: string): gdjs.RuntimeLayer | null {
|
|
// When the edited container is a custom object,
|
|
// only a base layer exists and `getLayer` falls back on it.
|
|
return this._currentScene ? this._currentScene.getLayer(layerName) : null;
|
|
}
|
|
|
|
/**
|
|
* Return the layer which contains the objects.
|
|
* @see getCameraLayer
|
|
*/
|
|
private getEditorLayer(layerName: string): gdjs.RuntimeLayer | null {
|
|
return this._editedInstanceContainer
|
|
? this._editedInstanceContainer.getLayer(layerName)
|
|
: null;
|
|
}
|
|
|
|
/**
|
|
* Called by the RuntimeGame when the game resolution is changed.
|
|
* Useful to notify scene and layers that resolution is changed, as they
|
|
* might be caching it.
|
|
*/
|
|
onGameResolutionResized() {
|
|
if (!this._currentScene) {
|
|
return;
|
|
}
|
|
this._currentScene.onGameResolutionResized();
|
|
}
|
|
|
|
async switchToSceneOrVariant(
|
|
editorId: string | null,
|
|
sceneName: string | null,
|
|
externalLayoutName: string | null,
|
|
eventsBasedObjectType: string | null,
|
|
eventsBasedObjectVariantName: string | null,
|
|
editorCamera3D: EditorCameraState | null
|
|
) {
|
|
if (this._currentScene) {
|
|
this._currentScene.unloadScene();
|
|
this._currentScene = null;
|
|
}
|
|
// The 3D scene is rebuilt and the inner area marker is lost in the process.
|
|
this._threeInnerArea = null;
|
|
this._innerArea = null;
|
|
this._selectedLayerName = '';
|
|
// Clear any reference to `RuntimeObject` from the unloaded scene.
|
|
this._selectionBoxes.clear();
|
|
this._selectionControls = null;
|
|
this._draggedNewObject = null;
|
|
this._draggedSelectedObject = null;
|
|
const selectedObjectIds = this._selection
|
|
.getSelectedObjects()
|
|
.map((object) => object.persistentUuid)
|
|
.filter(Boolean) as Array<string>;
|
|
|
|
let editedLayerDataList: Array<LayerData> = [];
|
|
let editedInstanceDataList: Array<InstanceData> = [];
|
|
if (eventsBasedObjectType) {
|
|
const eventsBasedObjectVariantData =
|
|
this._runtimeGame.getEventsBasedObjectVariantData(
|
|
eventsBasedObjectType,
|
|
eventsBasedObjectVariantName || ''
|
|
);
|
|
if (eventsBasedObjectVariantData) {
|
|
editedLayerDataList = eventsBasedObjectVariantData.layers;
|
|
editedInstanceDataList = eventsBasedObjectVariantData.instances;
|
|
await this._runtimeGame._resourcesLoader.loadResources(
|
|
eventsBasedObjectVariantData.usedResources.map(
|
|
(resource) => resource.name
|
|
),
|
|
() => {}
|
|
);
|
|
const sceneAndCustomObject = this._createSceneWithCustomObject(
|
|
eventsBasedObjectType,
|
|
eventsBasedObjectVariantName || ''
|
|
);
|
|
if (sceneAndCustomObject) {
|
|
const { scene, customObjectInstanceContainer } =
|
|
sceneAndCustomObject;
|
|
this._currentScene = scene;
|
|
this._editedInstanceContainer = customObjectInstanceContainer;
|
|
}
|
|
this.setInstancesEditorSettings(
|
|
eventsBasedObjectVariantData.editionSettings
|
|
);
|
|
this._innerArea = eventsBasedObjectVariantData._initialInnerArea;
|
|
} else {
|
|
console.warn(
|
|
`Couldn't find any variant named "${eventsBasedObjectVariantName || ''}" for ${eventsBasedObjectType}`
|
|
);
|
|
}
|
|
} else if (sceneName) {
|
|
await this._runtimeGame.loadFirstAssetsAndStartBackgroundLoading(
|
|
sceneName,
|
|
() => {}
|
|
);
|
|
// Load the new one
|
|
const sceneAndExtensionsData =
|
|
this._runtimeGame.getSceneAndExtensionsData(sceneName);
|
|
const newScene = new gdjs.RuntimeScene(this._runtimeGame);
|
|
newScene.loadFromScene(sceneAndExtensionsData, {
|
|
skipCreatingInstances: !!externalLayoutName,
|
|
});
|
|
|
|
// Optionally create the objects from an external layout.
|
|
if (externalLayoutName) {
|
|
const externalLayoutData =
|
|
this._runtimeGame.getExternalLayoutData(externalLayoutName);
|
|
if (externalLayoutData) {
|
|
newScene.createObjectsFrom(
|
|
externalLayoutData.instances,
|
|
0,
|
|
0,
|
|
0,
|
|
/*trackByPersistentUuid=*/
|
|
true
|
|
);
|
|
this.setInstancesEditorSettings(externalLayoutData.editionSettings);
|
|
}
|
|
} else {
|
|
this.setInstancesEditorSettings(
|
|
sceneAndExtensionsData!.sceneData.uiSettings
|
|
);
|
|
}
|
|
this._currentScene = newScene;
|
|
this._editedInstanceContainer = newScene;
|
|
if (sceneAndExtensionsData) {
|
|
editedLayerDataList = sceneAndExtensionsData.sceneData.layers;
|
|
}
|
|
if (externalLayoutName) {
|
|
const externalLayoutData =
|
|
this._runtimeGame.getExternalLayoutData(externalLayoutName);
|
|
if (externalLayoutData) {
|
|
editedInstanceDataList = externalLayoutData.instances;
|
|
}
|
|
} else {
|
|
const sceneAndExtensionsData =
|
|
this._runtimeGame.getSceneAndExtensionsData(sceneName);
|
|
if (sceneAndExtensionsData) {
|
|
editedInstanceDataList = sceneAndExtensionsData.sceneData.instances;
|
|
}
|
|
}
|
|
} else {
|
|
console.warn('eventsBasedObjectType or sceneName must be set.');
|
|
}
|
|
this._editedInstanceDataList = editedInstanceDataList;
|
|
this._editedLayerDataList = editedLayerDataList;
|
|
this._editorId = editorId || '';
|
|
if (editorCamera3D) {
|
|
this.restoreCameraState(editorCamera3D);
|
|
} else {
|
|
// TODO Get the visibleScreenArea from the editor.
|
|
this.zoomToInitialPosition({
|
|
minX: 0.15,
|
|
minY: 0.15,
|
|
maxX: 0.85,
|
|
maxY: 0.85,
|
|
});
|
|
}
|
|
|
|
// Update initialRuntimeGameStatus so that a hard reload
|
|
// will come back to the same state, and so that we can check later
|
|
// if the game is already on the state that is being requested.
|
|
this._runtimeGame.getAdditionalOptions().initialRuntimeGameStatus = {
|
|
isPaused: this._runtimeGame.isPaused(),
|
|
isInGameEdition: this._runtimeGame.isInGameEdition(),
|
|
sceneName: sceneName,
|
|
injectedExternalLayoutName: externalLayoutName,
|
|
skipCreatingInstancesFromScene: !!externalLayoutName,
|
|
eventsBasedObjectType,
|
|
eventsBasedObjectVariantName,
|
|
editorId,
|
|
};
|
|
|
|
// Try to keep object selection in case the same scene is reloaded.
|
|
this.setSelectedObjects(selectedObjectIds);
|
|
this._isFirstFrame = true;
|
|
}
|
|
|
|
private _createSceneWithCustomObject(
|
|
eventsBasedObjectType: string,
|
|
eventsBasedObjectVariantName: string
|
|
): {
|
|
scene: gdjs.RuntimeScene;
|
|
customObjectInstanceContainer: gdjs.CustomRuntimeObjectInstanceContainer;
|
|
} | null {
|
|
const eventsBasedObjectData = this._runtimeGame.getEventsBasedObjectData(
|
|
eventsBasedObjectType
|
|
);
|
|
if (!eventsBasedObjectData) {
|
|
logger.error(
|
|
`A CustomRuntimeObject was open in editor referring to an non existing events based object data with type "${eventsBasedObjectType}".`
|
|
);
|
|
return null;
|
|
}
|
|
|
|
const scene = new gdjs.RuntimeScene(this._runtimeGame);
|
|
scene.loadFromScene({
|
|
sceneData: {
|
|
variables: [],
|
|
instances: [
|
|
{
|
|
angle: 0,
|
|
customSize: false,
|
|
height: 0,
|
|
layer: '',
|
|
name: 'Object',
|
|
persistentUuid: '12345678-1234-1234-1234-123456789abc',
|
|
width: 0,
|
|
x: 0,
|
|
y: 0,
|
|
zOrder: 1,
|
|
numberProperties: [],
|
|
stringProperties: [],
|
|
initialVariables: [],
|
|
locked: false,
|
|
},
|
|
],
|
|
objects: [
|
|
{
|
|
name: 'Object',
|
|
type: eventsBasedObjectType,
|
|
//@ts-ignore
|
|
variant: eventsBasedObjectVariantName,
|
|
content: {},
|
|
variables: [],
|
|
// Add all capabilities just in case events need them.
|
|
behaviors: [
|
|
{
|
|
name: 'Animation',
|
|
type: 'AnimatableCapability::AnimatableBehavior',
|
|
},
|
|
{ name: 'Effect', type: 'EffectCapability::EffectBehavior' },
|
|
{
|
|
name: 'Flippable',
|
|
type: 'FlippableCapability::FlippableBehavior',
|
|
},
|
|
{
|
|
name: 'Object3D',
|
|
type: 'Scene3D::Base3DBehavior',
|
|
},
|
|
{
|
|
name: 'Opacity',
|
|
type: 'OpacityCapability::OpacityBehavior',
|
|
},
|
|
{
|
|
name: 'Resizable',
|
|
type: 'ResizableCapability::ResizableBehavior',
|
|
},
|
|
{
|
|
name: 'Scale',
|
|
type: 'ScalableCapability::ScalableBehavior',
|
|
},
|
|
{
|
|
name: 'Text',
|
|
type: 'TextContainerCapability::TextContainerBehavior',
|
|
},
|
|
],
|
|
effects: [],
|
|
},
|
|
],
|
|
layers: [
|
|
{
|
|
ambientLightColorB: 200,
|
|
ambientLightColorG: 200,
|
|
ambientLightColorR: 200,
|
|
camera3DFarPlaneDistance: 10000,
|
|
camera3DFieldOfView: 45,
|
|
camera3DNearPlaneDistance: 3,
|
|
followBaseLayerCamera: false,
|
|
isLightingLayer: false,
|
|
name: '',
|
|
renderingType: '2d+3d',
|
|
visibility: true,
|
|
cameras: [
|
|
{
|
|
defaultSize: true,
|
|
defaultViewport: true,
|
|
height: 0,
|
|
viewportBottom: 1,
|
|
viewportLeft: 0,
|
|
viewportRight: 1,
|
|
viewportTop: 0,
|
|
width: 0,
|
|
},
|
|
],
|
|
effects: [
|
|
{
|
|
effectType: 'Scene3D::HemisphereLight',
|
|
name: '3D Light',
|
|
doubleParameters: {
|
|
elevation: 45,
|
|
intensity: 1,
|
|
rotation: 0,
|
|
},
|
|
stringParameters: {
|
|
groundColor: '64;64;64',
|
|
skyColor: '255;255;255',
|
|
top: 'Y-',
|
|
},
|
|
booleanParameters: {},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
r: 32,
|
|
v: 32,
|
|
b: 32,
|
|
mangledName: 'FakeSceneForCustomObject',
|
|
name: eventsBasedObjectData.name,
|
|
stopSoundsOnStartup: true,
|
|
title: '',
|
|
behaviorsSharedData: [
|
|
{
|
|
name: 'Text',
|
|
type: 'TextContainerCapability::TextContainerBehavior',
|
|
},
|
|
],
|
|
usedResources: [],
|
|
},
|
|
usedExtensionsWithVariablesData:
|
|
this._runtimeGame.getGameData().eventsFunctionsExtensions,
|
|
});
|
|
const objects = scene.getObjects('Object');
|
|
const object = objects ? objects[0] : null;
|
|
if (!object) {
|
|
return null;
|
|
}
|
|
const customObject = object as gdjs.CustomRuntimeObject;
|
|
if (!customObject._instanceContainer) {
|
|
return null;
|
|
}
|
|
return {
|
|
scene,
|
|
customObjectInstanceContainer: customObject._instanceContainer,
|
|
};
|
|
}
|
|
|
|
updateInnerArea(
|
|
areaMinX: float,
|
|
areaMinY: float,
|
|
areaMinZ: float,
|
|
areaMaxX: float,
|
|
areaMaxY: float,
|
|
areaMaxZ: float
|
|
) {
|
|
if (!this._innerArea) {
|
|
return;
|
|
}
|
|
// This only works because `this._innerArea` is the same instance as the
|
|
// one used by custom object instances.
|
|
this._innerArea.min[0] = areaMinX;
|
|
this._innerArea.min[1] = areaMinY;
|
|
this._innerArea.min[2] = areaMinZ;
|
|
this._innerArea.max[0] = areaMaxX;
|
|
this._innerArea.max[1] = areaMaxY;
|
|
this._innerArea.max[2] = areaMaxZ;
|
|
}
|
|
|
|
setSelectedLayerName(layerName: string): void {
|
|
this._selectedLayerName = layerName;
|
|
}
|
|
|
|
setInstancesEditorSettings(
|
|
instancesEditorSettings: InstancesEditorSettings
|
|
) {
|
|
this._instancesEditorSettings = instancesEditorSettings;
|
|
this._editorGrid.setSettings(instancesEditorSettings);
|
|
}
|
|
|
|
updateInstancesEditorSettings(
|
|
instancesEditorSettings: InstancesEditorSettings
|
|
) {
|
|
if (this._instancesEditorSettings) {
|
|
Object.assign(this._instancesEditorSettings, instancesEditorSettings);
|
|
} else {
|
|
this._instancesEditorSettings = instancesEditorSettings;
|
|
}
|
|
this._editorGrid.setSettings(instancesEditorSettings);
|
|
}
|
|
|
|
private _getTempVector2d(x: float, y: float): THREE.Vector2 {
|
|
this._tempVector2d.x = x;
|
|
this._tempVector2d.y = y;
|
|
return this._tempVector2d;
|
|
}
|
|
|
|
zoomToInitialPosition(visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
}) {
|
|
if (this._innerArea) {
|
|
this.zoomToFitArea(
|
|
{
|
|
minX: this._innerArea.min[0],
|
|
minY: this._innerArea.min[1],
|
|
minZ: this._innerArea.min[2],
|
|
maxX: this._innerArea.max[0],
|
|
maxY: this._innerArea.max[1],
|
|
maxZ: this._innerArea.max[2],
|
|
},
|
|
visibleScreenArea,
|
|
0.1
|
|
);
|
|
} else {
|
|
this.zoomToFitArea(
|
|
{
|
|
minX: 0,
|
|
minY: 0,
|
|
minZ: 0,
|
|
maxX: this._runtimeGame.getOriginalWidth(),
|
|
maxY: this._runtimeGame.getOriginalHeight(),
|
|
maxZ: 0,
|
|
},
|
|
visibleScreenArea,
|
|
0.1
|
|
);
|
|
}
|
|
}
|
|
|
|
zoomToFitContent(visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
}) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
this.zoomToFitObjects(
|
|
editedInstanceContainer.getAdhocListOfAllInstances(),
|
|
visibleScreenArea,
|
|
0.01
|
|
);
|
|
}
|
|
|
|
zoomToFitSelection(visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
}) {
|
|
this.zoomToFitObjects(
|
|
this._selection.getSelectedObjects(),
|
|
visibleScreenArea,
|
|
0.2
|
|
);
|
|
}
|
|
|
|
zoomToFitObjects(
|
|
objects: Array<RuntimeObject>,
|
|
visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
},
|
|
margin: float
|
|
) {
|
|
this._getEditorCamera().zoomToFitObjects(
|
|
objects,
|
|
visibleScreenArea,
|
|
margin
|
|
);
|
|
}
|
|
|
|
zoomToFitArea(
|
|
sceneArea: {
|
|
minX: number;
|
|
minY: number;
|
|
minZ: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
maxZ: number;
|
|
},
|
|
visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
},
|
|
margin: float
|
|
) {
|
|
if (!this._currentScene) return;
|
|
this._getEditorCamera().zoomToFitArea(
|
|
sceneArea,
|
|
visibleScreenArea,
|
|
margin
|
|
);
|
|
this._getEditorCamera().switchToFreeCamera();
|
|
}
|
|
|
|
zoomBy(zoomFactor: float) {
|
|
if (!this._currentScene) return;
|
|
this._getEditorCamera().zoomBy(zoomFactor);
|
|
}
|
|
|
|
setZoom(zoom: float) {
|
|
if (!this._currentScene) return;
|
|
this._getEditorCamera().setZoom(zoom);
|
|
}
|
|
|
|
getSelectionAABB(): AABB3D | null {
|
|
return this._selection.getAABB();
|
|
}
|
|
|
|
setSelectedObjects(persistentUuids: Array<string>) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
const persistentUuidsSet = new Set<string>(persistentUuids);
|
|
const selectedObjectsMap = new Map<string, gdjs.RuntimeObject>();
|
|
for (const object of editedInstanceContainer.getAdhocListOfAllInstances()) {
|
|
if (
|
|
object.persistentUuid &&
|
|
persistentUuidsSet.has(object.persistentUuid)
|
|
) {
|
|
// We can't add the object to the selection directly because they
|
|
// would be out of order.
|
|
selectedObjectsMap.set(object.persistentUuid, object);
|
|
}
|
|
}
|
|
this._selection.clear();
|
|
for (const instanceUuid of persistentUuids) {
|
|
const object = selectedObjectsMap.get(instanceUuid);
|
|
if (object) {
|
|
this._selection.add(object);
|
|
}
|
|
}
|
|
// Send back default instances sizes.
|
|
this._sendSelectionUpdate({ isSendingBackSelectionForDefaultSize: true });
|
|
}
|
|
|
|
centerViewOnLastSelectedInstance() {
|
|
if (!this._currentScene) return;
|
|
|
|
const object = this._selection.getLastSelectedObject();
|
|
if (!object) {
|
|
return;
|
|
}
|
|
|
|
this._getEditorCamera().switchToOrbitAroundObject(object);
|
|
}
|
|
|
|
private _focusOnSelection() {
|
|
// TODO Use the center of the AABB of the whole selection instead
|
|
const selectedObject = this._selection.getLastSelectedObject();
|
|
if (!selectedObject) {
|
|
return;
|
|
}
|
|
this._getEditorCamera().switchToOrbitAroundObject(selectedObject);
|
|
}
|
|
|
|
private _handleCameraMovement() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return;
|
|
|
|
const selectedObject = this._selection.getLastSelectedObject();
|
|
if (inputManager.isKeyPressed(F_KEY) && selectedObject) {
|
|
this._focusOnSelection();
|
|
}
|
|
|
|
if (
|
|
!this._getEditorCamera().isFreeCamera() &&
|
|
shouldSwitchToFreeCamera(inputManager)
|
|
) {
|
|
this._getEditorCamera().switchToFreeCamera();
|
|
}
|
|
|
|
this._getEditorCamera().step();
|
|
|
|
const layerNames = [];
|
|
currentScene.getAllLayerNames(layerNames);
|
|
layerNames.forEach((layerName) => {
|
|
const layer = currentScene.getLayer(layerName);
|
|
|
|
this._getEditorCamera().updateCamera(currentScene, layer);
|
|
});
|
|
}
|
|
|
|
moveSelectionUnderCursor() {
|
|
if (!this._currentScene) return;
|
|
|
|
const cursor = this._getCursorIn3D(this._selection.getSelectedObjects());
|
|
if (!cursor) {
|
|
return;
|
|
}
|
|
const [cursorX, cursorY, cursorZ] = cursor;
|
|
|
|
let minX = Number.MAX_VALUE;
|
|
let minY = Number.MAX_VALUE;
|
|
let minZ = Number.MAX_VALUE;
|
|
let maxX = Number.MIN_VALUE;
|
|
let maxY = Number.MIN_VALUE;
|
|
for (const object of this._selection.getSelectedObjects()) {
|
|
minX = Math.min(minX, object.getAABBLeft());
|
|
minY = Math.min(minY, object.getAABBTop());
|
|
if (is3D(object)) {
|
|
minZ = Math.min(minZ, object.getUnrotatedAABBMinZ());
|
|
}
|
|
maxX = Math.max(maxX, object.getAABBRight());
|
|
maxY = Math.max(maxY, object.getAABBBottom());
|
|
}
|
|
const deltaX = cursorX - (maxX + minX) / 2;
|
|
const deltaY = cursorY - (maxY + minY) / 2;
|
|
const deltaZ = cursorZ - minZ;
|
|
for (const object of this._selection.getSelectedObjects()) {
|
|
object.setX(object.getX() + deltaX);
|
|
object.setY(object.getY() + deltaY);
|
|
if (is3D(object)) {
|
|
object.setZ(object.getZ() + deltaZ);
|
|
}
|
|
}
|
|
this._sendSelectionUpdate({ hasSelectedObjectBeenModified: true });
|
|
}
|
|
|
|
private _shouldDragSelectedObject(): boolean {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
return (
|
|
isControlOrCmdPressed(inputManager) &&
|
|
(!this._selectionControls ||
|
|
!this._selectionControls.threeTransformControls.dragging)
|
|
);
|
|
}
|
|
|
|
private _handleSelectedObjectDragging(): void {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
|
|
// Always check first if we should end an existing drag.
|
|
if (
|
|
this._draggedSelectedObject &&
|
|
(inputManager.isMouseButtonReleased(0) ||
|
|
!this._shouldDragSelectedObject())
|
|
) {
|
|
this._draggedSelectedObject = null;
|
|
const changeHappened = this._objectMover.endMove();
|
|
this._sendSelectionUpdate({
|
|
hasSelectedObjectBeenModified: changeHappened,
|
|
});
|
|
}
|
|
|
|
// Inspect then if a drag should be started or continued.
|
|
if (!this._shouldDragSelectedObject()) {
|
|
// We can early return as the rest is not applicable (we've already checked
|
|
// if a drag should be ended).
|
|
return;
|
|
}
|
|
if (!this._currentScene) return;
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
if (
|
|
inputManager.isMouseButtonPressed(0) &&
|
|
!this._draggedSelectedObject
|
|
) {
|
|
// Start a new drag.
|
|
let object = this.getObjectUnderCursor();
|
|
if (object && this._selection.getSelectedObjects().includes(object)) {
|
|
if (isControlOrCmdPressed(inputManager)) {
|
|
object = this._duplicateSelectedObjects(object);
|
|
if (!object) {
|
|
return;
|
|
}
|
|
}
|
|
this._draggedSelectedObject = object;
|
|
this._draggedSelectedObjectInitialX = object.getX();
|
|
this._draggedSelectedObjectInitialY = object.getY();
|
|
this._draggedSelectedObjectInitialZ = is3D(object)
|
|
? object.getZ()
|
|
: 0;
|
|
this._objectMover.startMove();
|
|
}
|
|
}
|
|
|
|
// Continue an existing drag.
|
|
if (!this._draggedSelectedObject) {
|
|
return;
|
|
}
|
|
|
|
let isIntersectionFound = false;
|
|
let intersectionX: float = 0;
|
|
let intersectionY: float = 0;
|
|
let intersectionZ: float = 0;
|
|
if (is3D(this._draggedSelectedObject)) {
|
|
const cursor = this._getCursorIn3D(
|
|
this._selection.getSelectedObjects()
|
|
);
|
|
if (cursor) {
|
|
isIntersectionFound = true;
|
|
[intersectionX, intersectionY, intersectionZ] = cursor;
|
|
}
|
|
} else {
|
|
const projectedCursor = this._getProjectedCursor();
|
|
if (projectedCursor) {
|
|
isIntersectionFound = true;
|
|
[intersectionX, intersectionY] = projectedCursor;
|
|
}
|
|
}
|
|
if (isIntersectionFound) {
|
|
this._editorGrid.setNormal('Z');
|
|
this._editorGrid.setPosition(
|
|
intersectionX,
|
|
intersectionY,
|
|
intersectionZ
|
|
);
|
|
const cameraLayer = this.getCameraLayer(
|
|
this._draggedSelectedObject.getLayer()
|
|
);
|
|
const threeScene = cameraLayer
|
|
? cameraLayer.getRenderer().getThreeScene()
|
|
: null;
|
|
if (threeScene) {
|
|
this._editorGrid.setTreeScene(threeScene);
|
|
}
|
|
this._editorGrid.setVisible(true);
|
|
if (this._editorGrid.isSpanningEnabled(inputManager)) {
|
|
intersectionX = this._editorGrid.getSnappedX(intersectionX);
|
|
intersectionY = this._editorGrid.getSnappedY(intersectionY);
|
|
}
|
|
this._draggedSelectedObjectTotalDelta.translationX =
|
|
intersectionX - this._draggedSelectedObjectInitialX;
|
|
this._draggedSelectedObjectTotalDelta.translationY =
|
|
intersectionY - this._draggedSelectedObjectInitialY;
|
|
this._draggedSelectedObjectTotalDelta.translationZ =
|
|
intersectionZ - this._draggedSelectedObjectInitialZ;
|
|
} else {
|
|
this._draggedSelectedObjectTotalDelta.translationX = 0;
|
|
this._draggedSelectedObjectTotalDelta.translationY = 0;
|
|
this._draggedSelectedObjectTotalDelta.translationZ = 0;
|
|
}
|
|
this._objectMover.move(
|
|
this._selection.getSelectedObjects(),
|
|
this._draggedSelectedObjectTotalDelta
|
|
);
|
|
}
|
|
|
|
private _duplicateSelectedObjects(
|
|
objectUnderCursor: gdjs.RuntimeObject
|
|
): gdjs.RuntimeObject | null {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return null;
|
|
let newObjectUnderCursor: gdjs.RuntimeObject | null = null;
|
|
const addedObjects: Array<gdjs.RuntimeObject> = [];
|
|
for (const selectedObject of this._selection.getSelectedObjects()) {
|
|
const newObject = editedInstanceContainer.createObject(
|
|
selectedObject.getName()
|
|
);
|
|
if (!newObject) return null;
|
|
newObject.persistentUuid = gdjs.makeUuid();
|
|
newObject.setLayer(selectedObject.getLayer());
|
|
newObject.setX(selectedObject.getX());
|
|
newObject.setY(selectedObject.getY());
|
|
newObject.setAngle(selectedObject.getAngle());
|
|
newObject.setWidth(selectedObject.getWidth());
|
|
newObject.setHeight(selectedObject.getHeight());
|
|
if (is3D(newObject) && is3D(selectedObject)) {
|
|
newObject.setZ(selectedObject.getZ());
|
|
newObject.setRotationX(selectedObject.getRotationX());
|
|
newObject.setRotationY(selectedObject.getRotationY());
|
|
newObject.setDepth(selectedObject.getDepth());
|
|
}
|
|
addedObjects.push(newObject);
|
|
if (selectedObject === objectUnderCursor) {
|
|
newObjectUnderCursor = newObject;
|
|
}
|
|
}
|
|
this._selection.clear();
|
|
this._selection.addAll(addedObjects);
|
|
this._sendSelectionUpdate({
|
|
addedObjects,
|
|
});
|
|
return newObjectUnderCursor;
|
|
}
|
|
|
|
private _handleSelectionMovement() {
|
|
// Finished moving the selection.
|
|
if (
|
|
this._wasMovingSelectionLastFrame &&
|
|
!this._selectionControlsMovementTotalDelta
|
|
) {
|
|
const changeHappened = this._objectMover.endMove();
|
|
this._sendSelectionUpdate({
|
|
hasSelectedObjectBeenModified: changeHappened,
|
|
});
|
|
}
|
|
|
|
// Start moving the selection.
|
|
if (
|
|
!this._wasMovingSelectionLastFrame &&
|
|
this._selectionControlsMovementTotalDelta
|
|
) {
|
|
this._objectMover.startMove();
|
|
}
|
|
|
|
// Move the selection.
|
|
if (this._selectionControlsMovementTotalDelta) {
|
|
this._objectMover.move(
|
|
this._selection.getSelectedObjects(),
|
|
this._selectionControlsMovementTotalDelta
|
|
);
|
|
}
|
|
}
|
|
|
|
private _updateSelectionBox() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const runtimeGame = this._runtimeGame;
|
|
const threeRenderer = runtimeGame.getRenderer().getThreeRenderer();
|
|
if (!threeRenderer) return;
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return;
|
|
const editedInstanceContainer = this._editedInstanceContainer;
|
|
if (!editedInstanceContainer) return;
|
|
const cameraLayer = this.getCameraLayer('');
|
|
if (!cameraLayer) return;
|
|
|
|
const runtimeLayerRender = cameraLayer.getRenderer();
|
|
const threeCamera = runtimeLayerRender.getThreeCamera();
|
|
const threeScene = runtimeLayerRender.getThreeScene();
|
|
if (!threeCamera || !threeScene) return;
|
|
|
|
const cursorX = inputManager.getCursorX();
|
|
const cursorY = inputManager.getCursorY();
|
|
|
|
const touchIds = getCurrentTouchIdentifiers(inputManager);
|
|
const hasMultipleTouches = touchIds.length >= 2;
|
|
|
|
if (
|
|
inputManager.isMouseButtonPressed(0) &&
|
|
!this._shouldDragSelectedObject() &&
|
|
!isSpacePressed(inputManager) &&
|
|
!hasMultipleTouches
|
|
) {
|
|
if (this._wasMouseLeftButtonPressed && this._selectionBox) {
|
|
this._selectionBox.endPoint.set(
|
|
this._getNormalizedScreenX(cursorX),
|
|
this._getNormalizedScreenY(cursorY),
|
|
0.5
|
|
);
|
|
const minX = Math.min(this._selectionBoxStartCursorX, cursorX);
|
|
const minY = Math.min(this._selectionBoxStartCursorY, cursorY);
|
|
const maxX = Math.max(this._selectionBoxStartCursorX, cursorX);
|
|
const maxY = Math.max(this._selectionBoxStartCursorY, cursorY);
|
|
this._selectionBoxElement.style.left = minX + 'px';
|
|
this._selectionBoxElement.style.top = minY + 'px';
|
|
this._selectionBoxElement.style.width = maxX - minX + 'px';
|
|
this._selectionBoxElement.style.height = maxY - minY + 'px';
|
|
} else {
|
|
this._selectionBox = new THREE_ADDONS.SelectionBox(
|
|
threeCamera,
|
|
threeScene
|
|
);
|
|
this._selectionBox.startPoint.set(
|
|
this._getNormalizedScreenX(cursorX),
|
|
this._getNormalizedScreenY(cursorY),
|
|
0.5
|
|
);
|
|
const domElementContainer = runtimeGame
|
|
.getRenderer()
|
|
.getDomElementContainer();
|
|
if (domElementContainer) {
|
|
this._selectionBoxElement.style.left = cursorX + 'px';
|
|
this._selectionBoxElement.style.top = cursorY + 'px';
|
|
this._selectionBoxElement.style.width = '0px';
|
|
this._selectionBoxElement.style.height = '0px';
|
|
domElementContainer.appendChild(this._selectionBoxElement);
|
|
}
|
|
this._selectionBoxStartCursorX = cursorX;
|
|
this._selectionBoxStartCursorY = cursorY;
|
|
}
|
|
}
|
|
if (
|
|
(inputManager.isMouseButtonReleased(0) ||
|
|
this._hasSelectionActuallyMoved) &&
|
|
this._selectionBox
|
|
) {
|
|
if (
|
|
!this._selectionBox.endPoint.equals(this._selectionBox.startPoint) &&
|
|
!this._hasSelectionActuallyMoved &&
|
|
!hasMultipleTouches
|
|
) {
|
|
// Selection rectangle ended.
|
|
|
|
const objects = new Set<gdjs.RuntimeObject>();
|
|
for (const selectThreeObject of this._selectionBox.select()) {
|
|
// TODO Select the object if all its meshes are inside the rectangle
|
|
// instead of if any is.
|
|
const object = this._getObject3D(selectThreeObject);
|
|
if (object) {
|
|
objects.add(object);
|
|
}
|
|
}
|
|
if (!isShiftPressed(inputManager)) {
|
|
this._selection.clear();
|
|
}
|
|
const layer = this.getEditorLayer(this._selectedLayerName);
|
|
if (layer && layer.isVisible() && !layer._initialLayerData.isLocked) {
|
|
for (const object of objects) {
|
|
if (!this.isInstanceSealed(object)) {
|
|
this._selection.add(object);
|
|
}
|
|
}
|
|
}
|
|
this._sendSelectionUpdate();
|
|
} else {
|
|
// Selection rectangle was discarded.
|
|
}
|
|
this._selectionBox = null;
|
|
const domElementContainer = runtimeGame
|
|
.getRenderer()
|
|
.getDomElementContainer();
|
|
if (domElementContainer) {
|
|
domElementContainer.removeChild(this._selectionBoxElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
private _handleSelection({
|
|
objectUnderCursor,
|
|
}: {
|
|
objectUnderCursor: gdjs.RuntimeObject | null;
|
|
}) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
|
|
if (shouldDeleteSelection(inputManager)) {
|
|
const removedObjects = this._selection.getSelectedObjects();
|
|
removedObjects.forEach((object) => {
|
|
object.deleteFromScene();
|
|
});
|
|
this._selection.clear();
|
|
this._sendSelectionUpdate({
|
|
removedObjects,
|
|
});
|
|
}
|
|
|
|
if (inputManager.wasKeyJustPressed(ESC_KEY)) {
|
|
this._selection.clear();
|
|
this._sendSelectionUpdate();
|
|
}
|
|
|
|
// Left click: select the object under the cursor.
|
|
if (
|
|
!this._isTransformControlsHovered &&
|
|
inputManager.isMouseButtonReleased(0) &&
|
|
this._hasCursorStayedStillWhilePressed({ toleranceRadius: 10 })
|
|
) {
|
|
if (!isShiftPressed(inputManager)) {
|
|
this._selection.clear();
|
|
}
|
|
let objectToEdit: gdjs.RuntimeObject | null = null;
|
|
if (objectUnderCursor) {
|
|
const layer = this.getEditorLayer(objectUnderCursor.getLayer());
|
|
if (
|
|
layer &&
|
|
!layer._initialLayerData.isLocked &&
|
|
!this.isInstanceSealed(objectUnderCursor)
|
|
) {
|
|
this._selection.toggle(objectUnderCursor);
|
|
}
|
|
|
|
if (
|
|
this._lastClickOnObjectUnderCursor.object === objectUnderCursor &&
|
|
Date.now() - this._lastClickOnObjectUnderCursor.time <
|
|
timeBetweenClicksForDoubleClick
|
|
) {
|
|
// Double click on the same object: edit the object.
|
|
objectToEdit = objectUnderCursor;
|
|
|
|
this._lastClickOnObjectUnderCursor = {
|
|
object: null,
|
|
time: 0,
|
|
};
|
|
} else {
|
|
this._lastClickOnObjectUnderCursor = {
|
|
object: objectUnderCursor,
|
|
time: Date.now(),
|
|
};
|
|
}
|
|
}
|
|
this._sendSelectionUpdate({
|
|
objectToEdit,
|
|
});
|
|
}
|
|
}
|
|
|
|
private _updateSelectionOutline({
|
|
objectUnderCursor,
|
|
}: {
|
|
objectUnderCursor: gdjs.RuntimeObject | null;
|
|
}) {
|
|
if (!this._currentScene) return;
|
|
|
|
const selectedObjects = this._selection.getSelectedObjects();
|
|
|
|
// Add/update boxes for selected objects
|
|
selectedObjects.forEach((object) =>
|
|
this._createBoundingBoxIfNeeded(object)
|
|
);
|
|
if (
|
|
objectUnderCursor &&
|
|
!this._selectionBoxes.has(objectUnderCursor) &&
|
|
!this.isInstanceSealed(objectUnderCursor)
|
|
) {
|
|
this._createBoundingBoxIfNeeded(objectUnderCursor);
|
|
}
|
|
|
|
// Remove boxes for deselected objects
|
|
this._selectionBoxes.forEach((box, object) => {
|
|
const isHovered =
|
|
object === objectUnderCursor && !this._isTransformControlsHovered;
|
|
const isInSelection = selectedObjects.includes(object);
|
|
if (!isInSelection && !isHovered) {
|
|
box.removeFromParent();
|
|
this._selectionBoxes.delete(object);
|
|
} else {
|
|
const isLocked = this.isInstanceLocked(object);
|
|
|
|
const color =
|
|
instanceWireframeColor[
|
|
(isLocked || !is3D(object) ? instanceStateFlag.locked : 0) |
|
|
(isInSelection ? instanceStateFlag.selected : 0) |
|
|
(isHovered ? instanceStateFlag.hovered : 0)
|
|
] || '#aaaaaa';
|
|
|
|
box.setColor(color);
|
|
}
|
|
});
|
|
|
|
this._selectionBoxes.forEach((box) => {
|
|
box.update();
|
|
});
|
|
}
|
|
|
|
private _createBoundingBoxIfNeeded(object: RuntimeObject): void {
|
|
if (this._selectionBoxes.has(object)) {
|
|
return;
|
|
}
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return;
|
|
|
|
const objectLayer = this.getEditorLayer(object.getLayer());
|
|
if (!objectLayer) return;
|
|
|
|
const threeGroup = objectLayer.getRenderer().getThreeGroup();
|
|
if (!threeGroup) return;
|
|
|
|
const objectBoxHelper = new ObjectSelectionBoxHelper(object);
|
|
threeGroup.add(objectBoxHelper.container);
|
|
this._selectionBoxes.set(object, objectBoxHelper);
|
|
}
|
|
|
|
private _getTransformControlsMode(): 'translate' | 'rotate' | 'scale' {
|
|
return this._transformControlsMode;
|
|
}
|
|
|
|
private _setTransformControlsMode(
|
|
mode: 'translate' | 'rotate' | 'scale'
|
|
): void {
|
|
this._transformControlsMode = mode;
|
|
if (!this._selectionControls) {
|
|
return;
|
|
}
|
|
const { threeTransformControls, dummyThreeObject } =
|
|
this._selectionControls;
|
|
threeTransformControls.mode = mode;
|
|
|
|
const lastEditableSelectedObject = this._selection.getLastSelectedObject({
|
|
ignoreIf: (object) =>
|
|
this.isInstanceLocked(object) || this.isInstanceSealed(object),
|
|
});
|
|
if (!lastEditableSelectedObject) {
|
|
return;
|
|
}
|
|
const threeObject = lastEditableSelectedObject.get3DRendererObject();
|
|
if (!threeObject) {
|
|
return;
|
|
}
|
|
dummyThreeObject.rotation.copy(threeObject.rotation);
|
|
if (this._transformControlsMode === 'rotate') {
|
|
dummyThreeObject.rotation.y = -dummyThreeObject.rotation.y;
|
|
dummyThreeObject.rotation.z = -dummyThreeObject.rotation.z;
|
|
}
|
|
}
|
|
|
|
private _forceUpdateSelectionControls() {
|
|
if (this._selectionControls) {
|
|
this._removeSelectionControls();
|
|
}
|
|
this._updateSelectionControls();
|
|
}
|
|
|
|
private _updateSelectionControls() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return;
|
|
|
|
const touchIds = getCurrentTouchIdentifiers(inputManager);
|
|
const hasMultipleTouches = touchIds.length >= 2;
|
|
|
|
// Selection controls are shown on the last object that can be manipulated
|
|
// (and if none, selection controls are not shown).
|
|
const lastEditableSelectedObject = this._selection.getLastSelectedObject({
|
|
ignoreIf: (object) =>
|
|
this.isInstanceLocked(object) || this.isInstanceSealed(object),
|
|
});
|
|
|
|
// Space or multiple touches will hide the selection controls as they are
|
|
// used to move the camera.
|
|
const shouldHideSelectionControls =
|
|
isSpacePressed(inputManager) || hasMultipleTouches;
|
|
|
|
// Remove the selection controls if the last selected object has changed
|
|
// or if nothing movable is selected.
|
|
if (
|
|
this._selectionControls &&
|
|
(!lastEditableSelectedObject ||
|
|
(lastEditableSelectedObject &&
|
|
this._selectionControls.object !== lastEditableSelectedObject) ||
|
|
this._shouldDragSelectedObject() ||
|
|
shouldHideSelectionControls)
|
|
) {
|
|
this._removeSelectionControls();
|
|
}
|
|
|
|
// Create the selection controls on the last object that can be manipulated.
|
|
if (
|
|
lastEditableSelectedObject &&
|
|
!this._selectionControls &&
|
|
!this._shouldDragSelectedObject() &&
|
|
!shouldHideSelectionControls &&
|
|
lastEditableSelectedObject.get3DRendererObject()
|
|
) {
|
|
const cameraLayer = this.getCameraLayer(
|
|
lastEditableSelectedObject.getLayer()
|
|
);
|
|
if (cameraLayer) {
|
|
const runtimeLayerRender = cameraLayer
|
|
? cameraLayer.getRenderer()
|
|
: null;
|
|
const threeCamera = runtimeLayerRender
|
|
? runtimeLayerRender.getThreeCamera()
|
|
: null;
|
|
const threeScene = runtimeLayerRender
|
|
? runtimeLayerRender.getThreeScene()
|
|
: null;
|
|
if (threeCamera && threeScene) {
|
|
// Create and attach the transform controls. It is attached to a dummy object
|
|
// to avoid the controls to directly move the runtime object (we handle this
|
|
// manually).
|
|
const threeTransformControls = new THREE_ADDONS.TransformControls(
|
|
threeCamera,
|
|
this._runtimeGame.getRenderer().getCanvas() || undefined
|
|
);
|
|
patchAxesOnTransformControlsGizmos(threeTransformControls);
|
|
patchColorsOnTransformControlsGizmos(threeTransformControls);
|
|
patchNegativeAxisHandlesOnTransformControlsGizmos(
|
|
threeTransformControls
|
|
);
|
|
|
|
threeTransformControls.rotation.order = 'ZYX';
|
|
threeTransformControls.scale.y = -1;
|
|
threeTransformControls.mode = this._transformControlsMode;
|
|
threeTransformControls.traverse((obj) => {
|
|
// To be detected correctly by OutlinePass.
|
|
// @ts-ignore
|
|
obj.isTransformControls = true;
|
|
});
|
|
|
|
// The dummy object is an invisible object that is the one moved by the transform
|
|
// controls.
|
|
const dummyThreeObject = new THREE.Object3D();
|
|
this._updateDummyLocation(
|
|
dummyThreeObject,
|
|
lastEditableSelectedObject,
|
|
threeTransformControls
|
|
);
|
|
threeScene.add(dummyThreeObject);
|
|
|
|
threeTransformControls.attach(dummyThreeObject);
|
|
threeScene.add(threeTransformControls);
|
|
|
|
// Keep track of the movement so the editor can apply it to the selection.
|
|
let initialObjectX = 0;
|
|
let initialObjectY = 0;
|
|
let initialObjectZ = 0;
|
|
const initialDummyPosition = new THREE.Vector3();
|
|
const initialDummyRotation = new THREE.Euler();
|
|
const initialDummyScale = new THREE.Vector3();
|
|
threeTransformControls.addEventListener('change', (e) => {
|
|
if (!threeTransformControls.dragging) {
|
|
this._selectionControlsMovementTotalDelta = null;
|
|
|
|
this._updateDummyLocation(
|
|
dummyThreeObject,
|
|
lastEditableSelectedObject,
|
|
threeTransformControls
|
|
);
|
|
// Reset the initial position to the current position, so that
|
|
// it's ready to be dragged again.
|
|
initialObjectX = lastEditableSelectedObject.getX();
|
|
initialObjectY = lastEditableSelectedObject.getY();
|
|
initialObjectZ = is3D(lastEditableSelectedObject)
|
|
? lastEditableSelectedObject.getZ()
|
|
: 0;
|
|
initialDummyPosition.copy(dummyThreeObject.position);
|
|
initialDummyRotation.copy(dummyThreeObject.rotation);
|
|
initialDummyScale.copy(dummyThreeObject.scale);
|
|
return;
|
|
}
|
|
|
|
let translationX =
|
|
dummyThreeObject.position.x - initialDummyPosition.x;
|
|
let translationY =
|
|
dummyThreeObject.position.y - initialDummyPosition.y;
|
|
let translationZ =
|
|
dummyThreeObject.position.z - initialDummyPosition.z;
|
|
if (
|
|
this._transformControlsMode === 'translate' &&
|
|
threeTransformControls.axis
|
|
) {
|
|
if (threeTransformControls.axis === 'XYZ') {
|
|
// We need to override the translation vector because
|
|
// `threeTransformControls` don't know that the selection
|
|
// must be excluded when looking for the cursor position.
|
|
let isIntersectionFound = false;
|
|
let intersectionX: float = 0;
|
|
let intersectionY: float = 0;
|
|
let intersectionZ: float = 0;
|
|
if (is3D(lastEditableSelectedObject)) {
|
|
const cursor = this._getCursorIn3D(
|
|
this._selection.getSelectedObjects()
|
|
);
|
|
if (cursor) {
|
|
isIntersectionFound = true;
|
|
[intersectionX, intersectionY, intersectionZ] = cursor;
|
|
}
|
|
} else {
|
|
const projectedCursor = this._getProjectedCursor();
|
|
if (projectedCursor) {
|
|
isIntersectionFound = true;
|
|
[intersectionX, intersectionY] = projectedCursor;
|
|
}
|
|
}
|
|
if (isIntersectionFound) {
|
|
translationX = intersectionX - initialObjectX;
|
|
translationY = intersectionY - initialObjectY;
|
|
translationZ = intersectionZ - initialObjectZ;
|
|
} else {
|
|
translationX = 0;
|
|
translationY = 0;
|
|
translationZ = 0;
|
|
}
|
|
}
|
|
const isMovingOnX = threeTransformControls.axis.includes('X');
|
|
const isMovingOnY = threeTransformControls.axis.includes('Y');
|
|
const isMovingOnZ = threeTransformControls.axis.includes('Z');
|
|
if (this._editorGrid.isSpanningEnabled(inputManager)) {
|
|
if (isMovingOnX) {
|
|
translationX =
|
|
this._editorGrid.getSnappedX(
|
|
initialObjectX + translationX
|
|
) - initialObjectX;
|
|
}
|
|
if (isMovingOnY) {
|
|
translationY =
|
|
this._editorGrid.getSnappedY(
|
|
initialObjectY + translationY
|
|
) - initialObjectY;
|
|
}
|
|
if (isMovingOnZ) {
|
|
translationZ =
|
|
this._editorGrid.getSnappedZ(
|
|
initialObjectZ + translationZ
|
|
) - initialObjectZ;
|
|
}
|
|
}
|
|
}
|
|
// 0.2 = 20% of the movement speed (Three.js transform controls scaling is too fast)
|
|
const scaleDamping =
|
|
threeTransformControls.axis &&
|
|
threeTransformControls.axis.length === 1
|
|
? 1
|
|
: 0.2;
|
|
this._selectionControlsMovementTotalDelta = {
|
|
translationX,
|
|
translationY,
|
|
translationZ,
|
|
rotationX: gdjs.toDegrees(
|
|
dummyThreeObject.rotation.x - initialDummyRotation.x
|
|
),
|
|
rotationY: -gdjs.toDegrees(
|
|
dummyThreeObject.rotation.y - initialDummyRotation.y
|
|
),
|
|
rotationZ: -gdjs.toDegrees(
|
|
dummyThreeObject.rotation.z - initialDummyRotation.z
|
|
),
|
|
scaleX:
|
|
1 +
|
|
(dummyThreeObject.scale.x / initialDummyScale.x - 1) *
|
|
scaleDamping,
|
|
scaleY:
|
|
1 +
|
|
(dummyThreeObject.scale.y / initialDummyScale.y - 1) *
|
|
scaleDamping,
|
|
scaleZ:
|
|
1 +
|
|
(dummyThreeObject.scale.z / initialDummyScale.z - 1) *
|
|
scaleDamping,
|
|
};
|
|
|
|
this._hasSelectionActuallyMoved =
|
|
this._hasSelectionActuallyMoved ||
|
|
!dummyThreeObject.position.equals(initialDummyPosition) ||
|
|
!dummyThreeObject.rotation.equals(initialDummyRotation) ||
|
|
!dummyThreeObject.scale.equals(initialDummyScale);
|
|
});
|
|
|
|
this._selectionControls = {
|
|
object: lastEditableSelectedObject,
|
|
dummyThreeObject,
|
|
threeTransformControls,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
if (
|
|
lastEditableSelectedObject &&
|
|
this._selectionControls &&
|
|
!this._draggedNewObject &&
|
|
!this._draggedSelectedObject
|
|
) {
|
|
const { threeTransformControls } = this._selectionControls;
|
|
|
|
// Update the rotation snap.
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const shouldSnap =
|
|
this._transformControlsMode === 'rotate' &&
|
|
isAltPressed(inputManager);
|
|
const rotationSnap = shouldSnap
|
|
? gdjs.toRad(ROTATION_SNAP_DEGREES)
|
|
: null;
|
|
|
|
threeTransformControls.setRotationSnap(rotationSnap);
|
|
|
|
// Update the grid.
|
|
const axis = threeTransformControls.axis;
|
|
if (axis) {
|
|
const isMovingOnX = axis ? axis.includes('X') : false;
|
|
const isMovingOnY = axis ? axis.includes('Y') : false;
|
|
const isMovingOnZ = axis ? axis.includes('Z') : false;
|
|
let gridNormal: 'X' | 'Y' | 'Z' = 'Z';
|
|
if (isMovingOnZ) {
|
|
if (!isMovingOnX && !isMovingOnY) {
|
|
// Choose the plan that faces the camera.
|
|
const cameraRotation = Math.abs(
|
|
gdjs.evtTools.common.angleDifference(
|
|
this._editorCamera.getCameraRotation(),
|
|
0
|
|
)
|
|
);
|
|
if (cameraRotation <= 45 || cameraRotation > 135) {
|
|
gridNormal = 'Y';
|
|
} else {
|
|
gridNormal = 'X';
|
|
}
|
|
} else if (!isMovingOnX) {
|
|
gridNormal = 'X';
|
|
} else if (!isMovingOnY) {
|
|
gridNormal = 'Y';
|
|
}
|
|
}
|
|
this._editorGrid.setNormal(gridNormal);
|
|
}
|
|
this._editorGrid.setPosition(
|
|
lastEditableSelectedObject.getX(),
|
|
lastEditableSelectedObject.getY(),
|
|
is3D(lastEditableSelectedObject)
|
|
? lastEditableSelectedObject.getZ()
|
|
: 0
|
|
);
|
|
const cameraLayer = this.getCameraLayer(
|
|
lastEditableSelectedObject.getLayer()
|
|
);
|
|
const threeScene = cameraLayer
|
|
? cameraLayer.getRenderer().getThreeScene()
|
|
: null;
|
|
if (threeScene) {
|
|
this._editorGrid.setTreeScene(threeScene);
|
|
}
|
|
this._editorGrid.setVisible(
|
|
this._transformControlsMode === 'translate'
|
|
);
|
|
}
|
|
}
|
|
|
|
private _updateDummyLocation(
|
|
dummyThreeObject: THREE.Object3D,
|
|
lastEditableSelectedObject: gdjs.RuntimeObject,
|
|
threeTransformControls: THREE_ADDONS.TransformControls
|
|
) {
|
|
const threeObject = lastEditableSelectedObject.get3DRendererObject();
|
|
if (!threeObject) return;
|
|
dummyThreeObject.position.copy(threeObject.position);
|
|
dummyThreeObject.rotation.copy(threeObject.rotation);
|
|
dummyThreeObject.scale.copy(threeObject.scale);
|
|
if (this._transformControlsMode === 'rotate') {
|
|
// This is only done for the rotate mode because it messes with the
|
|
// orientation of the scale mode.
|
|
dummyThreeObject.rotation.y = -dummyThreeObject.rotation.y;
|
|
dummyThreeObject.rotation.z = -dummyThreeObject.rotation.z;
|
|
|
|
dummyThreeObject.position.set(
|
|
lastEditableSelectedObject.getCenterXInScene(),
|
|
lastEditableSelectedObject.getCenterYInScene(),
|
|
is3D(lastEditableSelectedObject)
|
|
? lastEditableSelectedObject.getCenterZInScene()
|
|
: 0
|
|
);
|
|
} else {
|
|
dummyThreeObject.position.set(
|
|
lastEditableSelectedObject.getX(),
|
|
lastEditableSelectedObject.getY(),
|
|
is3D(lastEditableSelectedObject)
|
|
? lastEditableSelectedObject.getZ()
|
|
: 0
|
|
);
|
|
}
|
|
}
|
|
|
|
private _removeSelectionControls(): void {
|
|
if (!this._selectionControls) {
|
|
return;
|
|
}
|
|
this._selectionControls.threeTransformControls.detach();
|
|
this._selectionControls.threeTransformControls.removeFromParent();
|
|
this._selectionControls.dummyThreeObject.removeFromParent();
|
|
this._editorGrid.setVisible(false);
|
|
this._selectionControls = null;
|
|
}
|
|
|
|
activate(enable: boolean) {
|
|
if (enable) {
|
|
// Nothing to do.
|
|
} else {
|
|
this._runtimeGame.getSoundManager().unmuteEverything('in-game-editor');
|
|
this._removeSelectionControls();
|
|
|
|
// Cleanup selection boxes
|
|
this._selectionBoxes.forEach((box) => {
|
|
box.removeFromParent();
|
|
});
|
|
this._selectionBoxes.clear();
|
|
}
|
|
}
|
|
|
|
setVisibleStatus(visible: boolean) {
|
|
this._isVisible = visible;
|
|
}
|
|
|
|
private _sendSelectionUpdate(options?: {
|
|
hasSelectedObjectBeenModified?: boolean;
|
|
isSendingBackSelectionForDefaultSize?: boolean;
|
|
addedObjects?: Array<gdjs.RuntimeObject>;
|
|
removedObjects?: Array<gdjs.RuntimeObject>;
|
|
objectToEdit?: gdjs.RuntimeObject | null;
|
|
}) {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
|
|
const getPersistentUuidsFromObjects = (
|
|
objects: Array<gdjs.RuntimeObject>
|
|
): Array<InstancePersistentUuidData> =>
|
|
objects
|
|
.map((object) => {
|
|
if (!object.persistentUuid) return null;
|
|
|
|
return { persistentUuid: object.persistentUuid };
|
|
})
|
|
.filter(isDefined);
|
|
|
|
const getSelectedInstances = (
|
|
objects: Array<gdjs.RuntimeObject>
|
|
): Array<InstancePersistentUuidData> =>
|
|
objects
|
|
.map((object) => {
|
|
if (!object.persistentUuid) {
|
|
return null;
|
|
}
|
|
return {
|
|
persistentUuid: object.persistentUuid,
|
|
defaultWidth: object.getOriginalWidth(),
|
|
defaultHeight: object.getOriginalHeight(),
|
|
defaultDepth: is3D(object)
|
|
? object.getOriginalDepth()
|
|
: undefined,
|
|
};
|
|
})
|
|
.filter(isDefined);
|
|
|
|
const updatedInstances =
|
|
options && options.hasSelectedObjectBeenModified
|
|
? this._selection
|
|
.getSelectedObjects()
|
|
.map((object) => this.getInstanceDataFromRuntimeObject(object))
|
|
.filter(isDefined)
|
|
: [];
|
|
|
|
const addedInstances =
|
|
options && options.addedObjects
|
|
? options.addedObjects
|
|
.map((object) => this.getInstanceDataFromRuntimeObject(object))
|
|
.filter(isDefined)
|
|
: [];
|
|
|
|
const removedInstances =
|
|
options && options.removedObjects ? options.removedObjects : [];
|
|
|
|
this._removeInstances(removedInstances);
|
|
this._updateInstances(updatedInstances);
|
|
this._addInstances(addedInstances);
|
|
|
|
debuggerClient.sendInstanceChanges({
|
|
isSendingBackSelectionForDefaultSize: options
|
|
? options.isSendingBackSelectionForDefaultSize || false
|
|
: false,
|
|
updatedInstances,
|
|
addedInstances,
|
|
selectedInstances: getSelectedInstances(
|
|
this._selection.getSelectedObjects()
|
|
),
|
|
removedInstances: getPersistentUuidsFromObjects(removedInstances),
|
|
objectNameToEdit:
|
|
options && options.objectToEdit
|
|
? options.objectToEdit.getName()
|
|
: null,
|
|
});
|
|
}
|
|
|
|
private getInstanceDataFromRuntimeObject(
|
|
runtimeObject: gdjs.RuntimeObject
|
|
): InstanceData | null {
|
|
if (is3D(runtimeObject)) {
|
|
if (!runtimeObject.persistentUuid) return null;
|
|
|
|
const width = runtimeObject.getWidth();
|
|
const height = runtimeObject.getHeight();
|
|
const depth = runtimeObject.getDepth();
|
|
const defaultWidth = runtimeObject.getOriginalWidth();
|
|
const defaultHeight = runtimeObject.getOriginalHeight();
|
|
const defaultDepth = runtimeObject.getOriginalDepth();
|
|
|
|
const oldData = this._getInstanceData(runtimeObject.persistentUuid);
|
|
const instanceData: InstanceData = {
|
|
name: runtimeObject.getName(),
|
|
zOrder: runtimeObject.getZOrder(),
|
|
persistentUuid: runtimeObject.persistentUuid,
|
|
x: runtimeObject.getX(),
|
|
y: runtimeObject.getY(),
|
|
z: runtimeObject.getZ(),
|
|
layer: runtimeObject.getLayer(),
|
|
angle: runtimeObject.getAngle(),
|
|
rotationY: runtimeObject.getRotationY(),
|
|
rotationX: runtimeObject.getRotationX(),
|
|
customSize: width !== defaultWidth || height !== defaultHeight,
|
|
width,
|
|
height,
|
|
depth: depth === defaultDepth ? undefined : depth,
|
|
locked: oldData ? oldData.locked : false,
|
|
sealed: oldData ? oldData.sealed : false,
|
|
// TODO: how to transmit/should we transmit other properties?
|
|
numberProperties: [],
|
|
stringProperties: [],
|
|
initialVariables: [],
|
|
// @ts-ignore
|
|
defaultWidth,
|
|
defaultHeight,
|
|
defaultDepth,
|
|
};
|
|
|
|
return instanceData;
|
|
} else {
|
|
// TODO: handle 2D objects/instances.
|
|
return null;
|
|
}
|
|
}
|
|
|
|
private _removeInstances(
|
|
removedInstances: Array<{ persistentUuid: string | null }>
|
|
) {
|
|
for (const removedInstance of removedInstances) {
|
|
// TODO: Might be worth indexing instances data
|
|
const instanceIndex = this._editedInstanceDataList.findIndex(
|
|
(instance) =>
|
|
instance.persistentUuid === removedInstance.persistentUuid
|
|
);
|
|
if (instanceIndex >= 0) {
|
|
this._editedInstanceDataList.splice(instanceIndex, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
private _updateInstances(updatedInstances: Array<InstanceData>) {
|
|
for (const updatedInstance of updatedInstances) {
|
|
const oldInstance = this._getInstanceData(
|
|
updatedInstance.persistentUuid
|
|
);
|
|
if (oldInstance) {
|
|
gdjs.HotReloader.assignOrDelete(oldInstance, updatedInstance, [
|
|
// These are never modified by the InGameEditor, so don't update them:
|
|
'initialVariables',
|
|
'numberProperties',
|
|
'stringProperties',
|
|
]);
|
|
}
|
|
}
|
|
}
|
|
|
|
private _getInstanceData(
|
|
persistentUuid: string | null
|
|
): InstanceData | null {
|
|
// TODO: Might be worth indexing instances data
|
|
return persistentUuid
|
|
? this._editedInstanceDataList.find(
|
|
(instanceData) => instanceData.persistentUuid === persistentUuid
|
|
) || null
|
|
: null;
|
|
}
|
|
|
|
isInstanceLocked(object: gdjs.RuntimeObject): boolean {
|
|
const instanceData = this._getInstanceData(object.persistentUuid);
|
|
return !!instanceData && !!instanceData.locked;
|
|
}
|
|
|
|
isInstanceSealed(object: gdjs.RuntimeObject): boolean {
|
|
const instanceData = this._getInstanceData(object.persistentUuid);
|
|
return !!instanceData && !!instanceData.sealed;
|
|
}
|
|
|
|
private _addInstances(addedInstances: Array<InstanceData>) {
|
|
for (const addedInstance of addedInstances) {
|
|
this._editedInstanceDataList.push(addedInstance);
|
|
}
|
|
}
|
|
|
|
private _updateInnerAreaOutline(): void {
|
|
if (!this._currentScene) return;
|
|
|
|
const layer = this.getCameraLayer('');
|
|
if (!layer) {
|
|
return;
|
|
}
|
|
const threeGroup = layer.getRenderer().getThreeGroup();
|
|
if (!threeGroup) {
|
|
return;
|
|
}
|
|
if (!this._threeInnerArea) {
|
|
const boxMesh = new THREE.Mesh(
|
|
new THREE.BoxGeometry(1, 1, 1),
|
|
new THREE.MeshBasicMaterial({
|
|
transparent: true,
|
|
opacity: 0,
|
|
alphaTest: 1,
|
|
})
|
|
);
|
|
boxMesh.position.x = 0.5;
|
|
boxMesh.position.y = 0.5;
|
|
boxMesh.position.z = 0.5;
|
|
const box = new THREE.BoxHelper(boxMesh, '#444444');
|
|
box.rotation.order = 'ZYX';
|
|
//box.material.depthTest = false;
|
|
box.material.fog = false;
|
|
const container = new THREE.Group();
|
|
container.rotation.order = 'ZYX';
|
|
container.add(box);
|
|
threeGroup.add(container);
|
|
this._threeInnerArea = container;
|
|
}
|
|
const threeInnerArea = this._threeInnerArea;
|
|
if (this._innerArea) {
|
|
const innerArea = this._innerArea;
|
|
threeInnerArea.scale.x = innerArea.max[0] - innerArea.min[0];
|
|
threeInnerArea.scale.y = innerArea.max[1] - innerArea.min[1];
|
|
threeInnerArea.scale.z = innerArea.max[2] - innerArea.min[2];
|
|
threeInnerArea.position.x = innerArea.min[0];
|
|
threeInnerArea.position.y = innerArea.min[1];
|
|
threeInnerArea.position.z = innerArea.min[2];
|
|
} else {
|
|
threeInnerArea.scale.x = this._runtimeGame.getOriginalWidth();
|
|
threeInnerArea.scale.y = this._runtimeGame.getOriginalHeight();
|
|
threeInnerArea.scale.z = 0.01;
|
|
threeInnerArea.position.x = 0;
|
|
threeInnerArea.position.y = 0;
|
|
threeInnerArea.position.z = 0;
|
|
}
|
|
}
|
|
|
|
private _handleContextMenu() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const isClick =
|
|
Date.now() - this._pressedRightButtonTime <=
|
|
pressAndReleaseForClickDuration;
|
|
if (inputManager.isMouseButtonReleased(1) && isClick) {
|
|
this._sendOpenContextMenu(
|
|
inputManager.getCursorX(),
|
|
inputManager.getCursorY()
|
|
);
|
|
}
|
|
}
|
|
|
|
private _hasCursorStayedStillWhilePressed({
|
|
toleranceRadius,
|
|
}: {
|
|
toleranceRadius: float;
|
|
}) {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const deltaX = Math.abs(
|
|
this._pressedOriginalCursorX - inputManager.getCursorX()
|
|
);
|
|
const deltaY = Math.abs(
|
|
this._pressedOriginalCursorY - inputManager.getCursorY()
|
|
);
|
|
return (
|
|
deltaX * deltaX + deltaY * deltaY <= toleranceRadius * toleranceRadius
|
|
);
|
|
}
|
|
|
|
private _sendOpenContextMenu(cursorX: float, cursorY: float) {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
|
|
debuggerClient.sendOpenContextMenu(cursorX, cursorY);
|
|
}
|
|
|
|
private _handleShortcuts() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
let alreadyHandledShortcut = false;
|
|
if (isControlPressedOnly(inputManager)) {
|
|
// Note: use `wasKeyJustPressed` instead of `wasKeyReleased` to avoid
|
|
// macOS stealing the key release ("key up") information
|
|
// when the "Meta" key is pressed.
|
|
if (inputManager.wasKeyJustPressed(Z_KEY)) {
|
|
this._sendUndo();
|
|
alreadyHandledShortcut = true;
|
|
} else if (inputManager.wasKeyJustPressed(Y_KEY)) {
|
|
this._sendRedo();
|
|
alreadyHandledShortcut = true;
|
|
} else if (inputManager.wasKeyJustPressed(C_KEY)) {
|
|
this._sendCopy();
|
|
alreadyHandledShortcut = true;
|
|
} else if (inputManager.wasKeyJustPressed(V_KEY)) {
|
|
this._sendPaste();
|
|
alreadyHandledShortcut = true;
|
|
} else if (inputManager.wasKeyJustPressed(X_KEY)) {
|
|
this._sendCut();
|
|
alreadyHandledShortcut = true;
|
|
}
|
|
}
|
|
if (isControlPlusShiftPressedOnly(inputManager)) {
|
|
if (inputManager.wasKeyJustPressed(Z_KEY)) {
|
|
this._sendRedo();
|
|
alreadyHandledShortcut = true;
|
|
}
|
|
}
|
|
|
|
// Send the shortcut to the editor (as the iframe does not bubble up
|
|
// the event to the parent window).
|
|
if (!alreadyHandledShortcut) {
|
|
this._forwardShortcutsToEditor(inputManager);
|
|
}
|
|
}
|
|
|
|
private _sendUndo() {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendUndo();
|
|
}
|
|
|
|
private _sendRedo() {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendRedo();
|
|
}
|
|
|
|
private _sendCopy() {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendCopy();
|
|
}
|
|
|
|
private _sendPaste() {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendPaste();
|
|
}
|
|
|
|
private _sendCut() {
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendCut();
|
|
}
|
|
|
|
private _forwardShortcutsToEditor(inputManager: gdjs.InputManager) {
|
|
const isCtrlPressed =
|
|
inputManager.isKeyPressed(LEFT_CTRL_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_CTRL_KEY);
|
|
const isMetaPressed =
|
|
inputManager.isKeyPressed(LEFT_META_KEY) ||
|
|
inputManager.isKeyPressed(RIGHT_META_KEY);
|
|
const isShiftKeyPressed = isShiftPressed(inputManager);
|
|
const isAltKeyPressed = isAltPressed(inputManager);
|
|
|
|
if (
|
|
!isCtrlPressed &&
|
|
!isMetaPressed &&
|
|
!isAltKeyPressed &&
|
|
!isShiftKeyPressed
|
|
) {
|
|
return;
|
|
}
|
|
|
|
for (const locationAwareKeyCode of this._runtimeGame
|
|
.getInputManager()
|
|
.exceptionallyGetAllJustPressedKeys()) {
|
|
const keyCode =
|
|
exceptionallyGetKeyCodeFromLocationAwareKeyCode(locationAwareKeyCode);
|
|
|
|
const debuggerClient = this._runtimeGame._debuggerClient;
|
|
if (debuggerClient) {
|
|
debuggerClient.sendKeyboardShortcut({
|
|
keyCode,
|
|
metaKey: isMetaPressed,
|
|
ctrlKey: isCtrlPressed,
|
|
altKey: isAltKeyPressed,
|
|
shiftKey: isShiftKeyPressed,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
cancelDragNewInstance() {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
if (this._draggedNewObject) {
|
|
this._draggedNewObject.deleteFromScene();
|
|
this._draggedNewObject = null;
|
|
}
|
|
this._editorGrid.setVisible(false);
|
|
}
|
|
|
|
dragNewInstance({
|
|
name,
|
|
dropped,
|
|
isAltPressed,
|
|
}: {
|
|
name: string;
|
|
dropped: boolean;
|
|
isAltPressed: boolean;
|
|
}) {
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return;
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
const selectedLayer = this.getEditorLayer(this._selectedLayerName);
|
|
if (!selectedLayer) return;
|
|
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
|
|
if (this._draggedNewObject && this._draggedNewObject.getName() !== name) {
|
|
this._draggedNewObject.deleteFromScene();
|
|
this._draggedNewObject = null;
|
|
}
|
|
|
|
if (!this._draggedNewObject) {
|
|
const newObject = editedInstanceContainer.createObject(name);
|
|
if (!newObject) return;
|
|
if (!is3D(newObject)) {
|
|
editedInstanceContainer.markObjectForDeletion(newObject);
|
|
return;
|
|
}
|
|
newObject.persistentUuid = gdjs.makeUuid();
|
|
newObject.setLayer(selectedLayer.getName());
|
|
this._draggedNewObject = newObject;
|
|
}
|
|
|
|
// We don't update the object position when it's dropped because it makes
|
|
// the object shift a bit.
|
|
// It seems that newIDE doesn't send the last cursor position even when
|
|
// the cursor stay still for several frames. The right position is only
|
|
// sent it when the object is dropped which make the shift.
|
|
// To reproduce the issue:
|
|
// - remove the `if`
|
|
// - drag the object vertically very fast
|
|
// - stay still
|
|
// - drop the object
|
|
if (!dropped) {
|
|
let isCursorFound = false;
|
|
let cursorX = 0;
|
|
let cursorY = 0;
|
|
let cursorZ = 0;
|
|
if (is3D(this._draggedNewObject)) {
|
|
const cursor = this._getCursorIn3D([this._draggedNewObject]);
|
|
if (cursor) {
|
|
[cursorX, cursorY, cursorZ] = cursor;
|
|
isCursorFound = true;
|
|
}
|
|
} else {
|
|
const projectedCursor = this._getProjectedCursor();
|
|
if (projectedCursor) {
|
|
[cursorX, cursorY] = projectedCursor;
|
|
isCursorFound = true;
|
|
}
|
|
}
|
|
if (isCursorFound) {
|
|
this._editorGrid.setNormal('Z');
|
|
this._editorGrid.setPosition(cursorX, cursorY, cursorZ);
|
|
const cameraLayer = this.getCameraLayer(
|
|
this._draggedNewObject.getLayer()
|
|
);
|
|
const threeScene = cameraLayer
|
|
? cameraLayer.getRenderer().getThreeScene()
|
|
: null;
|
|
if (threeScene) {
|
|
this._editorGrid.setTreeScene(threeScene);
|
|
}
|
|
this._editorGrid.setVisible(true);
|
|
if (this._editorGrid.isSpanningEnabled(inputManager, isAltPressed)) {
|
|
cursorX = this._editorGrid.getSnappedX(cursorX);
|
|
cursorY = this._editorGrid.getSnappedY(cursorY);
|
|
}
|
|
// TODO The object Z should be changed according to the new X and Y
|
|
// to match the ground.
|
|
this._draggedNewObject.setX(Math.round(cursorX));
|
|
this._draggedNewObject.setY(Math.round(cursorY));
|
|
// We don't round on Z because if cubes are stacked and there depth
|
|
// is not round it would leave an interstice between them.
|
|
if (is3D(this._draggedNewObject)) {
|
|
this._draggedNewObject.setZ(cursorZ);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (dropped) {
|
|
if (this._draggedNewObject) {
|
|
const isLayer3D = selectedLayer.getRenderer().getThreeGroup();
|
|
if (isLayer3D) {
|
|
const cameraX = selectedLayer.getCameraX();
|
|
const cameraY = selectedLayer.getCameraY();
|
|
const cameraZ = getCameraZ(
|
|
currentScene,
|
|
selectedLayer.getName(),
|
|
0
|
|
);
|
|
|
|
const closestIntersect = this._getClosestIntersectionUnderCursor([
|
|
this._draggedNewObject,
|
|
]);
|
|
if (closestIntersect && !is3D(this._draggedNewObject)) {
|
|
// Avoid to create a 2D object hidden under a 3D one.
|
|
this.cancelDragNewInstance();
|
|
return;
|
|
}
|
|
|
|
let cursorX: float;
|
|
let cursorY: float;
|
|
let cursorZ: float;
|
|
if (closestIntersect) {
|
|
cursorX = closestIntersect.point.x;
|
|
cursorY = -closestIntersect.point.y;
|
|
cursorZ = closestIntersect.point.z;
|
|
} else {
|
|
const projectedCursor = this._getProjectedCursor();
|
|
if (!projectedCursor) {
|
|
// Avoid to create an object behind the camera when it's dropped over the horizon.
|
|
this.cancelDragNewInstance();
|
|
return;
|
|
}
|
|
cursorX = projectedCursor[0];
|
|
cursorY = projectedCursor[1];
|
|
cursorZ = 0;
|
|
}
|
|
|
|
const cursorDistance = Math.hypot(
|
|
cursorX - cameraX,
|
|
cursorY - cameraY,
|
|
cursorZ - cameraZ
|
|
);
|
|
if (
|
|
cursorDistance >
|
|
selectedLayer.getInitialCamera3DFarPlaneDistance()
|
|
) {
|
|
// Avoid to create an object outside of the rendered area.
|
|
this.cancelDragNewInstance();
|
|
return;
|
|
}
|
|
}
|
|
this._sendSelectionUpdate({
|
|
addedObjects: [this._draggedNewObject],
|
|
});
|
|
}
|
|
|
|
this._draggedNewObject = null;
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns The cursor projected on the plane Z = 0 or `null` if the cursor is in the sky.
|
|
*/
|
|
_getProjectedCursor(): FloatPoint | null {
|
|
const currentScene = this._currentScene;
|
|
if (!currentScene) return null;
|
|
|
|
const layer = this.getCameraLayer('');
|
|
if (!layer) {
|
|
return null;
|
|
}
|
|
|
|
const cameraX = layer.getCameraX();
|
|
const cameraY = layer.getCameraY();
|
|
const cameraZ = getCameraZ(currentScene, layer.getName(), 0);
|
|
|
|
const cursorX = gdjs.evtTools.input.getCursorX(
|
|
currentScene,
|
|
layer.getName(),
|
|
0
|
|
);
|
|
const cursorY = gdjs.evtTools.input.getCursorY(
|
|
currentScene,
|
|
layer.getName(),
|
|
0
|
|
);
|
|
|
|
const deltaX = cursorX - cameraX;
|
|
const deltaY = cursorY - cameraY;
|
|
const deltaZ = 0 - cameraZ;
|
|
|
|
const threeCamera = layer.getRenderer().getThreeCamera();
|
|
if (!threeCamera) {
|
|
return [cursorX, cursorY];
|
|
}
|
|
const { forward } = getCameraForwardVector(threeCamera);
|
|
// It happens when the cursor is over the horizon and projected on the plane Z = 0.
|
|
const isCursorBehindTheCamera =
|
|
forward.dot(new THREE.Vector3(deltaX, deltaY, deltaZ)) < 1;
|
|
if (isCursorBehindTheCamera) {
|
|
return null;
|
|
}
|
|
return [cursorX, cursorY];
|
|
}
|
|
|
|
reloadInstances(instances: Array<InstanceData>) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
// TODO: Might be worth indexing instances data and runtime objects by their
|
|
// persistentUuid (See HotReloader.indexByPersistentUuid).
|
|
editedInstanceContainer
|
|
.getAdhocListOfAllInstances()
|
|
.forEach((runtimeObject) => {
|
|
const instance = instances.find(
|
|
(instance) =>
|
|
instance.persistentUuid === runtimeObject.persistentUuid
|
|
);
|
|
if (instance) {
|
|
runtimeObject.setX(instance.x);
|
|
runtimeObject.setY(instance.y);
|
|
if (instance.customSize) {
|
|
runtimeObject.setWidth(instance.width);
|
|
runtimeObject.setHeight(instance.height);
|
|
} else {
|
|
runtimeObject.setWidth(runtimeObject.getOriginalWidth());
|
|
runtimeObject.setHeight(runtimeObject.getOriginalHeight());
|
|
}
|
|
runtimeObject.setAngle(instance.angle);
|
|
runtimeObject.setLayer(instance.layer);
|
|
if (is3D(runtimeObject)) {
|
|
runtimeObject.setZ(instance.z === undefined ? 0 : instance.z);
|
|
runtimeObject.setRotationX(
|
|
instance.rotationX == undefined ? 0 : instance.rotationX
|
|
);
|
|
runtimeObject.setRotationY(
|
|
instance.rotationY == undefined ? 0 : instance.rotationY
|
|
);
|
|
runtimeObject.setDepth(
|
|
instance.depth == undefined
|
|
? runtimeObject.getOriginalDepth()
|
|
: instance.depth
|
|
);
|
|
}
|
|
runtimeObject.extraInitializationFromInitialInstance(instance);
|
|
}
|
|
});
|
|
this._updateInstances(instances);
|
|
this._forceUpdateSelectionControls();
|
|
}
|
|
|
|
addInstances(instances: Array<InstanceData>) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
editedInstanceContainer.createObjectsFrom(instances, 0, 0, 0, true);
|
|
this._addInstances(instances);
|
|
}
|
|
|
|
deleteSelection() {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return;
|
|
|
|
this._removeInstances(this._selection.getSelectedObjects());
|
|
for (const object of this._selection.getSelectedObjects()) {
|
|
object.deleteFromScene();
|
|
}
|
|
this._selection.clear();
|
|
}
|
|
|
|
private _getClosestIntersectionUnderCursor(
|
|
excludedObjects?: Array<gdjs.RuntimeObject>
|
|
): THREE.Intersection | null {
|
|
const runtimeGame = this._runtimeGame;
|
|
const firstIntersectsByLayer: {
|
|
[layerName: string]: null | {
|
|
intersect: THREE.Intersection;
|
|
};
|
|
} = {};
|
|
const cursorX = runtimeGame.getInputManager().getCursorX();
|
|
const cursorY = runtimeGame.getInputManager().getCursorY();
|
|
|
|
const layerNames = [];
|
|
const currentScene = this._currentScene;
|
|
const threeRenderer = runtimeGame.getRenderer().getThreeRenderer();
|
|
if (!currentScene || !threeRenderer) return null;
|
|
|
|
// Only check layer 0, on which Three.js objects are by default,
|
|
// and move selection boxes + dragged object to layer 1 so they
|
|
// are not considered by raycasting.
|
|
this._raycaster.layers.set(0);
|
|
this._selectionBoxes.forEach((box) => box.setLayer(1));
|
|
if (this._threeInnerArea) {
|
|
for (const child of this._threeInnerArea.children) {
|
|
child.layers.set(1);
|
|
}
|
|
}
|
|
if (excludedObjects) {
|
|
for (const excludedObject of excludedObjects) {
|
|
if (is3D(excludedObject)) {
|
|
const draggedRendererObject = excludedObject.get3DRendererObject();
|
|
if (draggedRendererObject) {
|
|
draggedRendererObject.layers.set(1);
|
|
draggedRendererObject.traverse((object) => object.layers.set(1));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
currentScene.getAllLayerNames(layerNames);
|
|
layerNames.forEach((layerName) => {
|
|
const runtimeLayerRender = currentScene
|
|
.getLayer(layerName)
|
|
.getRenderer();
|
|
const threeCamera = runtimeLayerRender.getThreeCamera();
|
|
const threeGroup = runtimeLayerRender.getThreeGroup();
|
|
if (!threeCamera || !threeGroup) return;
|
|
|
|
// Note that raycasting is done by Three.js, which means it could slow down
|
|
// if lots of 3D objects are shown. We consider that if this needs improvements,
|
|
// this must be handled by the game engine culling
|
|
const normalizedDeviceCoordinates = this._getTempVector2d(
|
|
this._getNormalizedScreenX(cursorX),
|
|
this._getNormalizedScreenY(cursorY)
|
|
);
|
|
this._raycaster.setFromCamera(normalizedDeviceCoordinates, threeCamera);
|
|
const intersects = this._raycaster.intersectObjects(
|
|
threeGroup.children,
|
|
true
|
|
);
|
|
|
|
const firstIntersect = intersects[0];
|
|
if (!firstIntersect) return;
|
|
|
|
firstIntersectsByLayer[layerName] = {
|
|
intersect: firstIntersect,
|
|
};
|
|
});
|
|
|
|
// Reset selection boxes layers so they are properly displayed.
|
|
this._selectionBoxes.forEach((box) => box.setLayer(0));
|
|
if (this._threeInnerArea) {
|
|
for (const child of this._threeInnerArea.children) {
|
|
child.layers.set(0);
|
|
}
|
|
}
|
|
// Also reset the layer of the object being added.
|
|
if (excludedObjects) {
|
|
for (const excludedObject of excludedObjects) {
|
|
if (is3D(excludedObject)) {
|
|
const draggedRendererObject = excludedObject.get3DRendererObject();
|
|
if (draggedRendererObject) {
|
|
draggedRendererObject.layers.set(0);
|
|
draggedRendererObject.traverse((object) => object.layers.set(0));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let closestIntersect: THREE.Intersection | null = null;
|
|
for (const intersect of Object.values(firstIntersectsByLayer)) {
|
|
if (
|
|
intersect &&
|
|
(!closestIntersect ||
|
|
intersect.intersect.distance < closestIntersect.distance)
|
|
) {
|
|
closestIntersect = intersect.intersect;
|
|
}
|
|
}
|
|
|
|
return closestIntersect;
|
|
}
|
|
|
|
private _getCursorIn3D(
|
|
excludedObjects?: Array<gdjs.RuntimeObject>
|
|
): Point3D | null {
|
|
const closestIntersect =
|
|
this._getClosestIntersectionUnderCursor(excludedObjects);
|
|
if (closestIntersect) {
|
|
return [
|
|
closestIntersect.point.x,
|
|
-closestIntersect.point.y,
|
|
closestIntersect.point.z,
|
|
];
|
|
}
|
|
const projectedCursor = this._getProjectedCursor();
|
|
if (!projectedCursor) {
|
|
return null;
|
|
}
|
|
return [projectedCursor[0], projectedCursor[1], 0];
|
|
}
|
|
|
|
private _getNormalizedScreenX(x: float): float {
|
|
return (x / this._runtimeGame.getGameResolutionWidth()) * 2 - 1;
|
|
}
|
|
|
|
private _getNormalizedScreenY(y: float): float {
|
|
return -(y / this._runtimeGame.getGameResolutionHeight()) * 2 + 1;
|
|
}
|
|
|
|
getObjectUnderCursor(): gdjs.RuntimeObject | null {
|
|
const closestIntersect = this._getClosestIntersectionUnderCursor();
|
|
if (!closestIntersect) {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) {
|
|
return null;
|
|
}
|
|
const cursor = this._getCursorIn3D();
|
|
if (!cursor || cursor[2] !== 0) {
|
|
return null;
|
|
}
|
|
let topObject2D: gdjs.RuntimeObject | null = null;
|
|
let topLayer: gdjs.RuntimeLayer | null = null;
|
|
let topLayerIndex = 0;
|
|
for (const object of editedInstanceContainer.getAdhocListOfAllInstances()) {
|
|
if (is3D(object) || !object.cursorOnObject()) {
|
|
continue;
|
|
}
|
|
const layer = editedInstanceContainer.getLayer(object.getLayer());
|
|
const layerIndex =
|
|
editedInstanceContainer._orderedLayers.indexOf(layer);
|
|
if (
|
|
!topObject2D ||
|
|
layerIndex > topLayerIndex ||
|
|
(layer === topLayer && object.getZOrder() > topObject2D.getZOrder())
|
|
) {
|
|
topObject2D = object;
|
|
topLayer = layer;
|
|
topLayerIndex = layerIndex;
|
|
}
|
|
}
|
|
return topObject2D;
|
|
}
|
|
return this._getObject3D(closestIntersect.object);
|
|
}
|
|
|
|
private _getObject3D(
|
|
initialThreeObject: THREE.Object3D
|
|
): gdjs.RuntimeObject | null {
|
|
const editedInstanceContainer = this.getEditedInstanceContainer();
|
|
if (!editedInstanceContainer) return null;
|
|
|
|
// Walk back up the object hierarchy to find the runtime object.
|
|
// We sadly need to do that because the intersection can be found on a Mesh or other
|
|
// child Three.js object, instead of the one exposed by the gdjs.RuntimeObject.
|
|
let threeObject: THREE.Object3D | null = initialThreeObject;
|
|
while (threeObject) {
|
|
const runtimeObject: gdjs.RuntimeObject | null =
|
|
// @ts-ignore
|
|
threeObject.gdjsRuntimeObject;
|
|
if (runtimeObject) {
|
|
let rootRuntimeObject = runtimeObject;
|
|
while (
|
|
rootRuntimeObject.getInstanceContainer() instanceof
|
|
gdjs.CustomRuntimeObjectInstanceContainer &&
|
|
rootRuntimeObject.getInstanceContainer() !== editedInstanceContainer
|
|
) {
|
|
rootRuntimeObject = (
|
|
rootRuntimeObject.getInstanceContainer() as gdjs.CustomRuntimeObjectInstanceContainer
|
|
).getOwner();
|
|
}
|
|
return rootRuntimeObject;
|
|
}
|
|
threeObject = threeObject.parent || null;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
getCameraState(): EditorCameraState {
|
|
return this._getEditorCamera().getCameraState();
|
|
}
|
|
|
|
restoreCameraState(editorCamera3D: EditorCameraState) {
|
|
this._getEditorCamera().restoreCameraState(editorCamera3D);
|
|
}
|
|
|
|
private _updateMouseCursor() {
|
|
const mouseCursor = this._getEditorCamera().getRequestedMouseCursor();
|
|
|
|
const canvas = this._runtimeGame.getRenderer().getCanvas();
|
|
if (canvas) {
|
|
canvas.style.cursor = mouseCursor || 'default';
|
|
}
|
|
}
|
|
|
|
private _handleTransformControlsMode() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
if (inputManager.wasKeyJustPressed(KEY_DIGIT_1)) {
|
|
this._setTransformControlsMode('translate');
|
|
} else if (inputManager.wasKeyJustPressed(KEY_DIGIT_2)) {
|
|
this._setTransformControlsMode('rotate');
|
|
} else if (inputManager.wasKeyJustPressed(KEY_DIGIT_3)) {
|
|
this._setTransformControlsMode('scale');
|
|
}
|
|
}
|
|
|
|
private _handlePointerLock() {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
const renderer = this._runtimeGame.getRenderer();
|
|
const isRightButtonPressed = inputManager.isMouseButtonPressed(1);
|
|
const isMiddleButtonPressed = inputManager.isMouseButtonPressed(2);
|
|
|
|
// Request pointer lock when right or middle button is pressed,
|
|
// but only after the delay to ensure it's not a click.
|
|
if (
|
|
(isRightButtonPressed &&
|
|
Date.now() - this._pressedRightButtonTime >
|
|
pressAndReleaseForClickDuration) ||
|
|
(isMiddleButtonPressed &&
|
|
Date.now() - this._pressedMiddleButtonTime >
|
|
pressAndReleaseForClickDuration)
|
|
) {
|
|
renderer.requestPointerLock('in-game-editor');
|
|
}
|
|
|
|
// Exit pointer lock as soon as we can.
|
|
if (!isRightButtonPressed && !isMiddleButtonPressed) {
|
|
if (renderer.isPointerLocked()) {
|
|
renderer.exitPointerLock('in-game-editor');
|
|
}
|
|
}
|
|
}
|
|
|
|
updateTargetFramerate(elapsedTime: float) {
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
if (
|
|
inputManager.anyKeyPressed() ||
|
|
inputManager.anyMouseButtonPressed() ||
|
|
inputManager.getAllTouchIdentifiers().length > 0 ||
|
|
inputManager.getMouseWheelDelta() !== 0 ||
|
|
inputManager.getMouseWheelDeltaX() !== 0 ||
|
|
inputManager.getMouseWheelDeltaZ() !== 0
|
|
) {
|
|
this._timeSinceLastInteraction = 0;
|
|
}
|
|
if (this._draggedNewObject) {
|
|
this._timeSinceLastInteraction = 0;
|
|
}
|
|
this._timeSinceLastInteraction += elapsedTime;
|
|
|
|
// Adapt the framerate to avoid consuming too much CPU when the editor is not visible
|
|
// or not interacted with.
|
|
if (!this._isVisible) {
|
|
this._runtimeGame.setMaximumFps(0.3);
|
|
} else {
|
|
if (this._timeSinceLastInteraction > 1000) {
|
|
this._runtimeGame.setMaximumFps(10);
|
|
} else {
|
|
this._runtimeGame.setMaximumFps(60);
|
|
}
|
|
}
|
|
}
|
|
|
|
updateAndRender() {
|
|
if (!this._unregisterContextLostListener) {
|
|
this._setupWebGLContextLostListener();
|
|
}
|
|
|
|
const objectUnderCursor: gdjs.RuntimeObject | null =
|
|
this.getObjectUnderCursor();
|
|
|
|
this._runtimeGame.getSoundManager().muteEverything('in-game-editor');
|
|
|
|
const inputManager = this._runtimeGame.getInputManager();
|
|
|
|
// Ensure we don't keep keys considered as pressed if the editor is blurred.
|
|
if (!hasWindowFocus && this._windowHadFocus) {
|
|
inputManager.releaseAllPressedKeys();
|
|
}
|
|
this._windowHadFocus = hasWindowFocus;
|
|
|
|
// Update the state of the mouse/cursor for this frame.
|
|
const mouseLeftButtonJustPressed =
|
|
!this._wasMouseLeftButtonPressed &&
|
|
inputManager.isMouseButtonPressed(0);
|
|
const mouseRightButtonJustPressed =
|
|
!this._wasMouseRightButtonPressed &&
|
|
inputManager.isMouseButtonPressed(1);
|
|
const mouseMiddleButtonJustPressed =
|
|
!this._wasMouseMiddleButtonPressed &&
|
|
inputManager.isMouseButtonPressed(2);
|
|
if (mouseLeftButtonJustPressed || mouseRightButtonJustPressed) {
|
|
this._pressedOriginalCursorX = inputManager.getCursorX();
|
|
this._pressedOriginalCursorY = inputManager.getCursorY();
|
|
}
|
|
if (mouseRightButtonJustPressed) {
|
|
this._pressedRightButtonTime = Date.now();
|
|
}
|
|
if (mouseMiddleButtonJustPressed) {
|
|
this._pressedMiddleButtonTime = Date.now();
|
|
}
|
|
|
|
// Note: don't add more logic here. Instead, create a new method
|
|
// to handle what you need, possibly with a dedicated class to abstract it.
|
|
|
|
if (!this._selectionControls) {
|
|
this._isTransformControlsHovered = false;
|
|
} else if (
|
|
this._previousCursorX !== inputManager.getMouseX() ||
|
|
this._previousCursorY !== inputManager.getMouseY()
|
|
) {
|
|
this._isTransformControlsHovered =
|
|
!!this._selectionControls.threeTransformControls.axis;
|
|
}
|
|
|
|
this._handlePointerLock();
|
|
this._handleTransformControlsMode();
|
|
this._handleCameraMovement();
|
|
this._handleSelectedObjectDragging();
|
|
this._handleSelectionMovement();
|
|
this._updateSelectionBox();
|
|
this._handleSelection({ objectUnderCursor });
|
|
this._updateSelectionOutline({ objectUnderCursor });
|
|
// Custom objects only update their position at the end of the frame
|
|
// because they don't override position setters like built-in objects do.
|
|
// Since the instance position is not yet set when `onCreated` is called,
|
|
// they will be at (0; 0; 0) during the 1st step.
|
|
// When they are selected and `switchToSceneOrVariant` has just been
|
|
// called, it avoid to put the control at (0; 0; 0).
|
|
if (!this._isFirstFrame) {
|
|
this._updateSelectionControls();
|
|
}
|
|
this._updateInnerAreaOutline();
|
|
this._handleContextMenu();
|
|
this._handleShortcuts();
|
|
this._updateMouseCursor();
|
|
|
|
const domElementContainer = this._runtimeGame
|
|
.getRenderer()
|
|
.getDomElementContainer();
|
|
if (domElementContainer) {
|
|
this._toolbar.render(domElementContainer);
|
|
}
|
|
|
|
// Prepare state of the mouse/cursor for the next frame.
|
|
this._wasMovingSelectionLastFrame =
|
|
!!this._selectionControlsMovementTotalDelta;
|
|
if (!this._selectionControlsMovementTotalDelta) {
|
|
this._hasSelectionActuallyMoved = false;
|
|
}
|
|
this._wasMouseLeftButtonPressed = inputManager.isMouseButtonPressed(0);
|
|
this._wasMouseRightButtonPressed = inputManager.isMouseButtonPressed(1);
|
|
this._wasMouseMiddleButtonPressed = inputManager.isMouseButtonPressed(2);
|
|
this._previousCursorX = inputManager.getMouseX();
|
|
this._previousCursorY = inputManager.getMouseY();
|
|
|
|
if (this._currentScene) {
|
|
this._currentScene._updateObjectsForInGameEditor();
|
|
for (let i = 0; i < gdjs.callbacksInGameEditorPostStep.length; ++i) {
|
|
gdjs.callbacksInGameEditorPostStep[i](this);
|
|
}
|
|
this._currentScene.render();
|
|
}
|
|
|
|
this._isFirstFrame = false;
|
|
}
|
|
|
|
private _getEditorCamera(): EditorCamera {
|
|
return this._editorCamera;
|
|
}
|
|
}
|
|
|
|
class Toolbar {
|
|
private _renderedElements: {
|
|
container: HTMLDivElement;
|
|
moveButton: HTMLButtonElement;
|
|
rotateButton: HTMLButtonElement;
|
|
scaleButton: HTMLButtonElement;
|
|
freeCameraButton: HTMLButtonElement;
|
|
orbitCameraButton: HTMLButtonElement;
|
|
} | null = null;
|
|
private _parent: HTMLElement | null = null;
|
|
private _getTransformControlsMode: () => 'translate' | 'rotate' | 'scale';
|
|
private _setTransformControlsMode: (
|
|
mode: 'translate' | 'rotate' | 'scale'
|
|
) => void;
|
|
private _focusOnSelection: () => void;
|
|
private _switchToFreeCamera: () => void;
|
|
private _switchToOrbitCamera: () => void;
|
|
private _isFreeCamera: () => boolean;
|
|
private _getSvgIconUrl: (iconName: string) => string;
|
|
private _hasSelectionControlsShown: () => boolean;
|
|
|
|
private addOrUpdateToolbarStyle() {
|
|
const id = 'InGameEditor-Toolbar-Style';
|
|
|
|
let styleElement = document.getElementById(id);
|
|
if (!styleElement) {
|
|
styleElement = document.createElement('style');
|
|
styleElement.id = 'InGameEditor-Toolbar-Style';
|
|
document.head.appendChild(styleElement);
|
|
}
|
|
|
|
styleElement.textContent = `
|
|
.InGameEditor-Toolbar-Centering-Container {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
transition: transform 0.1s ease-in-out;
|
|
}
|
|
.InGameEditor-Toolbar-Container {
|
|
position: relative;
|
|
pointer-events: all;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 2px;
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
gap: 6px;
|
|
}
|
|
.InGameEditor-Toolbar-Container-Background {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: var(--in-game-editor-theme-toolbar-background-color);
|
|
opacity: 0.5;
|
|
border-radius: 3px;
|
|
z-index: -1;
|
|
}
|
|
.InGameEditor-Toolbar-Button {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
padding: 0;
|
|
border-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background-color: transparent;
|
|
}
|
|
.InGameEditor-Toolbar-Button-Icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display:inline-block;
|
|
background-color: var(--in-game-editor-theme-text-color-primary);
|
|
}
|
|
.InGameEditor-Toolbar-Button:hover:not(.InGameEditor-Toolbar-Button-Active):not(.InGameEditor-Toolbar-Button-Disabled) {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
.InGameEditor-Toolbar-Button-Active {
|
|
background-color: var(--in-game-editor-theme-icon-button-selected-background-color);
|
|
}
|
|
.InGameEditor-Toolbar-Button-Active .InGameEditor-Toolbar-Button-Icon {
|
|
background-color: var(--in-game-editor-theme-icon-button-selected-color);
|
|
}
|
|
.InGameEditor-Toolbar-Divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background-color: var(--in-game-editor-theme-toolbar-separator-color);
|
|
}
|
|
`;
|
|
}
|
|
|
|
constructor({
|
|
getTransformControlsMode,
|
|
setTransformControlsMode,
|
|
focusOnSelection,
|
|
switchToFreeCamera,
|
|
switchToOrbitCamera,
|
|
isFreeCamera,
|
|
getSvgIconUrl,
|
|
hasSelectionControlsShown,
|
|
}: {
|
|
getTransformControlsMode: () => 'translate' | 'rotate' | 'scale';
|
|
setTransformControlsMode: (
|
|
mode: 'translate' | 'rotate' | 'scale'
|
|
) => void;
|
|
focusOnSelection: () => void;
|
|
switchToFreeCamera: () => void;
|
|
switchToOrbitCamera: () => void;
|
|
isFreeCamera: () => boolean;
|
|
getSvgIconUrl: (iconName: string) => string;
|
|
hasSelectionControlsShown: () => boolean;
|
|
}) {
|
|
this._getTransformControlsMode = getTransformControlsMode;
|
|
this._setTransformControlsMode = setTransformControlsMode;
|
|
this._focusOnSelection = focusOnSelection;
|
|
this._switchToFreeCamera = switchToFreeCamera;
|
|
this._switchToOrbitCamera = switchToOrbitCamera;
|
|
this._isFreeCamera = isFreeCamera;
|
|
this._getSvgIconUrl = getSvgIconUrl;
|
|
this._hasSelectionControlsShown = hasSelectionControlsShown;
|
|
|
|
this.addOrUpdateToolbarStyle();
|
|
}
|
|
|
|
render(parent: HTMLElement) {
|
|
if (this._renderedElements && this._parent !== parent) {
|
|
this._renderedElements.container.remove();
|
|
this._renderedElements = null;
|
|
}
|
|
this._parent = parent;
|
|
|
|
const makeIcon = ({ svgIconUrl }: { svgIconUrl: string }) => (
|
|
<span
|
|
class="InGameEditor-Toolbar-Button-Icon"
|
|
style={{
|
|
'-webkit-mask': `url('${svgIconUrl}') center/contain no-repeat`,
|
|
mask: `url('${svgIconUrl}') center/contain no-repeat`,
|
|
}}
|
|
></span>
|
|
);
|
|
|
|
if (!this._renderedElements) {
|
|
const container = (
|
|
<div class="InGameEditor-Toolbar-Centering-Container">
|
|
<div class="InGameEditor-Toolbar-Container">
|
|
<div class="InGameEditor-Toolbar-Container-Background" />
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="free-camera-button"
|
|
onClick={this._switchToFreeCamera}
|
|
title="Free camera mode"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl(
|
|
'InGameEditor-FreeCameraIcon'
|
|
),
|
|
})}
|
|
</button>
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="orbit-camera-button"
|
|
onClick={this._switchToOrbitCamera}
|
|
title="Orbit camera mode"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl(
|
|
'InGameEditor-OrbitCameraIcon'
|
|
),
|
|
})}
|
|
</button>
|
|
<div class="InGameEditor-Toolbar-Divider" />
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="move-button"
|
|
onClick={() => this._setTransformControlsMode('translate')}
|
|
title="Move (translate) selection (1)"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl('InGameEditor-MoveIcon'),
|
|
})}
|
|
</button>
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="rotate-button"
|
|
onClick={() => this._setTransformControlsMode('rotate')}
|
|
title="Rotate selection (2)"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl('InGameEditor-RotateIcon'),
|
|
})}
|
|
</button>
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="scale-button"
|
|
onClick={() => this._setTransformControlsMode('scale')}
|
|
title="Resize selection (3)"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl('InGameEditor-ResizeIcon'),
|
|
})}
|
|
</button>
|
|
<div class="InGameEditor-Toolbar-Divider" />
|
|
<button
|
|
class="InGameEditor-Toolbar-Button"
|
|
id="focus-button"
|
|
onClick={this._focusOnSelection}
|
|
title="Focus on selection (F)"
|
|
>
|
|
{makeIcon({
|
|
svgIconUrl: this._getSvgIconUrl('InGameEditor-FocusIcon'),
|
|
})}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
this._parent.appendChild(container);
|
|
|
|
this._renderedElements = {
|
|
container,
|
|
moveButton: container.querySelector('#move-button')!,
|
|
rotateButton: container.querySelector('#rotate-button')!,
|
|
scaleButton: container.querySelector('#scale-button')!,
|
|
freeCameraButton: container.querySelector('#free-camera-button')!,
|
|
orbitCameraButton: container.querySelector('#orbit-camera-button')!,
|
|
};
|
|
}
|
|
|
|
const displayed = this._hasSelectionControlsShown();
|
|
|
|
this._renderedElements.container.tabIndex = displayed ? 0 : -1;
|
|
this._renderedElements.container.style.transform = displayed
|
|
? 'translateY(0)'
|
|
: 'translateY(-50px)';
|
|
|
|
const transformControlsMode = this._getTransformControlsMode();
|
|
this._renderedElements.freeCameraButton.classList.toggle(
|
|
'InGameEditor-Toolbar-Button-Active',
|
|
this._isFreeCamera()
|
|
);
|
|
this._renderedElements.orbitCameraButton.classList.toggle(
|
|
'InGameEditor-Toolbar-Button-Active',
|
|
!this._isFreeCamera()
|
|
);
|
|
this._renderedElements.moveButton.classList.toggle(
|
|
'InGameEditor-Toolbar-Button-Active',
|
|
transformControlsMode === 'translate'
|
|
);
|
|
this._renderedElements.rotateButton.classList.toggle(
|
|
'InGameEditor-Toolbar-Button-Active',
|
|
transformControlsMode === 'rotate'
|
|
);
|
|
this._renderedElements.scaleButton.classList.toggle(
|
|
'InGameEditor-Toolbar-Button-Active',
|
|
transformControlsMode === 'scale'
|
|
);
|
|
}
|
|
}
|
|
|
|
class EditorGrid {
|
|
editor: gdjs.InGameEditor;
|
|
gridHelper: THREE.GridHelper;
|
|
isVisible = true;
|
|
normal: 'Z' | 'Y' | 'X' = 'Z';
|
|
position = new THREE.Vector3();
|
|
|
|
isForcefullyHidden = true;
|
|
gridWidth: float = 0;
|
|
gridHeight: float = 0;
|
|
gridDepth: float = 0;
|
|
gridOffsetX: float = 0;
|
|
gridOffsetY: float = 0;
|
|
gridOffsetZ: float = 0;
|
|
gridColor: integer = 0;
|
|
gridAlpha: float = 1;
|
|
isSnappingEnabledByDefault = false;
|
|
threeScene: THREE.Scene | null = null;
|
|
|
|
constructor(editor: gdjs.InGameEditor) {
|
|
this.editor = editor;
|
|
this.gridHelper = new THREE.GridHelper();
|
|
}
|
|
|
|
setSettings(instancesEditorSettings: InstancesEditorSettings): void {
|
|
this.isForcefullyHidden = !instancesEditorSettings.grid;
|
|
this.gridWidth = instancesEditorSettings.gridWidth || 0;
|
|
this.gridHeight = instancesEditorSettings.gridHeight || 0;
|
|
this.gridDepth =
|
|
instancesEditorSettings.gridDepth === undefined
|
|
? 32
|
|
: instancesEditorSettings.gridDepth;
|
|
this.gridOffsetX = instancesEditorSettings.gridOffsetX || 0;
|
|
this.gridOffsetY = instancesEditorSettings.gridOffsetY || 0;
|
|
this.gridOffsetZ = instancesEditorSettings.gridOffsetZ || 0;
|
|
this.gridColor = instancesEditorSettings.gridColor;
|
|
this.gridAlpha = instancesEditorSettings.gridAlpha;
|
|
this.isSnappingEnabledByDefault = instancesEditorSettings.snap;
|
|
this.rebuildGrid();
|
|
}
|
|
|
|
private rebuildGrid(): void {
|
|
this.gridHelper.removeFromParent();
|
|
this.gridHelper.dispose();
|
|
this.gridHelper = new THREE.GridHelper(
|
|
10,
|
|
10,
|
|
this.gridColor,
|
|
this.gridColor
|
|
);
|
|
this.gridHelper.material.transparent = true;
|
|
this.gridHelper.material.opacity = this.gridAlpha;
|
|
this.gridHelper.rotation.order = 'ZYX';
|
|
this.updateVisibility();
|
|
this.updateLocation();
|
|
if (this.threeScene) {
|
|
this.threeScene.add(this.gridHelper);
|
|
}
|
|
}
|
|
|
|
private updateLocation() {
|
|
const { gridWidth, gridHeight, gridDepth } = this;
|
|
const { x, y, z } = this.position;
|
|
if (this.normal === 'X') {
|
|
this.gridHelper.rotation.set(0, 0, Math.PI / 2);
|
|
this.gridHelper.scale.set(gridWidth, 1, gridDepth || 0);
|
|
this.gridHelper.position.set(
|
|
x,
|
|
this.getSnappedY(y),
|
|
this.getSnappedZ(z)
|
|
);
|
|
} else if (this.normal === 'Y') {
|
|
this.gridHelper.rotation.set(0, 0, 0);
|
|
this.gridHelper.scale.set(gridHeight, 1, gridDepth || 0);
|
|
this.gridHelper.position.set(
|
|
this.getSnappedX(x),
|
|
y,
|
|
this.getSnappedZ(z)
|
|
);
|
|
} else {
|
|
this.gridHelper.rotation.set(Math.PI / 2, 0, 0);
|
|
this.gridHelper.scale.set(gridWidth, 1, gridHeight);
|
|
this.gridHelper.position.set(
|
|
this.getSnappedX(x),
|
|
this.getSnappedY(y),
|
|
z
|
|
);
|
|
}
|
|
}
|
|
|
|
setTreeScene(threeScene: THREE.Scene): void {
|
|
this.threeScene = threeScene;
|
|
this.gridHelper.removeFromParent();
|
|
threeScene.add(this.gridHelper);
|
|
}
|
|
|
|
setVisible(isVisible: boolean): void {
|
|
this.isVisible = isVisible;
|
|
this.updateVisibility();
|
|
}
|
|
|
|
private updateVisibility(): void {
|
|
this.gridHelper.visible = this.isVisible && !this.isForcefullyHidden;
|
|
}
|
|
|
|
setNormal(normal: 'X' | 'Y' | 'Z') {
|
|
this.normal = normal;
|
|
if (this.normal === 'X') {
|
|
this.gridHelper.rotation.set(0, 0, Math.PI / 2);
|
|
} else if (this.normal === 'Y') {
|
|
this.gridHelper.rotation.set(0, 0, 0);
|
|
} else {
|
|
this.gridHelper.rotation.set(Math.PI / 2, 0, 0);
|
|
}
|
|
this.updateLocation();
|
|
}
|
|
|
|
setPosition(x: float, y: float, z: float): void {
|
|
this.position.set(x, y, z);
|
|
this.updateLocation();
|
|
}
|
|
|
|
getSnappedX(x: float): float {
|
|
const { gridWidth, gridOffsetX } = this;
|
|
return snap(x, gridWidth, gridOffsetX);
|
|
}
|
|
|
|
getSnappedY(y: float): float {
|
|
const { gridHeight, gridOffsetY } = this;
|
|
return snap(y, gridHeight, gridOffsetY);
|
|
}
|
|
|
|
getSnappedZ(z: float): float {
|
|
const { gridDepth, gridOffsetY } = this;
|
|
return snap(z, gridDepth || 0, gridOffsetY);
|
|
}
|
|
|
|
isSpanningEnabled(
|
|
inputManager: gdjs.InputManager,
|
|
considerAltPressed?: boolean
|
|
): boolean {
|
|
const altPressed =
|
|
considerAltPressed === undefined
|
|
? isAltPressed(inputManager)
|
|
: considerAltPressed;
|
|
return this.isSnappingEnabledByDefault !== altPressed;
|
|
}
|
|
}
|
|
|
|
/** @category In-Game Editor */
|
|
export type EditorCameraState = {
|
|
cameraMode: 'free' | 'orbit';
|
|
positionX: float;
|
|
positionY: float;
|
|
positionZ: float;
|
|
rotationAngle: float;
|
|
elevationAngle: float;
|
|
distance: float;
|
|
};
|
|
|
|
class EditorCamera implements CameraControl {
|
|
editor: gdjs.InGameEditor;
|
|
orbitCameraControl: OrbitCameraControl;
|
|
freeCameraControl: FreeCameraControl;
|
|
private _hasChanged = false;
|
|
private _hadChanged = false;
|
|
private _mouseCursor: string | null = null;
|
|
|
|
constructor(editor: gdjs.InGameEditor) {
|
|
this.editor = editor;
|
|
this.orbitCameraControl = new OrbitCameraControl(this);
|
|
this.freeCameraControl = new FreeCameraControl(this);
|
|
this.orbitCameraControl.setEnabled(false);
|
|
}
|
|
|
|
isFreeCamera(): boolean {
|
|
return this.freeCameraControl.isEnabled();
|
|
}
|
|
|
|
private getActiveCamera() {
|
|
return this.isFreeCamera()
|
|
? this.freeCameraControl
|
|
: this.orbitCameraControl;
|
|
}
|
|
|
|
getRequestedMouseCursor(): string | null {
|
|
return this._mouseCursor;
|
|
}
|
|
|
|
switchToOrbitAroundObject(object: gdjs.RuntimeObject): void {
|
|
this.switchToOrbitAroundPosition(
|
|
object.getCenterXInScene(),
|
|
object.getCenterYInScene(),
|
|
is3D(object) ? object.getUnrotatedAABBMinZ() : 0
|
|
);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
switchToOrbitAroundPosition(
|
|
targetX: float,
|
|
targetY: float,
|
|
targetZ: float
|
|
): void {
|
|
this.orbitCameraControl.target.x = targetX;
|
|
this.orbitCameraControl.target.y = targetY;
|
|
this.orbitCameraControl.target.z = targetZ;
|
|
if (this.freeCameraControl.isEnabled()) {
|
|
this.orbitCameraControl.rotationAngle =
|
|
this.freeCameraControl.rotationAngle;
|
|
this.orbitCameraControl.elevationAngle =
|
|
this.freeCameraControl.elevationAngle;
|
|
}
|
|
this.orbitCameraControl.setEnabled(true);
|
|
this.freeCameraControl.setEnabled(false);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
switchToOrbitAroundZ0(maxDistance: number): void {
|
|
if (this.freeCameraControl.isEnabled()) {
|
|
// Match orientation and orbit from the current free camera position.
|
|
this.orbitCameraControl.rotationAngle =
|
|
this.freeCameraControl.rotationAngle;
|
|
this.orbitCameraControl.elevationAngle =
|
|
this.freeCameraControl.elevationAngle;
|
|
this.orbitCameraControl.orbitFromPositionAroundZ0(
|
|
this.freeCameraControl.position.x,
|
|
this.freeCameraControl.position.y,
|
|
this.freeCameraControl.position.z,
|
|
maxDistance
|
|
);
|
|
}
|
|
|
|
this.orbitCameraControl.setEnabled(true);
|
|
this.freeCameraControl.setEnabled(false);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
switchToFreeCamera(): void {
|
|
this.orbitCameraControl.setEnabled(false);
|
|
this.freeCameraControl.setEnabled(true);
|
|
|
|
this.freeCameraControl.position.x = this.orbitCameraControl.getCameraX();
|
|
this.freeCameraControl.position.y = this.orbitCameraControl.getCameraY();
|
|
this.freeCameraControl.position.z = this.orbitCameraControl.getCameraZ();
|
|
this.freeCameraControl.rotationAngle =
|
|
this.orbitCameraControl.rotationAngle;
|
|
this.freeCameraControl.elevationAngle =
|
|
this.orbitCameraControl.elevationAngle;
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
resetRotationToTopDown(): void {
|
|
this.orbitCameraControl.resetRotationToTopDown();
|
|
this.freeCameraControl.resetRotationToTopDown();
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
setOrbitDistance(distance: number): void {
|
|
this.orbitCameraControl.distance = distance;
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
step(): void {
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
const inputManager = runtimeGame.getInputManager();
|
|
|
|
const touchIds = getCurrentTouchIdentifiers(inputManager);
|
|
const touchCount = touchIds.length;
|
|
|
|
// Always allow to use Space+click to switch to free camera and pan.
|
|
// Display a grab cursor to indicate that.
|
|
this._mouseCursor = null;
|
|
if (isSpacePressed(inputManager)) {
|
|
this._mouseCursor = 'grab';
|
|
|
|
// Switch to pan if space + left click is used.
|
|
if (inputManager.isMouseButtonPressed(0) && !this.isFreeCamera()) {
|
|
this.switchToFreeCamera();
|
|
}
|
|
}
|
|
// Also switch to pan if shift + wheel click is used.
|
|
if (
|
|
isShiftPressed(inputManager) &&
|
|
inputManager.isMouseButtonPressed(2) &&
|
|
!this.isFreeCamera()
|
|
) {
|
|
this.switchToFreeCamera();
|
|
}
|
|
// Shift to orbit if just mouse wheel click is used
|
|
if (
|
|
!isShiftPressed(inputManager) &&
|
|
inputManager.isMouseButtonPressed(2) &&
|
|
this.isFreeCamera()
|
|
) {
|
|
const maxDistance = 4000; // Large enough to orbit quickly on most parts of a level.
|
|
this.switchToOrbitAroundZ0(maxDistance);
|
|
}
|
|
// With touches, 2 touches will always pan/zoom the camera with the free camera.
|
|
if (touchCount === 2 && !this.isFreeCamera()) {
|
|
this.switchToFreeCamera();
|
|
}
|
|
// With touches, 3 touches will orbit around the point "in front of the camera".
|
|
if (
|
|
(touchCount === 3 || inputManager.isKeyPressed(O_KEY)) &&
|
|
this.isFreeCamera()
|
|
) {
|
|
const maxDistance = 4000; // Large enough to orbit quickly on most parts of a level.
|
|
this.switchToOrbitAroundZ0(maxDistance);
|
|
}
|
|
|
|
this.orbitCameraControl.step();
|
|
this.freeCameraControl.step();
|
|
|
|
if (this._hadChanged && !this._hasChanged) {
|
|
this._sendCameraState();
|
|
}
|
|
this._hadChanged = this._hasChanged;
|
|
this._hasChanged = false;
|
|
}
|
|
|
|
onHasCameraChanged() {
|
|
this._hasChanged = true;
|
|
}
|
|
|
|
updateCamera(currentScene: RuntimeScene, layer: RuntimeLayer): void {
|
|
this.getActiveCamera().updateCamera(currentScene, layer);
|
|
}
|
|
|
|
zoomBy(zoomInFactor: float): void {
|
|
this.getActiveCamera().zoomBy(zoomInFactor);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
setZoom(zoom: float): void {
|
|
const distance = this._getCameraZFromZoom(zoom);
|
|
this.switchToOrbitAroundPosition(this.getAnchorX(), this.getAnchorY(), 0);
|
|
this.resetRotationToTopDown();
|
|
this.setOrbitDistance(distance);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
getAnchorX(): float {
|
|
return this.getActiveCamera().getAnchorX();
|
|
}
|
|
getAnchorY(): float {
|
|
return this.getActiveCamera().getAnchorY();
|
|
}
|
|
getAnchorZ(): float {
|
|
return this.getActiveCamera().getAnchorZ();
|
|
}
|
|
|
|
zoomToInitialPosition(visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
}) {
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
this.zoomToFitArea(
|
|
{
|
|
minX: 0,
|
|
minY: 0,
|
|
minZ: 0,
|
|
maxX: runtimeGame.getOriginalWidth(),
|
|
maxY: runtimeGame.getOriginalHeight(),
|
|
maxZ: 0,
|
|
},
|
|
visibleScreenArea,
|
|
0.1
|
|
);
|
|
}
|
|
|
|
zoomToFitObjects(
|
|
objects: Array<RuntimeObject>,
|
|
visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
},
|
|
margin: float
|
|
) {
|
|
if (objects.length === 0) {
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
this.zoomToFitArea(
|
|
{
|
|
minX: 0,
|
|
minY: 0,
|
|
minZ: 0,
|
|
maxX: runtimeGame.getOriginalWidth(),
|
|
maxY: runtimeGame.getOriginalHeight(),
|
|
maxZ: 0,
|
|
},
|
|
visibleScreenArea,
|
|
0.1
|
|
);
|
|
}
|
|
let minX = Number.MAX_VALUE;
|
|
let minY = Number.MAX_VALUE;
|
|
let minZ = Number.MAX_VALUE;
|
|
let maxX = Number.MIN_VALUE;
|
|
let maxY = Number.MIN_VALUE;
|
|
let maxZ = Number.MIN_VALUE;
|
|
for (const object of objects) {
|
|
const aabb = object.getAABB();
|
|
minX = Math.min(minX, aabb.min[0]);
|
|
minY = Math.min(minY, aabb.min[1]);
|
|
minZ = Math.min(minZ, is3D(object) ? object.getUnrotatedAABBMinZ() : 0);
|
|
maxX = Math.max(maxX, aabb.max[0]);
|
|
maxY = Math.max(maxY, aabb.max[1]);
|
|
maxZ = Math.max(maxZ, is3D(object) ? object.getUnrotatedAABBMaxZ() : 0);
|
|
}
|
|
this.zoomToFitArea(
|
|
{
|
|
minX,
|
|
minY,
|
|
minZ,
|
|
maxX,
|
|
maxY,
|
|
maxZ,
|
|
},
|
|
visibleScreenArea,
|
|
margin
|
|
);
|
|
}
|
|
|
|
zoomToFitArea(
|
|
sceneArea: {
|
|
minX: number;
|
|
minY: number;
|
|
minZ: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
maxZ: number;
|
|
},
|
|
visibleScreenArea: {
|
|
minX: number;
|
|
minY: number;
|
|
maxX: number;
|
|
maxY: number;
|
|
},
|
|
margin: float
|
|
) {
|
|
const sceneAreaWidth = sceneArea.maxX - sceneArea.minX;
|
|
const sceneAreaHeight = sceneArea.maxY - sceneArea.minY;
|
|
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
const renderedWidth = runtimeGame.getGameResolutionWidth();
|
|
const renderedHeight = runtimeGame.getGameResolutionHeight();
|
|
const editorWidth =
|
|
(visibleScreenArea.maxX - visibleScreenArea.minX) * renderedWidth;
|
|
const editorHeight =
|
|
(visibleScreenArea.maxY - visibleScreenArea.minY) * renderedHeight;
|
|
const isContentWider =
|
|
editorWidth * sceneAreaHeight < sceneAreaWidth * editorHeight;
|
|
const zoom =
|
|
(1 - 2 * margin) *
|
|
(isContentWider
|
|
? editorWidth / sceneAreaWidth
|
|
: editorHeight / sceneAreaHeight);
|
|
const distance = this._getCameraZFromZoom(zoom);
|
|
|
|
const sceneAreaCenterX = (sceneArea.maxX + sceneArea.minX) / 2;
|
|
const sceneAreaCenterY = (sceneArea.maxY + sceneArea.minY) / 2;
|
|
|
|
this.switchToOrbitAroundPosition(
|
|
sceneAreaCenterX,
|
|
sceneAreaCenterY,
|
|
sceneArea.minZ
|
|
);
|
|
this.resetRotationToTopDown();
|
|
this.setOrbitDistance(distance);
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
/**
|
|
* Get the camera center Z position.
|
|
*
|
|
* @param zoom The camera zoom.
|
|
* @return The z position of the camera
|
|
*/
|
|
_getCameraZFromZoom = (zoom: float): float => {
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
// Set the camera so that it displays the whole PixiJS plane, as if it was a 2D rendering.
|
|
// The Z position is computed by taking the half height of the displayed rendering,
|
|
// and using the angle of the triangle defined by the field of view to compute the length
|
|
// of the triangle defining the distance between the camera and the rendering plane.
|
|
return (
|
|
(0.5 * runtimeGame.getGameResolutionHeight()) /
|
|
zoom /
|
|
Math.tan(0.5 * gdjs.toRad(editorCameraFov))
|
|
);
|
|
};
|
|
|
|
getCameraRotation(): float {
|
|
return this.getActiveCamera().rotationAngle;
|
|
}
|
|
|
|
getCameraState(): EditorCameraState {
|
|
return this.getActiveCamera()._getCameraState();
|
|
}
|
|
|
|
restoreCameraState(cameraState: EditorCameraState) {
|
|
if (cameraState.cameraMode === 'free') {
|
|
this.orbitCameraControl.setEnabled(false);
|
|
this.freeCameraControl.setEnabled(true);
|
|
this.freeCameraControl._restoreCameraState(cameraState);
|
|
} else {
|
|
this.freeCameraControl.setEnabled(false);
|
|
this.orbitCameraControl.setEnabled(true);
|
|
this.orbitCameraControl._restoreCameraState(cameraState);
|
|
}
|
|
this.onHasCameraChanged();
|
|
}
|
|
|
|
private _sendCameraState() {
|
|
const runtimeGame = this.editor.getRuntimeGame();
|
|
const debuggerClient = runtimeGame._debuggerClient;
|
|
if (!debuggerClient) return;
|
|
debuggerClient.sendCameraState(this.getCameraState());
|
|
}
|
|
}
|
|
|
|
interface CameraControl {
|
|
step(): void;
|
|
updateCamera(currentScene: RuntimeScene, layer: RuntimeLayer): void;
|
|
zoomBy(zoomInFactor: float): void;
|
|
resetRotationToTopDown(): void;
|
|
getAnchorX(): float;
|
|
getAnchorY(): float;
|
|
getAnchorZ(): float;
|
|
}
|
|
|
|
class OrbitCameraControl implements CameraControl {
|
|
private _editorCamera: EditorCamera;
|
|
target: THREE.Vector3 = new THREE.Vector3();
|
|
rotationAngle: float = 0;
|
|
elevationAngle: float = 90;
|
|
distance: float = 800;
|
|
private _isEnabled: boolean = true;
|
|
|
|
private _lastCursorX: float = 0;
|
|
private _lastCursorY: float = 0;
|
|
private _wasMouseRightButtonPressed = false;
|
|
private _wasMouseMiddleButtonPressed = false;
|
|
|
|
private _gestureActiveTouchIds: Array<integer> = [];
|
|
private _gestureLastCentroidX: float = 0;
|
|
private _gestureLastCentroidY: float = 0;
|
|
|
|
constructor(editorCamera: EditorCamera) {
|
|
this._editorCamera = editorCamera;
|
|
}
|
|
|
|
isEnabled(): boolean {
|
|
return this._isEnabled;
|
|
}
|
|
|
|
setEnabled(isEnabled: boolean): void {
|
|
this._isEnabled = isEnabled;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
step(): void {
|
|
const runtimeGame = this._editorCamera.editor.getRuntimeGame();
|
|
const inputManager = runtimeGame.getInputManager();
|
|
const renderer = runtimeGame.getRenderer();
|
|
const isRightButtonPressed = inputManager.isMouseButtonPressed(1);
|
|
const isMiddleButtonPressed = inputManager.isMouseButtonPressed(2);
|
|
|
|
if (this._isEnabled) {
|
|
// Right click: rotate the camera.
|
|
// Middle click: also rotate the camera.
|
|
if (
|
|
(isRightButtonPressed &&
|
|
// The camera should not move the 1st frame
|
|
this._wasMouseRightButtonPressed) ||
|
|
(isMiddleButtonPressed &&
|
|
// The camera should not move the 1st frame
|
|
this._wasMouseMiddleButtonPressed)
|
|
) {
|
|
// Use movement deltas when pointer is locked, otherwise use cursor position delta
|
|
const xDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementX()
|
|
: inputManager.getCursorX() - this._lastCursorX;
|
|
const yDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementY()
|
|
: inputManager.getCursorY() - this._lastCursorY;
|
|
|
|
const rotationSpeed = 0.2;
|
|
this.rotationAngle += xDelta * rotationSpeed;
|
|
this.elevationAngle += yDelta * rotationSpeed;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
// Mouse wheel: movement on the plane or forward/backward movement.
|
|
const wheelDeltaY = inputManager.getMouseWheelDelta();
|
|
if (wheelDeltaY !== 0 && shouldZoom(inputManager)) {
|
|
this.distance = Math.max(
|
|
10,
|
|
this.distance * Math.pow(2, -wheelDeltaY / 512)
|
|
);
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
// Movement with keyboard: zoom in/out.
|
|
if (isControlOrCmdPressed(inputManager)) {
|
|
if (inputManager.wasKeyJustPressed(EQUAL_KEY)) {
|
|
this.zoomBy(zoomInFactor);
|
|
} else if (inputManager.wasKeyJustPressed(MINUS_KEY)) {
|
|
this.zoomBy(zoomOutFactor);
|
|
}
|
|
}
|
|
|
|
// Touch gestures
|
|
const touchIds = getCurrentTouchIdentifiers(inputManager);
|
|
const touchCount = touchIds.length;
|
|
|
|
if (touchCount === 0) {
|
|
this._gestureActiveTouchIds = [];
|
|
} else if (!areSameTouchesSet(this._gestureActiveTouchIds, touchIds)) {
|
|
// Start or reinitialize gesture tracking
|
|
this._gestureActiveTouchIds = touchIds.slice();
|
|
if (touchCount === 3) {
|
|
const centroid3 = getTouchesCentroid(inputManager);
|
|
this._gestureLastCentroidX = centroid3.x;
|
|
this._gestureLastCentroidY = centroid3.y;
|
|
}
|
|
} else {
|
|
// Process ongoing gesture
|
|
if (touchCount === 3) {
|
|
// Three-finger rotation:
|
|
// - adjust elevation angle from vertical movement of centroid
|
|
// - adjust rotation angle from horizontal movement of centroid
|
|
const centroid3 = getTouchesCentroid(inputManager);
|
|
const dx3 = centroid3.x - this._gestureLastCentroidX;
|
|
const dy3 = centroid3.y - this._gestureLastCentroidY;
|
|
if (dx3 !== 0) {
|
|
const tiltSpeed = 0.2;
|
|
this.rotationAngle += dx3 * tiltSpeed;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
if (dy3 !== 0) {
|
|
const tiltSpeed = 0.2;
|
|
this.elevationAngle += dy3 * tiltSpeed;
|
|
if (this.elevationAngle < -45) this.elevationAngle = -45;
|
|
if (this.elevationAngle > 175) this.elevationAngle = 175;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
this._gestureLastCentroidX = centroid3.x;
|
|
this._gestureLastCentroidY = centroid3.y;
|
|
}
|
|
}
|
|
} else {
|
|
// Reset gesture tracking when camera control is disabled.
|
|
this._gestureActiveTouchIds = [];
|
|
}
|
|
|
|
this._wasMouseRightButtonPressed = isRightButtonPressed;
|
|
this._wasMouseMiddleButtonPressed = isMiddleButtonPressed;
|
|
this._lastCursorX = inputManager.getCursorX();
|
|
this._lastCursorY = inputManager.getCursorY();
|
|
}
|
|
|
|
getAnchorX(): float {
|
|
return this.target.x;
|
|
}
|
|
|
|
getAnchorY(): float {
|
|
return this.target.y;
|
|
}
|
|
|
|
getAnchorZ(): float {
|
|
return this.target.z;
|
|
}
|
|
|
|
private _getCameraForwardVector(): Point3D {
|
|
// Camera forward (from camera toward where it looks), unit length.
|
|
const cosYaw = Math.cos(gdjs.toRad(this.rotationAngle + 90));
|
|
const sinYaw = Math.sin(gdjs.toRad(this.rotationAngle + 90));
|
|
const cosEl = Math.cos(gdjs.toRad(this.elevationAngle));
|
|
const sinEl = Math.sin(gdjs.toRad(this.elevationAngle));
|
|
|
|
const fwdX = -cosYaw * cosEl;
|
|
const fwdY = -sinYaw * cosEl;
|
|
const fwdZ = -sinEl;
|
|
|
|
return [fwdX, fwdY, fwdZ];
|
|
}
|
|
|
|
getCameraX(): float {
|
|
const [fwdX, ,] = this._getCameraForwardVector();
|
|
return this.target.x - this.distance * fwdX;
|
|
}
|
|
|
|
getCameraY(): float {
|
|
const [, fwdY] = this._getCameraForwardVector();
|
|
return this.target.y - this.distance * fwdY;
|
|
}
|
|
|
|
getCameraZ(): float {
|
|
const [, , fwdZ] = this._getCameraForwardVector();
|
|
return this.target.z - this.distance * fwdZ;
|
|
}
|
|
|
|
orbitFromPositionAroundZ0(
|
|
x: float,
|
|
y: float,
|
|
z: float,
|
|
targetMaxDistance: float
|
|
): void {
|
|
const [fwdX, fwdY, fwdZ] = this._getCameraForwardVector();
|
|
|
|
// Intersect ray P(t) = camera position + t * forward with plane z = 0:
|
|
// z + t*fwdZ = 0 => t = -z / fwdZ
|
|
let tPlane: number | null = null;
|
|
if (Math.abs(fwdZ) > 1e-6) {
|
|
const t = -z / fwdZ;
|
|
// Only keep intersections "in front" of the camera
|
|
if (t > 0) tPlane = t;
|
|
}
|
|
|
|
// Choose distance along the ray:
|
|
// - If there is a valid intersection within targetMaxDistance, use it
|
|
// - Otherwise, clamp to targetMaxDistance
|
|
const distance =
|
|
tPlane !== null && tPlane <= targetMaxDistance
|
|
? tPlane
|
|
: targetMaxDistance;
|
|
|
|
// Target point = point ahead of camera along forward by distance
|
|
this.target.x = x + fwdX * distance;
|
|
this.target.y = y + fwdY * distance;
|
|
this.target.z = z + fwdZ * distance;
|
|
|
|
// Distance so that orbit camera stays exactly at the specified position
|
|
this.distance = distance;
|
|
}
|
|
|
|
updateCamera(currentScene: RuntimeScene, layer: RuntimeLayer): void {
|
|
const layerName = layer.getName();
|
|
layer.setCameraX(this.getCameraX());
|
|
layer.setCameraY(this.getCameraY());
|
|
setCameraZ(currentScene, this.getCameraZ(), layerName, 0);
|
|
setCameraRotationX(currentScene, 90 - this.elevationAngle, layerName, 0);
|
|
setCameraRotationY(currentScene, 0, layerName, 0);
|
|
layer.setCameraRotation(this.rotationAngle);
|
|
}
|
|
|
|
zoomBy(zoomFactor: float): void {
|
|
// The distance is proportional to the inverse of the zoom.
|
|
this.distance /= zoomFactor;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
resetRotationToTopDown(): void {
|
|
this.rotationAngle = 0;
|
|
this.elevationAngle = 90;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
_getCameraState(): EditorCameraState {
|
|
return {
|
|
cameraMode: 'orbit',
|
|
positionX: this.target.x,
|
|
positionY: this.target.y,
|
|
positionZ: this.target.z,
|
|
rotationAngle: this.rotationAngle,
|
|
elevationAngle: this.elevationAngle,
|
|
distance: this.distance,
|
|
};
|
|
}
|
|
|
|
_restoreCameraState(cameraState: EditorCameraState): void {
|
|
if (cameraState.cameraMode !== 'orbit') {
|
|
return;
|
|
}
|
|
this.target.x = cameraState.positionX;
|
|
this.target.y = cameraState.positionY;
|
|
this.target.z = cameraState.positionZ;
|
|
this.rotationAngle = cameraState.rotationAngle;
|
|
this.elevationAngle = cameraState.elevationAngle;
|
|
this.distance = cameraState.distance;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
}
|
|
|
|
class FreeCameraControl implements CameraControl {
|
|
private _editorCamera: EditorCamera;
|
|
position: THREE.Vector3 = new THREE.Vector3();
|
|
rotationAngle: float = 0;
|
|
elevationAngle: float = 30;
|
|
private _isEnabled: boolean = true;
|
|
private _euler: THREE.Euler = new THREE.Euler(0, 0, 0, 'ZYX');
|
|
private _rotationMatrix: THREE.Matrix4 = new THREE.Matrix4();
|
|
|
|
private _lastCursorX: float = 0;
|
|
private _lastCursorY: float = 0;
|
|
private _wasMouseRightButtonPressed = false;
|
|
|
|
// Touch gesture state
|
|
private _gestureActiveTouchIds: Array<integer> = [];
|
|
private _gestureLastCentroidX: float = 0;
|
|
private _gestureLastCentroidY: float = 0;
|
|
private _gestureLastDistance: float = 0;
|
|
|
|
constructor(editorCamera: EditorCamera) {
|
|
this._editorCamera = editorCamera;
|
|
}
|
|
|
|
isEnabled(): boolean {
|
|
return this._isEnabled;
|
|
}
|
|
|
|
setEnabled(isEnabled: boolean): void {
|
|
this._isEnabled = isEnabled;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
step(): void {
|
|
const runtimeGame = this._editorCamera.editor.getRuntimeGame();
|
|
const inputManager = runtimeGame.getInputManager();
|
|
const renderer = runtimeGame.getRenderer();
|
|
const isRightButtonPressed = inputManager.isMouseButtonPressed(1);
|
|
if (this._isEnabled) {
|
|
const { right, up, forward } = this.getCameraVectors();
|
|
|
|
const moveCameraByVector = (vector: THREE.Vector3, scale: number) => {
|
|
this.position.x += vector.x * scale;
|
|
this.position.y += vector.y * scale;
|
|
this.position.z += vector.z * scale;
|
|
this._editorCamera.onHasCameraChanged();
|
|
};
|
|
|
|
// Mouse wheel: movement on the plane or forward/backward movement.
|
|
const wheelDeltaY = inputManager.getMouseWheelDelta();
|
|
const wheelDeltaX = inputManager.getMouseWheelDeltaX();
|
|
if (wheelDeltaY !== 0 && shouldZoom(inputManager)) {
|
|
moveCameraByVector(forward, wheelDeltaY);
|
|
} else if (
|
|
wheelDeltaY !== 0 &&
|
|
shouldScrollHorizontally(inputManager)
|
|
) {
|
|
moveCameraByVector(right, wheelDeltaY / 5);
|
|
} else if (wheelDeltaX !== 0 || wheelDeltaY !== 0) {
|
|
moveCameraByVector(up, wheelDeltaY / 5);
|
|
moveCameraByVector(right, wheelDeltaX / 5);
|
|
}
|
|
|
|
// Touch gestures
|
|
const touchIds = getCurrentTouchIdentifiers(inputManager);
|
|
const touchCount = touchIds.length;
|
|
|
|
if (touchCount === 0) {
|
|
this._gestureActiveTouchIds = [];
|
|
} else if (!areSameTouchesSet(this._gestureActiveTouchIds, touchIds)) {
|
|
// Start or reinitialize gesture tracking
|
|
this._gestureActiveTouchIds = touchIds.slice();
|
|
if (touchCount === 2) {
|
|
const centroid = getTouchesCentroid(inputManager);
|
|
this._gestureLastCentroidX = centroid.x;
|
|
this._gestureLastCentroidY = centroid.y;
|
|
this._gestureLastDistance = getTouchesDistance(inputManager);
|
|
}
|
|
} else {
|
|
// Process ongoing gesture
|
|
if (touchCount === 2) {
|
|
// Pan: move on the camera plane by centroid delta
|
|
const centroid = getTouchesCentroid(inputManager);
|
|
const dx = (centroid.x - this._gestureLastCentroidX) * 5;
|
|
const dy = (centroid.y - this._gestureLastCentroidY) * 5;
|
|
if (dx !== 0 || dy !== 0) {
|
|
moveCameraByVector(up, dy);
|
|
moveCameraByVector(right, -dx);
|
|
this._gestureLastCentroidX = centroid.x;
|
|
this._gestureLastCentroidY = centroid.y;
|
|
}
|
|
|
|
// Pinch: zoom forward/backward based on distance delta
|
|
const dist = getTouchesDistance(inputManager);
|
|
const pinchDelta = (dist - this._gestureLastDistance) * 10;
|
|
if (pinchDelta !== 0) {
|
|
moveCameraByVector(forward, pinchDelta);
|
|
this._gestureLastDistance = dist;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Movement with the keyboard:
|
|
// Either arrow keys (move in the camera plane) or WASD ("FPS move" + Q/E for up/down).
|
|
const moveSpeed = isShiftPressed(inputManager) ? 48 : 6;
|
|
|
|
if (
|
|
!isControlOrCmdPressed(inputManager) &&
|
|
!isAltPressed(inputManager)
|
|
) {
|
|
if (inputManager.isKeyPressed(LEFT_KEY)) {
|
|
moveCameraByVector(right, -moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(RIGHT_KEY)) {
|
|
moveCameraByVector(right, moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(UP_KEY)) {
|
|
moveCameraByVector(up, moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(DOWN_KEY)) {
|
|
moveCameraByVector(up, -moveSpeed);
|
|
}
|
|
// Forward/back
|
|
if (inputManager.isKeyPressed(W_KEY)) {
|
|
moveCameraByVector(forward, moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(S_KEY)) {
|
|
moveCameraByVector(forward, -moveSpeed);
|
|
}
|
|
|
|
// Left/right (strafe)
|
|
if (inputManager.isKeyPressed(A_KEY)) {
|
|
moveCameraByVector(right, -moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(D_KEY)) {
|
|
moveCameraByVector(right, moveSpeed);
|
|
}
|
|
|
|
// Up/down
|
|
if (inputManager.isKeyPressed(Q_KEY)) {
|
|
moveCameraByVector(up, -moveSpeed);
|
|
}
|
|
if (inputManager.isKeyPressed(E_KEY)) {
|
|
moveCameraByVector(up, moveSpeed);
|
|
}
|
|
}
|
|
|
|
// Movement with keyboard: zoom in/out.
|
|
if (isControlOrCmdPressed(inputManager)) {
|
|
if (inputManager.wasKeyJustPressed(EQUAL_KEY)) {
|
|
this.zoomBy(zoomInFactor);
|
|
} else if (inputManager.wasKeyJustPressed(MINUS_KEY)) {
|
|
this.zoomBy(zoomOutFactor);
|
|
}
|
|
}
|
|
|
|
// Space + click: move the camera on its plane.
|
|
// Shift + Wheel click: same.
|
|
if (
|
|
(isSpacePressed(inputManager) &&
|
|
inputManager.isMouseButtonPressed(0)) ||
|
|
(isShiftPressed(inputManager) && inputManager.isMouseButtonPressed(2))
|
|
) {
|
|
// Use movement deltas when pointer is locked, otherwise use cursor position delta
|
|
const xDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementX()
|
|
: inputManager.getCursorX() - this._lastCursorX;
|
|
const yDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementY()
|
|
: inputManager.getCursorY() - this._lastCursorY;
|
|
moveCameraByVector(up, yDelta);
|
|
moveCameraByVector(right, -xDelta);
|
|
}
|
|
|
|
// Right click: rotate the camera.
|
|
if (
|
|
isRightButtonPressed &&
|
|
// The camera should not move the 1st frame
|
|
this._wasMouseRightButtonPressed
|
|
) {
|
|
// Use movement deltas when pointer is locked, otherwise use cursor position delta
|
|
const xDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementX()
|
|
: inputManager.getCursorX() - this._lastCursorX;
|
|
const yDelta = renderer.isPointerLocked()
|
|
? inputManager.getMouseMovementY()
|
|
: inputManager.getCursorY() - this._lastCursorY;
|
|
|
|
const rotationSpeed = 0.2;
|
|
this.rotationAngle += xDelta * rotationSpeed;
|
|
this.elevationAngle += yDelta * rotationSpeed;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
} else {
|
|
// Reset gesture tracking when camera control is disabled.
|
|
this._gestureActiveTouchIds = [];
|
|
}
|
|
this._wasMouseRightButtonPressed = isRightButtonPressed;
|
|
this._lastCursorX = inputManager.getCursorX();
|
|
this._lastCursorY = inputManager.getCursorY();
|
|
}
|
|
|
|
moveForward(distanceDelta: number) {
|
|
const { forward } = this.getCameraVectors();
|
|
|
|
const moveCameraByVector = (vector: THREE.Vector3, scale: number) => {
|
|
this.position.x += vector.x * scale;
|
|
this.position.y += vector.y * scale;
|
|
this.position.z += vector.z * scale;
|
|
this._editorCamera.onHasCameraChanged();
|
|
};
|
|
|
|
moveCameraByVector(forward, distanceDelta);
|
|
}
|
|
|
|
updateCamera(currentScene: RuntimeScene, layer: RuntimeLayer): void {
|
|
const layerName = layer.getName();
|
|
layer.setCameraX(this.position.x);
|
|
layer.setCameraY(this.position.y);
|
|
setCameraZ(currentScene, this.position.z, layerName, 0);
|
|
setCameraRotationX(currentScene, 90 - this.elevationAngle, layerName, 0);
|
|
setCameraRotationY(currentScene, 0, layerName, 0);
|
|
layer.setCameraRotation(this.rotationAngle);
|
|
}
|
|
|
|
private getCameraVectors() {
|
|
this._euler.x = gdjs.toRad(90 - this.elevationAngle);
|
|
this._euler.z = gdjs.toRad(this.rotationAngle);
|
|
this._rotationMatrix.makeRotationFromEuler(this._euler);
|
|
|
|
// threeCamera.matrixWorld is a 4x4. In Three.js, the columns correspond to:
|
|
// [ right.x, up.x, forwardNeg.x, pos.x
|
|
// right.y, up.y, forwardNeg.y, pos.y
|
|
// right.z, up.z, forwardNeg.z, pos.z
|
|
// 0, 0, 0, 1 ]
|
|
//
|
|
// By default, a Three.js camera looks down the -Z axis, so the "forward" axis
|
|
// in the matrix is actually the negative Z column. We'll call it "forward" below.
|
|
const elements = this._rotationMatrix.elements;
|
|
|
|
// Local right axis in world space:
|
|
const right = new THREE.Vector3(elements[0], elements[1], elements[2]);
|
|
// Local forward axis in world space (note we take the negative of that column).
|
|
const forward = new THREE.Vector3(
|
|
elements[8],
|
|
elements[9],
|
|
-elements[10]
|
|
);
|
|
|
|
// Local up axis in world space: orthogonal to both right and forward.
|
|
const up = new THREE.Vector3().crossVectors(forward, right);
|
|
|
|
// Normalize them, just in case (they should generally be unit vectors).
|
|
right.normalize();
|
|
up.normalize();
|
|
forward.normalize();
|
|
|
|
return { right, up, forward };
|
|
}
|
|
|
|
getAnchorX(): float {
|
|
return this.position.x;
|
|
}
|
|
|
|
getAnchorY(): float {
|
|
return this.position.y;
|
|
}
|
|
|
|
getAnchorZ(): float {
|
|
return this.position.z;
|
|
}
|
|
|
|
zoomBy(zoomInFactor: float): void {
|
|
this.moveForward(zoomInFactor > 1 ? 200 : -200);
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
resetRotationToTopDown(): void {
|
|
this.rotationAngle = 0;
|
|
this.elevationAngle = 90;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
|
|
_getCameraState(): EditorCameraState {
|
|
return {
|
|
cameraMode: 'free',
|
|
positionX: this.position.x,
|
|
positionY: this.position.y,
|
|
positionZ: this.position.z,
|
|
rotationAngle: this.rotationAngle,
|
|
elevationAngle: this.elevationAngle,
|
|
distance: 0,
|
|
};
|
|
}
|
|
|
|
_restoreCameraState(cameraState: EditorCameraState): void {
|
|
if (cameraState.cameraMode !== 'free') {
|
|
return;
|
|
}
|
|
this.position.x = cameraState.positionX;
|
|
this.position.y = cameraState.positionY;
|
|
this.position.z = cameraState.positionZ;
|
|
this.rotationAngle = cameraState.rotationAngle;
|
|
this.elevationAngle = cameraState.elevationAngle;
|
|
this._editorCamera.onHasCameraChanged();
|
|
}
|
|
}
|
|
|
|
const getCameraZ = (
|
|
runtimeScene: RuntimeScene,
|
|
layerName: string,
|
|
cameraIndex: integer
|
|
): float => {
|
|
return gdjs.scene3d.camera
|
|
? gdjs.scene3d.camera.getCameraZ(runtimeScene, layerName, cameraIndex)
|
|
: 0;
|
|
};
|
|
|
|
const setCameraZ = (
|
|
runtimeScene: RuntimeScene,
|
|
z: float,
|
|
layerName: string,
|
|
cameraIndex: integer
|
|
) => {
|
|
if (gdjs.scene3d.camera) {
|
|
gdjs.scene3d.camera.setCameraZ(runtimeScene, z, layerName, cameraIndex);
|
|
}
|
|
};
|
|
|
|
const setCameraRotationX = (
|
|
runtimeScene: RuntimeScene,
|
|
angle: float,
|
|
layerName: string,
|
|
cameraIndex: integer
|
|
) => {
|
|
if (gdjs.scene3d.camera) {
|
|
gdjs.scene3d.camera.setCameraRotationX(
|
|
runtimeScene,
|
|
angle,
|
|
layerName,
|
|
cameraIndex
|
|
);
|
|
}
|
|
};
|
|
|
|
const setCameraRotationY = (
|
|
runtimeScene: RuntimeScene,
|
|
angle: float,
|
|
layerName: string,
|
|
cameraIndex: integer
|
|
) => {
|
|
if (gdjs.scene3d.camera) {
|
|
gdjs.scene3d.camera.setCameraRotationY(
|
|
runtimeScene,
|
|
angle,
|
|
layerName,
|
|
cameraIndex
|
|
);
|
|
}
|
|
};
|
|
|
|
class ObjectSelectionBoxHelper {
|
|
object: gdjs.RuntimeObject;
|
|
dummyObject3DForObject2D: THREE.Object3D | null = null;
|
|
boxHelper: THREE.BoxHelper;
|
|
container: THREE.Group;
|
|
|
|
constructor(object: gdjs.RuntimeObject) {
|
|
this.object = object;
|
|
|
|
let threeObject = object.get3DRendererObject();
|
|
if (!threeObject) {
|
|
threeObject = new THREE.Group();
|
|
threeObject.add(
|
|
new THREE.Mesh(
|
|
new THREE.BoxGeometry(1, 1, 1),
|
|
new THREE.MeshBasicMaterial()
|
|
)
|
|
);
|
|
this.dummyObject3DForObject2D = threeObject;
|
|
}
|
|
// Use a group to invert the Y-axis as the GDevelop Y axis is inverted
|
|
// compared to Three.js. This is somehow necessary because the position
|
|
// of the BoxHelper is always (0, 0, 0) and the geometry is hard to manipulate.
|
|
this.container = new THREE.Group();
|
|
this.container.rotation.order = 'ZYX';
|
|
this.container.scale.y = -1;
|
|
this.boxHelper = new THREE.BoxHelper(threeObject, '#f2a63c');
|
|
this.boxHelper.rotation.order = 'ZYX';
|
|
this.boxHelper.material.depthTest = false;
|
|
this.boxHelper.material.fog = false;
|
|
this.container.add(this.boxHelper);
|
|
}
|
|
|
|
update() {
|
|
if (this.dummyObject3DForObject2D) {
|
|
this.dummyObject3DForObject2D.position.set(
|
|
this.object.getCenterXInScene(),
|
|
-this.object.getCenterYInScene(),
|
|
0
|
|
);
|
|
this.dummyObject3DForObject2D.scale.set(
|
|
this.object.getWidth() + 2,
|
|
this.object.getHeight() + 2,
|
|
0
|
|
);
|
|
}
|
|
this.boxHelper.update();
|
|
}
|
|
|
|
removeFromParent() {
|
|
this.container.removeFromParent();
|
|
}
|
|
|
|
setLayer(layer: number): void {
|
|
this.boxHelper.layers.set(layer);
|
|
}
|
|
|
|
setColor(color: THREE.ColorRepresentation) {
|
|
this.boxHelper.material.color.set(color);
|
|
this.boxHelper.material.needsUpdate = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A 3D object placeholder that is used as a fall back when the object type
|
|
* is not known.
|
|
*/
|
|
class UnknownRuntimeObject extends gdjs.RuntimeObject3D {
|
|
_renderer: UnknownRuntimeObjectRenderer;
|
|
|
|
constructor(
|
|
instanceContainer: gdjs.RuntimeInstanceContainer,
|
|
objectData: gdjs.Object3DData,
|
|
instanceData?: InstanceData
|
|
) {
|
|
super(instanceContainer, objectData, instanceData);
|
|
this._renderer = new UnknownRuntimeObjectRenderer(
|
|
this,
|
|
instanceContainer
|
|
);
|
|
}
|
|
|
|
override getRenderer(): gdjs.RuntimeObject3DRenderer {
|
|
return this._renderer;
|
|
}
|
|
|
|
override onDestroyed(): void {
|
|
super.onDestroyed();
|
|
this._renderer.onDestroyed();
|
|
}
|
|
}
|
|
gdjs.registerObject('', UnknownRuntimeObject);
|
|
|
|
class UnknownRuntimeObjectRenderer extends gdjs.RuntimeObject3DRenderer {
|
|
private _threeObject: THREE.Mesh;
|
|
|
|
constructor(
|
|
runtimeObject: UnknownRuntimeObject,
|
|
instanceContainer: gdjs.RuntimeInstanceContainer
|
|
) {
|
|
const cube = new THREE.Mesh(
|
|
new THREE.BoxGeometry(),
|
|
runtimeObject
|
|
.getInstanceContainer()
|
|
.getGame()
|
|
.getImageManager()
|
|
.getThreeMaterial('', {
|
|
useTransparentTexture: false,
|
|
forceBasicMaterial: true,
|
|
vertexColors: false,
|
|
})
|
|
);
|
|
super(runtimeObject, instanceContainer, cube);
|
|
this._threeObject = cube;
|
|
this.updateSize();
|
|
this.updatePosition();
|
|
this.updateRotation();
|
|
}
|
|
|
|
onDestroyed(): void {
|
|
this._threeObject.removeFromParent();
|
|
this._threeObject.geometry.dispose();
|
|
}
|
|
}
|
|
}
|