add-cocos-collabs-feature

This commit is contained in:
luyen.vo 2025-04-25 13:47:06 +07:00
parent 1cc1061664
commit 072a8e8a16
14 changed files with 56 additions and 56 deletions

View File

@ -5,13 +5,13 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati
### Installation ### Installation
``` ```
$ yarn $ npm install
``` ```
### Local Development ### Local Development
``` ```
$ yarn start $ npm start
``` ```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
@ -19,23 +19,7 @@ This command starts a local development server and opens up a browser window. Mo
### Build ### Build
``` ```
$ yarn build $ npm build
``` ```
This command generates static content into the `build` directory and can be served using any static contents hosting service. This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment
Using SSH:
```
$ USE_SSH=true yarn deploy
```
Not using SSH:
```
$ GIT_USER=<Your GitHub username> yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

View File

@ -4,6 +4,10 @@ sidebar_position: 1
# Game Configuration # Game Configuration
The initial configuration requirements from the Slot Core.
---
While the core logic is responsible for calculations and maintaining the game state, it's the client's responsibility to define all game-specific information. While the core logic is responsible for calculations and maintaining the game state, it's the client's responsibility to define all game-specific information.
Lets go step-by-step to define these elements. Lets go step-by-step to define these elements.

View File

@ -4,6 +4,10 @@ sidebar_position: 2
# Preview Scene # Preview Scene
Local login configuration.
---
The login simulator scene allows you to run the game using a session account during development, enabling easier testing and debugging. The login simulator scene allows you to run the game using a session account during development, enabling easier testing and debugging.
This scene includes a `login-hyper-gaming` object used to establish a connection with a running environment of your choice. This scene includes a `login-hyper-gaming` object used to establish a connection with a running environment of your choice.

View File

@ -4,6 +4,10 @@ sidebar_position: 3
# Preload Scene # Preload Scene
Setup configuration for asset loading.
---
The Preload Scene is where you define which assets will be downloaded **before** and **after** the game starts. The Preload Scene is where you define which assets will be downloaded **before** and **after** the game starts.
Setting up the preload system involves several steps, depending on the types of assets and specific download requirements. Setting up the preload system involves several steps, depending on the types of assets and specific download requirements.

View File

@ -4,6 +4,10 @@ sidebar_position: 4
# Loading Scene # Loading Scene
Generate asset loading scene layout.
---
This is where the actual preload asset downloading begins, accompanied by a progress bar to indicate loading status. This is where the actual preload asset downloading begins, accompanied by a progress bar to indicate loading status.
In addition to loading assets, Hyper Slot Game also uses this scene to showcase the games main features through in-game advertisements. In addition to loading assets, Hyper Slot Game also uses this scene to showcase the games main features through in-game advertisements.

View File

@ -6,6 +6,8 @@ sidebar_position: 5
This is where all the magic happen. This is where all the magic happen.
---
Main scene is the most complicated scene with hundreds of object, script and config. Main scene is the most complicated scene with hundreds of object, script and config.
![Main Scene Wireframe](./img/main-scene-wireframe.png) ![Main Scene Wireframe](./img/main-scene-wireframe.png)

View File

@ -20,8 +20,6 @@ It comes with a **visual editor**, **built-in animation tools**, **component-bas
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**. 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 ## Cocos Creator Meets All the Goals PixiJS Aims to Solve
PixiJS is often considered for the following reasons: PixiJS is often considered for the following reasons:
@ -43,8 +41,31 @@ PixiJS is often considered for the following reasons:
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. 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.
## Cocos Creator Empowers Cross-Department Collaboration
Unlike PixiJS, which is primarily geared toward developers, Cocos Creator is a full-fledged game engine designed to support collaboration across the entire game development team — including developers, designers, and artists.
The visual editor is a powerful tool that enables non-programmers to contribute meaningfully throughout the development process. Instead of working separately on isolated parts, teams can work together directly within the same environment.
--- ---
🎮 Game Designers (GD) Can:
- Build wireframes and prototypes to define early gameplay concepts.
- Design and position UI layouts without writing code.
- Configure enemy formations and movement patterns (e.g., for fish or shooting games).
- Set up animations using the timeline editor.
- Create and adjust level design elements for casual or social games.
![GD](./img/editor-pattern.png) ![GD2](./img/cocos-layout-2.png)
🎨 Artists Can:
- Import and organize assets directly into the editor.
- Use built-in color picking tools for visual adjustments.
- Preview and tweak animations (Spine, frame-by-frame, or custom).
- Design multi-resolution UI that works across various screen sizes and devices.
![Art](./img/cocos-pick-color.png) ![Art2](./img/cocos-pick-color-2.png)
## Publishers Are Choosing Cocos Creator Over 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. Across the industry, publishers use a wide variety of engines: Cocos Creator, PixiJS, Phaser, Cocos2dJS, and various custom JavaScript/HTML5 frameworks.
@ -54,7 +75,7 @@ Among these, **Cocos Creator stands out as the dominant choice**.
### Top 10 Publishers on Juad Engine Usage: ### Top 10 Publishers on Juad Engine Usage:
| Publisher | Engine | Version(s) | | Publisher | Engine | Version(s) |
|------------------|----------------------------|------------------------------------| |-|-|-|
| ![Joker](./img/joker.png) | Cocos Creator | 2.4.4 / 2.4.10 / 3.8.2 | | ![Joker](./img/joker.png) | Cocos Creator | 2.4.4 / 2.4.10 / 3.8.2 |
| ![Pragmatic](./img/pragmatic.png) | PixiJS | 3.0.2 | | ![Pragmatic](./img/pragmatic.png) | PixiJS | 3.0.2 |
| ![PgSoft](./img/pgsoft.png) | Cocos Creator | Custom | | ![PgSoft](./img/pgsoft.png) | Cocos Creator | Custom |
@ -67,13 +88,10 @@ Among these, **Cocos Creator stands out as the dominant choice**.
| ![FunkyGame](./img/funky-game.png)| Cocos Creator / React-PixiJS| 3.8.2 / 16.13.1-7.1.1 | | ![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 | | ![Rich88](./img/rich88.png) | Cocos Creator | 2.0.9 |
:::info > Info:
- Latest PixiJS version: **8.8** > - Latest PixiJS version: **8.8**
- Pragmatic is still using **PixiJS 3.0.2**, released over **10 years ago** > - Pragmatic is still using **PixiJS 3.0.2**, released over **10 years ago**
- Latest Cocos Creator versions: **2.4.15** and **3.8.6** > - Latest Cocos Creator versions: **2.4.15** and **3.8.6**
:::
---
## We're Deep Into Cocos Creator ## We're Deep Into Cocos Creator
@ -87,8 +105,6 @@ Switching to PixiJS would require:
The cost and complexity of such a transition far outweigh the potential benefits. The cost and complexity of such a transition far outweigh the potential benefits.
---
## Technical Struggles With PixiJS ## Technical Struggles With PixiJS
While evaluating PixiJS (v8.8), we encountered several **critical limitations and technical issues**: While evaluating PixiJS (v8.8), we encountered several **critical limitations and technical issues**:
@ -100,8 +116,6 @@ While evaluating PixiJS (v8.8), we encountered several **critical limitations an
🔗 [Issue #211 pixijs-userland/particle-emitter](https://github.com/pixijs-userland/particle-emitter/issues/211) 🔗 [Issue #211 pixijs-userland/particle-emitter](https://github.com/pixijs-userland/particle-emitter/issues/211)
---
### ❌ Container Auto-Size Issues ### ❌ Container Auto-Size Issues
- `Container` components automatically resize based on their children. - `Container` components automatically resize based on their children.
- This behavior makes it difficult to implement fixed-size layouts. - This behavior makes it difficult to implement fixed-size layouts.
@ -109,8 +123,6 @@ While evaluating PixiJS (v8.8), we encountered several **critical limitations an
🔗 [Issue #7 pixijs/layout](https://github.com/pixijs/layout/issues/7) 🔗 [Issue #7 pixijs/layout](https://github.com/pixijs/layout/issues/7)
---
### ❌ No RichText Support ### ❌ No RichText Support
- No built-in rich text support. - No built-in rich text support.
- `HTMLText` doesn't support the `<img>` tag or texture atlas integration. - `HTMLText` doesn't support the `<img>` tag or texture atlas integration.
@ -118,32 +130,24 @@ While evaluating PixiJS (v8.8), we encountered several **critical limitations an
![Rich Text](./img/rich-text.png) ![Rich Text](./img/rich-text.png)
---
### ❌ No Built-In Text Shrinking ### ❌ No Built-In Text Shrinking
- Overflow mode for text shrinking is not supported. - Overflow mode for text shrinking is not supported.
- Current vs expected output: - Current vs expected output:
| Current | Expected | | Current | Expected |
|----------------------------------------|----------------------------------------| |-|-|
| ![Text Output](./img/text-shrink-output.png) | ![Text Expected](./img/text-shrink-expect.png) | | ![Text Output](./img/text-shrink-output.png) | ![Text Expected](./img/text-shrink-expect.png) |
---
### ❌ Missing ScrollBar in ScrollBox ### ❌ Missing ScrollBar in ScrollBox
- The `ScrollBox` component lacks built-in scrollbar rendering. - The `ScrollBox` component lacks built-in scrollbar rendering.
- We had to manually modify its source to add this feature. - We had to manually modify its source to add this feature.
![Scrollbar](./img/scrollbar.png) ![Scrollbar](./img/scrollbar.png)
---
### ❌ Asset Cache Key Conflict ### ❌ Asset Cache Key Conflict
- Pixi uses asset names (not unique IDs) as cache keys. - 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. - Duplicate names (e.g. `btn-start.png`) cause conflicts and unexpected behavior during asset loading.
---
## Wasted Effort on Contributing to PixiJS ## Wasted Effort on Contributing to PixiJS
Each technical issue required deep debugging, community searching, and sometimes direct contributions to the PixiJS GitHub repository. Each technical issue required deep debugging, community searching, and sometimes direct contributions to the PixiJS GitHub repository.
@ -160,8 +164,6 @@ While were happy to contribute, this **slowed down our internal development**
![11294](./img/bug-report-1.png) ![11294](./img/bug-report-1.png)
---
- **Font Family Cache Bug** - **Font Family Cache Bug**
- Severity: MINOR - Severity: MINOR
- Status: FIXED in v8.6.5 - Status: FIXED in v8.6.5
@ -170,8 +172,6 @@ While were happy to contribute, this **slowed down our internal development**
![11151](./img/bug-report-2.png) ![11151](./img/bug-report-2.png)
---
- **AssetPack Power of Two Issue** - **AssetPack Power of Two Issue**
- Severity: MINOR - Severity: MINOR
- Status: FIXED in `assetpack` v1.3.0 - Status: FIXED in `assetpack` v1.3.0
@ -180,8 +180,6 @@ While were happy to contribute, this **slowed down our internal development**
![105](./img/bug-report-3.png) ![105](./img/bug-report-3.png)
---
## The Oppinions of our PixiJS Game Developers ## 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. 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.

View File

@ -1,8 +1,8 @@
{ {
"label": "Engine", "label": "Engine Option",
"collapsible": true, "collapsible": true,
"collapsed": false, "collapsed": false,
"link": { "link": {
"title": "Engine" "title": "Engine Option"
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -66,15 +66,15 @@ const config: Config = {
label: 'Tutorial', label: 'Tutorial',
}, },
{ {
href: 'https://github.com/facebook/docusaurus', href: 'https://gitea.plp19.com/dev-public/doc-slot-core-manual',
label: 'GitHub', label: 'Gitea',
position: 'right', position: 'right',
}, },
], ],
}, },
footer: { footer: {
style: 'dark', style: 'dark',
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, copyright: `Copyright © ${new Date().getFullYear()} Mercury, Inc.`,
}, },
prism: { prism: {
theme: prismThemes.github, theme: prismThemes.github,