mfukazawa / dialogue

Dialogue - a Visual Novel type experience where characters exchange dialogue.

dialogue's Issues

Main tasks

Issue

The basic idea is to make a visual novel type experience, where two characters talk to each other. The
characters change poses and text changes in a dialogue box as the audio track runs.

• Make a page with a simple audio player.
• Add a background image.
• Show the two characters on screen at the same time.
• The audio player must have the following buttons: play/pause.
• The script is synched to the audio: pausing the audio will pause the script.
• Translate the provided script into whatever code format you think is best.
• Hardcode the script in for now, but make it easy to replace it with data from an api.
• You may use the provided files/script or come up with your own.

Dialogue

Example script
Yuusaku on the right, Yacchan on the left

1. time: 0:00:00, focused: Yuusaku 1, secondary: Yacchan 1, text: "Uh...... Where are we?"
2. time: 0:03:90, focused: Yacchan 1, secondary: Yuusaku 1, text: "This is our home, Yuusaku!"
3. time: 0:07:90, focused: Yuusaku 2, secondary: Yacchan 2, text: "Oh..."
4. time: 0:10:00, focused: Yuusaku 2, secondary: Yacchan 3, text: "In other words, I live with this
   person."
5. time: 0:16:90, focused: Yacchan 3, secondary: Yuusaku 3, text: "This is the first time you've
   been home in a week. Do you remember anything?"
6. time: 0:23:50, focused: Yuusaku 3, secondary: Yacchan 3, text: "No...... Everything still feels
   foreign to me. Err...... Sorry, I guess."
7. time: 0:32:00, focused: Yacchan 3, secondary: Yuusaku 3, text: "Oh, it's okay, you don't need to
   apologize. Take your time and everything will come back to you little by little."

Bonus tasks

Make a single character scheme:

• One character on screen at a time.
• When the same character changes pose, use a fade effect.
• When a different character appears, use a slide effect.

Consider simple animation effects:

• Blinking: characters randomly blink over time.
• Mouth movement: animate characters’ mouths when they are talking.
• Effects on top of characters: like sweat drops, angry... *******

Consider text effects:

• Text animations: make a single word shake.
• Text colors/fonts: make a single word have a different color and font.

Audio player:

Add additional controls to the audio player. The slider should be in sync with the audio.

• slider,
• restart button,
• skip forward by 10 seconds.
• skip backwards by 10 seconds.