Skip to content

Commit

Permalink
fix: support hopping/rolling mover
Browse files Browse the repository at this point in the history
  • Loading branch information
@xpadev-net
xpadev-net committed Oct 30, 2023
1 parent 920ca8a commit b60ad93
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 63 deletions.
105 changes: 66 additions & 39 deletions src/objects/object.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,14 @@ abstract class IrObject {
this.__height = val;
}
get scale() {
this.__filterMoverQueue();
const currentQueue = this.moverQueue[0];
if (this.mover === "hopping" && currentQueue) {
return (
this.options.scale *
this.calcMover(currentQueue, this.options.x, "scale")
);
}
return this.options.scale;
}
set scale(val: number) {
Expand Down Expand Up @@ -99,25 +107,7 @@ abstract class IrObject {
get __x() {
this.__filterMoverQueue();
const currentQueue = this.moverQueue[0];
const posX = (() => {
if (!currentQueue || this.mover === "") return this.options.x;
if (this.mover === "simple") {
return (
currentQueue.current.x +
(currentQueue.diff.x * (currentTime - currentQueue.vpos)) / 50
);
} else if (this.mover === "rolling") {
//todo: feat rolling
} else if (this.mover === "smooth") {
const stepCount = Math.floor((currentTime - currentQueue.vpos) / 5);
let x = currentQueue.diff.x;
for (let i = 0; i < stepCount; i++) {
x -= x / 14 + 1;
}
return currentQueue.target.x - x;
}
return currentQueue.current.x;
})();
const posX = this.calcMover(currentQueue, this.options.x, "x");
const paddingLeft = isWide
? 0
: (config.stageWidth.full - config.stageWidth.default) / 2;
Expand Down Expand Up @@ -169,25 +159,7 @@ abstract class IrObject {
get __y() {
this.__filterMoverQueue();
const currentQueue = this.moverQueue[0];
const posY = (() => {
if (!currentQueue || this.mover === "") return this.options.y;
if (this.mover === "simple") {
return (
currentQueue.current.y +
(currentQueue.diff.y * (currentTime - currentQueue.vpos)) / 50
);
} else if (this.mover === "rolling") {
//todo: feat rolling
} else if (this.mover === "smooth") {
const stepCount = Math.floor((currentTime - currentQueue.vpos) / 5);
let y = currentQueue.diff.y;
for (let i = 0; i < stepCount; i++) {
y -= y / 14 + 1;
}
return currentQueue.target.y - y;
}
return currentQueue.current.y;
})();
const posY = this.calcMover(currentQueue, this.options.y, "y");
if (this.options.posY === "ue") {
return posY;
} else if (this.options.posY === "shita") {
Expand Down Expand Up @@ -256,7 +228,6 @@ abstract class IrObject {

set mover(val: IObjectMover) {
this.options.mover = val;
console.log(`mover: ${val}`);
this.moverQueue = [];
}

Expand Down Expand Up @@ -300,9 +271,13 @@ abstract class IrObject {

protected __filterMoverQueue() {
if (this.mover === "") return;
const lastLength = this.moverQueue.length;
this.moverQueue = this.moverQueue.filter(
(item) => item.vpos + item.duration > currentTime,
);
if (lastLength !== this.moverQueue.length) {
this.__modified = true;
}
const currentItem = this.moverQueue[0];
if (this.mover !== "hopping" && this.moverQueue.length > 4 && currentItem) {
this.moverQueue = [currentItem, ...this.moverQueue.slice(-3)];
Expand Down Expand Up @@ -333,8 +308,60 @@ abstract class IrObject {
console.debug("please override this method");
}

protected get __isModified() {
return (
this.__modified ||
(this.mover === "hopping" && this.moverQueue.length > 0)
);
}

public draw() {
console.debug("please override this method");
}

protected calcMover(
queue: IrObjectMoverItem | undefined,
basePos: number,
axis: "x" | "y" | "scale",
) {
if (axis === "scale") {
if (queue && this.mover === "hopping") {
const _steps = 10;
const _step = Math.floor((currentTime - queue.vpos) / 10);
return 1 + (_step * _step - (_steps + 1) * _step + _steps) / -50;
}
return 1;
}
if (!queue || this.mover === "") return basePos;
if (this.mover === "simple") {
return (
queue.current[axis] +
(queue.diff[axis] * (currentTime - queue.vpos)) / 50
);
} else if (this.mover === "hopping") {
return (
queue.current[axis] +
(queue.diff[axis] * (currentTime - queue.vpos)) / 100
);
} else if (this.mover === "rolling") {
const _steps = 20;
const _step = Math.floor((currentTime - queue.vpos) / 2.5);
const val1 = ((2 * Math.PI) / _steps) * (_step - 1);
const val2 = (_step * _step - (_steps + 1) * _step + _steps) / -5;
const posY =
queue.current[axis] +
(queue.diff[axis] * (currentTime - queue.vpos)) / 100;
return posY + val2 * (axis === "x" ? Math.cos(val1) : Math.sin(val1));
} else if (this.mover === "smooth") {
const stepCount = Math.floor((currentTime - queue.vpos) / 5);
let pos = queue.diff[axis];
for (let i = 0; i < stepCount; i++) {
pos -= pos / 14 + 1;
}
return queue.target[axis] - pos;
}
return queue.target[axis];
}
}

export { IrObject };
28 changes: 10 additions & 18 deletions src/objects/shape.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ class IrShape extends IrObject {
const options = format(_options, optionTypes);
super(options);
this.options = getOptions(defaultOptions, options);
this.__width = this.options.width;
this.__height = this.options.height;
this.__width = this.options.width * this.options.scale;
this.__height = this.options.height * this.options.scale;
this.__parsePos();
this.__draw();
}
Expand Down Expand Up @@ -92,16 +92,6 @@ class IrShape extends IrObject {
this.__modified = true;
}

override get scale() {
return this.options.scale;
}

override set scale(val) {
this.options.scale = val;
this.__width = this.options.width * val;
this.__modified = true;
}

get mask() {
return this.options.mask;
}
Expand Down Expand Up @@ -131,6 +121,8 @@ class IrShape extends IrObject {
}

override __draw() {
this.__width = this.options.width * this.scale;
this.__height = this.options.height * this.scale;
this.__modified = false;
const { canvas, context } = getCanvas(this.__id);
canvas.width = this.__width;
Expand All @@ -139,14 +131,14 @@ class IrShape extends IrObject {
context.globalAlpha = (100 - this.options.alpha) / 100;
context.clearRect(0, 0, canvas.width, canvas.height);
if (this.shape === "rect") {
context.fillRect(0, 0, this.width, this.height);
context.fillRect(0, 0, this.__width, this.__height);
} else {
context.beginPath();
context.ellipse(
this.width / 2,
this.height / 2,
this.width / 2,
this.height / 2,
this.__width / 2,
this.__height / 2,
this.__width / 2,
this.__height / 2,
0,
0,
360,
Expand All @@ -159,7 +151,7 @@ class IrShape extends IrObject {
if (!(Math.floor(this.width) > 0 && Math.floor(this.height) > 0)) {
return;
}
if (this.__modified) this.__draw();
if (this.__isModified) this.__draw();
if (this.rotation % 360 !== 0) {
render.drawImage(this, {
targetX: this.__x,
Expand Down
33 changes: 27 additions & 6 deletions src/objects/text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,25 @@ class IrText extends IrObject {
return this.options.text;
}

//なぜか親のscaleが呼ばれないのでオーバーライド
override get scale() {
this.__filterMoverQueue();
const currentQueue = this.moverQueue[0];
if (this.mover === "hopping" && currentQueue) {
return (
this.options.scale *
this.calcMover(currentQueue, this.options.x, "scale")
);
}
return this.options.scale;
}

set text(string) {
this.options.text = `${string}`;
this.parsedComment = parse(this.text, this.options.size < 3);
this.__modified = true;
}

override get scale() {
return this.options.scale;
}

override set scale(val: number) {
const size = Math.abs(val * this.options.size);
this.__reverse = val < 0;
Expand Down Expand Up @@ -166,6 +175,18 @@ class IrText extends IrObject {
}

__measure() {
const size = Math.abs(this.size * this.scale);
if (size < 10) {
this.__scale = size / 10;
this.__size = 10;
} else if (size > 100 && this.size >= 3) {
this.__scale = size / 100;
this.__size = 100;
} else {
this.__scale = 1;
this.__size = size;
}
this.__updateFont();
const result = measure(getCanvas(this.__id).context, {
...this.parsedComment,
size: this.__size,
Expand Down Expand Up @@ -264,11 +285,11 @@ class IrText extends IrObject {
}

override draw() {
if (this.__modified) this.__measure();
if (this.__isModified) this.__measure();
if (!(this.width > 0 && this.height > 0)) {
return;
}
if (this.__modified) this.__draw();
if (this.__isModified) this.__draw();
render.drawImage(this, {
baseX: 0,
baseY: 0,
Expand Down

0 comments on commit b60ad93

Please sign in to comment.