ब्राउज़र में 3 डी आर्केड: हमने रिएक्ट + रेडक्स पर गेम कैसे बनाया

नमस्कार, हेब्र! उन दूर के वर्षों में नहीं, "प्रोग्रामर" संकाय के पहले वर्ष में, मैंने साथी छात्रों से सवाल पूछना पसंद किया: "आप यहां अध्ययन करने के लिए भी क्यों गए?" बेशक, मैंने उत्तरों के सटीक आंकड़े नहीं रखे थे, लेकिन मुझे कुछ याद है: आधे से ज्यादा गेम बनाना चाहते थे। इस तरह से उत्तर देने वालों में से अधिकांश विभिन्न प्रकार के "गणितज्ञों" और "भौतिकशास्त्री" की प्रचुरता के लिए तैयार नहीं थे, जिनके साथ हम अध्ययन के पहले दो वर्षों में अभिभूत थे। सभी बचे नहीं - पांच भीड़भाड़ वाले समूहों के दूसरे वर्ष के अंत तक तीन अधूरे थे।

बहुत समय पहले नहीं, हमारी फ्रंट-एंड टीम को gamedev की भूमिका में खुद को आजमाने का अवसर दिया गया था। बहुत संक्षेप में, कार्य यह है: एक असली 3 डी गेम बनाने के लिए, ताकि आप केवल ब्राउज़र खोलकर खेल सकें। यहां तक ​​कि मोबाइल भी। यहां तक ​​कि वेबव्यू में भी।

, , , — React + Redux, « », , , .

RnD , : « CodeFest — . — ». , , , . Gods in the sky.

CodeFest .

MMO TPS , , . , , , . CodeFest. , .

2 , , 2 . , , .

: -, — , . , N , — 1 . , — 15 . , , 16-. , , :

1. 30 . CodeFest, — , «». , .
2. «» . , :
   
   • 90 CPU;
   • 120 ;
   • 270 /c — , 675 /c — .
3. 4,2 /c. , . — UDP WebRTC, . .
4. . 2 , , , . , - Node.js , .

, , ( ?), , , , . .

, . , «». — .

:

, , , . , , 5 , , 40 .

-. , , — . React Redux. c 3D-, , Gods in the sky, three.js.

, .

:

, Node.js. :

• , - ( , IE11);
• access-;
• html- .

SSR . kubernetes , . , . , , , , ( ). . Nginx.

. TS, AppState, :

interface AppState {
    gameState: GameState;
    gameObjects: GameObjects;
    data: Data;
    requests: RequestsState;
}

requests — , — . , — . .

data — , , , , «». .

GameState :

1. stage: 'factoids' | 'citySelect' | 'flyShow' | 'game' | 'results'; — . :

   
   
   • ;
   • ;
   • ;
   • ;
   • .
   
   

2. elapsedTime: number; — , , .

   
   

, factoids flyShow, , — elapsedTime. 0, . , . , , , . , . … - , .

, , :

interface GameObjects {
    user: UserInGame;
    gifts: { [id: string]: GiftInGame; };
    boosts: { [id: string]: Boost; };
    bombs: { [id: string]: Bomb; };
}

, : , , . — .

GameObjects — . , FPS . GPU 100 . Redmi Note 7 40 FPS ( ). MI 5S 30 FPS, 20 , .

, . .

- Redux, — . Redux , . ? Redux, .

, . , . «» ( . behavior — ). , .

. — tick, . , . tick . :

• , , , . , , , .
• ( Redux-), .
  , «» .
• , gameObjects, . , «», .

25 ( ).

. ( ), React, . - , «- » ( , , ).

. pixabay.com

, FPS- 13. , , - MI 5S, FPS- — 5-6, . .

: performance — , . , , .

FPS=30 , :

• Redux FPS * ~[ ] ~= 750 , , .
• React’ FPS * ~2 * ~[ ] .
• three.js , , WebGL . , .
• (.. 150 ) 4-6 , .. .
• CSS- .
• , FPS 2-4 ( , «» ).
• React.memo, - , .

React :

• * ~2 , connect. connect — - HOC, , .
• , React – (render pass), CPU, GPU.

: React.memo , , «», , DOM-, .

, React + Redux, .

Redux

Redux — . ~1 , . ~1, - — . -, , GameObjects , :

