English | 简体中文

V N V E

Visual Novel Video Editor

Make Visual Novel Videos in Your Browser 🔗

Features

• 🎬 An online video editor customized for creating visual novels, open your browser and start creating!
• 👋 Say goodbye to complicated video editing software and create visual novel videos easily and quickly!
• 📝 Text First, Let's Return to the Core of Visual Novel Creation — Text Content.
• 🚀 Pure front-end Typescript implementation, Powered by PixiJS + WebCodecs.
• 🖍️ You can also create videos programmatically by using the npm package

👻 Positioning is just a video creation tool tailored for visual novels, if you want to create branching logic, numerical values and other more game-like behavior, you can go to use bilibili interactive video

Created with VNVE

Video title scene

Character dialog scenes

Purpose

• 🪄 Low-cost production of visual novel videos, quickly converting textual content into video.
• 🧩 With interactive videos on Bilibili, it is possible to achieve a gaming experience similar to that of a GalGame.
• 🎬 Creating video teasers for novels, short video dramas.
• ...

Online Usage

visit: vnve.github.io/vnve, start creating video immediately.

Demo

demo.mp4

Code Usage

You can also create videos directly by calling the npm package

Install

npm install @vnve/core

Usage

import { Creator, Scene, Img, Text, Sound, PREST_ANIMATION } from "@vnve/core";

// Init creator
const creator = new Creator();

// Scene, the video is made up of a combination of scenes
const scene = new Scene({ duration: 3000 })

// Create some elements
const img = new Img({ source: "img url" })
const text = new Text("V N V E", {
  fill: "#ffffff",
  fontSize: 200
})
const sound = new Sound({ source: "sound url" })

// Add elements to the scene
scene.addChild(img)
scene.addChild(text)

// Add sound
scene.addSound(sound)

// You can add some animation to the element
text.addAnimation(PREST_ANIMATION.FadeIn)

// Provide the scene to the creator and start generating the video
creator.add(scene)
creator.start().then(videoBlob => {
  URL.createObjectURL(videoBlob) // Wait a few moments and you'll get an mp4 file
})

Template

By using pre-packaged templates, we can achieve the desired video effects more efficiently.

It is necessary to install an additional package @vnve/template

npm install @vnve/template

Template Usage

import { Creator } from "@vnve/core";
import { TitleScene, DialogueScene } from "@vnve/template";

const creator = new Creator();
// Create a title scene
const titleScene = new TitleScene({
  title: "V N V E",
  subtitle: "Make video programmatically",
  backgroundImgSource: "img url",
  soundSources: [{ source: "sound url" }],
  duration: 3000,
})

// Create a dialog scene
const dialogueScene = new DialogueScene({
  lines: [
    {
      name: "Character A",
      content: "Charater A says..."
    },
    {
      name: "Character B",
      content: "Charater B says..."
    }
  ],
  backgroundImgSource: "img url",
  soundSources: [{ source: "sound url" }],
});

// Add scenes
creator.add(titleScene)
creator.add(dialogueScene)

// Start creating videos
creator.start().then(videoBlob => {
  URL.createObjectURL(videoBlob)  // Wait a few moments and you'll get an mp4 file
})

Core Packages

package name	brief	docs
@vnve/editor	Web UI page for the online editor	-
@vnve/core	Core module, using PixiJS + Webcodes to achieve scene dynamization and export Mp4 video	📖
@vnve/template	Template package, consisting of scenarios and elements for scenario reuse	📖

License

MIT