Dialogue

A Visual Novel sample, where two characters exchange dialogue. Built with Create React App, Styled Components, and React Spring.

Getting Started

Run git clone git@github.com:MFukazawa/dialogue.git and install packages with yarn.

Start the local server with yarn start.

Open http://localhost:3000 to view it in the browser.

Main Tasks

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.

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.