Skip to content

Commit

Permalink
more motion
Browse files Browse the repository at this point in the history
  • Loading branch information
@skuqre
skuqre committed Dec 5, 2023
1 parent 7bc6401 commit adda7b4
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 13 deletions.
14 changes: 14 additions & 0 deletions src/pages/update-log.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,20 @@ embeddesc: the update log

# Update Log

---
<br>

## More motion `Dec 5, 2023`

- added `jump` motion effect
- makes the character do a little "jump" commonly from VNs
- added `scalech` motion effect
- scales the character. same syntax as `scalebg`

||
|-|
| <video width="100%" controls autoplay src="https://cdn.discordapp.com/attachments/1154460728179314710/1181592901080322178/nikke-dialogue_1.mp4" /> |

<br>

---
Expand Down
9 changes: 6 additions & 3 deletions src/pages/what-is/motion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,26 @@ Kinda like a script in some sort of language or something.
Here's an example of what I would put in that field:
```
fadein::0.5
posxbg::-20::0.5
posybg::20::0.5
jump::0.5
scalech::110::top-center::1
scalebg::125::top-center::1
```

Most take in the form of `keyword::value::value::value` where `keyword` is a specific word that must be typed *as-is*, and value
can be anything, commonly a number.

You can preview the results of your motion creations by exporting in MP4, GIF, or individual frames.
You can preview the results of your motion creations by exporting in MP4 or GIF. Take note that exporting to these types will provide you with a result in 30 FPS!

Anything with a `duration` value is the value in seconds, e.g. `fadein::0.2` is fade in the image for 0.2 seconds.

| Keyword | Format | Description
| - | - | - |
| **fadein** | `fadein::duration` | Fade the image *from black* (excluding the UI) for a certain amount of seconds. |
| **fadeout** | `fadeout::duration` | Fade the image *to black* (excluding the UI) for a certain amount of seconds. |
| **jump** | `jump::duration` | Make the character image "jump" a tiny bit. The jump height scales with your canva's height. |
| **scalebg** | `scalebg::finalScale::anchor::duration` | Scale the background. <ul><li>**finalScale**: The value you want the background to smoothly transition to</li><li>**anchor**: Where the background will "scale" from. Can be `top-left`, `top-center`, `top-right`, `mid-left`, `mid-center`, `mid-right`, `bot-left`, `bot-center`, `bot-right`. If you want to just change scale, and no position, this can be `none` instead.</li></ul> |
| **posxbg** | `posxbg::toXpos::duration` | Move the background to a new place, horizontally. <ul><li>**toXpos**: Where the background will go to in the horizontal axis.</li></ul> |
| **posybg** | `posybg::toYpos::duration` | Move the background to a new place, vertically. <ul><li>**toYpos**: Where the background will go to in the vertical axis.</li></ul> |
| **scalech** | `scalech::finalScale::anchor::duration` | Same as the one ending in `bg` |
| **posxch** | `posxch::toXpos::duration` | Same as the one ending in `bg` |
| **posych** | `posych::toXpos::duration` | Same as the one ending in `bg` |
79 changes: 69 additions & 10 deletions src/scripts/dialogue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ let scalech = 100;
let bgpos = [0, 0]
let chpos = [0, 0]

let chposoff = [0, 0];

let canvassize = [1080, 1080];

let wmrk = new Image();
Expand Down Expand Up @@ -766,6 +768,8 @@ function captureAnimatables() {
chvals: [chpos[0], chpos[1], scalech]
}

chposoff = [0, 0];

let curFrame = 0;

