terryyin/terry-moves

Congratuations! Now you've discovered how Terry moves.

How to add a new project

Step 0: Clone the repo and install dependencies

git clone	git@github.com:terryyin/terry-moves.git
cd terry-moves
yarn install

Step 1: Add a new story

Under the /src/stories folder, add a new story file. The story file is a React component that returns a Story component. like this:

export const StoryTransparent: React.FC = () => {
  return (
		<Story id="StoryTransparent" width={720} height={720} subtitles={yourSubtitles}  >
			<AnimationEffect actor="subtitles">
				<Subtitles scale={1}/>
			</AnimationEffect>
      <!-- Add your actors here -->
		</Story>
  );
};

Don't forget to add the new story to the src/Root.ts file.

Then use command yarn start to start the development server. You can see the new story in the browser.

Step 2: Add subtitles

The yourSubtitles in the example above is a list of subtitles. Each subtitle is an object with the following properties:

export const yourSubtitles: Subtitle[] = [
	{ leadingBlank: 0, duration: 6, text: 'Product Developers: who are they and why are they on the rise?', translations: {
		zhCN: '何谓产品开发者? 为什么说他们正在崛起？',
		zhTW: '何謂產品開發者？為什麼說他們正在崛起？',
		ja: '製品の開発者（Product Developers）とは。彼らは何者で、なぜ台頭してきているのか。',
	}, actions:[] },
  ...
];

Step 3: Add actors and actions

Please find examples in the src/stories/ folder.

Step 4: Build the video

Use command yarn build, then choose the store you want to build to build the video. The video will be generated in the out folder.

Translations

To change the language, you need to make the change at the <Story> component level. For example:

		<Story id="StoryBooleanData" width={720} height={720} subtitles={booleanDataSubtitles} language='zhCN' >

Audio

To add audio, you need to add a <Audio/> to the <Story> component:

		<Story id="StoryBooleanData" width={720} height={720} subtitles={booleanDataSubtitles}>
			<Audio src={staticFile("assets/audios/boolean3ch.mp3")} />

Special actors

'camera' actor

The 'camera' actor is a special actor that is used to represent the camera in the scene. It is not a real actor, but a special object that is used to control the camera. You can move it as a normal 3d actor.

The special ability it has is to 'look at' a position.