diff --git a/README.md b/README.md index 0c6c2c2..6dcf3f3 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,13 @@ This website is built using [Docusaurus](https://docusaurus.io/), a modern stati ### Installation ``` -$ yarn +$ npm install ``` ### 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. @@ -19,23 +19,7 @@ This command starts a local development server and opens up a browser window. Mo ### Build ``` -$ yarn build +$ npm build ``` -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= 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. +This command generates static content into the `build` directory and can be served using any static contents hosting service. \ No newline at end of file diff --git a/docs/02-setup-main-game/01-game-config.md b/docs/02-setup-main-game/01-game-config.md index 293f1f0..bcf82e5 100644 --- a/docs/02-setup-main-game/01-game-config.md +++ b/docs/02-setup-main-game/01-game-config.md @@ -4,6 +4,10 @@ sidebar_position: 1 # 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. Let’s go step-by-step to define these elements. diff --git a/docs/02-setup-main-game/02-preview-scene.md b/docs/02-setup-main-game/02-preview-scene.md index 236e7a3..6472e7c 100644 --- a/docs/02-setup-main-game/02-preview-scene.md +++ b/docs/02-setup-main-game/02-preview-scene.md @@ -4,6 +4,10 @@ sidebar_position: 2 # 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. This scene includes a `login-hyper-gaming` object used to establish a connection with a running environment of your choice. diff --git a/docs/02-setup-main-game/03-preload-scene.md b/docs/02-setup-main-game/03-preload-scene.md index e66aabe..06d5c72 100644 --- a/docs/02-setup-main-game/03-preload-scene.md +++ b/docs/02-setup-main-game/03-preload-scene.md @@ -4,6 +4,10 @@ sidebar_position: 3 # 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. Setting up the preload system involves several steps, depending on the types of assets and specific download requirements. diff --git a/docs/02-setup-main-game/04-loading-scene.md b/docs/02-setup-main-game/04-loading-scene.md index 73e243e..b1427b5 100644 --- a/docs/02-setup-main-game/04-loading-scene.md +++ b/docs/02-setup-main-game/04-loading-scene.md @@ -4,6 +4,10 @@ sidebar_position: 4 # 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. In addition to loading assets, Hyper Slot Game also uses this scene to showcase the game’s main features through in-game advertisements. diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index fd536d8..5eeb93a 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -6,6 +6,8 @@ sidebar_position: 5 This is where all the magic happen. +--- + Main scene is the most complicated scene with hundreds of object, script and config. ![Main Scene Wireframe](./img/main-scene-wireframe.png) diff --git a/docs/faqs/01-engine.md b/docs/faqs/01-engine.md index 6131ff1..201e8f2 100644 --- a/docs/faqs/01-engine.md +++ b/docs/faqs/01-engine.md @@ -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**. ---- - ## Cocos Creator Meets All the Goals PixiJS Aims to Solve 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. +## 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 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: | 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 | @@ -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 | | ![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** -::: - ---- +> 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 @@ -87,8 +105,6 @@ Switching to PixiJS would require: 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**: @@ -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) ---- - ### ❌ Container Auto-Size Issues - `Container` components automatically resize based on their children. - 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) ---- - ### ❌ No RichText Support - No built-in rich text support. - `HTMLText` doesn't support the `` 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) ---- - ### ❌ 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. @@ -160,8 +164,6 @@ While we’re happy to contribute, this **slowed down our internal development** ![11294](./img/bug-report-1.png) ---- - - **Font Family Cache Bug** - Severity: MINOR - Status: FIXED in v8.6.5 @@ -170,8 +172,6 @@ While we’re happy to contribute, this **slowed down our internal development** ![11151](./img/bug-report-2.png) ---- - - **AssetPack Power of Two Issue** - Severity: MINOR - Status: FIXED in `assetpack` v1.3.0 @@ -180,8 +180,6 @@ While we’re happy to contribute, this **slowed down our internal development** ![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. diff --git a/docs/faqs/_category_.json b/docs/faqs/_category_.json index efdc479..f77ae69 100644 --- a/docs/faqs/_category_.json +++ b/docs/faqs/_category_.json @@ -1,8 +1,8 @@ { - "label": "Engine", + "label": "Engine Option", "collapsible": true, "collapsed": false, "link": { - "title": "Engine" + "title": "Engine Option" } } \ No newline at end of file diff --git a/docs/faqs/img/cocos-layout-2.png b/docs/faqs/img/cocos-layout-2.png new file mode 100644 index 0000000..1af5411 Binary files /dev/null and b/docs/faqs/img/cocos-layout-2.png differ diff --git a/docs/faqs/img/cocos-layout.png b/docs/faqs/img/cocos-layout.png new file mode 100644 index 0000000..61fcf2d Binary files /dev/null and b/docs/faqs/img/cocos-layout.png differ diff --git a/docs/faqs/img/cocos-pick-color-2.png b/docs/faqs/img/cocos-pick-color-2.png new file mode 100644 index 0000000..bf7981e Binary files /dev/null and b/docs/faqs/img/cocos-pick-color-2.png differ diff --git a/docs/faqs/img/cocos-pick-color.png b/docs/faqs/img/cocos-pick-color.png new file mode 100644 index 0000000..d0ca0fe Binary files /dev/null and b/docs/faqs/img/cocos-pick-color.png differ diff --git a/docs/faqs/img/editor-pattern.png b/docs/faqs/img/editor-pattern.png new file mode 100644 index 0000000..d93333e Binary files /dev/null and b/docs/faqs/img/editor-pattern.png differ diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 87e4bfc..f6cdec3 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -66,15 +66,15 @@ const config: Config = { label: 'Tutorial', }, { - href: 'https://github.com/facebook/docusaurus', - label: 'GitHub', + href: 'https://gitea.plp19.com/dev-public/doc-slot-core-manual', + label: 'Gitea', position: 'right', }, ], }, footer: { style: 'dark', - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} Mercury, Inc.`, }, prism: { theme: prismThemes.github,