export function setNextGameObjects(payload: GameObjects) {
    return {
        type: 'SET_NEXT_GAME_OBJECTS' as const,
        payload,
    };
}

GameObjects :

1. , . SET_NEXT_GAME_OBJECTS.
2. , , GameObjects. Redux , - . SET_NEXT_GAME_OBJECTS.

:

let state = store.getState().gameObjects;
for (const action of this.collectedActions) {
    state = gameObjectsFakeStateReducer(state, action);
}
store.dispatch(setNextGameObjects(state));

collectedActions — , . — , .

— ~25 10 : ~2 . , gameObjectsFakeStateReducer . 25 . , .

? , perf-. 3 :

1. ES2018, ~50 < ES2018 (, Firefox — ). , spread.
2. Object.assign 300 .
3. 500 , « » .

, , , — ES2018, . Firefox.

№3 , … . .

Object.assign. gameObjectsFakeStateReducer gameObjectsFastStateReducer, - :

switch (action.type) {
    case 'PARTIAL_GIFT_STATE_PATCH':
        if (!state.gifts[action.payload.id]) {
            return state;
        }
        Object.assign(state.gifts[action.payload.id], action.payload);
        break;
    // case, default ...
}

? , . , . 25 1 2-4 ( CPU). :

«» , , Redux 10 . , - , , connect gameObjects. , .

React

React . — DOM. , , — reselect, React.memo/React.PureComponent, shouldComponentUpdate . .

, , ~2, — 5. , React , .. DOM .

batch React + Redux. , — . , ?

, , connect . , .

. , <ScoreBoard />,

1. ;
2. , .
   

React.PureComponent, connect mapStateToProps. elapsedTime score. Score , elapsedTime — . elapsedTime - render. , FPS, shouldComponentUpdate. HOC’a connect — shouldComponentUpdate .

, «» , :

1. shouldComponentUpdate, elapsedTime ( ). , HOC’a connect.
2. mapStateToProps . , , . connect’a.
3. useSelector. , .. . , , , .
4. — connect, — . , . ScoreBoard .

— ! ScoreBoard’a connect, , . mapStateToProps , .

, connect. , — - - canvas-, three.js (, , .). render , :

return <div id="map" className={s.map} ref={mapRef} />;

return <canvas id="scene" className={s.scene} ref={sceneRef} />;

, DOM — . , React . , componentDidUpdate, . , componentDidUpdate :

public componentDidUpdate() {
    const { geoPos, orientedRotationQuanternion } = this.props;
    const { map } = this.state;
    map.setQuat(orientedRotationQuanternion);
    map.setCenter([geoPos[0], geoPos[1]], { animate: false });
    map.setZoom(getMapZoomFromHeight(geoPos[2]), { animate: false });
}

, componentDidUpdate . :

1. connect. , mapStateToProps;
2. public shouldComponentUpdate() { return false; } — «» «»;
3. Redux ( ) useStore ;
4. (store.subscribe(() => { /* … */}));
5. ;
6. !

:

store.subscribe(() => {
    const state = store.getState();
    const { map } = this.state;
    const { geoPos, orientedRotationQuanternion } = state.gameObjects.user;

    map.setQuat(orientedRotationQuanternion);
    map.setCenter([geoPos[0], geoPos[1]], { animate: false });
    map.setZoom(getMapZoomFromHeight(geoPos[2]), { animate: false });
}); 

, , .

, - , .

. — React Tree Reconcilation + Commit

React Tree Reconcilation + Commit

React + Redux , :

• , , , «» React , ;
• ;
• « », , ;
• , .

, . , . , . ? .

:

1. , , , , . , .
2. , React’ 30 . : .
3. , .
4. . . , .
5. .
6. Performance — . CPU — , Intel i9.
7. - : 12–20 – . , .
8. , . , , . , .
9. , , . IE11 , . 70- Edge 18- ( ).
10. WebGL . - , , -, Firefox linux, . . — . -, . , , « », .

, :

1. Firefox. . , WebGL, — spread. FPS Firefox , Chrome. , , .
2. IPhone. Safari IE6 220 . , , . , , . . — - .
3. . . . , , (, , ). .
4. . , , . , , , «» .
5. ( ), – , . .

, , . iOS, Android Web .