let individual = subtext2.split('');
Expand Down Expand Up @@ -808,6 +812,9 @@ function resetAnimatables() {

chpos[0] = capture.chvals[0]
chpos[1] = capture.chvals[1]
scalech = capture.chvals[2];

chposoff = [0, 0];

brnum = capture.brightness;

Expand Down Expand Up @@ -844,6 +851,8 @@ function generateText(text, subtext, exporting=false) {
let fadeOutFrames = 0;
let posbgFrames = [[0, 0], [0, 0]] // frames, goal value
let scalebgFrames = [0, 'center', 0] // frames, anchor, goal value
let scalechFrames = [0, 'center', 0]
let chjumpFrames = 0;

let poschFrames = [[0, 0], [0, 0]]

Expand All @@ -852,31 +861,39 @@ function generateText(text, subtext, exporting=false) {

switch (data[0]) {
case 'fadein':
fadeInFrames = Math.round(parseFloat(data[1]) / (1/30));
fadeInFrames = Math.round(parseFloat(data[1]) * 30);
break;

case 'fadeout':
fadeOutFrames = Math.round(parseFloat(data[1]) / (1/30));
fadeOutFrames = Math.round(parseFloat(data[1]) * 30);
break;

case 'posxbg':
posbgFrames[0] = [Math.round(parseFloat(data[2]) / (1/30)), parseFloat(data[1])];
posbgFrames[0] = [Math.round(parseFloat(data[2]) * 30), parseFloat(data[1])];
break;

case 'posybg':
posbgFrames[1] = [Math.round(parseFloat(data[2]) / (1/30)), parseFloat(data[1])];
posbgFrames[1] = [Math.round(parseFloat(data[2]) * 30), parseFloat(data[1])];
break;

case 'scalebg':
scalebgFrames = [Math.round(parseFloat(data[3]) / (1/30)), data[2], parseFloat(data[1])]
scalebgFrames = [Math.round(parseFloat(data[3]) * 30), data[2], parseFloat(data[1])]
break;

case 'posxch':
poschFrames[0] = [Math.round(parseFloat(data[2]) / (1/30)), parseFloat(data[1])];
poschFrames[0] = [Math.round(parseFloat(data[2]) * 30), parseFloat(data[1])];
break;

case 'posych':
poschFrames[1] = [Math.round(parseFloat(data[2]) / (1/30)), parseFloat(data[1])];
poschFrames[1] = [Math.round(parseFloat(data[2]) * 30), parseFloat(data[1])];
break;

case 'scalech':
scalechFrames = [Math.round(parseFloat(data[3]) * 30), data[2], parseFloat(data[1])]
break;

case 'jump':
chjumpFrames = Math.round(parseFloat(data[1]) * 30);
break;

default:
Expand Down Expand Up @@ -951,11 +968,53 @@ function generateText(text, subtext, exporting=false) {
bgpos[0] = (canvas.width - (bg.width * bgs)) + (xoff);
break;
}
} else {
if (scalebgFrames[1].trim() == 'none') {
}
}

if (scalechFrames[0] > 0) {
let daFrame = (frame < scalechFrames[0] ? frame : scalechFrames[0])
scalech = capture.chvals[2] + easeInOutSine(daFrame / scalechFrames[0]) * (scalechFrames[2] - capture.chvals[2]);
let anchors = scalechFrames[1].split('-')
let scalen = scalech / capture.chvals[2];
chs = scalech / 100;

let xoff = capture.chvals[0] * scalen;
let yoff = capture.chvals[1] * scalen;

let midxoff = Math.abs(capture.chvals[0] - canvas.width / 2);
let midyoff = Math.abs(capture.chvals[1] - canvas.height / 2);

if (anchors.length > 1) {
switch (anchors[0]) {
case 'top':
chpos[1] = yoff;
break;
case 'mid':
chpos[1] = (canvas.height / 2) - midyoff * scalen;
break;
case 'bot':
chpos[1] = (canvas.height - (ch.width * chs)) + (yoff);
break;
}

switch (anchors[1]) {
case 'left':
chpos[0] = xoff;
break;
case 'center':
chpos[0] = (canvas.width / 2) - midxoff * scalen;
break;
case 'right':
chpos[0] = (canvas.width - (ch.width * chs)) + (xoff);
break;
}
}
}

if (chjumpFrames > 0) {
let daFrame = (frame < chjumpFrames ? frame : chjumpFrames)
chposoff[1] = parseFloat(Math.abs(Math.sin(3.14159 * easeInOutSine(daFrame / chjumpFrames))).toFixed(2)) * -15 * (canvas.height / 1080);
}
}
}

Expand Down Expand Up @@ -987,7 +1046,7 @@ function generateText(text, subtext, exporting=false) {
document.getElementById('xposar').value = arpos[0];
document.getElementById('yposar').value = arpos[1];

ctx.drawImage(char, chpos[0], chpos[1], char.width * chs, char.height * chs)
ctx.drawImage(char, chpos[0] + chposoff[0], chpos[1] + chposoff[1], char.width * chs, char.height * chs)

ctx.filter = "none";

Expand Down

0 comments on commit adda7b4

Please sign in to comment.