Giter Club home page Giter Club logo

vnve's Introduction

English | 简体中文

V N V E

Visual Novel Video Editor

Make Visual Novel Videos in Your Browser 🔗

discord chat downloads eslint commit static

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" })

// Adding elements to the scene
scene.addChild(img)
scene.addChild(text)
scene.addChild(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
})

Open in CodeSandbox

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
})

Open in CodeSandbox

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

vnve's People

Contributors

foreversc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.