{"id":24070201,"url":"https://github.com/next2d/player","last_synced_at":"2026-04-04T13:04:18.094Z","repository":{"id":45486821,"uuid":"341082948","full_name":"Next2D/player","owner":"Next2D","description":"Next2D Player supports WebGL and OffscreenCanvas, enabling advanced graphical expression. It can also be used in game production, advertisement production, and other scenes requiring rich expressions without having to deal with browser or device compatibility.","archived":false,"fork":false,"pushed_at":"2025-04-01T21:50:05.000Z","size":7504,"stargazers_count":50,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-02T16:01:40.137Z","etag":null,"topics":["game","game-2d","game-developement","game-development","game-engine-2d","gamedev","next2d","offscreencanvas","typescript","webgl","webgl2"],"latest_commit_sha":null,"homepage":"https://next2d.app","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/Next2D.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Next2D"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-02-22T04:48:46.000Z","updated_at":"2025-04-01T21:50:10.000Z","dependencies_parsed_at":"2023-11-06T12:26:11.701Z","dependency_job_id":"68c46623-b0ff-4685-8431-d6e85b43a210","html_url":"https://github.com/Next2D/player","commit_stats":{"total_commits":669,"total_committers":2,"mean_commits":334.5,"dds":0.005979073243647215,"last_synced_commit":"092fa601269e1c53d501ae8b7faa80ba90fbfc62"},"previous_names":[],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Next2D","download_url":"https://codeload.github.com/Next2D/player/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"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":["game","game-2d","game-developement","game-development","game-engine-2d","gamedev","next2d","offscreencanvas","typescript","webgl","webgl2"],"created_at":"2025-01-09T15:20:53.004Z","updated_at":"2026-02-11T03:06:29.644Z","avatar_url":"https://github.com/Next2D.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Next2D"],"categories":[],"sub_categories":[],"readme":"Next2D Player\n=============\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://next2d.app/assets/img/player/logo.svg\" width=\"250\" alt=\"Next2D Player\"\u003e\n\u003c/div\u003e\n\n[![UnitTest](https://github.com/Next2D/Player/actions/workflows/integration.yml/badge.svg?branch=main)](https://github.com/Next2D/Player/actions/workflows/integration.yml)\n[![CodeQL](https://github.com/Next2D/player/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)](https://github.com/Next2D/player/actions/workflows/github-code-scanning/codeql)\n[![Lint](https://github.com/Next2D/Player/actions/workflows/lint.yml/badge.svg?branch=main)](https://github.com/Next2D/Player/actions/workflows/lint.yml)\n\n[![release](https://img.shields.io/github/v/release/Next2D/Player)](https://github.com/Next2D/Player/releases)\n[![Github All Releases](https://img.shields.io/npm/dt/@next2d/player)](https://github.com/Next2D/Player/releases)\n[![Discord](https://badgen.net/badge/icon/discord?icon=discord\u0026label)](https://discord.gg/6c9rv5Uns5)\n[![Twitter](https://img.shields.io/twitter/follow/Next2D?style=social)](https://twitter.com/Next2D)\n\n[日本語]  \nNext2D Playerは、WebGL/WebGPUのハードウェアアクセラレーションでグラフィックス処理負荷を軽減し、OffscreenCanvasのマルチスレッド処理で描画パフォーマンスを向上させています。  \nベクター描画、Tweenアニメーション、テキスト、音声、動画など、さまざまな要素をサポートしているので、ゲーム制作、インタラクティブなデータビジュアライゼーション、クリエイティブなウェブアプリケーションなど、豊かな表現が必要とされるプロジェクトで活用が期待できます。  \n  \n[English]  \nNext2D Player reduces graphics processing load with WebGL/WebGPU hardware acceleration and improves drawing performance with OffscreenCanvas multi-threaded processing.  \nWith support for vector rendering, tween animation, text, audio, video, and many other elements, Next2D Player can be used for game production, interactive data visualization, creative web applications, and other projects that require rich expression. The software is expected to be used in game production, interactive data visualization, creative web applications and other projects requiring rich expression.  \n  \n[简体中文]  \nNext2D Player通过WebGL/WebGPU硬件加速降低了图形处理负载，通过OffscreenCanvas多线程处理提高了绘图性能。  \n由于支持矢量绘图、Tween动画、文本、音频、视频和许多其他元素，它可用于游戏制作、交互式数据可视化、创意网络应用和其他需要丰富表达的项目。 该软件可用于需要丰富表现力的项目中。  \n  \n## Support\n[日本語]  \n最新ニュースや技術情報は、Twitterの[@Next2D](https://twitter.com/Next2D)や公式の[Website](https://next2d.app/ja/)で発信していきますので、チェックしてみてください。  \nNext2Dがお役に立つようでしたら、プロジェクトをご支援いただければ幸いです。  \n  \n[English]  \nPlease check [@Next2D](https://twitter.com/Next2D) on Twitter and the [official website](https://next2d.app/en/) for the latest news and technical information.    \nIf Next2D is useful to you, we hope you will support our project.  \n  \n[简体中文]  \n请在Twitter上查看[@Next2D](https://twitter.com/Next2D)和[官方网站](https://next2d.app/cn/)，了解最新的新闻和技术信息。  \n如果Next2D对你有用，我们希望你能支持我们的项目。  \n  \n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/Next2D\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86\" width=180 alt=\"GitHub Sponsor\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Related Sites\n* [Website](https://next2d.app)\n* [Animation Tool](https://tool.next2d.app)\n* [Framework](https://github.com/Next2D/framework)\n\n## Examples\n\n### Use Simple Sample\n```javascript\nnext2d.load(\"Path to JSON output from Animation Tool\");\n```\n\n### Use Program Sample For JavaScript\n```javascript\nconst { Loader }     = next2d.display;\nconst { URLRequest } = next2d.net;\nconst { Event }      = next2d.events;\n\n// create root MovieClip\nconst start = async () =\u003e\n{\n    const request = new URLRequest(\"JSON path\");\n    const loader  = new Loader();\n    await loader.load(request);\n\n    const root = await next2d.createRootMovieClip();\n    root.addChild(loader.contentLoaderInfo.content);\n};\n\nstart();\n```\n\n### Use Program Sample For TypeScript\n```typescript\nimport { Loader } from \"@next2d/display\";\nimport { URLRequest } from \"@next2d/net\";\nimport { Event } from \"@next2d/events\";\n\n// create root MovieClip\nconst start = async (): Promise\u003cvoid\u003e =\u003e\n{\n    const request = new URLRequest(\"JSON path\");\n    const loader  = new Loader();\n    await loader.load(request);\n\n    const root = await next2d.createRootMovieClip();\n    root.addChild(loader.content);\n};\n\nstart();\n```\n\n## Option settings\n\n[日本語]  \n\n| プロパティ名       | 型       | デフォルト値        | 説明                                                                    |\n|--------------|---------|---------------|-----------------------------------------------------------------------|\n| `fullScreen` | boolean | false         | Stageクラスで設定した幅と高さを超えて画面全体に描画されます。                                     |\n| `tagId`      | string  | empty         | IDを指定すると、指定したIDのエレメント内で描画を行います。                                       |\n| `bgColor`    | string  | \"transparent\" | 背景色を16進数で指定できます。デフォルトは無色透明です。                                         |\n\n[English]  \n\n| name           | type    | default       | description                                                                                                                         |\n|----------------|---------|---------------|-------------------------------------------------------------------------------------------------------------------------------------|\n| `fullScreen`   | boolean | false         | The entire screen is drawn beyond the width and height set in the Stage class.                                                      |\n| `tagId`        | string  | empty         | When an ID is specified, drawing is performed within the element of the specified ID.                                               |\n| `bgColor`      | string  | \"transparent\" | You can specify a background color in hexadecimal. The default is colorless.                                                        |\n\n[简体中文]  \n\n| 名称           | 值类型     | 默认值           | 说明                                                |\n|--------------|---------|---------------|---------------------------------------------------|\n| `fullScreen` | boolean | false         | 整个屏幕的绘制超出了Stage类中设置的宽度和高度。                        |\n| `tagId`      | string  | empty         | 当一个ID被指定时，在指定ID的元素内进行绘图。                          |\n| `bgColor`    | string  | \"transparent\" | 你可以指定一个十六进制的背景颜色。默认为无色。                           |\n\n##  Flowchart\n\n```mermaid\nflowchart TB\n    %% Main Drawing Flow Chart\n    subgraph MainFlow[\"🎨 Drawing Flow Chart - Main Rendering Pipeline\"]\n        direction TB\n        \n        subgraph Inputs[\"Display Objects\"]\n            Shape[\"Shape\u003cbr/\u003e(Bitmap/Vector)\"]\n            TextField[\"TextField\u003cbr/\u003e(canvas2d)\"]\n            Video[\"Video Element\"]\n        end\n        \n        Shape --\u003e MaskCheck\n        TextField --\u003e MaskCheck\n        Video --\u003e MaskCheck\n        \n        MaskCheck{\"mask\u003cbr/\u003erendering?\"}\n        \n        MaskCheck --\u003e|YES| DirectRender[\"Direct Rendering\"]\n        DirectRender --\u003e|drawArrays| FinalRender\n        \n        MaskCheck --\u003e|NO| CacheCheck1{\"cache\u003cbr/\u003eexists?\"}\n        \n        CacheCheck1 --\u003e|NO| TextureAtlas[\"📦 Texture Atlas\u003cbr/\u003e(Binary Tree Packing)\"]\n        TextureAtlas --\u003e Coordinates\n        \n        CacheCheck1 --\u003e|YES| Coordinates[\"📍 Coordinates DB\u003cbr/\u003e(x, y, w, h)\"]\n        \n        Coordinates --\u003e FilterBlendCheck{\"filter or\u003cbr/\u003eblend?\"}\n        \n        FilterBlendCheck --\u003e|NO| MainArrays\n        FilterBlendCheck --\u003e|YES| NeedCache{\"cache\u003cbr/\u003eexists?\"}\n        \n        NeedCache --\u003e|NO| CacheRender[\"Render to Cache\"]\n        CacheRender --\u003e TextureCache\n        NeedCache --\u003e|YES| TextureCache[\"💾 Texture Cache\"]\n        \n        TextureCache --\u003e|drawArrays| FinalRender\n        \n        MainArrays[\"⚡ Instanced Arrays\u003cbr/\u003e━━━━━━━━━━━━━━━\u003cbr/\u003ematrix\u003cbr/\u003ecolorTransform\u003cbr/\u003eCoordinates\u003cbr/\u003e━━━━━━━━━━━━━━━\u003cbr/\u003e\u003cb\u003eBatch Rendering\u003c/b\u003e\"]\n        \n        MainArrays --\u003e|drawArraysInstanced\u003cbr/\u003e\u003cb\u003eMultiple objects in one call\u003c/b\u003e| FinalRender[\"🎬 Final Rendering\"]\n        \n        FinalRender --\u003e|60fps| MainFramebuffer[\"🖥️ Main Framebuffer\u003cbr/\u003e(Display)\"]\n    end\n    \n    %% Branch Flow for Filter/Blend/Mask\n    subgraph BranchFlow[\"🎭 Filter/Blend/Mask - Branch Processing\"]\n        direction TB\n        \n        subgraph FilterInputs[\"Display Objects\"]\n            Shape2[\"Shape\u003cbr/\u003e(Bitmap/Vector)\"]\n            TextField2[\"TextField\u003cbr/\u003e(canvas2d)\"]\n            Video2[\"Video Element\"]\n        end\n        \n        Shape2 --\u003e CacheCheck2\n        TextField2 --\u003e CacheCheck2\n        Video2 --\u003e CacheCheck2\n        \n        CacheCheck2{\"cache\u003cbr/\u003eexists?\"}\n        \n        CacheCheck2 --\u003e|NO| EffectRender[\"Effect Rendering\"]\n        CacheCheck2 --\u003e|YES| BranchArrays\n        EffectRender --\u003e BranchArrays\n        \n        BranchArrays[\"⚡ Instanced Arrays\u003cbr/\u003e━━━━━━━━━━━━━━━\u003cbr/\u003ematrix\u003cbr/\u003ecolorTransform\u003cbr/\u003eCoordinates\u003cbr/\u003e━━━━━━━━━━━━━━━\u003cbr/\u003e\u003cb\u003eBatch Rendering\u003c/b\u003e\"]\n        \n        BranchArrays --\u003e|drawArraysInstanced\u003cbr/\u003e\u003cb\u003eMultiple objects in one call\u003c/b\u003e| BranchRender[\"Effect Result\"]\n        \n        BranchRender --\u003e|filter/blend| TextureCache\n    end\n    \n    %% Connections between flows\n    FilterBlendCheck -.-\u003e|\"trigger\u003cbr/\u003ebranch flow\"| BranchFlow\n    BranchArrays -.-\u003e|\"rendering info\u003cbr/\u003e(coordinates)\"| MainArrays\n    \n    %% Styling\n    style MainFlow fill:#e3f2fd,stroke:#1976d2,stroke-width:3px\n    style BranchFlow fill:#fff3e0,stroke:#f57c00,stroke-width:3px\n    style Inputs fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px\n    style FilterInputs fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px\n    \n    style MainArrays fill:#c8e6c9,stroke:#388e3c,stroke-width:3px\n    style BranchArrays fill:#c8e6c9,stroke:#388e3c,stroke-width:3px\n    style FinalRender fill:#ffecb3,stroke:#f57f17,stroke-width:2px\n    style MainFramebuffer fill:#c5e1a5,stroke:#689f38,stroke-width:3px\n    style TextureCache fill:#e1bee7,stroke:#8e24aa,stroke-width:2px\n    style Coordinates fill:#b3e5fc,stroke:#0277bd,stroke-width:2px\n    style TextureAtlas fill:#fff9c4,stroke:#f9a825,stroke-width:2px\n```\n\n## License\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnext2d%2Fplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fplayer/lists"}