pixi-ts-soft-game

PIXI-TS

Version 1.0

• Public demo
• API Docs

Objective

• Test PIXI power.

Project structure

pixi-ts-architecture/
│
├── src/
│   ├── main.ts                 [Main app instance]
│   ├── index.ts                [For docs gen also for npm publish]
│   ├── core/
│   │   ├── position.ts         [self updated - not full solution yet]
│   │   ├── scene.ts
│   │   └── sceneManager.ts
│   │
│   ├── types/
│   │   ├── appDefinitions.ts
│   │   └── globalDefinitions.ts
│   │
│   ├── scenes/
│   │   └── menuScene.ts
│   │   └── aceOfShadowsScene.ts
│   │   └── magicWords.ts
│   │   └── phoenixFlame.ts
│   │
│   ├── components/
│   │   └── card-stack.ts       [holder for cards]
│   │   └── card.ts             [card entity]
│   │   └── dialogBox.ts        [standalone popup with dragging&scroll]
│   │   └── phonenixFlame.ts    [Used in menuScene]
│   │
│   ├── utils/
│   │   └── utils.ts            [Small helpers funcs]
│   │
│   ├── shaders/ 
│   │   └── base.ts             [webGL/webGPU context]
│   │
│   ├── services/ 
│   │   └── helpers-methods.ts  [Common operations]
│   │
│   └── resources/
│       └── literals.ts         [Simple object/consts store place]
│       └── shaders.ts          [For webGL or webGPU context/job]
│       └── textures.ts         [Simple textures operation]
│
├── typedoc.json                [Api docs generator]
├── index.html                  [Main index.HTML]
├── tsconfig.json               [Ts config]
├── vite.config.ts              [Compiler stuff]
└── package.json                [Defines project metadata, dependencies...]

Install deps:

npm i
Copy

Run dev:

npm run dev
Copy

Quick sanity check and generate API docs Run:

npx typedoc --logLevel Verbose
Copy

About object/movement policy

• In aceOfShadowsScene Scene gsap lib is't used. I create class Position (Similar functionality with gsap) I dont lock orientation on mobile devices. Change orientation handled.
• In MagicWords i use gsap. DialogPopup is draggable also on mobile devices.
• In PhoenixFlame scene i use onResize and make Phoenix always fit in middle of screen.

"Diametric positions" method is not fully implemented. Need more time for :

• Self update on resize, change orientation.
• Hide complex calculation from top level classes and make it super simple & reusable.

Important notes about v8

In Pixi v8:

• Application is async
• app.view is gone
• Canvas is created only after init()

More links for learning:

• https://pixijs.download/dev/docs/rendering.WebGPURenderer.html