search

Live2D / CubismCocosCreatorComponents

Other
4 stars 6 forks source link

readme

English / 中国語 / 日本語

CubismCocosCreatorComponents

This is a open components for using models output by Live2D Cubism Editor in applications.

It provides various functions for displaying and manipulating the model. It is used in conjunction with the Cubism Core library to load the model.

If you are looking for the download page of the SDK package, please refer to Download Page.

License

Please read the license before use.

Notices

Please read the notices before use.

Compatibility with Cubism 5 new features and previous Cubism SDK versions

This SDK is compatible with Cubism 5.
For SDK compatibility with new features in Cubism 5 Editor, please refer to here.
For compatibility with previous versions of Cubism SDK, please refer to here.

Structure

Components

The components are grouped by their role, and this grouping is reflected in both the folder structure and namespaces.

Core Wrapper

Components and classes in this group are a shim layer for wrapping the unmanaged Cubism core library to C# and Cocos Creator and are located in ./static/assets/Core.

Framework

Components and classes in this group provide additional functionality like lip-syncing, as well as integration of "foreign" Cubism files with Cocos Creator. All the framework code is located in ./static/assets/Framework.

Rendering

Components and classes in this group provide the functionality for rendering Cubism models using Cocos Creator functionality and are located in ./static/assets/Rendering.

Editor Extensions

Cocos Creator Editor extensions are located in ./src. Turning Cubism files into Prefabs and AnimationClips is done here.

Resources

Resources like shaders and other assets are located in ./static/assets/resources.

Development environment

Cocos Creator version
latest v3.7.3
Tools version
Node.js v20.7.0

Confirmation of operation

  1. Install Node.js / npm. (If you have already installed it, it is not necessary.)

  2. start Cocos Dashboard and create a project by clicking [Project] - [New] - [Empty(3D)].

  3. After the Cocos Creator project is created, open the Extension Manager window from the Cocos Creator menu bar by selecting [Extension Manager] - [Extension Manager}].

  4. press the Extension Manager's upper [Project] tab, then click the right [+] button and select the Cubism SDK for Cocos Creator zip file you have downloaded.

  5. when the Extension item appears, click the folder icon to display the Explorer.

  6. open the [live2d_cubismsdk_cocoscreator] folder in the Explorer that appears.

  7. Build this Extension project. (Make the folder [live2d_cubismsdk_cocoscreator] current in CMD or other console and execute the following commands)

    1. npm install
    2. npm run build

  8. Restart Cocos Creator and open the project.

  9. Import the Cubism model.

    • *.moc3
    • *.physics3.json
    • *.cdi3.json
    • *.pose3.json
    • [texture]
    • [motions]
    • *.model3.json

    *1 Cubism SDK cannot control the import order and an error may occur on the first import. In this case, either reimport the Cubism model folder or import *.model3.json last.

  10. The import will generate *.prefab.

  11. Place the Prefab generated by the import into the scene.

For more imformation, please refer to [getting-stated] in tutorials.

Example of folder structure

CocosCreatorProject # Projects created with Cocos Creator
 ├─ assets
 ├─ library
 ├─ settings
 ├─ extensions
 │  ├─ live2d_cubism_sdk_for_cocos_extension # Project extensions directory
 │  │  ├─ src
 │  │  ├─ dist # Output destination for post-build results files
 │  │  ├─ static
  etc...

Live2D official GitHub

If you have any questions about the Cubism SDK for Cocos Creator, please send an issue or pull request to the Live2D GitHub repository.

Manuals and Tutorials

Forum