/CubismCocosCreatorComponents

Primary LanguageTypeScriptOtherNOASSERTION

English / **語 / 日本語

CubismCocosCreatorComponents

Welcome to the open components of the Cubism SDK for Cocos Creator.

Go here if you're looking for the download page of the SDK package.

License

Please read the license before use.

Notices

Please read the notices before use.

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.6.2
Tools version
Node.js v18.12.1

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 alpha version, please send an issue or pull request to the Live2D GitHub repository.

Manuals and Tutorials

Community