diff --git a/docs/faqs/01-engine.md b/docs/faqs/01-engine.md index 8f0b422..6131ff1 100644 --- a/docs/faqs/01-engine.md +++ b/docs/faqs/01-engine.md @@ -2,4 +2,198 @@ sidebar_position: 1 --- -# Engine +# Cocos Creator vs PixiJS + +We've been working with **Cocos Creator** for a long time and have recently started exploring **PixiJS**. After gaining experience with both frameworks, we strongly recommend continuing with **Cocos Creator** as our primary game engine, based on the following points. + +--- + +## Full-Featured Engine vs Rendering-Only Framework + +![Cocos](./img/cocos-icon.png) + +Cocos Creator offers a complete, feature-rich environment that significantly **reduces development overhead** and **accelerates production timelines**. + +It comes with a **visual editor**, **built-in animation tools**, **component-based architecture**, and **robust cross-platform support**, making it ideal for both web and native deployment. + +![Pixi](./img/pixi-logo.png) + +PixiJS, on the other hand, is a lightweight, high-performance **rendering engine**. While it's excellent for raw rendering, it lacks out-of-the-box support for essential features like UI systems, animation tools, and scene management. These must be built or integrated separately, adding **unnecessary overhead**, **longer development time**, and **reduced team efficiency**. + +--- + +## Cocos Creator Meets All the Goals PixiJS Aims to Solve + +PixiJS is often considered for the following reasons: + +- Creating a multi-layer framework for base games, slot games, and other genres. +- Adopting newer technologies like WebGPU and asset compression. +- Gaining full control over the game framework. +- Offering an easy-to-use, lightweight, and high-performance environment for the web. + +**Cocos Creator already addresses all of these goals:** + +- We’ve successfully used Cocos for multiple game genres (2D & 3D), including hundreds of slot games with diverse UIs and features. +- Cocos provides **built-in asset compression** and broad format support: + - **Audio**: `.wav`, `.mp3`, `.ogg` + - **Textures**: `.jpg`, `.png`, `.webp`, `.pkm`, `.pvrtc` +- **WebGPU support** has been available since version 3.6.2 (released ~2.5 years ago). Enabling it requires just a toggle in the build settings. +- While full control over the engine isn't usually necessary, Cocos Creator is **open-source**. We've already leveraged this by customizing the engine to power our slot games. +- Its Unity-inspired design makes it **extremely intuitive**, especially compared to lower-level frameworks like PixiJS. + +Even though PixiJS may have an edge in raw performance, we've **never hit performance limits** in Cocos Creator that would require switching to PixiJS. + +--- + +## Publishers Are Choosing Cocos Creator Over PixiJS + +Across the industry, publishers use a wide variety of engines: Cocos Creator, PixiJS, Phaser, Cocos2dJS, and various custom JavaScript/HTML5 frameworks. + +Among these, **Cocos Creator stands out as the dominant choice**. + +### Top 10 Publishers on Juad – Engine Usage: + +| Publisher | Engine | Version(s) | +|------------------|----------------------------|------------------------------------| +| ![Joker](./img/joker.png) | Cocos Creator | 2.4.4 / 2.4.10 / 3.8.2 | +| ![Pragmatic](./img/pragmatic.png) | PixiJS | 3.0.2 | +| ![PgSoft](./img/pgsoft.png) | Cocos Creator | Custom | +| ![Hot Dog](./img/hot-dog.png) | Cocos Creator | 2.4.9 | +| ![Ambslot](./img/ambslot.png) | Cocos Creator | 2.4.9 | +| ![NextSpin](./img/nextspin.png) | Cocos Creator / PixiJS | 2.4.5 / 6.3.2 | +| ![GiocoPlus](./img/giocoplus.png) | Cocos Creator | 2.4.5 | +| ![Fa Chai](./img/fa-chai.png) | Cocos Creator | 2.4.12 | +| ![Goldy](./img/goldy.png) | Cocos2dJS | 3.17 | +| ![FunkyGame](./img/funky-game.png)| Cocos Creator / React-PixiJS| 3.8.2 / 16.13.1-7.1.1 | +| ![Rich88](./img/rich88.png) | Cocos Creator | 2.0.9 | + +:::info +- Latest PixiJS version: **8.8** +- Pragmatic is still using **PixiJS 3.0.2**, released over **10 years ago** +- Latest Cocos Creator versions: **2.4.15** and **3.8.6** +::: + +--- + +## We're Deep Into Cocos Creator + +Our current projects rely heavily on Cocos Creator. Our **core logic**, **templates**, **documentation**, and **workflow** are all designed around it. + +Switching to PixiJS would require: +- Building an entirely new framework. +- Retraining our developers. +- Creating new tools and processes. +- Managing a split tech stack between Cocos and PixiJS teams. + +The cost and complexity of such a transition far outweigh the potential benefits. + +--- + +## Technical Struggles With PixiJS + +While evaluating PixiJS (v8.8), we encountered several **critical limitations and technical issues**: + +### ❌ Unsupported Particle Plugin +- The most popular particle emitter plugin became incompatible with Pixi v8. +- The original maintainer abandoned the project. +- It was only revived later by a community fork, which may still have bugs. + +πŸ”— [Issue #211 – pixijs-userland/particle-emitter](https://github.com/pixijs-userland/particle-emitter/issues/211) + +--- + +### ❌ Container Auto-Size Issues +- `Container` components automatically resize based on their children. +- This behavior makes it difficult to implement fixed-size layouts. +- Layout solutions are fragmented across multiple plugins. + +πŸ”— [Issue #7 – pixijs/layout](https://github.com/pixijs/layout/issues/7) + +--- + +### ❌ No RichText Support +- No built-in rich text support. +- `HTMLText` doesn't support the `` tag or texture atlas integration. +- We can't render UI like this without heavy customization: + +![Rich Text](./img/rich-text.png) + +--- + +### ❌ No Built-In Text Shrinking +- Overflow mode for text shrinking is not supported. +- Current vs expected output: + +| Current | Expected | +|----------------------------------------|----------------------------------------| +| ![Text Output](./img/text-shrink-output.png) | ![Text Expected](./img/text-shrink-expect.png) | + +--- + +### ❌ Missing ScrollBar in ScrollBox +- The `ScrollBox` component lacks built-in scrollbar rendering. +- We had to manually modify its source to add this feature. + +![Scrollbar](./img/scrollbar.png) + +--- + +### ❌ Asset Cache Key Conflict +- Pixi uses asset names (not unique IDs) as cache keys. +- Duplicate names (e.g. `btn-start.png`) cause conflicts and unexpected behavior during asset loading. + +--- + +## Wasted Effort on Contributing to PixiJS + +Each technical issue required deep debugging, community searching, and sometimes direct contributions to the PixiJS GitHub repository. + +While we’re happy to contribute, this **slowed down our internal development** and shifted effort away from our product. + +### Some of Our Contributions: + +- **Invisible Graphics Not Updating** + - Severity: CRITICAL + - Status: NOT FIXED + - πŸ”— [Issue #11294](https://github.com/pixijs/pixijs/issues/11294) + - Contributor: *Phu Lai* + + ![11294](./img/bug-report-1.png) + +--- + +- **Font Family Cache Bug** + - Severity: MINOR + - Status: FIXED in v8.6.5 + - πŸ”— [Pull Request #11151](https://github.com/pixijs/pixijs/pull/11151) + - Contributor: *Trung Le* + + ![11151](./img/bug-report-2.png) + +--- + +- **AssetPack Power of Two Issue** + - Severity: MINOR + - Status: FIXED in `assetpack` v1.3.0 + - πŸ”— [Pull Request #105](https://github.com/pixijs/assetpack/pull/105) + - Contributor: *Trung Le* + + ![105](./img/bug-report-3.png) + +--- + +## The Oppinions of our PixiJS Game Developers + +While the development team is genuinely excited about exploring a new framework, even they do not recommend building or using the framework based on PixiJS. + +Although we've successfully developed a full slot game for web desktop, the remaining work required to make the framework production-ready is substantial. + +Furthermore, even once the framework is complete, the process of using it to build actual games is significantly more complex compared to the streamlined workflow we already have with Cocos Creator. + +## βœ… Final Recommendation + +Cocos Creator is **proven**, **feature-complete**, and **deeply integrated** into our current pipeline. + +PixiJS, while powerful as a renderer, lacks critical features and requires substantial additional development. We've also encountered technical roadblocks that reduce productivity and increase maintenance burden. + +For these reasons, **we strongly recommend continuing with Cocos Creator** as our main game engine for both current and future slot game development. \ No newline at end of file diff --git a/docs/faqs/_category_.json b/docs/faqs/_category_.json new file mode 100644 index 0000000..efdc479 --- /dev/null +++ b/docs/faqs/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Engine", + "collapsible": true, + "collapsed": false, + "link": { + "title": "Engine" + } +} \ No newline at end of file diff --git a/docs/faqs/img/ambslot.png b/docs/faqs/img/ambslot.png new file mode 100644 index 0000000..f6de1d7 Binary files /dev/null and b/docs/faqs/img/ambslot.png differ diff --git a/docs/faqs/img/bug-report-1.png b/docs/faqs/img/bug-report-1.png new file mode 100644 index 0000000..c003f24 Binary files /dev/null and b/docs/faqs/img/bug-report-1.png differ diff --git a/docs/faqs/img/bug-report-2.png b/docs/faqs/img/bug-report-2.png new file mode 100644 index 0000000..275e616 Binary files /dev/null and b/docs/faqs/img/bug-report-2.png differ diff --git a/docs/faqs/img/bug-report-3.png b/docs/faqs/img/bug-report-3.png new file mode 100644 index 0000000..4d87768 Binary files /dev/null and b/docs/faqs/img/bug-report-3.png differ diff --git a/docs/faqs/img/cocos-icon.png b/docs/faqs/img/cocos-icon.png new file mode 100644 index 0000000..a4a23c4 Binary files /dev/null and b/docs/faqs/img/cocos-icon.png differ diff --git a/docs/faqs/img/fa-chai.png b/docs/faqs/img/fa-chai.png new file mode 100644 index 0000000..8071624 Binary files /dev/null and b/docs/faqs/img/fa-chai.png differ diff --git a/docs/faqs/img/funky-game.png b/docs/faqs/img/funky-game.png new file mode 100644 index 0000000..713ec58 Binary files /dev/null and b/docs/faqs/img/funky-game.png differ diff --git a/docs/faqs/img/giocoplus.png b/docs/faqs/img/giocoplus.png new file mode 100644 index 0000000..97a7c8d Binary files /dev/null and b/docs/faqs/img/giocoplus.png differ diff --git a/docs/faqs/img/goldy.png b/docs/faqs/img/goldy.png new file mode 100644 index 0000000..d4ab2a3 Binary files /dev/null and b/docs/faqs/img/goldy.png differ diff --git a/docs/faqs/img/hot-dog.png b/docs/faqs/img/hot-dog.png new file mode 100644 index 0000000..903c1a2 Binary files /dev/null and b/docs/faqs/img/hot-dog.png differ diff --git a/docs/faqs/img/joker.png b/docs/faqs/img/joker.png new file mode 100644 index 0000000..448b87e Binary files /dev/null and b/docs/faqs/img/joker.png differ diff --git a/docs/faqs/img/nextspin.png b/docs/faqs/img/nextspin.png new file mode 100644 index 0000000..ac535d9 Binary files /dev/null and b/docs/faqs/img/nextspin.png differ diff --git a/docs/faqs/img/pgsoft.png b/docs/faqs/img/pgsoft.png new file mode 100644 index 0000000..1aa2c34 Binary files /dev/null and b/docs/faqs/img/pgsoft.png differ diff --git a/docs/faqs/img/pixi-logo.png b/docs/faqs/img/pixi-logo.png new file mode 100644 index 0000000..1877010 Binary files /dev/null and b/docs/faqs/img/pixi-logo.png differ diff --git a/docs/faqs/img/pixi-logo.svg b/docs/faqs/img/pixi-logo.svg new file mode 100644 index 0000000..81b6418 --- /dev/null +++ b/docs/faqs/img/pixi-logo.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/faqs/img/pragmatic.png b/docs/faqs/img/pragmatic.png new file mode 100644 index 0000000..e954aab Binary files /dev/null and b/docs/faqs/img/pragmatic.png differ diff --git a/docs/faqs/img/rich-text.png b/docs/faqs/img/rich-text.png new file mode 100644 index 0000000..1dcedfa Binary files /dev/null and b/docs/faqs/img/rich-text.png differ diff --git a/docs/faqs/img/rich88.png b/docs/faqs/img/rich88.png new file mode 100644 index 0000000..bfddcba Binary files /dev/null and b/docs/faqs/img/rich88.png differ diff --git a/docs/faqs/img/scrollbar.png b/docs/faqs/img/scrollbar.png new file mode 100644 index 0000000..4ed683a Binary files /dev/null and b/docs/faqs/img/scrollbar.png differ diff --git a/docs/faqs/img/text-shrink-expect.png b/docs/faqs/img/text-shrink-expect.png new file mode 100644 index 0000000..77bc40e Binary files /dev/null and b/docs/faqs/img/text-shrink-expect.png differ diff --git a/docs/faqs/img/text-shrink-output.png b/docs/faqs/img/text-shrink-output.png new file mode 100644 index 0000000..9f31cd9 Binary files /dev/null and b/docs/faqs/img/text-shrink-output.png differ