{"id":13901330,"url":"https://github.com/guansss/pixi-live2d-display","last_synced_at":"2025-05-15T03:07:55.461Z","repository":{"id":37193232,"uuid":"248618187","full_name":"guansss/pixi-live2d-display","owner":"guansss","description":"A PixiJS plugin to display Live2D models of any kind.","archived":false,"fork":false,"pushed_at":"2024-08-20T04:41:10.000Z","size":15816,"stargazers_count":1143,"open_issues_count":47,"forks_count":166,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-15T03:07:48.199Z","etag":null,"topics":["cubism","live2d","pixijs"],"latest_commit_sha":null,"homepage":"https://guansss.github.io/pixi-live2d-display/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guansss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":"https://raw.githubusercontent.com/guansss/.github/main/alipay.jpg"}},"created_at":"2020-03-19T22:33:25.000Z","updated_at":"2025-05-13T20:43:37.000Z","dependencies_parsed_at":"2023-12-07T06:23:06.239Z","dependency_job_id":"9577cd0e-9ed7-43e8-b072-f53c96d5a20a","html_url":"https://github.com/guansss/pixi-live2d-display","commit_stats":{"total_commits":404,"total_committers":4,"mean_commits":101.0,"dds":0.01980198019801982,"last_synced_commit":"efb644e181e33d193edefe99a2c40eeca62c6734"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guansss%2Fpixi-live2d-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guansss%2Fpixi-live2d-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guansss%2Fpixi-live2d-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guansss%2Fpixi-live2d-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guansss","download_url":"https://codeload.github.com/guansss/pixi-live2d-display/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264769,"owners_count":22041794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cubism","live2d","pixijs"],"created_at":"2024-08-06T21:01:12.375Z","updated_at":"2025-05-15T03:07:50.432Z","avatar_url":"https://github.com/guansss.png","language":"TypeScript","funding_links":["https://raw.githubusercontent.com/guansss/.github/main/alipay.jpg"],"categories":["TypeScript"],"sub_categories":[],"readme":"# pixi-live2d-display\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/guansss/pixi-live2d-display?style=flat-square)\n![Cubism version](https://img.shields.io/badge/Cubism-2/3/4-ff69b4?style=flat-square)\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/guansss/pixi-live2d-display/test.yml?style=flat-square)\n\nEnglish | [中文](README.zh.md)\n\nLive2D integration for [PixiJS](https://github.com/pixijs/pixi.js) v6.\n\nThis project aims to be a universal Live2D framework on the web platform. While the official Live2D framework is just\ncomplex and problematic, this project has rewritten it to unify and simplify the APIs, which allows you to control the\nLive2D models on a high level without the need to learn how the internal system works.\n\n#### Features\n\n- Supports all versions of Live2D models\n- Supports PIXI.RenderTexture and PIXI.Filter\n- Pixi-style transform APIs: position, scale, rotation, skew, anchor\n- Automatic interactions: focusing, hit-testing\n- Enhanced motion reserving logic compared to the official framework\n- Loading from uploaded files / zip files (experimental)\n- Fully typed - we all love types!\n\n#### Requirements\n\n- PixiJS: 6.x\n- Cubism core: 2.1 or 4\n- Browser: WebGL, ES6\n\n#### Demos\n\n- [Basic demo](https://codepen.io/guansss/pen/oNzoNoz/left?editors=1010)\n- [Interaction demo](https://codepen.io/guansss/pen/KKgXBOP/left?editors=0010)\n- [Render texture \u0026 filter demo](https://codepen.io/guansss/pen/qBaMNQV/left?editors=1010)\n- [Live2D Viewer Online](https://guansss.github.io/live2d-viewer-web/)\n\n#### Documentations\n\n- [Documentation](https://guansss.github.io/pixi-live2d-display)\n- [API Documentation](https://guansss.github.io/pixi-live2d-display/api/index.html)\n- [Development Notes](DEVELOPMENT.md)\n\n## Cubism\n\nCubism is the name of Live2D SDK. There are so far three versions of it: Cubism 2.1, Cubism 3 and Cubism 4; where Cubism\n4 is backward-compatible with Cubism 3 models.\n\nThis plugin supports all variants of Live2D models by using Cubism 2.1 and Cubism 4.\n\n#### Cubism Core\n\nBefore using the plugin, you'll need to include the Cubism runtime library, aka Cubism Core.\n\nFor Cubism 4, you need `live2dcubismcore.min.js` that can be extracted from\nthe [Cubism 4 SDK](https://www.live2d.com/download/cubism-sdk/download-web/), or be referred by\na [direct link](https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js) (_however the direct link is quite\nunreliable, don't use it in production!_).\n\nFor Cubism 2.1, you need `live2d.min.js`. It's no longer downloadable from the official\nsite [since 2019/9/4](https://help.live2d.com/en/other/other_20/), but can be\nfound [here](https://github.com/dylanNew/live2d/tree/master/webgl/Live2D/lib), and with\na [CDN link](https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js) that you'll probably need.\n\n#### Individual Bundles\n\nThe plugin provides individual bundles for each Cubism version to reduce your app's size when you just want to use one\nof the versions.\n\nSpecifically, there are `cubism2.js` and `cubism4.js` for respective runtime, along with an `index.js` that includes\nboth of them.\n\nNote that if you want both the Cubism 2.1 and Cubism 4 support, use `index.js`, but _not_ the combination\nof `cubism2.js` and `cubism4.js`.\n\nTo make it clear, here's how you would use these files:\n\n- Use `cubism2.js`+`live2d.min.js` to support Cubism 2.1 models\n- Use `cubism4.js`+`live2dcubismcore.min.js` to support Cubism 3 and Cubism 4 models\n- Use `index.js`+`live2d.min.js`+`live2dcubismcore.min.js` to support all versions of models\n\n## Installation\n\n#### Via npm\n\n```sh\nnpm install pixi-live2d-display\n```\n\n```js\nimport { Live2DModel } from 'pixi-live2d-display';\n\n// if only Cubism 2.1\nimport { Live2DModel } from 'pixi-live2d-display/cubism2';\n\n// if only Cubism 4\nimport { Live2DModel } from 'pixi-live2d-display/cubism4';\n```\n\n#### Via CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- if only Cubism 2.1 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism2.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- if only Cubism 4 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js\"\u003e\u003c/script\u003e\n```\n\nIn this way, all the exported members are available under `PIXI.live2d` namespace, such as `PIXI.live2d.Live2DModel`.\n\n## Basic usage\n\n```javascript\nimport * as PIXI from 'pixi.js';\nimport { Live2DModel } from 'pixi-live2d-display';\n\n// expose PIXI to window so that this plugin is able to\n// reference window.PIXI.Ticker to automatically update Live2D models\nwindow.PIXI = PIXI;\n\n(async function () {\n  const app = new PIXI.Application({\n    view: document.getElementById('canvas'),\n  });\n\n  const model = await Live2DModel.from('shizuku.model.json');\n\n  app.stage.addChild(model);\n\n  // transforms\n  model.x = 100;\n  model.y = 100;\n  model.rotation = Math.PI;\n  model.skew.x = Math.PI;\n  model.scale.set(2, 2);\n  model.anchor.set(0.5, 0.5);\n\n  // interaction\n  model.on('hit', (hitAreas) =\u003e {\n    if (hitAreas.includes('body')) {\n      model.motion('tap_body');\n    }\n  });\n})();\n```\n\n## Package importing\n\nWhen importing Pixi packages on-demand, you may need to manually register some plugins to enable optional features.\n\n```javascript\nimport { Application } from '@pixi/app';\nimport { Ticker, TickerPlugin } from '@pixi/ticker';\nimport { InteractionManager } from '@pixi/interaction';\nimport { Live2DModel } from 'pixi-live2d-display';\n\n// register Ticker for Live2DModel\nLive2DModel.registerTicker(Ticker);\n\n// register Ticker for Application\nApplication.registerPlugin(TickerPlugin);\n\n// register InteractionManager to make Live2D models interactive\nRenderer.registerPlugin('interaction', InteractionManager);\n\n(async function () {\n  const app = new Application({\n    view: document.getElementById('canvas'),\n  });\n\n  const model = await Live2DModel.from('shizuku.model.json');\n\n  app.stage.addChild(model);\n})();\n```\n\n---\n\nThe example Live2D models, Shizuku (Cubism 2.1) and Haru (Cubism 4), are redistributed under\nLive2D's [Free Material License](https://www.live2d.com/eula/live2d-free-material-license-agreement_en.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguansss%2Fpixi-live2d-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguansss%2Fpixi-live2d-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguansss%2Fpixi-live2d-display/lists"}